Make targeting sidebar links with CSS a little easier#3281
Make targeting sidebar links with CSS a little easier#3281delucis merged 8 commits intowithastro:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 25523b5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Thanks for the PR @alvinometric! Left one small question.
Would you also be able to add changesets to the PR describing the changes for our changelog. I think these would both be OK as patch changes and each change should get its own changeset. You can add them by running pnpm changeset in the repo root or clicking the “add a changeset to this PR” link in the bot comment above.
packages/starlight/types.ts
Outdated
| HookParameters, | ||
| } from './utils/plugins'; | ||
| export type { StarlightIcon } from './components/Icons'; | ||
| export type { SidebarEntry } from './utils/routing/types'; |
There was a problem hiding this comment.
Could you share your use case for needing access to SidebarEntry — it’s an internal type, so I’d like to learn where you find you’re needing to interact with these objects and need the type. (Might help us improve the API in more fundamental ways.)
There was a problem hiding this comment.
Depending on the use case, it may also already be accessible using both ComponentProps or StarlightRouteData types.
There was a problem hiding this comment.
I'm building a sidebar based on data, and my code looks a bit like this:
// Build sidebar sections in the order of spec.tags
const sidebar = spec.tags
.map((t: any) => {
const name = t.name;
return {
label: name,
items: groups[name],
};
})
.toSorted((a: SidebarGroup, b: SidebarGroup) => {
return a.label.localeCompare(b.label);
});I had to make the SidebarGroup type. TypeScript/Cursor couldn't find it
There was a problem hiding this comment.
I tried again, and TS could find the StarlightRouteData type but nothing for sidebar
There was a problem hiding this comment.
Starlight route data exposes many properties, so you would need to cherry-pick the one you need, for example:
import type { StarlightRouteData } from '@astrojs/starlight/route-data';
// This type represents a single entry in the `sidebar` array of the Starlight route data.
type SidebarEntry = StarlightRouteData['sidebar'][number];Something to note, even if the SidebarEntry type is directly exported like in the PR or grabbed from the Starlight route data, to specifically target SidebarGroup or SidebarLink, you would need at the moment some TypeScript code to extract those types, e.g.:
type SidebarGroup = Extract<SidebarEntry, { type: 'group' }>;
type SidebarLink = Extract<SidebarEntry, { type: 'link' }>;There was a problem hiding this comment.
What do I have to do so that the type is available just like import type { SidebarEntry } from '@astrojs/starlight/' ?
There was a problem hiding this comment.
What do I have to do so that the type is available just like
import type { SidebarEntry } from '@astrojs/starlight/'?
By “the type”, do you mean SidebarGroup/SidebarLink? You’d need to export those too.
There was a problem hiding this comment.
Ah ok, fixed it 🙏
There was a problem hiding this comment.
Would it be OK if we split the type changes into a different PR for discussion? We can get the previously discussed class name change released quickly, but I think we might want some more time to discuss about types. As HiDeoo mentioned, we already expose these types via StarlightRouteData, but there are a lot of interfaces in there, so if we’re going to start exporting things, we probably need to do it systematically, for example to answer questions like:
- Do we export all types?
- Should we document each type?
I wouldn’t want to block the class name change behind that discussion, so separate PRs would be helpful I think.
There was a problem hiding this comment.
Would it be OK if we split the type changes into a different PR for discussion?
Going to go ahead and do this so we can get the class name change released.
delucis
left a comment
There was a problem hiding this comment.
Thanks for the PR @alvinometric! Feel free to open up a new discussion for the type changes so we can discuss the best approach there.
|
Er… very sorry, but I jumped the gun on this one. Explained more reasoning in #3291, but we’re going to revert this. Sorry for first encouraging the PR and then walking that back — I hadn’t considered the big picture. |
* main: (26 commits) [ci] release (withastro#3296) Fix slug override with `/` value (withastro#3293) i18n(fr): update `guides/i18n.mdx` (withastro#3294) i18n(ko-KR): update `i18n.mdx` (withastro#3292) [ci] release (withastro#3286) Revert withastro#3281 (withastro#3291) i18n(de): update `guides/i18n.mdx` (withastro#3289) Fix Astro i18n config default locale issue (withastro#3288) docs: fix `t.exists()` documentation + example (withastro#3287) Make targeting sidebar links with CSS a little easier (withastro#3281) i18n(fr): update `resources/plugins.mdx` (withastro#3284) Extract main padding to CSS custom property (withastro#3282) i18n(de): update plugins translation (withastro#3285) i18n(ko-KR): update `plugins.mdx` (withastro#3283) Add link to the codeblock-fullscreen plugin (withastro#3279) Fix TabItem typo in zh-cn authoring-content.mdx (withastro#3268) (withastro#3269) [ci] format i18n(ru): update translations (withastro#3270) Update `sharp` in docs & examples to latest (withastro#3261) Add missing danish UI translations (withastro#3252) ...
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

Description
'sl-sidebar-link'class to sidebar links.SidebarEntrytype