{"$schema":"https://doc-kit.nodejs.org/schemas/api-doc/1.0.1.json","id":"packages-react","path":"/packages/react","type":"module","module":"packages-react","title":"`@doc-kit/generator-react`","introducedIn":null,"sourceLink":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"The website generators for [doc-kit](https://doc-kit.nodejs.org): a static\ndocumentation site, rendered with Preact and bundled with Vite, and the outputs\nthat usually ship with one: the search index, a sitemap, and `llms.txt` files\nfor language models. Install it to build any of these. The JSON outputs come\nwith `@doc-kit/core` and don't need it.","summary":"The website generators for doc-kit: a static documentation site, rendered with Preact and bundled with Vite, and the outputs that usually ship with one: the search index, a sitemap, and `llms.txt` files for language models. Install it to build any of these. The JSON outputs come with `@doc-kit/core` and don't need it.","examples":[],"children":[{"kind":"section","id":"install","name":"Install","title":"Install","scope":"module","overloadOf":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"```sh\nnpm install --save-dev @doc-kit/cli @doc-kit/generator-react\n```\n\nOnce it's installed next to the CLI, the target names below resolve to this\npackage.","summary":"Once it's installed next to the CLI, the target names below resolve to this package.","examples":[{"language":"sh","displayName":null,"code":"npm install --save-dev @doc-kit/cli @doc-kit/generator-react"}],"children":[]},{"kind":"section","id":"usage","name":"Usage","title":"Usage","scope":"module","overloadOf":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"Build the site and its search index into `out/`:\n\n```sh\nnpx doc-kit generate -t html -t orama-db -i \"docs/**/*.md\" -o out\n```\n\nThe site shows a search box when the search index is built in the same run.\n\nFor a real project, keep the settings in a `doc-kit.config.mjs` at its root and\nrun `npx doc-kit generate`. Settings every generator shares go under `global`,\nand each generator's own options under its target name:\n\n```js displayName=\"doc-kit.config.mjs\"\nexport default {\n  target: ['html', 'orama-db', 'sitemap', 'llms-txt'],\n  global: {\n    input: ['docs/**/*.md'],\n    output: 'out',\n    // Where the site is published: the sitemap and llms.txt URLs start with it\n    baseURL: 'https://docs.example.com',\n  },\n  html: {\n    // Page titles become \"<page name> | <project>\"\n    title: '{project}',\n  },\n};\n```\n\n`{project}` is `global.project`, which defaults to the `name` in your\n`package.json`. The default title also has `{version}`, which is the version of\nNode.js running doc-kit unless you set `global.version`.\n[Getting started](https://doc-kit.nodejs.org/getting-started) walks through a\nfirst site.","summary":"Build the site and its search index into `out/`:","examples":[{"language":"sh","displayName":null,"code":"npx doc-kit generate -t html -t orama-db -i \"docs/**/*.md\" -o out"},{"language":"js","displayName":"doc-kit.config.mjs","code":"export default {\n  target: ['html', 'orama-db', 'sitemap', 'llms-txt'],\n  global: {\n    input: ['docs/**/*.md'],\n    output: 'out',\n    // Where the site is published: the sitemap and llms.txt URLs start with it\n    baseURL: 'https://docs.example.com',\n  },\n  html: {\n    // Page titles become \"<page name> | <project>\"\n    title: '{project}',\n  },\n};"}],"children":[]},{"kind":"section","id":"generators","name":"Generators","title":"Generators","scope":"module","overloadOf":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"| Target          | Writes                                                                                                                                              | Reference                                                                    |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |\n| `html`          | The site: a page per input file, `all.html`, `404.html`, their scripts and styles, and copies of `assets/`, `public/` and `static/` (`pathsToCopy`) | [Website](https://doc-kit.nodejs.org/generators/html)                        |\n| `section-pages` | A page per section of each module (`fs/readFile.html`), added to the site and sitemap                                                               | [Section pages](https://doc-kit.nodejs.org/generators/section-pages)         |\n| `orama-db`      | `orama-db.json`, the search index the site's search box loads                                                                                       | [Search index](https://doc-kit.nodejs.org/generators/orama-db)               |\n| `sitemap`       | `sitemap.xml`, listing every page for search engines                                                                                                | [Sitemap](https://doc-kit.nodejs.org/generators/sitemap)                     |\n| `llms-txt`      | `llms.txt`, a link to every page with its description, for language models                                                                          | [llms.txt](https://doc-kit.nodejs.org/generators/llms-txt)                   |\n| `llms-txt-full` | `llms-full.txt`, every page's Markdown in one file, each preceded by its URL                                                                        | [llms-full.txt](https://doc-kit.nodejs.org/generators/llms-txt#llms-fulltxt) |\n\nThe package also ships `jsx-ast`\n([Page JSX](https://doc-kit.nodejs.org/generators/jsx-ast)), the stage that\nturns each page's API entries into JSX for `html`. It runs whenever `html`\ndoes, so it isn't one of the CLI's targets.","summary":"The package also ships `jsx-ast` (Page JSX), the stage that turns each page's API entries into JSX for `html`. It runs whenever `html` does, so it isn't one of the CLI's targets.","examples":[],"children":[]},{"kind":"section","id":"how-they-fit-together","name":"How they fit together","title":"How they fit together","scope":"module","overloadOf":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"```text\nast → metadata ─┬→ jsx-ast → html\n                ├→ orama-db\n                ├→ sitemap\n                ├→ llms-txt\n                └→ llms-txt-full\n```\n\n[`ast`](https://doc-kit.nodejs.org/generators/ast) and\n[`metadata`](https://doc-kit.nodejs.org/generators/metadata) come from\n`@doc-kit/core`. They parse your sources into API entries once per run, however\nmany of these targets read them.\n\n`section-pages` writes nothing itself. It adds its pages to the entries that\n`jsx-ast` and `sitemap` read, so `-t section-pages` on its own builds the site\nand the sitemap with section pages, while `-t html -t section-pages` only adds\nthem to the site.","summary":"`ast` and `metadata` come from `@doc-kit/core`. They parse your sources into API entries once per run, however many of these targets read them.","examples":[{"language":"text","displayName":null,"code":"ast → metadata ─┬→ jsx-ast → html\n                ├→ orama-db\n                ├→ sitemap\n                ├→ llms-txt\n                └→ llms-txt-full"}],"children":[]},{"kind":"section","id":"customizing-the-site","name":"Customizing the site","title":"Customizing the site","scope":"module","overloadOf":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"The site's content, look and build are options of `html`. These are the ones\nyou'll reach for first:\n\n* `title` {string} The text after the page name in every page's title.\n  **Default:** `'{project} {version} Documentation'`.\n* `head` {Object} `<meta>` and `<link>` tags, and raw markup, for the `<head>`.\n  **Default:** `{ meta: [], links: [], html: [] }`.\n* `navigation` {Object} The sidebar groups, the navigation bar's links, and\n  whether to link the previous and next page. **Default:**\n  `{ showCrossLinks: false }`.\n* `imports` {Object} Your own components for the `#theme/*` parts of the page:\n  logo, navigation bar, sidebar, meta bar, footer and layout. **Default:** the\n  built-in components.\n* `stylesheets` {string[]} Stylesheets bundled after the built-in one, so your\n  rules win. **Default:** `[]`.\n* `components` {Object} Components you can use in MDX, by tag name.\n  **Default:** `{}`.\n\n[Customizing the site](https://doc-kit.nodejs.org/customization) walks through\nthem, and the [Website](https://doc-kit.nodejs.org/generators/html) reference\nlists every option.","summary":"The site's content, look and build are options of `html`. These are the ones you'll reach for first:","examples":[],"children":[]},{"kind":"section","id":"exports","name":"Exports","title":"Exports","scope":"module","overloadOf":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"| Import                                        | What it is                                                                                                                                                                                  |\n| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `@doc-kit/generator-react/<target>`           | Each generator above, and `jsx-ast`, as the default export. The target names resolve to these, and a custom generator can name one in `dependsOn`.                                          |\n| `@doc-kit/generator-react/html/bundlers/vite` | `createViteBundler(options)`, the default bundler adapter: pass it your Vite configuration and set the result as `html.bundler`.                                                            |\n| `@doc-kit/generator-react/html/ui/*`          | The site's UI source, for theme components that build on it, such as `components/Layout/index.jsx` (the default layout) and `islands/withIsland.jsx` (hydrates a component in the browser). |","summary":"","examples":[],"children":[]},{"kind":"section","id":"learn-more","name":"Learn more","title":"Learn more","scope":"module","overloadOf":null,"stability":null,"added":[],"deprecated":[],"removed":[],"napiVersion":[],"changes":[],"description":"* [Customizing the site](https://doc-kit.nodejs.org/customization): colors,\n  logo, navigation, theme slots and MDX components.\n* [Publishing your docs](https://doc-kit.nodejs.org/publishing): putting the\n  site online.\n* [Configuration](https://doc-kit.nodejs.org/configuration): every global\n  option.\n* [Creating generators](https://doc-kit.nodejs.org/creating-generators):\n  building on these generators' output.","summary":"","examples":[],"children":[]}]}