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]

🦋 Changeset detected

Latest commit: 921d4cc

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]

👷 Deploy Preview for astro-starlight processing.

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

[HiDeoo]

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

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.

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

I tweaked the error message slightly from your suggestion to hopefully make it a little more clear:

Good call, I didn't really think too much about the text when typing up the example 👍

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

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