Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Add badge to LinkCard component #712

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

lorenzolewis
Copy link
Contributor

What kind of changes does this PR include?

  • Changes to Starlight code

Description

  • Exposes an optional badge prop to the LinkCard component
Screenshot 2023-09-12 at 10 04 20
  • 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.

Signed-off-by: Lorenzo Lewis <[email protected]>
@changeset-bot
Copy link

changeset-bot bot commented Sep 12, 2023

🦋 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
Copy link

netlify bot commented Sep 12, 2023

👷 Deploy Preview for astro-starlight processing.

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

@github-actions github-actions bot added 📚 docs Documentation website changes 🌟 core Changes to Starlight’s main package labels Sep 12, 2023
Copy link
Member

@HiDeoo HiDeoo left a comment

Choose a reason for hiding this comment

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

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.

packages/starlight/user-components/LinkCard.astro Outdated Show resolved Hide resolved
packages/starlight/user-components/LinkCard.astro Outdated Show resolved Hide resolved
packages/starlight/user-components/LinkCard.astro Outdated Show resolved Hide resolved
@lorenzolewis
Copy link
Contributor Author

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?

Signed-off-by: Lorenzo Lewis <[email protected]>
Signed-off-by: Lorenzo Lewis <[email protected]>
@simonhyll
Copy link

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.

Copy link
Member

@HiDeoo HiDeoo left a comment

Choose a reason for hiding this comment

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

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
Copy link
Member

HiDeoo commented Sep 13, 2023

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
Copy link
Member

delucis commented Sep 19, 2023

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.

Copy link

vercel bot commented Feb 9, 2024

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
Copy link
Contributor Author

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 core Changes to Starlight’s main package 📚 docs Documentation website changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants