Skip to content

Make targeting sidebar links with CSS a little easier#3281

Merged
delucis merged 8 commits intowithastro:mainfrom
alvinometric:patch-1
Jul 11, 2025
Merged

Make targeting sidebar links with CSS a little easier#3281
delucis merged 8 commits intowithastro:mainfrom
alvinometric:patch-1

Conversation

@alvinometric
Copy link
Copy Markdown
Contributor

Description

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Jul 8, 2025

🦋 Changeset detected

Latest commit: 25523b5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@astrojs/starlight Patch

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

@netlify
Copy link
Copy Markdown

netlify bot commented Jul 8, 2025

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit 25523b5
🔍 Latest deploy log https://app.netlify.com/projects/astro-starlight/deploys/6870eb8d69f9ff00080c8751
😎 Deploy Preview https://deploy-preview-3281--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (🟢 up 25 from production)
Accessibility: 100 (no change from production)
Best Practices: 92 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Jul 8, 2025
Copy link
Copy Markdown
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

HookParameters,
} from './utils/plugins';
export type { StarlightIcon } from './components/Icons';
export type { SidebarEntry } from './utils/routing/types';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Depending on the use case, it may also already be accessible using both ComponentProps or StarlightRouteData types.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried again, and TS could find the StarlightRouteData type but nothing for sidebar

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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' }>;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do I have to do so that the type is available just like import type { SidebarEntry } from '@astrojs/starlight/' ?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok, fixed it 🙏

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 delucis changed the title Made working with sidebars a little easier Make targeting sidebar links with CSS a little easier Jul 11, 2025
Copy link
Copy Markdown
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@delucis delucis added the 🌟 patch Change that triggers a patch release label Jul 11, 2025
@delucis delucis added the ✅ approved Pull requests that have been approved and are ready to merge when next cutting a release label Jul 11, 2025
@delucis delucis merged commit 13e3440 into withastro:main Jul 11, 2025
15 checks passed
@astrobot-houston astrobot-houston mentioned this pull request Jul 11, 2025
delucis added a commit that referenced this pull request Jul 11, 2025
@delucis delucis mentioned this pull request Jul 11, 2025
@delucis
Copy link
Copy Markdown
Member

delucis commented Jul 11, 2025

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.

delucis added a commit that referenced this pull request Jul 11, 2025
@alvinometric
Copy link
Copy Markdown
Contributor Author

@delucis 😭

In all honesty I'm OK if this #3266 gets merged, and that the "built-in way" is properly documented.

@alvinometric alvinometric deleted the patch-1 branch July 12, 2025 09:54
HiDeoo added a commit to shubham-padia/starlight that referenced this pull request Jul 15, 2025
* 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)
  ...
Yoxnear pushed a commit to Yoxnear/starlight-custom that referenced this pull request Jul 23, 2025
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Yoxnear pushed a commit to Yoxnear/starlight-custom that referenced this pull request Jul 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✅ approved Pull requests that have been approved and are ready to merge when next cutting a release 🌟 core Changes to Starlight’s main package 🌟 patch Change that triggers a patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants