Add more EC text markers and frames to Starlight docs

[HiDeoo]

What kind of changes does this PR include?

• Changes or translations of Starlight docs site content

Description

This PR is a follow-up to this comment I made in the EC PR and a review I did a while ago regarding all the code blocks in the Starlight documentation to add missing EC text markers and frame informations in a more consistent way.

I edited everything I could find but I think some may be up to discussions, like for example having src/content/docs/example.md as frame title for all examples in the frontmatter reference may not be the best, but as I don't personally know the guidelines for this I think this PR could be used as a base to discuss this even if we end up not merging it or only partially (we could also decide to add this kind of changes only when we next edit the relevant portions of the docs).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Nov 22, 2023 5:05pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: f07fea6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[kevinzunigacuellar]

Love the Expressive codification of Starlight 💜

[delucis]

Awesome work @HiDeoo! Left a few comments but most of this is a really nice improvement — cool to see so quickly after we released support for this.

[delucis]

Curious what other people think here. A lot of these code snippets are fragments like

starlight({
  customCss: ['./src/custom-styles.css', '@fontsource/roboto'],
})

In these cases, I wonder if it’s misleading to add the astro.config.mjs file name because it makes it looks like this is the full file rather than just a part of it?

[HiDeoo]

I think this makes sense and we could definitely remove the frame titles (except the first one).

Altho, if we go with this approach, we have the same pattern in the following files that may need fixing too:

• docs/src/content/docs/guides/customization.mdx
• docs/src/content/docs/guides/sidebar.mdx

The question would be if we either remove the frame titles for those too or we add the imports? Or maybe this is only relevant in this specific file?

[delucis]

Scrolling through customization.mdx on the current production version I think that actually looks good yeah — file names are used for full examples, and not for shorter fragments (usually accompanying a longer one like in the “Add your logo” section).

[kevinzunigacuellar]

I personally like the startlight() snippets because they are easier to copy and paste. Sometimes I would have a very convoluted astro.config and just having the startlight snippet to copy and paste is very nice.

[HiDeoo]

Updated the PR with the suggested changes and left a comment regarding the configuration.mdx file.

[HiDeoo]

Updated the PR with the following changes:

• Remove previously introduced frame titles in guides/customization.mdx
• Remove all frame titles in reference/configuration.mdx except the first code block
• Remove astro.config.mjs frame titles from guides/sidebar.mdx as it's explicitely mentioned in the text before any code block (I left the src/content/docs/example.md one)

I think this should cover all the feedback we got so far. Let me know if I missed anything or if you have any other suggestions.

[delucis]

Thank you @HiDeoo! 🚀