Add a way to set the class of autogenerated links in a sidebar

[alvinometric]

What version of starlight are you using?

latest

What version of astro are you using?

latest

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

TypeScript is happy with this, but it breaks the build:

sidebar: [
  {
    label: "Getting Started",
    autogenerate: {
      directory: "start-here",
    },
    attrs: {
      class: "sidebar-links",
    },
  },
],

Link to Minimal Reproducible Example

N/A, as discussed on Discord

Participation

• I am willing to submit a pull request for this issue.

[delucis]

We don’t support attrs as used in this example. attrs is used to apply attributes to individual links and in this example config it’s being set on a group of links, so the error is expected.

Might be worth a feature request explaining what behaviour you’re expecting? Is the aim to add attributes to the link group? Or apply that class to every link in the group?

[HiDeoo]

Sharing for context the associated Discord discussion: https://discord.com/channels/830184174198718474/1070481941863878697/1385520549999935488

From my understanding, the idea was to add attributes to all links in an autogenerated group.

• I guess TS is not able right now to discriminate between the various link/group types.
• I shared a route data middleware as a workaround to apply a class to all links in a specific group.
• I also quickly tested if supporting attrs for links in autogenerated groups would work, and it's definitely possible without too much work (with the sidebar.attrs frontmatter still winning if manually specified) if we decide to add such support.

[alvinometric]

Exactly what @HiDeoo said 🙏

[delucis]

OK, great, I’ll convert this to a feature request — thanks for the clarification.

[delucis]

Oh, and @alvinometric — am I right from reading the Discord convo that your actual main use case was to add a class to all sidebar links? So you’re able to target them more easily with custom CSS? If so, we should maybe also consider adding one by default, so you don’t need to manually do this for each group.

[alvinometric]

It is! I'd be happy to override a sl-sidebar-link class if there was one

[delucis]

Cool. Yeah, we could add one for sure. In the meantime, .sidebar-content a should work too.

[alvinometric]

I can open a PR then ?

[delucis]

Sure — thanks!

[HiDeoo]

Support for custom HTML attributes on autogenerated sidebar links using the autogenerate.attrs option has been added to Starlight 0.35.0 which can be used to set a class on autogenerated sidebar links.