Skip to content

Commit bd048d1

Browse files
delucisdelucis
authored
Merge branch 'main' into chris/i18n-refactor-2
2 parents 0249efe + dcb5f7a commit bd048d1

24 files changed

+115
-16
lines changed

‎.changeset/orange-pants-tell.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@astrojs/starlight': minor
3+
---
4+
5+
Adds support for adding sidebar badges to group headings

‎docs/src/assets/showcase/react-awesome-reveal.morello.dev.png

34 KB
Loading

‎docs/src/components/showcase-sites.astro

+5
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,9 @@ import FluidGrid from './fluid-grid.astro';
6565
thumbnail="ai-prompt-snippets.png"
6666
/>
6767
<Card title="Folks Router" href="https://folksrouter.io/" thumbnail="folksrouter.io.png" />
68+
<Card
69+
title="React Awesome Reveal"
70+
href="https://react-awesome-reveal.morello.dev/"
71+
thumbnail="react-awesome-reveal.morello.dev.png"
72+
/>
6873
</FluidGrid>

‎docs/src/components/sidebar-preview.astro

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ function makeEntries(items: SidebarConfig): SidebarEntry[] {
2929
label: item.label,
3030
entries: makeEntries(item.items as SidebarConfig),
3131
collapsed: item.collapsed,
32+
badge: item.badge,
3233
};
3334
});
3435
}

‎docs/src/content/docs/es/guides/authoring-content.md

+4
Original file line numberDiff line numberDiff line change
@@ -206,3 +206,7 @@ Los bloques de código largos de una sola línea no deben ajustarse automáticam
206206
## Otras características comunes de Markdown
207207

208208
Starlight admite todas las demás sintaxis de autoría de Markdown, como listas y tablas. Puedes consultar la [Guía de referencia de Markdown](https://www.markdownguide.org/cheat-sheet/) para obtener una descripción general rápida de todos los elementos de sintaxis de Markdown.
209+
210+
## Configuración avanzada de Markdown y MDX
211+
212+
Starlight utiliza el motor de renderizado de Markdown y MDX de Astro, construido sobre remark y rehype. Puedes añadir soporte para sintaxis y comportamientos personalizados añadiendo `remarkPlugins` o `rehypePlugins` en tu archivo de configuración de Astro. Consulta la sección ["Configuración de Markdown y MDX"](https://docs.astro.build/es/guides/markdown-content/#configuraci%C3%B3n-de-markdown-y-mdx) en la documentación de Astro para obtener más información.

‎docs/src/content/docs/es/guides/css-and-tailwind.mdx

+8-8
Original file line numberDiff line numberDiff line change
@@ -181,14 +181,14 @@ Si ya tienes un sitio en Starlight y quieres agregar Tailwind CSS, sigue estos p
181181
});
182182
```
183183

184-
5. Agrega el plugin Starlight Tailwind a `tailwind.config.cjs`:
184+
5. Agrega el plugin Starlight Tailwind a `tailwind.config.mjs`:
185185

186186
```js ins={2,7}
187-
// tailwind.config.cjs
188-
const starlightPlugin = require('@astrojs/starlight-tailwind');
187+
// tailwind.config.mjs
188+
import starlightPlugin from '@astrojs/starlight-tailwind';
189189

190190
/** @type {import('tailwindcss').Config} */
191-
module.exports = {
191+
export default {
192192
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
193193
plugins: [starlightPlugin()],
194194
};
@@ -206,12 +206,12 @@ Si se establece, las siguientes opciones anularán los estilos predeterminados d
206206
- `fontFamily.mono` - usada para ejemplos de código
207207

208208
```js {12,14,18,20}
209-
// tailwind.config.cjs
210-
const starlightPlugin = require('@astrojs/starlight-tailwind');
211-
const colors = require('tailwindcss/colors');
209+
// tailwind.config.mjs
210+
import starlightPlugin from '@astrojs/starlight-tailwind';
211+
import colors from 'tailwindcss/colors';
212212

213213
/** @type {import('tailwindcss').Config} */
214-
module.exports = {
214+
export default {
215215
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
216216
theme: {
217217
extend: {

‎docs/src/content/docs/es/reference/overrides.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ Tabla de contenidos para esta página si está habilitada.
121121
**Tipo:** `{ depth: number; slug: string; text: string }[]`
122122

123123
Array de todos los encabezados Markdown extraídos de la página actual.
124-
Usa [`toc`](#toc) en su lugar si deseas construir una tabla de contenidos que respete las opciones de configuración de Starlight.
124+
Usa [`toc`](#toc) en su lugar si deseas construir un componente de tabla de contenidos que respete las opciones de configuración de Starlight.
125125

126126
#### `lastUpdated`
127127

‎docs/src/content/docs/fr/guides/authoring-content.md

+4
Original file line numberDiff line numberDiff line change
@@ -206,3 +206,7 @@ Les longs blocs de code d'une seule ligne ne doivent pas être enveloppés. Ils
206206
## Autres fonctionnalités courantes de Markdown
207207

208208
Starlight prend en charge toutes les autres syntaxes de rédaction Markdown, telles que les listes et les tableaux. Voir [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) pour un aperçu rapide de tous les éléments de la syntaxe Markdown.
209+
210+
## Configuration avancée de Markdown et MDX
211+
212+
Starlight utilise le moteur de rendu Markdown et MDX d'Astro basé sur remark et rehype. Vous pouvez ajouter la prise en charge de syntaxe et comportement personnalisés en ajoutant `remarkPlugins` ou `rehypePlugins` dans votre fichier de configuration Astro. Pour en savoir plus, consultez [« Configuration de Markdown et MDX »](https://docs.astro.build/fr/guides/markdown-content/#configuration-de-markdown-et-mdx) dans la documentation d'Astro.

‎docs/src/content/docs/guides/sidebar.mdx

+25-1
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ The `sidebar` frontmatter configuration is only used for autogenerated links and
235235

236236
## Badges
237237

238-
Links can also include a `badge` property to display a badge next to the link label.
238+
Links, groups, and autogenerated groups can also include a `badge` property to display a badge next to their label.
239239

240240
```js
241241
starlight({
@@ -251,6 +251,12 @@ starlight({
251251
},
252252
],
253253
},
254+
// An autogenerated group with a "Deprecated" badge.
255+
{
256+
label: 'Reference',
257+
badge: 'Deprecated',
258+
autogenerate: { directory: 'reference' },
259+
},
254260
],
255261
});
256262
```
@@ -269,6 +275,24 @@ The configuration above generates the following sidebar:
269275
},
270276
],
271277
},
278+
{
279+
label: 'Reference',
280+
badge: { text: 'Deprecated', variant: 'default' },
281+
items: [
282+
{
283+
label: 'Configuration Reference',
284+
link: '/reference/configuration/',
285+
},
286+
{
287+
label: 'Frontmatter Reference',
288+
link: '/reference/frontmatter/',
289+
},
290+
{
291+
label: 'Overrides Reference',
292+
link: '/reference/overrides/',
293+
},
294+
],
295+
},
272296
]}
273297
/>
274298

‎docs/src/content/docs/ko/guides/authoring-content.md

+4
Original file line numberDiff line numberDiff line change
@@ -208,3 +208,7 @@ var fun = function lang(l) {
208208
## 기타 일반적인 Markdown 기능
209209

210210
Starlight는 목록 및 테이블과 같은 다른 모든 Markdown 작성 구문을 지원합니다. 모든 Markdown 구문 요소에 대한 간략한 개요는 [Markdown Guide의 Markdown 치트 시트](https://www.markdownguide.org/cheat-sheet/)를 참조하세요.
211+
212+
## 고급 Markdown 및 MDX 구성
213+
214+
Starlight는 remark 및 rehype를 기반으로 구축된 Astro의 Markdown 및 MDX 렌더러를 사용합니다. Astro 구성 파일에 `remarkPlugins` 또는 `rehypePlugins`를 추가하여 사용자 정의 구문 및 동작에 대한 지원을 추가할 수 있습니다. 자세한 내용은 Astro 문서의 [Markdown 및 MDX 구성](https://docs.astro.build/ko/guides/markdown-content/#configuring-markdown-and-mdx)을 참조하세요.

‎docs/src/content/docs/reference/configuration.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -183,10 +183,10 @@ sidebar: [
183183
type SidebarItem = {
184184
label: string;
185185
translations?: Record<string, string>;
186+
badge?: string | BadgeConfig;
186187
} & (
187188
| {
188189
link: string;
189-
badge?: string | BadgeConfig;
190190
attrs?: Record<string, string | number | boolean | undefined>;
191191
}
192192
| { items: SidebarItem[]; collapsed?: boolean }

‎packages/starlight/__tests__/basics/navigation-labels.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ describe('getSidebar', () => {
3636
"type": "link",
3737
},
3838
{
39+
"badge": undefined,
3940
"collapsed": false,
4041
"entries": [
4142
{

‎packages/starlight/__tests__/basics/navigation-order.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ describe('getSidebar', () => {
1717
expect(getSidebar('/', undefined)).toMatchInlineSnapshot(`
1818
[
1919
{
20+
"badge": undefined,
2021
"collapsed": false,
2122
"entries": [
2223
{

‎packages/starlight/__tests__/basics/navigation.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ describe('getSidebar', () => {
3434
"type": "link",
3535
},
3636
{
37+
"badge": undefined,
3738
"collapsed": false,
3839
"entries": [
3940
{

‎packages/starlight/__tests__/i18n/navigation-order.test.ts

+4
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ describe('getSidebar', () => {
4646
"type": "link",
4747
},
4848
{
49+
"badge": undefined,
4950
"collapsed": false,
5051
"entries": [
5152
{
@@ -84,6 +85,7 @@ describe('getSidebar', () => {
8485
"type": "link",
8586
},
8687
{
88+
"badge": undefined,
8789
"collapsed": false,
8890
"entries": [
8991
{
@@ -99,6 +101,7 @@ describe('getSidebar', () => {
99101
"type": "group",
100102
},
101103
{
104+
"badge": undefined,
102105
"collapsed": false,
103106
"entries": [
104107
{
@@ -122,6 +125,7 @@ describe('getSidebar', () => {
122125
"type": "group",
123126
},
124127
{
128+
"badge": undefined,
125129
"collapsed": false,
126130
"entries": [
127131
{

‎packages/starlight/__tests__/sidebar/navigation-attributes.test.ts

+6
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ describe('getSidebar', () => {
3232
"type": "link",
3333
},
3434
{
35+
"badge": undefined,
3536
"collapsed": false,
3637
"entries": [
3738
{
@@ -72,6 +73,10 @@ describe('getSidebar', () => {
7273
"type": "group",
7374
},
7475
{
76+
"badge": {
77+
"text": "Experimental",
78+
"variant": "default",
79+
},
7580
"collapsed": false,
7681
"entries": [
7782
{
@@ -90,6 +95,7 @@ describe('getSidebar', () => {
9095
"type": "group",
9196
},
9297
{
98+
"badge": undefined,
9399
"collapsed": false,
94100
"entries": [
95101
{

‎packages/starlight/__tests__/sidebar/navigation-badges.test.ts

+6
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ describe('getSidebar', () => {
3939
"type": "link",
4040
},
4141
{
42+
"badge": undefined,
4243
"collapsed": false,
4344
"entries": [
4445
{
@@ -79,6 +80,10 @@ describe('getSidebar', () => {
7980
"type": "group",
8081
},
8182
{
83+
"badge": {
84+
"text": "Experimental",
85+
"variant": "default",
86+
},
8287
"collapsed": false,
8388
"entries": [
8489
{
@@ -108,6 +113,7 @@ describe('getSidebar', () => {
108113
"type": "group",
109114
},
110115
{
116+
"badge": undefined,
111117
"collapsed": false,
112118
"entries": [
113119
{

‎packages/starlight/__tests__/sidebar/navigation-hidden.test.ts

+6
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ describe('getSidebar', () => {
2828
"type": "link",
2929
},
3030
{
31+
"badge": undefined,
3132
"collapsed": false,
3233
"entries": [
3334
{
@@ -68,6 +69,10 @@ describe('getSidebar', () => {
6869
"type": "group",
6970
},
7071
{
72+
"badge": {
73+
"text": "Experimental",
74+
"variant": "default",
75+
},
7176
"collapsed": false,
7277
"entries": [
7378
{
@@ -83,6 +88,7 @@ describe('getSidebar', () => {
8388
"type": "group",
8489
},
8590
{
91+
"badge": undefined,
8692
"collapsed": false,
8793
"entries": [
8894
{

‎packages/starlight/__tests__/sidebar/navigation-order.test.ts

+6
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ describe('getSidebar', () => {
2828
"type": "link",
2929
},
3030
{
31+
"badge": undefined,
3132
"collapsed": false,
3233
"entries": [
3334
{
@@ -68,6 +69,10 @@ describe('getSidebar', () => {
6869
"type": "group",
6970
},
7071
{
72+
"badge": {
73+
"text": "Experimental",
74+
"variant": "default",
75+
},
7176
"collapsed": false,
7277
"entries": [
7378
{
@@ -91,6 +96,7 @@ describe('getSidebar', () => {
9196
"type": "group",
9297
},
9398
{
99+
"badge": undefined,
94100
"collapsed": false,
95101
"entries": [
96102
{

‎packages/starlight/__tests__/sidebar/navigation.test.ts

+6
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ describe('getSidebar', () => {
2828
"type": "link",
2929
},
3030
{
31+
"badge": undefined,
3132
"collapsed": false,
3233
"entries": [
3334
{
@@ -68,6 +69,10 @@ describe('getSidebar', () => {
6869
"type": "group",
6970
},
7071
{
72+
"badge": {
73+
"text": "Experimental",
74+
"variant": "default",
75+
},
7176
"collapsed": false,
7277
"entries": [
7378
{
@@ -91,6 +96,7 @@ describe('getSidebar', () => {
9196
"type": "group",
9297
},
9398
{
99+
"badge": undefined,
94100
"collapsed": false,
95101
"entries": [
96102
{

‎packages/starlight/__tests__/sidebar/vitest.config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default defineVitestConfig({
2828
// A group linking to all pages in the reference directory.
2929
{
3030
label: 'Reference',
31+
badge: 'Experimental',
3132
autogenerate: { directory: 'reference' },
3233
},
3334
// A group linking to all pages in the api/v1 directory.

‎packages/starlight/components/SidebarSublist.astro

+13-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,15 @@ interface Props {
3636
open={flattenSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed}
3737
>
3838
<summary>
39-
<span class="large">{entry.label}</span>
39+
<div class="group-label">
40+
<span class="large">{entry.label}</span>
41+
{entry.badge && (
42+
<>
43+
{' '}
44+
<Badge text={entry.badge.text} variant={entry.badge.variant} />
45+
</>
46+
)}
47+
</div>
4048
<Icon name="right-caret" class="caret" size="1.25rem" />
4149
</summary>
4250
<Astro.self sublist={entry.entries} nested />
@@ -78,7 +86,8 @@ interface Props {
7886
display: flex;
7987
align-items: center;
8088
justify-content: space-between;
81-
padding-inline: var(--sl-sidebar-item-padding-inline);
89+
padding: 0.2em var(--sl-sidebar-item-padding-inline);
90+
line-height: 1.4;
8291
cursor: pointer;
8392
user-select: none;
8493
}
@@ -120,7 +129,8 @@ interface Props {
120129
background-color: var(--sl-color-text-accent);
121130
}
122131

123-
a > *:not(:last-child) {
132+
a > *:not(:last-child),
133+
.group-label > *:not(:last-child) {
124134
margin-inline-end: 0.25em;
125135
}
126136

0 commit comments

Comments
 (0)