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.

Sign up for GitHub

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

Jump to bottom

feat: extend badge to be available for group links #995

Merged
merged 17 commits into from
Nov 1, 2023
Merged

feat: extend badge to be available for group links #995

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
02fde2e
add badge to group label
kevinzunigacuellar Oct 26, 2023
9e5cc63
remove - add example
kevinzunigacuellar Oct 26, 2023
37bb003
update test snapshot
kevinzunigacuellar Oct 26, 2023
3c6a984
add changeset
kevinzunigacuellar Oct 26, 2023
02c3584
update docs
kevinzunigacuellar Oct 26, 2023
1d523dd
include autogenerated groups in docs
kevinzunigacuellar Oct 27, 2023
ff5eec7
fix label wrapping
kevinzunigacuellar Oct 27, 2023
27c7df6
update docs - HiDeoo review
kevinzunigacuellar Oct 27, 2023
3fe3efb
add group badge to mock config
kevinzunigacuellar Oct 27, 2023
1e1dbaf
update tests snapshot
kevinzunigacuellar Oct 27, 2023
df410c2
first try at line height + padding
kevinzunigacuellar Oct 31, 2023
2512d43
Update packages/starlight/components/SidebarSublist.astro
kevinzunigacuellar Oct 31, 2023
d589434
remove experimental badge
kevinzunigacuellar Oct 31, 2023
16ab2c4
Apply suggestions
kevinzunigacuellar Nov 1, 2023
a1f2dac
decrease spacing and reintroduce whitespace
kevinzunigacuellar Nov 1, 2023
a474fca
Update .changeset/orange-pants-tell.md
kevinzunigacuellar Nov 1, 2023
856e430
Merge branch 'main' into badge-ext
kevinzunigacuellar Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/orange-pants-tell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/starlight': minor
---

Extend badges to be available for group links
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved
1 change: 1 addition & 0 deletions docs/src/components/sidebar-preview.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ function makeEntries(items: SidebarConfig): SidebarEntry[] {
label: item.label,
entries: makeEntries(item.items as SidebarConfig),
collapsed: item.collapsed,
badge: item.badge,
};
});
}
Expand Down
26 changes: 25 additions & 1 deletion docs/src/content/docs/guides/sidebar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ The `sidebar` frontmatter configuration is only used for autogenerated links and

## Badges

Links can also include a `badge` property to display a badge next to the link label.
Links, groups and autogenerated groups can also include a `badge` property to display a badge next to their label.
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved

```js
starlight({
Expand All @@ -251,6 +251,12 @@ starlight({
},
],
},
// An autogenerated group with a "Deprecated" badge.
{
label: 'Reference',
badge: 'Deprecated',
autogenerate: { directory: 'reference' },
},
],
});
```
Expand All @@ -269,6 +275,24 @@ The configuration above generates the following sidebar:
},
],
},
{
label: 'Reference',
badge: { text: 'Deprecated', variant: 'default'},
items: [
{
label: 'Configuration Reference',
link: '/reference/configuration/',
},
{
label: 'Frontmatter Reference',
link: '/reference/frontmatter/',
},
{
label: 'Overrides Reference',
link: '/reference/overrides/',
},
],
},
]}
/>

Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/reference/configuration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,10 +183,10 @@ sidebar: [
type SidebarItem = {
label: string;
translations?: Record<string, string>;
badge?: string | BadgeConfig;
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved
} & (
| {
link: string;
badge?: string | BadgeConfig;
attrs?: Record<string, string | number | boolean | undefined>;
}
| { items: SidebarItem[]; collapsed?: boolean }
Expand Down
1 change: 1 addition & 0 deletions packages/starlight/__tests__/basics/navigation-labels.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
1 change: 1 addition & 0 deletions packages/starlight/__tests__/basics/navigation-order.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ describe('getSidebar', () => {
expect(getSidebar('/', undefined)).toMatchInlineSnapshot(`
[
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
1 change: 1 addition & 0 deletions packages/starlight/__tests__/basics/navigation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
4 changes: 4 additions & 0 deletions packages/starlight/__tests__/i18n/navigation-order.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down Expand Up @@ -84,6 +85,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand All @@ -99,6 +101,7 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand All @@ -122,6 +125,7 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
6 changes: 6 additions & 0 deletions packages/starlight/__tests__/sidebar/navigation-attributes.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down Expand Up @@ -72,6 +73,10 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": {
"text": "Experimental",
"variant": "default",
},
"collapsed": false,
"entries": [
{
Expand All @@ -90,6 +95,7 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
6 changes: 6 additions & 0 deletions packages/starlight/__tests__/sidebar/navigation-badges.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down Expand Up @@ -79,6 +80,10 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": {
"text": "Experimental",
"variant": "default",
},
"collapsed": false,
"entries": [
{
Expand Down Expand Up @@ -108,6 +113,7 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
6 changes: 6 additions & 0 deletions packages/starlight/__tests__/sidebar/navigation-hidden.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down Expand Up @@ -68,6 +69,10 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": {
"text": "Experimental",
"variant": "default",
},
"collapsed": false,
"entries": [
{
Expand All @@ -83,6 +88,7 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
6 changes: 6 additions & 0 deletions packages/starlight/__tests__/sidebar/navigation-order.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down Expand Up @@ -68,6 +69,10 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": {
"text": "Experimental",
"variant": "default",
},
"collapsed": false,
"entries": [
{
Expand All @@ -91,6 +96,7 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
6 changes: 6 additions & 0 deletions packages/starlight/__tests__/sidebar/navigation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ describe('getSidebar', () => {
"type": "link",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down Expand Up @@ -68,6 +69,10 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": {
"text": "Experimental",
"variant": "default",
},
"collapsed": false,
"entries": [
{
Expand All @@ -91,6 +96,7 @@ describe('getSidebar', () => {
"type": "group",
},
{
"badge": undefined,
"collapsed": false,
"entries": [
{
Expand Down
1 change: 1 addition & 0 deletions packages/starlight/__tests__/sidebar/vitest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default defineVitestConfig({
// A group linking to all pages in the reference directory.
{
label: 'Reference',
badge: 'Experimental',
autogenerate: { directory: 'reference' },
},
// A group linking to all pages in the api/v1 directory.
Expand Down
17 changes: 13 additions & 4 deletions packages/starlight/components/SidebarSublist.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ interface Props {
<span>{entry.label}</span>
{entry.badge && (
<>
{' '}
<Badge
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved
text={entry.badge.text}
variant={entry.isCurrent ? 'outline' : entry.badge.variant}
Expand All @@ -36,7 +35,14 @@ interface Props {
open={flattenSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed}
>
<summary>
<span class="large">{entry.label}</span>
<div class="group-label">
<span class="large">{entry.label}</span>
{entry.badge && (
<>
<Badge text={entry.badge.text} variant={entry.badge.variant} />
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved
</>
)}
</div>
<Icon name="right-caret" class="caret" size="1.25rem" />
</summary>
<Astro.self sublist={entry.entries} nested />
Expand Down Expand Up @@ -79,6 +85,8 @@ interface Props {
align-items: center;
justify-content: space-between;
padding-inline: var(--sl-sidebar-item-padding-inline);
padding-block: 0.2em;
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved
line-height: 1.4;
cursor: pointer;
user-select: none;
}
Expand Down Expand Up @@ -120,8 +128,9 @@ interface Props {
background-color: var(--sl-color-text-accent);
}

a > *:not(:last-child) {
margin-inline-end: 0.25em;
a > *:not(:last-child),
summary > div.group-label > *:not(:last-child) {
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved
margin-inline-end: 0.5em;
kevinzunigacuellar marked this conversation as resolved.
Show resolved Hide resolved
}

@media (min-width: 50rem) {
Expand Down
4 changes: 2 additions & 2 deletions packages/starlight/schemas/sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ const SidebarBaseSchema = z.object({
label: z.string(),
/** Translations of the `label` for each supported language. */
translations: z.record(z.string()).default({}),
/** Adds a badge to the link item */
badge: BadgeConfigSchema(),
});

const SidebarGroupSchema = SidebarBaseSchema.extend({
Expand All @@ -29,8 +31,6 @@ export const SidebarLinkItemHTMLAttributesSchema = () => linkHTMLAttributesSchem
const SidebarLinkItemSchema = SidebarBaseSchema.extend({
/** The link to this item’s content. Can be a relative link to local files or the full URL of an external page. */
link: z.string(),
/** Adds a badge to the link item */
badge: BadgeConfigSchema(),
/** HTML attributes to add to the link item. */
attrs: SidebarLinkItemHTMLAttributesSchema(),
});
Expand Down
4 changes: 4 additions & 0 deletions packages/starlight/utils/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ interface Group {
label: string;
entries: (Link | Group)[];
collapsed: boolean;
badge: Badge | undefined;
}

export type SidebarEntry = Link | Group;
Expand Down Expand Up @@ -75,6 +76,7 @@ function configItemToEntry(
label: pickLang(item.translations, localeToLang(locale)) || item.label,
entries: item.items.map((i) => configItemToEntry(i, currentPathname, locale, routes)),
collapsed: item.collapsed,
badge: item.badge,
};
}
}
Expand All @@ -101,6 +103,7 @@ function groupFromAutogenerateConfig(
label: pickLang(item.translations, localeToLang(locale)) || item.label,
entries: sidebarFromDir(tree, currentPathname, locale, subgroupCollapsed ?? item.collapsed),
collapsed: item.collapsed,
badge: item.badge,
};
}

Expand Down Expand Up @@ -231,6 +234,7 @@ function groupFromDir(
label: dirName,
entries,
collapsed,
badge: undefined,
};
}

Expand Down
Loading