hook-docs — Dokumentiere einen Hook im ReactUse-Stil
Die Docs befinden sich im Astro-Site-Verzeichnis packages/website-astro. Die Sidebar und die Routen werden automatisch aus den Dateipfaden erstellt — es gibt keine routes.json oder Sidebar-Konfiguration, die bearbeitet werden muss.
Datei-Standorte (eine pro Locale)
packages/website-astro/src/content/docs/{category}/useX.mdx # Englisch
packages/website-astro/src/content/docs-zh-hans/{category}/useX.mdx # 简体中文
packages/website-astro/src/content/docs-zh-hant/{category}/useX.mdx # 繁體中文
{category} ist einer von: browser, effect, element, state, integrations. Der von Ihnen gewählte Ordner ist die Kategorie — er legt den Registry-Eintrag und die kanonische URL fest (https://reactuse.com/{category}/usex/, in Kleinbuchstaben).
Frontmatter
Das Schema befindet sich in packages/website-astro/src/content.config.ts — nur title ist erforderlich; description, sidebar_label, sidebar_position sind optional. Halten Sie sich an den vorhandenen Stil:
---
title: useX – State Hook Usage & Examples
sidebar_label: useX
description: „useX ist ein React-Hook, der … (ein Satz, der als Meta-Beschreibung dient).“
---
Körper-Struktur
Folgen Sie der etablierten Form (siehe content/docs/browser/useClipboard.mdx):
# useX
Einzeilige Zusammenfassung dessen, was es tut.
Ein kurzer Absatz, der den Hook erklärt, mit einem Link zur entsprechenden MDN-/Spec-Seite, wo sinnvoll.
### Wann verwenden
- Bullet-Point eines konkreten Anwendungsfalls
- ein weiterer
### Hinweise
- SSR-Sicherheit / Browser-Support-Einschränkungen
- etwaige Fallstricke
## Verwendung
```tsx live
function Demo() {
const [value, set] = useX(0);
return <button onClick={() => set(value + 1)}>{value}</button>;
};
%%API%%
- Der ` ```tsx live `-Fence rendert ein live bearbeitbares Demo. Schreiben Sie das Demo **inline** — es wird nicht aus der Hook-Quelle importiert.
- Behalten Sie `%%API%%` als letzte Zeile. Es wird zur Build-Zeit durch die generierte API-Tabelle ersetzt (aus den JSDoc-Kommentaren der `interface.ts` des Hooks); falls noch kein API-Doc vorhanden ist, wird es stillschweigend entfernt.
## Übersetzungen
Die zh-Hans- / zh-Hant-Dateien spiegeln die englische Struktur exakt wider — übersetzen Sie den Fließtext und die `title`/`description` des Frontmatter, lassen Sie das Code-Demo identisch.
zh-Hans → zh-Hant ist keine reine Zeichenkonvertierung; diese Begriffe unterscheiden sich:
| 简体 | 繁體 | | 简体 | 繁體 |
|------|------|-----|------|------|
| 状态 | 狀態 | | 默认 | 預設 |
| 函数 | 函數 | | 设置 | 設定 |
| 参数 | 參數 | | 获取 | 獲取 |
| 组件 | 組件 | | 监听 | 監聽 |
| 类型 | 類型 | | 处理 | 處理 |
| 数组 | 數組 | | 实例 | 實例 |
| 对象 | 對象 | | 管理 / 配置 | unverändert |
## Nach dem Schreiben — Registry neu generieren
```bash
bash scripts/generate-hook-registry.sh
Dies durchläuft den englischen Docs-Ordner und schreibt scripts/hook-registry.json neu (hookName → { category, url }). Erforderlich, damit Blog-/Doc-Links korrekt aufgelöst werden. Überprüfen Sie, ob der neue Hook mit der richtigen Kategorie und einer URL in Kleinbuchstaben erscheint.