Skip to content

Commit 1aa1a7c

Browse files
HiDeooHiDeoo
authored
Merge branch 'main' into i18n-ref-ove
2 parents 3a51e77 + bd5b62e commit 1aa1a7c

30 files changed

Lines changed: 3303 additions & 561 deletions

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ jobs:
9090

9191
pa11y:
9292
name: Check for accessibility issues
93-
runs-on: ubuntu-latest
93+
runs-on: ubuntu-22.04
9494
steps:
9595
- name: Checkout
9696
uses: actions/checkout@v4

‎docs/astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ export default defineConfig({
166166
{
167167
label: 'Resources',
168168
translations: {
169+
de: 'Ressourcen',
169170
'zh-CN': '资源',
170171
fr: 'Ressources',
171172
'pt-BR': 'Recursos',

‎docs/src/assets/showcase/zumerlab.github.io.orbit-docs.png‎

77.9 KB
Loading

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,4 +175,9 @@ import FluidGrid from './fluid-grid.astro';
175175
thumbnail="docs.ryzekit.com.png"
176176
/>
177177
<Card title="Open {re}Source" href="https://openresource.dev" thumbnail="openresource.dev.png" />
178+
<Card
179+
title="Orbit CSS"
180+
href="https://zumerlab.github.io/orbit-docs/"
181+
thumbnail="zumerlab.github.io.orbit-docs.png"
182+
/>
178183
</FluidGrid>

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

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
title: Abzeichen
3+
description: Lerne, wie du in Starlight Abzeichen verwenden kannst, um zusätzliche Informationen anzuzeigen.
4+
---
5+
6+
import { Badge } from '@astrojs/starlight/components';
7+
8+
Um wenige Informationen, wie z.B. einen Status oder eine Kategorie, anzuzeigen, verwende die Komponente `<Badge>`.
9+
10+
import Preview from '~/components/component-preview.astro';
11+
12+
<Preview>
13+
14+
<Badge slot="preview" text="Neu" />
15+
16+
</Preview>
17+
18+
## Import
19+
20+
```tsx
21+
import { Badge } from '@astrojs/starlight/components';
22+
```
23+
24+
## Verwendung
25+
26+
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>`.
27+
28+
Standardmäßig wird für das Abzeichen die Akzentfarbe des Aussehens deiner Website verwendet.
29+
Um eine eingebaute Abzeichen-Farbe zu verwenden, setze das Attribut [`variant`](#variant) auf einen der unterstützten Werte.
30+
31+
<Preview>
32+
33+
```mdx
34+
import { Badge } from '@astrojs/starlight/components';
35+
36+
<Badge text="Hinweis" variant="note" />
37+
<Badge text="Erfolg" variant="success" />
38+
<Badge text="Tipp" variant="tip" />
39+
<Badge text="Warnung" variant="caution" />
40+
<Badge text="Gefahr" variant="danger" />
41+
```
42+
43+
<Fragment slot="markdoc">
44+
45+
```markdoc
46+
{% badge text="Hinweis" variant="note" /%}
47+
{% badge text="Erfolg" variant="success" /%}
48+
{% badge text="Tipp" variant="tip" /%}
49+
{% badge text="Warnung" variant="caution" /%}
50+
{% badge text="Gefahr" variant="danger" /%}
51+
```
52+
53+
</Fragment>
54+
55+
<Fragment slot="preview">
56+
<Badge text="Hinweis" variant="note" />
57+
<Badge text="Erfolg" variant="success" />
58+
<Badge text="Tipp" variant="tip" />
59+
<Badge text="Warnung" variant="caution" />
60+
<Badge text="Gefahr" variant="danger" />
61+
</Fragment>
62+
63+
</Preview>
64+
65+
### Verschiedene Größen verwenden
66+
67+
Verwende das Attribut [`size`](#size), um die Größe des Abzeichentextes zu steuern.
68+
69+
<Preview>
70+
71+
```mdx /size="\w+"/
72+
import { Badge } from '@astrojs/starlight/components';
73+
74+
<Badge text="Neu" size="small" />
75+
<Badge text="Neu und verbessert" size="medium" />
76+
<Badge text="Neu, verbessert und größer" size="large" />
77+
```
78+
79+
<Fragment slot="markdoc">
80+
81+
```markdoc /size="\w+"/
82+
{% badge text="Neu" size="small" /%}
83+
{% badge text="Neu und verbessert" size="medium" /%}
84+
{% badge text="Neu, verbessert und größer" size="large" /%}
85+
```
86+
87+
</Fragment>
88+
89+
<Fragment slot="preview">
90+
<Badge text="Neu" size="small" />
91+
<Badge text="Neu und verbessert" size="medium" />
92+
<Badge text="Neu, verbessert und größer" size="large" />
93+
</Fragment>
94+
95+
</Preview>
96+
97+
### Abzeichen anpassen
98+
99+
Passe Abzeichen an, indem du andere `<span>`-Attribute wie `class` oder `style` mit benutzerdefiniertem CSS verwendest.
100+
101+
<Preview>
102+
103+
```mdx "style={{ fontStyle: 'italic' }}"
104+
import { Badge } from '@astrojs/starlight/components';
105+
106+
<Badge text="Individuell" variant="success" style={{ fontStyle: 'italic' }} />
107+
```
108+
109+
<Fragment slot="markdoc">
110+
111+
```markdoc 'style="font-style: italic;"'
112+
{% badge text="Individuell" variant="success" style="font-style: italic;" /%}
113+
```
114+
115+
</Fragment>
116+
117+
<Badge
118+
slot="preview"
119+
text="Individuell"
120+
variant="success"
121+
style={{ fontStyle: 'italic' }}
122+
/>
123+
124+
</Preview>
125+
126+
## `<Badge>`-Eigenschaften
127+
128+
**Implementation:** [`Badge.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Badge.astro)
129+
130+
Die `<Badge>`-Komponente akzeptiert die folgenden Eigenschaften und auch alle [anderen `<span>`-Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes):
131+
132+
### `text`
133+
134+
**Erforderlich**
135+
**Typ:** `string`
136+
137+
Der Textinhalt, der in dem Abzeichen angezeigt werden soll.
138+
139+
### `variant`
140+
141+
**Typ:** `'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'`
142+
**Voreinstellung:** `'default'`
143+
144+
Die zu verwendende Farbvariante des Abzeichens: `note` (blau), `tip` (lila), `danger` (rot), `caution` (orange), `success` (grün) oder `default` (Akzentfarbe des Aussehens).
145+
146+
### `size`
147+
148+
**Typ:** `'small' | 'medium' | 'large'`
149+
150+
Bestimmt die Größe des anzuzeigenden Abzeichens.

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Karten
3+
description: Lerne, wie du in Starlight Karten verwenden kannst, um Inhalte in einer Box anzuzeigen.
4+
sidebar:
5+
order: 2
6+
---
7+
8+
import { Card } from '@astrojs/starlight/components';
9+
10+
Um Inhalte in einer Box anzuzeigen, die den Stilen von Starlight entspricht, verwende die Komponente `<Card>`.
11+
12+
import Preview from '~/components/component-preview.astro';
13+
14+
<Preview>
15+
16+
<Card slot="preview" title="Monde" icon="moon">
17+
Io, Europa, Ganymed
18+
</Card>
19+
20+
</Preview>
21+
22+
## Import
23+
24+
```tsx
25+
import { Card } from '@astrojs/starlight/components';
26+
```
27+
28+
## Verwendung
29+
30+
Zeige eine Karte an, indem du die Komponente `<Card>` verwendest und einen [`title`](#title) für die Karte angibst.
31+
32+
<Preview>
33+
34+
```mdx
35+
import { Card } from '@astrojs/starlight/components';
36+
37+
<Card title="Schau dir das an">
38+
Interessante Inhalte, die du hervorheben möchtest.
39+
</Card>
40+
```
41+
42+
<Fragment slot="markdoc">
43+
44+
```markdoc
45+
{% card title="Schau dir das an" %}
46+
Interessante Inhalte, die du hervorheben möchtest.
47+
{% /card %}
48+
```
49+
50+
</Fragment>
51+
52+
<Card slot="preview" title="Schau dir das an">
53+
Interessante Inhalte, die du hervorheben möchtest.
54+
</Card>
55+
56+
</Preview>
57+
58+
### Hinzufügen von Symbolen zu Karten
59+
60+
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.
61+
62+
<Preview>
63+
64+
```mdx 'icon="star"'
65+
import { Card } from '@astrojs/starlight/components';
66+
67+
<Card title="Sterne" icon="star">
68+
Sirius, Wega, Betelgeuse
69+
</Card>
70+
```
71+
72+
<Fragment slot="markdoc">
73+
74+
```markdoc 'icon="star"'
75+
{% card title="Sterne" icon="star" %}
76+
Sirius, Wega, Betelgeuse
77+
{% /card %}
78+
```
79+
80+
</Fragment>
81+
82+
<Card slot="preview" title="Sterne" icon="star">
83+
Sirius, Wega, Betelgeuse
84+
</Card>
85+
86+
</Preview>
87+
88+
### Karten gruppieren
89+
90+
Zeige mehrere Karten nebeneinander an, wenn genügend Platz vorhanden ist, indem du sie mit der Komponente [`<CardGrid>`](/de/components/card-grids/) gruppierst.
91+
Siehe die Anleitung [„Karten gruppieren“](/de/components/card-grids/#karten-gruppieren) für ein Beispiel.
92+
93+
## `<Card>`-Eigenschaften
94+
95+
**Implementation:** [`Card.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Card.astro)
96+
97+
Die Komponente `<Card>` akzeptiert die folgenden Eigenschaften:
98+
99+
### `title`
100+
101+
**erforderlich**
102+
**Typ:** `string`
103+
104+
Der Titel der anzuzeigenden Karte.
105+
106+
### `icon`
107+
108+
**Typ:** `string`
109+
110+
Eine Karte kann ein `icon`-Attribut enthalten, das auf den Namen [eines von Starlights eingebauten Icons](/de/reference/icons/#alle-symbole) gesetzt ist.

0 commit comments

Comments
 (0)