Autogenerated link custom attributes#3266
Conversation
🦋 Changeset detectedLatest commit: 1041be1 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. |
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
|
🥳 Amazing ! |
| route.entry.data.sidebar.label || route.entry.data.title, | ||
| route.entry.data.sidebar.badge, | ||
| route.entry.data.sidebar.attrs | ||
| Object.keys(route.entry.data.sidebar.attrs).length > 0 ? route.entry.data.sidebar.attrs : attrs |
There was a problem hiding this comment.
I wonder if some people would expect the attrs to be combined rather than overridden? Like if you have autogenerate: { attrs: { 'data-special': true } } and then within that a page with frontmatter like:
sidebar:
attrs:
class: experimentalWould you expect to get a <a data-special class="experimental">?
The argument against is that it makes it a bit harder to remove attributes. I guess you’d need something like this to remove an attribute:
sidebar:
attrs:
data-special:Assuming something like this:
| Object.keys(route.entry.data.sidebar.attrs).length > 0 ? route.entry.data.sidebar.attrs : attrs | |
| { ...attrs, ...route.entry.data.sidebar.attrs } |
There was a problem hiding this comment.
Nice catch! I'd expect the attributes to be merged, with page-level attributes taking precedence over others.
There was a problem hiding this comment.
Good question. When working on the PR, I actually tried both approaches and found the overriding one more to my liking in the scenarios I was testing but I can definitely see how when you expect one approach, the other can be confusing (that's also why I mentioned it explicitly in the docs).
Happy to update the PR if more people think merging is the better approach, I'll do that tomorrow morning.
Thanks for the feedback 🙌
There was a problem hiding this comment.
Would you mind sharing a bit about the detail of those scenarios? I always like to hear the concrete use cases as it can help understand better. My thinking was mostly based on a scenario like:
autogenerate.attrswould be used for a unified control over a group of links, e.g. maybe these are your experimental docs, or reference, or some other category, and get a specific custom style to indicate thatsidebar.attrswould be used for adding additional attributes for a specific page link, e.g. to flag a new page perhaps- The group identity and the page-specific attributes aren’t necessarily exclusive: you’d want to keep both.
Admittedly, if that example was setting class for both, nothing would change here, because sidebar.attrs.class would still need to include the group class names, but for some other attributes it might make more sense, e.g. maybe there’s some group you set target="_blank" rel="noopener" for but don’t want to have to set those again in frontmatter just to add a class. (And to maintain — changes to the group config would need adding to all overridden pages and remembering that there are overridden pages.)
Open to convincing either way though — sounds like you had some specific scenarios in mind, so those might be valid.
There was a problem hiding this comment.
My initial decision to override attributes was not really tied to the scenarios I tested but more to the overall experience when playing with them and overriding attributes at the page level:
- I found overriding easier as I was starting from a blank state, and just having to focus on "what exactly do I want as custom attributes for this page?" vs "ok, I already have these attributes applied defined in another file, here is what I want in the end, what do I need to remove and add to get there?"
- Removing attributes is not the obvious thing to do when merging attributes
- One example I tried was with the
styleattributes while the configuration was applying aclassattribute. I kinda liked that my custom class was automatically removed when I set astyleattribute, as it was not relevant anymore.
I've updated the PR to use a merge strategy so that we can play with it more and see how it feels.
One small note, I had to allow null values to properly support removing attributes from the frontmatter:
sidebar:
attrs:
data-special:
data-special: ~
data-special: nullAll of these would result in a null value which we were not previously allowing.
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> Co-authored-by: Kevin Zuniga Cuellar <kzunigac@uvm.edu>
Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
delucis
left a comment
There was a problem hiding this comment.
Thanks for picking up this idea, implementing, and testing it so quickly! If you’re happy with the switch to the merge behaviour, then I think we can get this released this week.
Left one small nit on the docs, but the code and tests look great 🚀
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> Co-authored-by: Kevin Zuniga Cuellar <kzunigac@uvm.edu> Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com>

Description
This PR adds support for custom HTML attributes on autogenerated sidebar links using the
autogenerate.attrsoption.autogenerate.attrsis used rather than justattrsasattrsis only supported for links and not groups at the moment. This could be confusing to supportattrson autogenerated groups but not on manually defined groups, soautogenerate.attrsis used to clarify that this is only for links in an autogenerated groups.attrson sidebar groups now results in a type error on top of the existing runtime error. I added some type tests to ensure this is the case.sidebar.attrsfrontmatter field.