diff --git a/docs/src/content/docs/guides/sidebar.mdx b/docs/src/content/docs/guides/sidebar.mdx index 12b4c980739..c6247fe9f8e 100644 --- a/docs/src/content/docs/guides/sidebar.mdx +++ b/docs/src/content/docs/guides/sidebar.mdx @@ -60,7 +60,6 @@ By combining links and groups, you can create a wide variety of sidebar layouts. Add a link to an internal or external page using an object with `label` and `link` properties. ```js "label:" "link:" -// astro.config.mjs starlight({ sidebar: [ // A link to the CSS & Styling guide. @@ -90,7 +89,6 @@ The `label` will be used as the heading for the group. Add links or subgroups to the `items` array. ```js /^\s*(label:|items:)/ -// astro.config.mjs starlight({ sidebar: [ // A group of links labelled "Guides". @@ -145,7 +143,6 @@ Pages will be sorted alphabetically by filename by default. Add an autogenerated group using an object with `label` and `autogenerate` properties. Your `autogenerate` configuration must specify the `directory` to use for sidebar entries. For example, with the following configuration: ```js "label:" "autogenerate:" -// astro.config.mjs starlight({ sidebar: [ { @@ -241,8 +238,7 @@ The `sidebar` frontmatter configuration is only used for autogenerated links and Links, groups, and autogenerated groups can also include a `badge` property to display a badge next to their label. -```js {11,18} -// astro.config.mjs +```js {10,17} starlight({ sidebar: [ { @@ -308,8 +304,7 @@ Customize the badge styling using an object with `text` and `variant` properties The `text` represents the content to display (e.g. "New"). Override the `default` styling, which uses the accent color of your site, by setting the `variant` property to one of the following values: `note`, `tip`, `danger`, `caution` or `success`. -```js {11} -// astro.config.mjs +```js {10} starlight({ sidebar: [ { @@ -350,8 +345,7 @@ Links can also include an `attrs` property to add custom HTML attributes to the In the following example, `attrs` is used to add a `target="_blank"` attribute, so that the link opens in a new tab, and to apply a custom `style` attribute to italicize the link label: -```js {11} -// astro.config.mjs +```js {10} starlight({ sidebar: [ { @@ -394,8 +388,7 @@ The configuration above generates the following sidebar: Use the `translations` property on link and group entries to translate the link or group label for each supported language by specifying a [BCP-47](https://www.w3.org/International/questions/qa-choosing-language-tags) language tag, e.g. `"en"`, `"ar"`, or `"zh-CN"`, as the key and the translated label as the value. The `label` property will be used for the default locale and for languages without a translation. -```js {6-8,12-14,19-21} -// astro.config.mjs +```js {5-7,11-13,18-20} starlight({ sidebar: [ { @@ -442,8 +435,7 @@ Browsing the documentation in Brazilian Portuguese will generate the following s Groups of links can be collapsed by default by setting the `collapsed` property to `true`. -```js {6-7} -// astro.config.mjs +```js {5-6} starlight({ sidebar: [ { @@ -476,8 +468,7 @@ The configuration above generates the following sidebar: [Autogenerated groups](#autogenerated-groups) respect the `collapsed` value of their parent group: -```js {6-7} -// astro.config.mjs +```js {5-6} starlight({ sidebar: [ { @@ -514,8 +505,7 @@ The configuration above generates the following sidebar: This behavior can be overridden by defining the `autogenerate.collapsed` property. -```js {6-8} "collapsed: true" -// astro.config.mjs +```js {5-7} "collapsed: true" starlight({ sidebar: [ {