hook-docs — documentar un hook al estilo ReactUse
Los documentos residen en el sitio Astro packages/website-astro. La barra lateral y las rutas se construyen automáticamente a partir de las rutas de archivo — no hay routes.json ni configuración de barra lateral que editar.
Ubicaciones de archivos (uno por idioma)
packages/website-astro/src/content/docs/{category}/useX.mdx # Inglés
packages/website-astro/src/content/docs-zh-hans/{category}/useX.mdx # 简体中文
packages/website-astro/src/content/docs-zh-hant/{category}/useX.mdx # 繁體中文
{category} es uno de: browser, effect, element, state, integrations. La carpeta que elijas es la categoría — define la entrada del registro y la URL canónica (https://reactuse.com/{category}/usex/, en minúsculas).
Frontmatter
El esquema está en packages/website-astro/src/content.config.ts — solo title es obligatorio; description, sidebar_label, sidebar_position son opcionales. Sigue el estilo existente:
---
title: useX – Uso y ejemplos de State Hook
sidebar_label: useX
description: "useX es un hook de React que … (una frase, usada como meta description)."
---
Estructura del cuerpo
Sigue la forma establecida (ver content/docs/browser/useClipboard.mdx):
# useX
Resumen de una línea sobre lo que hace.
Un párrafo corto explicando el hook, enlazando a la página MDN/especificación relevante cuando sea útil.
### Cuándo usar
- viñeta de un caso de uso concreto
- otro
### Notas
- seguridad SSR / advertencias de compatibilidad con navegadores
- cualquier detalle importante
## Uso
```tsx live
function Demo() {
const [valor, establecer] = useX(0);
return <button onClick={() => establecer(valor + 1)}>{valor}</button>;
}
%%API%%
- El bloque ```tsx live``` renderiza un demo interactivo y editable. Escribe el demo **en línea** — no se importa del código fuente del hook.
- Mantén `%%API%%` como la última línea. Se reemplaza en tiempo de compilación por la tabla de API generada (a partir del JSDoc del archivo `interface.ts` del hook); si aún no existe documentación de API, se elimina silenciosamente.
## Traducciones
Los archivos zh-Hans / zh-Hant reflejan exactamente la estructura en inglés — traduce el texto y el `title`/`description` del frontmatter, mantén el demo de código idéntico.
zh-Hans → zh-Hant no es una simple conversión de caracteres; estos términos difieren:
| 简体 | 繁體 | | 简体 | 繁體 |
|------|------|-----|------|------|
| 状态 | 狀態 | | 默认 | 預設 |
| 函数 | 函數 | | 设置 | 設定 |
| 参数 | 參數 | | 获取 | 獲取 |
| 组件 | 組件 | | 监听 | 監聽 |
| 类型 | 類型 | | 处理 | 處理 |
| 数组 | 數組 | | 实例 | 實例 |
| 对象 | 對象 | | 管理 / 配置 | sin cambios |
## Después de escribir — regenerar el registro
```bash
bash scripts/generate-hook-registry.sh
Esto recorre la carpeta de documentos en inglés y reescribe scripts/hook-registry.json
(nombreHook → { category, url }). Necesario para que los enlaces del blog y la documentación se resuelvan correctamente. Verifica que el nuevo hook aparezca con la categoría correcta y una URL en minúsculas.