(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:

• Create an experimental starlight repo for the eslint-plugin-astro's docs for previewing:
  https://67163f1fb2f973000825f201--eslint-plugin-astro-starlight-docs.netlify.app/

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

• 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

Make rules searchable

• Done: the built-in search engine just work, I don't have to do anything

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