Open Foxeye-Rinx opened 4 days ago
Sounds good to me! Could you please send a PR?
I guess I will have to make a checklist/plan for myself and for people who want to track on this, I will use this comment as a todo list:
[x] Create an experimental starlight repo for the eslint-plugin-astro
's docs for previewing:
https://67163f1fb2f973000825f201--eslint-plugin-astro-starlight-docs.netlify.app/
[x] Add Github link on the new doc point to this repo
[ ] Use Astro's Gradient logomark on dark for favicon
[x] Convert logo to a standalone SVG file
eslint-plugin-astro
use an Astro component for the logo, to remain it the same, need to create svg file with the same parameters
--color-base-blue: 212, 100%;
--color-blue: var(--color-base-blue), 61%;
--theme-text-accent: hsla(var(--color-blue), 1);
--theme-text-accent
= hsla(212, 100%, 61%, 1)
= #5AA6FF
40px
[ ] Add edit-link config that match with this repo
[ ] make a PR for this repo
README.md
and the tools/update-readme.ts
are trying to reuse the same content from the doc-website, and that makes it hard for the new doc to utilize all the tools provided by mdx. This model causes limitations for the new docs (limit the change for new contributors).
For example: the new doc render the README markdown badges stick to others like this:
If we use mdx syntax to create a container with styles to wrap the download status badges
that would bring a natural mental programming model to the doc:
{/* This is the README.mdx file */}
<div class="download-badges">
[![NPM license](https://img.shields.io/npm/l/eslint-plugin-astro.svg)](https://www.npmjs.com/package/eslint-plugin-astro)
[![NPM version](https://img.shields.io/npm/v/eslint-plugin-astro.svg)](https://www.npmjs.com/package/eslint-plugin-astro)
[![NPM downloads](https://img.shields.io/badge/dynamic/json.svg?label=downloads&colorB=green&suffix=/day&query=$.downloads&uri=https://api.npmjs.org//downloads/point/last-day/eslint-plugin-astro&maxAge=3600)](http://www.npmtrends.com/eslint-plugin-astro)
[![NPM downloads](https://img.shields.io/npm/dw/eslint-plugin-astro.svg)](http://www.npmtrends.com/eslint-plugin-astro)
[![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-astro.svg)](http://www.npmtrends.com/eslint-plugin-astro)
[![NPM downloads](https://img.shields.io/npm/dy/eslint-plugin-astro.svg)](http://www.npmtrends.com/eslint-plugin-astro)
[![NPM downloads](https://img.shields.io/npm/dt/eslint-plugin-astro.svg)](http://www.npmtrends.com/eslint-plugin-astro)
[![Build Status](https://github.com/ota-meshi/eslint-plugin-astro/workflows/CI/badge.svg?branch=main)](https://github.com/ota-meshi/eslint-plugin-astro/actions?query=workflow%3ACI)
[![Coverage Status](https://coveralls.io/repos/github/ota-meshi/eslint-plugin-astro/badge.svg?branch=main)](https://coveralls.io/github/ota-meshi/eslint-plugin-astro?branch=main)
</div>
If we don't use the wrapper above and just want to use the bare markdown to reuse it in the repo's README we need to remove the <div class="download-badges">
above and use a global CSS selector like this which is harder to maintain for new contributors:
p:has(> a[href^="https://www.npmjs.com"]:nth-child(n+2)) {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
It's hard for new contributors to be aware there is a CSS like that somewhere that assumes the README file content is on a fixed structure.
Same for the <!--DOCS_IGNORE_START-->
annotation. It's hard to know it's used by a tools/update-readme.ts
Thank you!!!
Just to be clear, here are some things to know:
I don't have any preferences for the current website design. Feel free to change the colors and logo.
Demo/Playground(now I realize it's broken :sweat: fixed! ) doesn't need to be embedded in the website anymore. We can link to the more flexible Playground instead.
https://eslint-online-playground.netlify.app/#eslint-plugin-astro
We can also remove the Playground from the rules documentation (this is also now broken :sweat: fixed!).
If possible, it would be useful to use Twoslash ESLint instead of the Playground to see how the rules warn, but you don't need to include it in your initial PR.
https://twoslash.netlify.app/packages/eslint
Description
Astro doc is using starlight, It would be really nice if this plugin also uses it for: