Skip to content

[Tracking] Postponed Astro-related actions after Astro migration #41380

@julien-deramond

Description

@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={...} />
  • 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)
  • 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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions