[Tracking] Postponed Astro-related actions after Astro migration

[julien-deramond]

Here’s the list of Astro-related actions we identified in twbs/bootstrap#41251, which we voluntarily postponed as they were deemed lower priority:

• <ScssDocs> renders // scss-docs-start and // scss-docs-end in /customize/color-modes#sass-variables and shouldn't. It's because this is a special use case where there's a // scss-docs-start sass-dark-mode-vars wrapper that can contains several // scss-docs-start theme-*-dark-variables blocks...
• <ScssDocs> renders // scss-docs-start vr-variables (and // scss-docs-end) in /docs/5.3/content/typography and shouldn't
• /docs/5.3/examples/dashboard-rtl/ and /docs/5.3/examples/dashboard-rtl behave differently in dev mode, depending on whether the trailing slash is present. This affects CSS and JS not loading (the local server looks for /docs/5.3/examples/dashboard.css for instance), though the issue does not occur on production, on Netlify. Please note that when you're navigating in the website by following the links, it works well.
• Check Mark's feedback (March, 8) -> "One thing I've noticed is I think I need to kill server often when rebuilding Bootstrap CSS".
• Possibly replace <div class="bd-example">...</div> by <Example showMarkup={false} code={...} />
• Migrate to modern way of handling Astro websites (check migration guides and new features)
• Use more advanced components: for instance replace our Markdown "tree" by something like https://starlight.astro.build/components/file-tree/ (if Starlight components can't work, re-develop them or find some in community libs)
• Switch from Prism to Shiki OR improve the syntax highlighting rendering (the colors react to light/dark mode, but aren't exactly the same as Bootstrap. It might be re-plugged or handled differently to have the same rendering)
  • Check Expressive Code for an accessible rendering of syntax highlighting
• Add some Typescript checks such as astro check --root site, tsc -p site --noEmit
• Improve ResponsiveImage.astro component to implement the equivalent of Hugo's imageConfig and calculate the width and height of the image automatically
• Accessibility: find a way to add an aria-label to the anchor links in the docs (see 688d7e3). Could be suggested upstream as difficult to implement from our own code.
• Check whether we need to use defer like in 45fe28c, or we keep the using scripts in site/assets/*
• Add a render image hook? (see 2ba7dae#diff-14181aac55c6feb7b2a6e08c61d78e3f31be6f31b6e206a365cdcc3e9d0b5934)
• && rm -rf _site && cp -r site/dist _site was temporary to make Netlify works as it checks the built content in _site. It would need a live coding session with access to the Netlify account to change that.