-
-
Notifications
You must be signed in to change notification settings - Fork 571
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use Starlight
sidebar
user-config format for <StarlightPage />
`s…
…idebar` prop (#2168) Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
- Loading branch information
Showing
5 changed files
with
213 additions
and
211 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
--- | ||
'@astrojs/starlight': minor | ||
--- | ||
|
||
⚠️ **BREAKING CHANGE:** Updates the `<StarlightPage />` component `sidebar` prop to accept an array of [`SidebarItem`](https://starlight.astro.build/reference/configuration/#sidebaritem)s like the main Starlight `sidebar` configuration in `astro.config.mjs`. | ||
|
||
This change simplifies the definition of sidebar items in the `<StarlightPage />` component, allows for shared sidebar configuration between the global `sidebar` option and `<StarlightPage />` component, and also enables the usage of autogenerated sidebar groups with the `<StarlightPage />` component. | ||
If you are using the `<StarlightPage />` component with a custom `sidebar` configuration, you will need to update the `sidebar` prop to an array of [`SidebarItem`](https://starlight.astro.build/reference/configuration/#sidebaritem) objects. | ||
|
||
For example, the following custom page with a custom `sidebar` configuration defines a “Resources” group with a “New” badge, a link to the “Showcase” page which is part of the `docs` content collection, and a link to the Starlight website: | ||
|
||
```astro | ||
--- | ||
// src/pages/custom-page/example.astro | ||
--- | ||
<StarlightPage | ||
frontmatter={{ title: 'My custom page' }} | ||
sidebar={[ | ||
{ | ||
type: 'group', | ||
label: 'Resources', | ||
badge: { text: 'New' }, | ||
items: [ | ||
{ type: 'link', label: 'Showcase', href: '/showcase/' }, | ||
{ type: 'link', label: 'Starlight', href: 'https://starlight.astro.build/' }, | ||
], | ||
}, | ||
]} | ||
> | ||
<p>This is a custom page with a custom component.</p> | ||
</StarlightPage> | ||
``` | ||
|
||
This configuration will now need to be updated to the following: | ||
|
||
```astro | ||
--- | ||
// src/pages/custom-page/example.astro | ||
--- | ||
<StarlightPage | ||
frontmatter={{ title: 'My custom page' }} | ||
sidebar={[ | ||
{ | ||
label: 'Resources', | ||
badge: { text: 'New' }, | ||
items: ['showcase', { label: 'Starlight', link: 'https://starlight.astro.build/' }], | ||
}, | ||
]} | ||
> | ||
<p>This is a custom page with a custom component.</p> | ||
</StarlightPage> | ||
``` | ||
|
||
See the [“Sidebar Navigation”](https://starlight.astro.build/guides/sidebar/) guide to learn more about the available options for customizing the sidebar. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.