Merge branch 'main' into i18n-ref-ove

.github/workflows/ci.yml

@@ -90,7 +90,7 @@ jobs:
 
   pa11y:
     name: Check for accessibility issues
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

docs/astro.config.mjs

@@ -166,6 +166,7 @@ export default defineConfig({
 				{
 					label: 'Resources',
 					translations: {
+						de: 'Ressourcen',
 						'zh-CN': '资源',
 						fr: 'Ressources',
 						'pt-BR': 'Recursos',

docs/src/components/showcase-sites.astro

@@ -175,4 +175,9 @@ import FluidGrid from './fluid-grid.astro';
 		thumbnail="docs.ryzekit.com.png"
 	/>
 	<Card title="Open {re}Source" href="https://openresource.dev" thumbnail="openresource.dev.png" />
+	<Card
+		title="Orbit CSS"
+		href="https://zumerlab.github.io/orbit-docs/"
+		thumbnail="zumerlab.github.io.orbit-docs.png"
+	/>
 </FluidGrid>

docs/src/content/docs/de/components/badges.mdx

@@ -0,0 +1,150 @@
+---
+title: Abzeichen
+description: Lerne, wie du in Starlight Abzeichen verwenden kannst, um zusätzliche Informationen anzuzeigen.
+---
+
+import { Badge } from '@astrojs/starlight/components';
+
+Um wenige Informationen, wie z.B. einen Status oder eine Kategorie, anzuzeigen, verwende die Komponente `<Badge>`.
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Badge slot="preview" text="Neu" />
+
+</Preview>
+
+## Import
+
+```tsx
+import { Badge } from '@astrojs/starlight/components';
+```
+
+## Verwendung
+
+Zeige ein Abzeichen mit der Komponente `<Badge>` an und übergib den Inhalt, den du anzeigen möchtest, an das Attribut [`text`](#text) der Komponente `<Badge>`.
+
+Standardmäßig wird für das Abzeichen die Akzentfarbe des Aussehens deiner Website verwendet.
+Um eine eingebaute Abzeichen-Farbe zu verwenden, setze das Attribut [`variant`](#variant) auf einen der unterstützten Werte.
+
+<Preview>
+
+```mdx
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="Hinweis" variant="note" />
+<Badge text="Erfolg" variant="success" />
+<Badge text="Tipp" variant="tip" />
+<Badge text="Warnung" variant="caution" />
+<Badge text="Gefahr" variant="danger" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% badge text="Hinweis" variant="note" /%}
+{% badge text="Erfolg" variant="success" /%}
+{% badge text="Tipp" variant="tip" /%}
+{% badge text="Warnung" variant="caution" /%}
+{% badge text="Gefahr" variant="danger" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="Hinweis" variant="note" />
+	<Badge text="Erfolg" variant="success" />
+	<Badge text="Tipp" variant="tip" />
+	<Badge text="Warnung" variant="caution" />
+	<Badge text="Gefahr" variant="danger" />
+</Fragment>
+
+</Preview>
+
+### Verschiedene Größen verwenden
+
+Verwende das Attribut [`size`](#size), um die Größe des Abzeichentextes zu steuern.
+
+<Preview>
+
+```mdx /size="\w+"/
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="Neu" size="small" />
+<Badge text="Neu und verbessert" size="medium" />
+<Badge text="Neu, verbessert und größer" size="large" />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc /size="\w+"/
+{% badge text="Neu" size="small" /%}
+{% badge text="Neu und verbessert" size="medium" /%}
+{% badge text="Neu, verbessert und größer" size="large" /%}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+	<Badge text="Neu" size="small" />
+	<Badge text="Neu und verbessert" size="medium" />
+	<Badge text="Neu, verbessert und größer" size="large" />
+</Fragment>
+
+</Preview>
+
+### Abzeichen anpassen
+
+Passe Abzeichen an, indem du andere `<span>`-Attribute wie `class` oder `style` mit benutzerdefiniertem CSS verwendest.
+
+<Preview>
+
+```mdx "style={{ fontStyle: 'italic' }}"
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="Individuell" variant="success" style={{ fontStyle: 'italic' }} />
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'style="font-style: italic;"'
+{% badge text="Individuell" variant="success" style="font-style: italic;" /%}
+```
+
+</Fragment>
+
+<Badge
+	slot="preview"
+	text="Individuell"
+	variant="success"
+	style={{ fontStyle: 'italic' }}
+/>
+
+</Preview>
+
+## `<Badge>`-Eigenschaften
+
+**Implementation:** [`Badge.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Badge.astro)
+
+Die `<Badge>`-Komponente akzeptiert die folgenden Eigenschaften und auch alle [anderen `<span>`-Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes):
+
+### `text`
+
+**Erforderlich**  
+**Typ:** `string`
+
+Der Textinhalt, der in dem Abzeichen angezeigt werden soll.
+
+### `variant`
+
+**Typ:** `'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'`  
+**Voreinstellung:** `'default'`
+
+Die zu verwendende Farbvariante des Abzeichens: `note` (blau), `tip` (lila), `danger` (rot), `caution` (orange), `success` (grün) oder `default` (Akzentfarbe des Aussehens).
+
+### `size`
+
+**Typ:** `'small' | 'medium' | 'large'`
+
+Bestimmt die Größe des anzuzeigenden Abzeichens.

docs/src/content/docs/de/components/cards.mdx

@@ -0,0 +1,110 @@
+---
+title: Karten
+description: Lerne, wie du in Starlight Karten verwenden kannst, um Inhalte in einer Box anzuzeigen.
+sidebar:
+  order: 2
+---
+
+import { Card } from '@astrojs/starlight/components';
+
+Um Inhalte in einer Box anzuzeigen, die den Stilen von Starlight entspricht, verwende die Komponente `<Card>`.
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Card slot="preview" title="Monde" icon="moon">
+	Io, Europa, Ganymed
+</Card>
+
+</Preview>
+
+## Import
+
+```tsx
+import { Card } from '@astrojs/starlight/components';
+```
+
+## Verwendung
+
+Zeige eine Karte an, indem du die Komponente `<Card>` verwendest und einen [`title`](#title) für die Karte angibst.
+
+<Preview>
+
+```mdx
+import { Card } from '@astrojs/starlight/components';
+
+<Card title="Schau dir das an">
+	Interessante Inhalte, die du hervorheben möchtest.
+</Card>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% card title="Schau dir das an" %}
+Interessante Inhalte, die du hervorheben möchtest.
+{% /card %}
+```
+
+</Fragment>
+
+<Card slot="preview" title="Schau dir das an">
+	Interessante Inhalte, die du hervorheben möchtest.
+</Card>
+
+</Preview>
+
+### Hinzufügen von Symbolen zu Karten
+
+Füge ein Symbol in eine Karte ein, indem du das Attribut [`icon`](#icon) auf den Namen [eines von Starlights eingebauten Symbolen](/de/reference/icons/#alle-symbole) setzt.
+
+<Preview>
+
+```mdx 'icon="star"'
+import { Card } from '@astrojs/starlight/components';
+
+<Card title="Sterne" icon="star">
+	Sirius, Wega, Betelgeuse
+</Card>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'icon="star"'
+{% card title="Sterne" icon="star" %}
+Sirius, Wega, Betelgeuse
+{% /card %}
+```
+
+</Fragment>
+
+<Card slot="preview" title="Sterne" icon="star">
+	Sirius, Wega, Betelgeuse
+</Card>
+
+</Preview>
+
+### Karten gruppieren
+
+Zeige mehrere Karten nebeneinander an, wenn genügend Platz vorhanden ist, indem du sie mit der Komponente [`<CardGrid>`](/de/components/card-grids/) gruppierst.
+Siehe die Anleitung [„Karten gruppieren“](/de/components/card-grids/#karten-gruppieren) für ein Beispiel.
+
+## `<Card>`-Eigenschaften
+
+**Implementation:** [`Card.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Card.astro)
+
+Die Komponente `<Card>` akzeptiert die folgenden Eigenschaften:
+
+### `title`
+
+**erforderlich**  
+**Typ:** `string`
+
+Der Titel der anzuzeigenden Karte.
+
+### `icon`
+
+**Typ:** `string`
+
+Eine Karte kann ein `icon`-Attribut enthalten, das auf den Namen [eines von Starlights eingebauten Icons](/de/reference/icons/#alle-symbole) gesetzt ist.