Tabs und Codegruppen

Tabs zeigen Alternativen an einer Stelle: Anleitungen für jedes Betriebssystem oder dieselbe Einstellung in zwei Formaten. Leser sehen die, die sie wählen, und die anderen sind ihnen nicht im Weg.

#Tabs

::: tabs
== macOS
Installiere Node.js mit [Homebrew](https://brew.sh):

```bash
brew install node
```
== Windows
Lade das Installationsprogramm von [nodejs.org](https://nodejs.org) und starte es.
== Linux
Nutze die Paketverwaltung deiner Distribution, zum Beispiel `sudo apt install nodejs`.
:::

brew install node

• Jede Zeile == Name beginnt einen Tab. Der Name ist schlichter Text.
• Ein Tab enthält beliebiges Markdown: Absätze, Listen, Codeblöcke, Hinweise und andere Komponenten.
• Der erste Tab wird zuerst gezeigt.
• Text vor dem ersten Namen fällt weg. Ein tabs-Container ohne Namen wird als Text gezeigt.

#Codegruppen

Für denselben Code in mehreren Varianten ist eine Codegruppe kürzer: Jeder Codeblock wird ein Tab, benannt in eckigen Klammern nach seiner Sprache.

::: code-group
```bash [npm]
npm install --save-dev clay-doc
```
```bash [pnpm]
pnpm add -D clay-doc
```
```bash [yarn]
yarn add -D clay-doc
```
:::

npm install --save-dev clay-doc

pnpm add -D clay-doc

yarn add -D clay-doc

Die Tabs stehen in einer Leiste über dem Code. Mit Shell-Code in einem Tab ist es die Leiste eines Terminals: Die drei Knöpfe eines Fensters stehen vor den Tabs, und jeder Befehl bekommt sein $. windowDots: false im Theme lässt die Knöpfe weg.

• Ohne Namen in Klammern heißt ein Tab wie seine Sprache, etwa yaml oder json.
• Alles andere von Codeblöcken funktioniert, etwa hervorgehobene Zeilen: ```ts [clay.config.ts] {2}.
• Text zwischen den Codeblöcken einer Gruppe fällt weg.

#Andere Sprachen

Code in anderen Sprachen hat dieselbe Leiste, ohne die Knöpfe. Ohne Namen in Klammern heißen die Tabs wie ihre Sprachen:

::: code-group
```ts
const pages: string[] = await loadPages("docs");
console.log(`${pages.length} pages`);
```
```js
const pages = await loadPages("docs");
console.log(`${pages.length} pages`);
```
:::

const pages: string[] = await loadPages("docs");
console.log(`${pages.length} pages`);

const pages = await loadPages("docs");
console.log(`${pages.length} pages`);

#Shell-Code und anderer Code

Ein Tab mit Shell-Code reicht für die Knöpfe, etwa bash neben PowerShell:

::: code-group
```bash [macOS und Linux]
export CLAY_BASE_URL="/preview/"
npx clay build
```
```powershell [Windows]
$env:CLAY_BASE_URL = "/preview/"
npx clay build
```
:::

export CLAY_BASE_URL="/preview/"
npx clay build

$env:CLAY_BASE_URL = "/preview/"
npx clay build

#Text und Dateinamen

Eine Codegruppe enthält nur Code. Für Text neben dem Code oder einen Dateinamen darüber nimm Tabs mit Codeblöcken darin:

::: tabs
== GitHub Pages
Im Workflow bauen und `publish/public` hochladen:

```yaml [.github/workflows/deploy.yaml]
- run: npm ci
- run: npx clay build --strict
- uses: actions/upload-pages-artifact@v3
  with:
    path: publish/public
```
== Netlify
Netlify liest seine Einstellungen aus einer Datei im Repository:

```toml [netlify.toml]
[build]
  command = "npx clay build --strict"
  publish = "publish/public"
```
:::

- run: npm ci
- run: npx clay build --strict
- uses: actions/upload-pages-artifact@v3
  with:
    path: publish/public

[build]
  command = "npx clay build --strict"
  publish = "publish/public"

#Die Wahl der Leser bleibt

Wer einen Tab wählt, wählt den gleichnamigen Tab in jeder Gruppe der Seite, und Clay merkt es sich: Wer einmal pnpm gewählt hat, sieht pnpm in jeder Gruppe auf jeder Seite, auch beim nächsten Besuch. Die Wahl bleibt nur im Browser der Leser.

#Tastatur

Tab führt zu den Tabs, ← und → wechseln zwischen ihnen, Pos1 und Ende springen zum ersten und zum letzten Tab.

#Suche

Die Suche findet den Text jedes Tabs. Ein Ergebnis in einem verborgenen Tab zeigt diesen Tab.