(doc): use starlight for the doc

[Foxeye-Rinx]

Description

Astro doc is using starlight, It would be really nice if this plugin also uses it for:

• Tabs:
  • Installation for [npm] | [pnpm]
  • Eslint config for [as of v9] | [legacy]
  • ...
• Copy to clipboard button for code
• Rule search
• ...

[ota-meshi]

Sounds good to me! Could you please send a PR?

[Foxeye-Rinx]

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:

Settings up TODOs:

• [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

  • 👆 The current favicon contrast is not suitable for dark theme The current one:

• [x] Convert logo to a standalone SVG file

  • 👆 The starlight uses a standalone SVG file instead of an Astro component. While the 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);

  • the SVG color: --theme-text-accent = hsla(212, 100%, 61%, 1) = #5AA6FF
  • the SVG size: width = height = 40px

• [ ] Add edit-link config that match with this repo

• [ ] make a PR for this repo

Programming model changes TODOs:

Separate repo's README.md and website index page

• Status : 🧪 - I am experimenting with this optio
• The current doc's 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

Make rules searchable

• [ ] Done

[ota-meshi]

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