Feat: Add badge to LinkCard component

[lorenzolewis]

What kind of changes does this PR include?

• Changes to Starlight code

Description

• Exposes an optional badge prop to the LinkCard component

• I'm not 100% sure if I used BadgeConfigSchema().parse() correctly in LinkCard.astro as this is my first time working with that bit of Zod, so any review/feedback on that would be much appreciated.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 921d4ccc18131ebfd35121663fe6a15e56947f1d

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[bot]]

👷 Deploy Preview for astro-starlight processing.

Name	Link
🔨 Latest commit	c37e5bafa07e865da0111fcd98b1ddc3c32757a8
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/6500c299a2f1910007f62d94

[lorenzolewis]

I really like the idea of this PR personally. Left a few comments mostly regarding the technical aspect.

Thanks! Appreciate it!

UI-wise, I am not sure if it's just me or not but the label does not feel vertically centered but I'll have to take a closer look when I have more time.

I agree. I think the sidebar has the same sort of issue and this is the same CSS as that. I think it's aligned to the text baseline here, but I wonder if it would make sense to centre it overall vertically instead via flex or similar?

[simonhyll]

Gonna throw my idea in here: Automatic application of the "New" badge to the sidebar and LinkCards based on the pages created age according to Git, with a configuration for how old you consider to still be new. Could also have an "Updated" badge based on changed in Git. Similar to how the last changed footer feature works.

[HiDeoo]

based on the pages created age according to Git

The issue with this kind of features is that certain hosting providers don't allow for deep clones of their repos so you don't get any of the git history data when building there.

Still an interesting idea tho, I also think later this could be done by a custom integration/plugin through component customization.

[delucis]

UI-wise, I am not sure if it's just me or not but the label does not feel vertically centered but I'll have to take a closer look when I have more time.

I agree. I think the sidebar has the same sort of issue and this is the same CSS as that. I think it's aligned to the text baseline here, but I wonder if it would make sense to centre it overall vertically instead via flex or similar?

Yeah, this is due to us relying on inline styling in the sidebar. Can be fixed with a flex layout if that works for this case. In the case of the sidebar we couldn’t use flex because of our layout requirements and how we’d want lines to wrap. I actually spent a good afternoon researching this, but there’s no silver bullet for the sidebar case because we don’t know what font is used and font metrics need to be known with current CSS options (see e.g. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align). There are some hopes that vertical-align: central will improve this when available, but for now, middle means align to the center of the x height, not cap height resulting in these off-center appearance when inline flow is required.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Feb 9, 2024 8:03pm

[lorenzolewis]

How does this thing still not have any conflicts? 😅

How are we feeling now that Badges are merged in? Do we want to update this to use them or toss this out? I would personally still like to have it for the sake of having feature parity with sidebar entries (this was really some pre-work to build a "Table of Contents" component for a section of a sidebar).

[sergeysova]

20 minutes ago I removed badge from my content collections, just because LinkCard doesn't support it. Good news, PR exists! Bad news, last update 6 mo ago.