hook-docs — ReactUse 流に hook をドキュメント化する
ドキュメントは Astro サイト packages/website-astro 内に配置します。サイドバーとルーティングはファイルパスから自動的に構築されるため、routes.json やサイドバー設定を編集する必要はありません。
ファイルの場所(ロケールごと)
packages/website-astro/src/content/docs/{category}/useX.mdx # 英語
packages/website-astro/src/content/docs-zh-hans/{category}/useX.mdx # 简体中文
packages/website-astro/src/content/docs-zh-hant/{category}/useX.mdx # 繁體中文
{category} は次のいずれかです:browser, effect, element, state, integrations。選択したフォルダそのものがカテゴリとなり、レジストリエントリと正規 URL(https://reactuse.com/{category}/usex/、小文字)を設定します。
フロントマター
スキーマは packages/website-astro/src/content.config.ts にあります。必須なのは title のみ;description、sidebar_label、sidebar_position はオプションです。既存のスタイルに合わせてください:
---
title: useX – State Hook Usage & Examples
sidebar_label: useX
description: "useX は React hook で …(一文。メタ説明として使用されます)"
---
ボディ構造
確立された形に従ってください(content/docs/browser/useClipboard.mdx を参照):
# useX
1行でその機能をまとめます。
hook を説明する短い段落。必要に応じて関連する MDN や仕様ページへのリンクを追加します。
### 使用するタイミング
- 具体的なユースケースを示す箇条書き
- もう一つ
### 注意点
- SSR の安全性 / ブラウザサポートの注意点
- その他の落とし穴
## 使用法
```tsx live
function Demo() {
const [value, set] = useX(0);
return <button onClick={() => set(value + 1)}>{value}</button>;
};
%%API%%
- ` ```tsx live ` フェンスは編集可能なライブデモをレンダリングします。デモは**インライン**で記述してください — hook のソースからインポートされるわけではありません。
- `%%API%%` を最終行として残します。ビルド時にこの行は(hook の `interface.ts` JSDoc から生成された)API テーブルに置き換えられます;まだ API ドキュメントが存在しない場合は、黙って削除されます。
## 翻訳
zh-Hans / zh-Hant ファイルは英語の構造を正確に反映してください — 散文とフロントマターの `title`/`description` を翻訳し、コードデモは同一に保ちます。
zh-Hans から zh-Hant への変換は単純な文字変換ではありません。以下の用語が異なります:
| 简体 | 繁體 | | 简体 | 繁體 |
|------|------|-----|------|------|
| 状态 | 狀態 | | 默认 | 預設 |
| 函数 | 函數 | | 设置 | 設定 |
| 参数 | 參數 | | 获取 | 獲取 |
| 组件 | 組件 | | 监听 | 監聽 |
| 类型 | 類型 | | 处理 | 處理 |
| 数组 | 數組 | | 实例 | 實例 |
| 对象 | 對象 | | 管理 / 配置 | 変更なし |
## 作成後 — レジストリを再生成する
```bash
bash scripts/generate-hook-registry.sh
これにより、英語のドキュメントフォルダを走査し、scripts/hook-registry.json を再書き込みします(hookName → { category, url })。ブログやドキュメントのリンクが正しく解決されるために必要です。新しい hook が正しいカテゴリと小文字の URL で表示されていることを確認してください。