[
{
"path": ".changeset/config.json",
"content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@2.0.1/schema.json\",\n \"changelog\": \"@changesets/cli/changelog\",\n \"commit\": false,\n \"fixed\": [[\"nextra\", \"nextra-theme-docs\", \"nextra-theme-blog\"]],\n \"linked\": [],\n \"access\": \"public\",\n \"baseBranch\": \"main\",\n \"updateInternalDependencies\": \"patch\",\n \"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH\": {\n \"onlyUpdatePeerDependentsWhenOutOfRange\": true\n },\n \"ignore\": [\n \"@nextra/tsdoc\",\n \"example-blog\",\n \"example-docs\",\n \"swr-site\",\n \"docs\",\n \"@nextra/prettier-config\",\n \"@nextra/eslint-config\"\n ]\n}\n"
},
{
"path": ".editorconfig",
"content": "[*]\nindent_style = space\nindent_size = 2\n"
},
{
"path": ".github/CODE_OF_CONDUCT.md",
"content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n- Demonstrating empathy and kindness toward other people\n- Being respectful of differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the overall\n community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language or imagery, and sexual attention or advances of\n any kind\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or email address,\n without their explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at g@shud.in. All\ncomplaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of\nactions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or permanent\nban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within the\ncommunity.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by\n[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: bug\nassignees: ''\n---\n\n**Describe the bug** A clear and concise description of what the bug is.\n\n**To Reproduce** Steps to reproduce the behavior:\n\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior** A clear and concise description of what you expected to\nhappen.\n\n**Screenshots** If applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n\n- OS: [e.g. iOS]\n- Browser [e.g. chrome, safari]\n- Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n\n- Device: [e.g. iPhone6]\n- OS: [e.g. iOS8.1]\n- Browser [e.g. stock browser, safari]\n- Version [e.g. 22]\n\n**Additional context** Add any other context about the problem here.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: enhancement\nassignees: ''\n---\n\n**Is your feature request related to a problem? Please describe.** A clear and\nconcise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like** A clear and concise description of what you\nwant to happen.\n\n**Describe alternatives you've considered** A clear and concise description of\nany alternative solutions or features you've considered.\n\n**Additional context** Add any other context or screenshots about the feature\nrequest here.\n"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"content": "\n\n## Why:\n\nCloses:\n\n\n\n## What's being changed (if available, include any code snippets, screenshots, or gifs):\n\n\n\n## Check off the following:\n\n- [ ] I have reviewed my changes in staging, available via the **View\n deployment** link in this PR's timeline (this link will be available after\n opening the PR).\n"
},
{
"path": ".github/workflows/lint.yml",
"content": "name: Lint\n\non:\n pull_request:\n branches: [main, v4-v2]\n\njobs:\n lint:\n runs-on: ubuntu-latest\n\n steps:\n - name: Cancel Previous Runs\n uses: styfle/cancel-workflow-action@0.12.1\n with:\n access_token: ${{ github.token }}\n\n - name: Check out code\n uses: actions/checkout@v4\n\n - name: Cache turbo build setup\n uses: actions/cache@v4\n with:\n path: .turbo\n key: ${{ runner.os }}-turbo-${{ github.sha }}\n restore-keys: |\n ${{ runner.os }}-turbo-\n\n - name: Install pnpm\n uses: pnpm/action-setup@v4\n\n - name: Install Node.js\n uses: actions/setup-node@v4\n with:\n node-version-file: .node-version\n cache: pnpm\n\n - name: Install Dependencies\n run: pnpm i\n\n - name: Lint Prettier\n run: pnpm lint:prettier\n\n - name: Lint ESLint\n run: pnpm lint\n"
},
{
"path": ".github/workflows/release.yml",
"content": "name: Release\n\non:\n push:\n branches: [main, v4-v2]\n\njobs:\n release:\n if: github.repository == 'shuding/nextra'\n\n runs-on: ubuntu-latest\n\n steps:\n - name: Cancel Previous Runs\n uses: styfle/cancel-workflow-action@0.12.1\n with:\n access_token: ${{ github.token }}\n\n - name: Check out code\n uses: actions/checkout@v4\n\n - name: Cache turbo build setup\n uses: actions/cache@v4\n with:\n path: .turbo\n key: ${{ runner.os }}-turbo-${{ github.sha }}\n restore-keys: |\n ${{ runner.os }}-turbo-\n\n - name: Install pnpm\n uses: pnpm/action-setup@v4\n\n - name: Install Node.js\n uses: actions/setup-node@v4\n with:\n node-version-file: .node-version\n cache: pnpm\n\n - name: Install Dependencies\n run: pnpm i\n\n - name: Clean\n run: pnpm clean\n\n - name: Build\n run: pnpm build\n\n - name: Type Check\n run: pnpm types:check\n\n - name: Create Release Pull Request or Publish to npm\n uses: changesets/action@v1\n with:\n publish: pnpm release\n version: pnpm run version # should be `pnpm run`\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n"
},
{
"path": ".github/workflows/test.yml",
"content": "name: Test\n\non:\n pull_request:\n branches: [main, v4-v2]\n\njobs:\n test:\n name: Test (${{matrix.os}})\n runs-on: ${{ matrix.os }}\n strategy:\n matrix:\n os: [ubuntu-latest, windows-latest]\n\n steps:\n - name: Cancel Previous Runs\n uses: styfle/cancel-workflow-action@0.12.1\n with:\n access_token: ${{ github.token }}\n\n - name: Check out code\n uses: actions/checkout@v4\n\n - name: Cache turbo build setup\n uses: actions/cache@v4\n with:\n path: .turbo\n key: ${{ runner.os }}-turbo-${{ github.sha }}\n restore-keys: |\n ${{ runner.os }}-turbo-\n\n - name: Install pnpm\n uses: pnpm/action-setup@v4\n\n - name: Install Node.js\n uses: actions/setup-node@v4\n with:\n node-version-file: .node-version\n cache: pnpm\n\n - run: pnpm i\n\n - run: pnpm build:all\n\n - run: pnpm test\n\n - run: pnpm clean\n\n - run: pnpm types:check\n"
},
{
"path": ".gitignore",
"content": ".DS_Store\n.next/\n.tsup/\nnode_modules/\n*.log\ndist/\n.turbo/\nout/\n\n.vercel/\n.idea/\n.eslintcache\n.env\n\ntsup.config.bundled*\ntsconfig.tsbuildinfo\ntsconfig.vitest-temp.json\n\n_pagefind/\ndocs/public/sitemap.xml\nnext-env.d.ts\n"
},
{
"path": ".node-version",
"content": "22\n"
},
{
"path": ".npmrc",
"content": "strict-peer-dependencies=false\nshell-emulator=true\nenable-pre-post-scripts=true\n"
},
{
"path": ".prettierignore",
"content": "pnpm-lock.yaml\n.changeset/*.md\nCHANGELOG.md\ngenerated-page-map.ts\npackages/tsdoc/src/__tests__/snapshots\n\nexamples/swr-site/nextra-remote-filepaths/*.json\n\nexamples/docs/src/content/features/mdx.mdx\ndocs/app/docs/guide/ssg/page.mdx\ndocs/app/docs/guide/syntax-highlighting/page.mdx\n\n# contains mdx comments\ndocs/app/docs/blog-theme/start/page.mdx\ntypes.generated.ts\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2020 Shu Ding\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# Nextra\n\nSimple, powerful and flexible site generation framework with everything you love\nfrom Next.js.\n\n## Documentation\n\nhttps://nextra.site\n\n## Development\n\n### Installation\n\nThe Nextra repository uses [PNPM Workspaces](https://pnpm.io/workspaces) and\n[Turborepo](https://github.com/vercel/turborepo).\n\n1. Run `corepack enable` to enable Corepack.\n\n > If the command above fails, run `npm install -g corepack@latest` to install\n > the latest version of\n > [Corepack](https://github.com/nodejs/corepack?tab=readme-ov-file#manual-installs).\n\n2. Run `pnpm install` to install the project's dependencies.\n\n### Build `nextra`\n\n```bash\npnpm --filter nextra build\n```\n\nWatch mode: `pnpm --filter nextra dev`\n\n### Build `nextra-theme-docs`\n\n```bash\npnpm --filter nextra-theme-docs build\n```\n\n### Development\n\nYou can also debug them together with a website locally. For instance, to start\n`examples/docs` locally, run\n\n```bash\npnpm --filter example-docs dev\n```\n\nAny change to `example/docs` will be re-rendered instantly.\n\nIf you update the core or theme packages, a rebuild is required. Or you can use\nthe watch mode for both Nextra and the theme in separated terminals.\n\n## Sponsors\n\n
\n ))\n}\n"
},
{
"path": "docs/app/docs/advanced/customize-the-cascade-layers/page.mdx",
"content": "---\nsidebarTitle: Customize Cascade Layers\n---\n\nimport { Steps } from 'nextra/components'\n\n# Customize the Cascade Layers\n\nIn some scenarios, you may need more control over the Nextra predefined CSS to\navoid unintended overrides of styles within cascade layers. Below is an example\nof how `nextra-theme-docs` uses\n[postcss-import](https://github.com/postcss/postcss-import) to place predefined\nCSS into a specified cascade layer:\n\n\n\n## Install `postcss-import`\n\nInstall `postcss-import` and add it to `postcss.config.mjs`:\n\n```js filename=\"postcss.config.mjs\"\nexport default {\n plugins: {\n 'postcss-import': {}\n // ... your other PostCSS plugins (e.g., `autoprefixer`, `cssnano`)\n }\n}\n```\n\n## Set up the cascade layers\n\nIn your CSS file (e.g. `styles.css`), import the `nextra-docs-theme` CSS and\nspecify the layers:\n\n```css filename=\"styles.css\"\n@layer nextra, my-base;\n\n@import 'nextra-theme-docs/dist/style.css' layer(nextra);\n\n@layer my-base {\n /* my base styles */\n}\n```\n\n## Import your CSS file\n\nImport your CSS file at the top-level layout of your application (e.g.\n`app/layout.jsx`) to apply the styles.\n\n```jsx filename=\"app/layout.jsx\"\nimport '../path/to/your/styles.css'\n\nexport default async function RootLayout({ children }) {\n // ... Your layout logic here\n}\n```\n\n\n"
},
{
"path": "docs/app/docs/advanced/latex/page.mdx",
"content": "---\nicon: FormulaIcon\n---\n\nimport { compileMdx } from 'nextra/compile'\nimport {\n Callout,\n MathJax,\n MathJaxContext,\n Steps,\n Tabs\n} from 'nextra/components'\nimport { MDXRemote } from 'nextra/mdx-remote'\n\n{/* is unsupported in Metadata API https://nextjs.org/docs/app/api-reference/functions/generate-metadata#unsupported-metadata */}\n\n\n\n# LaTeX\n\nNextra can use [KaTeX](https://katex.org) to pre-render LaTeX expressions\ndirectly in MDX or [MathJax](https://mathjax.org) to dynamically render math in\nthe browser.\n\n## Setup\n\n\n\n### Enable the `latex` option\n\nBy default, LaTeX is disabled. To enable it, you need to set the `latex` option\nin your `next.config.mjs` file:\n\n```js filename=\"next.config.mjs\" {4}\nimport nextra from 'nextra'\n\nconst withNextra = nextra({\n latex: true\n})\n\nexport default withNextra()\n```\n\nA value of `true{:js}` will use KaTeX as the math renderer. To explicitly\nspecify the renderer, you may instead provide an object\n`{ renderer: 'katex' }{:js}` or `{ renderer: 'mathjax' }{:js}` as the value to\n`latex: ...`.\n\nWhen enabled, the required CSS and fonts will be automatically included in your\nsite, and you can start writing math expressions by enclosing inline math in\n`$...$` or display math in a `math`-labeled fenced code block:\n\n````mdx\n```math\n\\int x^2\n```\n````\n\n### Apply styles\n\n\n This is applicable only to KaTeX as the math renderer.\n\n\n\n\n1. Install the `katex` package\n\n```bash npm2yarn\nnpm i katex\n```\n\n2. Import CSS in the root layout\n\n```js filename=\"app/layout.jsx\"\nimport 'katex/dist/katex.min.css'\n```\n\n\n\nAdd `{:jsx}`\ninside `` element in your root `layout` file since `{:jsx}`\n[isn't supported with Next.js Metadata API](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#unsupported-metadata).\n\nAlternatively, you can include `{:jsx}` directly in\nyour MDX file:\n\n````mdx filename=\"katex.mdx\"\n\n\n# My page with single usage of KaTeX\n\n```math\n\\int_2^3x^3\\,\\mathrm{d}x\n```\n````\n\n\n\n\n\n## Example\n\nFor example, the following Markdown code:\n\n````md filename=\"page.md\"\nThe **Pythagorean equation** is $a=\\sqrt{b^2 + c^2}$ and the quadratic formula:\n\n```math\nx=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}\n```\n````\n\nwill be rendered as:\n\n
\nThe **Pythagorean equation** is $a=\\sqrt{b^2 + c^2}$ and the quadratic formula:\n\n```math\nx=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}\n```\n\n
\n\nYou can still use [Markdown and MDX syntax](../guide/markdown) in the same line\nas your LaTeX expression.\n\n> [!TIP]\n>\n> If you want to display `$` in your content instead of rendering it as an\n> equation, you can escape it with a backslash (`\\`). For example `\\$e = mc^2\\$`\n> will be rendered as \\$e = mc^2\\$.\n\n## API\n\n### KaTeX\n\n`rehype-katex` is used to pre-render LaTeX expressions in your content. You can\npass supported [KaTeX options](https://katex.org/docs/options) via the `options`\nkey in your Nextra config. For example, to add a macro `\\RR` that renders as\n`\\mathbb{R}` you could use the following configuration.\n\n```js filename=\"next.config.mjs\" {4-8}\nconst withNextra = nextra({\n latex: {\n renderer: 'katex',\n options: {\n macros: {\n '\\\\RR': '\\\\mathbb{R}'\n }\n }\n }\n})\n```\n\nSee [KaTeX's documentation](https://katex.org/docs/supported) for a list of\nsupported commands.\n\n### MathJax\n\nWhen MathJax is enabled (by setting `latex: { renderer: 'mathjax' }{:js}`) math\nis rendered on page load via\n[`better-react-mathjax`](https://github.com/fast-reflexes/better-react-mathjax)\ninstead of being pre-rendered. By default, **MathJax is served via the MathJax\nCDN** instead of the files being directly included in your site.[^1]\n\n[^1]:\n This can be changed by setting\n [`{ options: { src: ... } }{:js}`](https://github.com/fast-reflexes/better-react-mathjax#src-string--undefined)\n in the Nextra config.\n\nMathJax rendering is enabled by setting `renderer: 'mathjax'{:js}` in your\nNextra config.\n\n```js filename=\"next.config.mjs\" {3}\nconst withNextra = nextra({\n latex: {\n renderer: 'mathjax'\n }\n})\n```\n\nYou can pass additional options to `better-react-mathjax` via the `options` key\nin your Nextra config. The `config: ...` option sets the\n[MathJax configuration](https://docs.mathjax.org/en/latest/options/index.html).\nHowever, note that you can only pass serializable options to\n`better-react-mathjax` via the `options` key in your Nextra config.[^2]\n\n[^2]:\n To pass non-serializable objects like Functions, you must use the\n `{:jsx}` component directly in your source.\n\nFor example, to configure MathJax to render `\\RR` as `\\mathbb{R}` you could use\nthe following configuration.\n\n```js filename=\"next.config.mjs\" {4-12}\nconst withNextra = nextra({\n latex: {\n renderer: 'mathjax',\n options: {\n config: {\n tex: {\n macros: {\n RR: '\\\\mathbb{R}'\n }\n }\n }\n }\n }\n})\n```\n\n#### MathJax CDN\n\nBy default, MathJax is served via the MathJax CDN. To serve files from another\nlocation (including locally in your project), you must pass the `src: ...`\noption to the latex config. See the\n[better-react-mathjax documentation](https://github.com/fast-reflexes/better-react-mathjax#src-string--undefined)\nfor details about the `src` option. Additionally, you may need to copy the\nMathJax distribution into your `/public` folder for it to be served locally.\n\n## KaTeX vs. MathJax\n\nWith KaTeX, math is pre-rendered which means flicker-free and faster page loads.\nHowever, KaTeX does not support all the features of MathJax, especially features\nrelated to accessibility.\n\nThe following two examples show the same formula rendered with KaTeX (first) and\nMathJax (second).\n\n```math\n\\int_2^3x^3\\,\\mathrm{d}x\n```\n\n\n\nBecause of MathJax's accessibility features, the second formula is\ntab-accessible and has a context menu that helps screen readers reprocess math\nfor the visually impaired.\n\nexport async function MathJaxExample() {\n const rawMdx = `~~~math\n\\\\int_2^3x^3\\\\,\\\\mathrm{d}x\n~~~`\n const rawJs = await compileMdx(rawMdx, {\n latex: {\n renderer: 'mathjax',\n options: {\n config: {\n tex: {\n macros: {\n RR: '\\\\mathbb{R}'\n }\n }\n }\n }\n }\n })\n return (\n \n )\n}\n"
},
{
"path": "docs/app/docs/advanced/mermaid/page.mdx",
"content": "---\nicon: DiagramIcon\n---\n\nimport { compileMdx } from 'nextra/compile'\nimport { Mermaid } from 'nextra/components'\nimport { MDXRemote } from 'nextra/mdx-remote'\n\n# Mermaid\n\nNextra supports [mermaid](https://mermaid.js.org) diagrams. Like in GitHub you\ncan use it in your Markdown files by using the `mermaid` code block language.\nOut of the box, Nextra uses\n[`@theguild/remark-mermaid`](https://npmjs.com/package/@theguild/remark-mermaid)\npackage that replaces the code block with the `` component.\n\n## Example\n\n\n\nexport async function Demo() {\n const mermaidCodeblock = `\\`\\`\\`mermaid\ngraph TD;\nsubgraph AA [Consumers]\nA[Mobile app];\nB[Web app];\nC[Node.js client];\nend\nsubgraph BB [Services]\nE[REST API];\nF[GraphQL API];\nG[SOAP API];\nend\nZ[GraphQL API];\nA --> Z;\nB --> Z;\nC --> Z;\nZ --> E;\nZ --> F;\nZ --> G;\n\\`\\`\\``\n const rawJs = await compileMdx(`${mermaidCodeblock}\n## Usage\n~~~md filename=\"Markdown\"\n${mermaidCodeblock}\n~~~\n`)\n return \n}\n"
},
{
"path": "docs/app/docs/advanced/npm2yarn/page.mdx",
"content": "---\nicon: TerminalIcon\n---\n\nimport { compileMdx } from 'nextra/compile'\nimport { Tabs } from 'nextra/components'\nimport { MDXRemote } from 'nextra/mdx-remote'\n\n# Npm2Yarn\n\nNextra uses\n[`@theguild/remark-npm2yarn`](https://npmjs.com/package/@theguild/remark-npm2yarn)\npackage that replaces the code block that has `npm2yarn` metadata with\n[`` and `` components](/docs/built-ins/tabs) from\n`nextra/components`.\n\nThe chosen tab is saved in the local storage, which will be chosen in future\npage renders.\n\n## Example\n\n\n\nexport async function Page() {\n const codeBlock = `\\`\\`\\`sh npm2yarn\nnpm i -D @graphql-eslint/eslint-plugin\n\\`\\`\\``\n const rawJs = await compileMdx(`${codeBlock}\n## Usage\n~~~md filename=\"Markdown\" /npm2yarn/\n${codeBlock}\n~~~`)\n return \n}\n"
},
{
"path": "docs/app/docs/advanced/page.mdx",
"content": "---\nasIndexPage: true\n---\n\nimport {\n CloudIcon,\n DiagramIcon,\n FormulaIcon,\n TableIcon,\n TailwindIcon\n} from '@components/icons'\nimport { TerminalIcon, TypeScriptIcon } from 'nextra/icons'\nimport { OverviewPage } from '../../_components/overview-page'\n\n# Advanced\n\n\n"
},
{
"path": "docs/app/docs/advanced/remote/page.mdx",
"content": "---\nicon: CloudIcon\n---\n\nimport fs from 'node:fs/promises'\nimport { compileMdx } from 'nextra/compile'\nimport { Steps } from 'nextra/components'\nimport { MDXRemote } from 'nextra/mdx-remote'\n\nexport async function Example() {\n const filename = '/graphql-eslint/[[...slug]]/page.tsx'\n const pageContent = await fs.readFile(\n `../examples/swr-site/app/[lang]/${filename}`,\n 'utf8'\n )\n const rawJs = await compileMdx(\n `~~~jsx filename=\"app${filename}\" {27} showLineNumbers\n${pageContent\n .replace(\n \"lang: 'en',\\n ...(route && { slug: route.split('/') })\",\n \"slug: route.split('/')\"\n )\n .trimEnd()}\n~~~`,\n { defaultShowCopyCode: true }\n )\n return \n}\n\n# Remote Content\n\n> [!NOTE]\n>\n> You can check out the\n> [SWR i18n example](https://github.com/shuding/nextra/blob/main/examples/swr-site/app/%5Blang%5D/graphql-eslint/%5B%5B...slug%5D%5D/page.tsx)\n> source code.\n\n\n\n## Create `[[...slug]]/page.tsx` file\n\nCreate `[[...slug]]/page.tsx` file in `app/` directory with the following\ncontent:\n\n\n\n## Enhance `pageMap`\n\nYou need to modify `pageMap` list in `layout` file, to properly display sidebar\nand mobile navigation.\n\n```tsx filename=\"app/layout.tsx\"\nimport { getPageMap } from 'nextra/page-map'\nimport { pageMap as graphqlEslintPageMap } from './graphql-eslint/[[...slug]]/page'\n\n// ...\n\nconst pageMap = [...(await getPageMap()), graphqlEslintPageMap]\n```\n\n\n"
},
{
"path": "docs/app/docs/advanced/table/page.mdx",
"content": "---\nicon: TableIcon\n---\n\n# Rendering Tables\n\nThis guide covers different ways to render tables in MDX, including GFM syntax\nand literal HTML tag.\n\n## GFM syntax\n\nIn Markdown, it is preferable to write tables via\n[GFM syntax](https://github.github.com/gfm/#tables-extension-).\n\n```mdx filename=\"MDX\"\n| left | center | right |\n| :----- | :----: | ----: |\n| foo | bar | baz |\n| banana | apple | kiwi |\n```\n\nwill be rendered as:\n\n| left | center | right |\n| :----- | :----: | ----: |\n| foo | bar | baz |\n| banana | apple | kiwi |\n\n## Literal HTML tables\n\nIf you try to render table with literal HTML elements `
{:js}`,\n`{:js}`, `{:js}`, `
{:js}`, `
{:js}` and `
{:js}` – your\ntable will be unstyled because\n[MDX](https://mdxjs.com/docs/using-mdx/#components) doesn't replace literal HTML\nelements with components provided by `useMDXComponents(){:js}`[^1].\n\n> [!TIP]\n>\n> Instead, use the [built-in `
` component](/docs/built-ins/table)\n> available via `nextra/components`.\n\n## Changing default behaviour\n\nIf you want to use standard HTML elements for your tables but have them styled\nwith components provided by `useMDXComponents(){:js}`[^1], you can do this by\nconfiguring Nextra.\n\nTo achieve this, pass the `whiteListTagsStyling` option to the Nextra function,\nincluding an array of tags you want to replace.\n\nHere's an example configuration in your `next.config.mjs` file:\n\n```js filename=\"next.config.mjs\" {4}\nimport nextra from 'nextra'\n\nconst withNextra = nextra({\n whiteListTagsStyling: ['table', 'thead', 'tbody', 'tr', 'th', 'td']\n})\n\nexport default withNextra()\n```\n\nIn this example, the tags `
`, ``, ``, `
`, `
`, and\n`
` will be replaced with corresponding MDX components, allowing for\ncustomized styling.\n\n[^1]: https://mdxjs.com/packages/react/#usemdxcomponentscomponents\n"
},
{
"path": "docs/app/docs/advanced/tailwind-css/page.mdx",
"content": "---\nicon: TailwindIcon\n---\n\nimport { Steps } from 'nextra/components'\n\n# Tailwind CSS\n\nTailwind CSS is a CSS framework that provides a set of pre-defined CSS classes\nto quickly style elements.\n\n\n\n## Follow the official guide\n\nFollow the official\n[Tailwind CSS guide for Next.js](https://tailwindcss.com/docs/guides/nextjs) to\nset up Tailwind CSS for your project.\n\n## Create the `globals.css` file\n\nImport Tailwind CSS into `globals.css`:\n\n```css filename=\"globals.css\"\n@import 'tailwindcss';\n\n/* Optional: import Nextra theme styles */\n@import 'nextra-theme-docs/style.css'; /* or nextra-theme-blog/style.css */\n\n@variant dark (&:where(.dark *));\n```\n\n## Import styles in the root layout\n\nTo apply the styles globally, import the `globals.css` file in your root layout\nfile:\n\n```jsx filename=\"app/layout.jsx\"\nimport '../path/to/your/globals.css'\n\nexport default async function RootLayout({ children }) {\n // ... Your layout logic here\n}\n```\n\n\n"
},
{
"path": "docs/app/docs/advanced/twoslash/page.mdx",
"content": "# Twoslash Support\n\nTwoslash provides an inline type hove inside the code block.\n\n## Basic usage\n\nYou can enable twoslash to your code blocks by adding a `twoslash` metadata:\n\n{/* prettier-ignore */}\n````md copy=false filename=\"Markdown\"\n```ts twoslash\n// @errors: 2540\ninterface Todo {\n title: string\n}\n\nconst todo: Readonly = {\n title: 'Delete inactive users'.toUpperCase()\n // ^?\n}\n\ntodo.title = 'Hello'\n\nNumber.parseInt('123', 10)\n// ^|\n // Just comments, so Popup will be\n // not behind the viewport of ``\n // element due his `position: absolute` style\n //\n```\n````\n\nRenders:\n\n{/* prettier-ignore */}\n```ts twoslash\n// @errors: 2540\ninterface Todo {\n title: string\n}\n\nconst todo: Readonly = {\n title: 'Delete inactive users'.toUpperCase()\n // ^?\n}\n\ntodo.title = 'Hello'\n\nNumber.parseInt('123', 10)\n// ^|\n\n\n\n\n```\n\n## Custom log message\n\nYou can add log message to your code by adding:\n\n- `@log: ` Custom log message\n- `@error: ` Custom error message\n- `@warn: ` Custom warn message\n- `@annotate: ` Custom annotate message\n\n```ts twoslash\n// @log: Custom log message\nconst a = 1\n// @error: Custom error message\nconst b = 1\n// @warn: Custom warning message\nconst c = 1\n// @annotate: Custom annotation message\n```\n"
},
{
"path": "docs/app/docs/advanced/typescript/page.mdx",
"content": "---\nicon: TypeScriptIcon\n---\n\nimport { Steps } from 'nextra/components'\n\n# TypeScript\n\nNextra is built with TypeScript and provides excellent TypeScript support out of\nthe box. This guide will help you leverage TypeScript in your Nextra project.\n\n## Getting started\n\nTo use TypeScript in your Nextra project, you need to:\n\n\n### Install TypeScript and types packages as `devDependencies`\n\n```sh npm2yarn\nnpm i -D typescript @types/react @types/node\n```\n\n### `tsconfig.json`\n\nYou can manually create a `tsconfig.json` file in the root of your project or\nrename the extension of some of the existing files to `.ts` or `.tsx` and then\nNext.js will detect TypeScript in your project and create a `tsconfig.json` file\nfor you.\n\n\n\n## Type definitions\n\nNextra provides type definitions for distribution code for its components and\nconfigurations. You can leverage these types by renaming your theme\nconfiguration file to `.ts` or `.tsx` extension and importing a theme config\ntype, e.g. for `nextra-theme-docs`:\n\n```tsx filename=\"theme.config.tsx\"\nimport type { DocsThemeConfig } from 'nextra-theme-docs'\n\nconst config: DocsThemeConfig = {\n // Your theme configuration\n}\nexport default config\n```\n\nBy leveraging TypeScript in your Nextra project, you can catch errors early,\nimprove code quality, and enhance the developer experience with better\nautocompletion and type inference.\n"
},
{
"path": "docs/app/docs/blog-theme/get-posts-and-tags/page.mdx",
"content": "---\nicon: FilesIcon\n---\n\nimport { ExampleCode } from 'components/example-code'\n\n# Get Posts and Their Tags\n\nThe following code snippet demonstrates how to retrieve all posts along with\ntheir associated tags.\n\n\n"
},
{
"path": "docs/app/docs/blog-theme/page.mdx",
"content": "---\nasIndexPage: true\nsidebarTitle: Blog Theme\n---\n\nimport {\n ChevronRightIcon,\n FilesIcon,\n RSSIcon,\n TagsIcon\n} from '@components/icons'\nimport { FileIcon } from 'nextra/icons'\nimport { OverviewPage } from '../../_components/overview-page'\n\n# Nextra Blog Theme\n\n\n"
},
{
"path": "docs/app/docs/blog-theme/posts/page.mdx",
"content": "---\nicon: FileIcon\n---\n\nimport { ExampleCode } from 'components/example-code'\n\n# Posts Page\n\nThe following code snippet demonstrates how to create `/posts` page.\n\n\n"
},
{
"path": "docs/app/docs/blog-theme/rss/page.mdx",
"content": "---\nicon: RSSIcon\n---\n\nimport { ExampleCode } from 'components/example-code'\n\n# Generate RSS feed\n\nThe following code snippet demonstrates how to create `/rss.xml` route.\n\n\n"
},
{
"path": "docs/app/docs/blog-theme/start/page.mdx",
"content": "---\nicon: ChevronRightIcon\n---\n\nimport InstallNextraTheme from '@components/install-nextra-theme.mdx'\nimport ReadyToGo from '@components/ready-to-go.mdx'\nimport { ExampleCode } from '@components/example-code'\nimport { Steps } from 'nextra/components'\n\n# Get Started\n\n> [!NOTE]\n>\n> An example of the blog theme can be found [here](https://demo.vercel.blog),\n> with source code [here](https://github.com/shuding/nextra/tree/main/examples/blog).\n\nSimilar to the [Docs Theme](/docs/docs-theme/start), you can install the blog\ntheme with the following commands:\n\n## Start as a new project\n\n\n### Install\n\nTo create a Nextra Blog site manually, you have to install **Next.js**,\n**React**, **Nextra**, and **Nextra Blog Theme**. In your project directory, run\nthe following command to install the dependencies:\n\n```sh npm2yarn\nnpm i next react react-dom nextra nextra-theme-blog\n```\n\n> [!NOTE]\n>\n> If you already have Next.js installed in your project, you only need to\n> install `nextra` and `nextra-theme-blog` as the add-ons.\n\n\n\n\n\n{/*\n\n### Create Blog Theme Config\n\nLastly, create the corresponding `theme.config.jsx` file in your project's root\ndirectory. This will be used to configure the Nextra Blog theme:\n\n```jsx filename=\"theme.config.jsx\"\nexport default {\n footer:
,\n head: ({ title, meta }) => (\n <>\n {meta.description && (\n \n )}\n {meta.tag && }\n {meta.author && }\n \n ),\n readMore: 'Read More →',\n postFooter: null,\n darkMode: false,\n navs: [\n {\n url: 'https://github.com/shuding/nextra',\n name: 'Nextra'\n }\n ]\n}\n```\n\n*/}\n\n\n\n\n\n## Layout Props\n\n\n"
},
{
"path": "docs/app/docs/blog-theme/tags/page.mdx",
"content": "---\nicon: TagsIcon\n---\n\nimport { ExampleCode } from 'components/example-code'\n\n# Tags Page\n\nThe following code snippet demonstrates how to create `/tags/:id` pages.\n\n\n"
},
{
"path": "docs/app/docs/built-ins/[name]/page.tsx",
"content": "import path from 'node:path'\nimport { generateApiReference } from '@components/generate-api-reference'\nimport type { ApiReference } from '@components/generate-api-reference'\nimport { useMDXComponents as getMDXComponents } from 'next-mdx-import-source-file'\nimport type { MdxFile } from 'nextra'\nimport { generateDefinition } from 'nextra/tsdoc'\nimport type { FC } from 'react'\n\ntype ComponentApiReference = ApiReference & { groupKeys?: string }\n\nconst API_REFERENCE: (\n | ComponentApiReference\n | { type: 'separator'; title: string; name: string }\n)[] = [\n { type: 'separator', title: 'Layout Components', name: '_' },\n {\n name: 'Banner',\n packageName: 'nextra/components',\n groupKeys: 'HTMLAttributes'\n },\n {\n name: 'Head',\n packageName: 'nextra/components',\n isFlattened: true\n },\n {\n name: 'Search',\n packageName: 'nextra/components',\n isFlattened: false,\n groupKeys:\n \"Omit\"\n },\n { type: 'separator', title: 'Content Components', name: '_2' },\n {\n name: 'Bleed',\n packageName: 'nextra/components',\n groupKeys: 'HTMLAttributes'\n },\n {\n name: 'Callout',\n packageName: 'nextra/components',\n groupKeys: 'HTMLAttributes'\n },\n {\n // TODO: add\n // \n name: 'Cards',\n packageName: 'nextra/components',\n groupKeys: 'HTMLAttributes'\n },\n {\n // TODO: add\n // \n // \n name: 'FileTree',\n packageName: 'nextra/components',\n groupKeys: 'HTMLAttributes'\n },\n {\n name: 'Steps',\n packageName: 'nextra/components',\n groupKeys: 'HTMLAttributes'\n },\n {\n // TODO: add\n // \" />\n // \" />\n // \" />\n name: 'Table',\n packageName: 'nextra/components',\n groupKeys: 'HTMLAttributes'\n },\n { name: 'Tabs', packageName: 'nextra/components' },\n { type: 'separator', title: 'Other Components', name: '_3' },\n { name: 'MDXRemote', packageName: 'nextra/mdx-remote' },\n { name: 'Playground', packageName: 'nextra/components' },\n { name: 'TSDoc', packageName: 'nextra/tsdoc' }\n]\n\nconst routes = API_REFERENCE.filter(\n (o): o is ComponentApiReference => !('type' in o)\n)\n\nexport const generateStaticParams = () =>\n routes.map(o => ({ name: o.name.toLowerCase() }))\n\n// @ts-expect-error -- fixme\nexport const pageMap: (MdxFile & { title: string })[] = API_REFERENCE.map(o =>\n 'type' in o\n ? o\n : {\n name: o.name.toLowerCase(),\n route: `/docs/built-ins/${o.name.toLowerCase()}`,\n title:\n o.name === 'TSDoc' ? (\n {o.name}\n ) : (\n o.name\n )\n }\n)\n\nconst Wrapper = getMDXComponents().wrapper\n\nasync function getReference(props: PageProps) {\n const params = await props.params\n const apiRefIndex = routes.findIndex(\n o => o.name.toLowerCase() === params.name\n )\n const apiRef = routes[apiRefIndex]\n if (!apiRef) {\n throw new Error(`API reference not found for \"${params.name}\"`)\n }\n const { name, packageName, groupKeys, isFlattened } = apiRef\n const result = groupKeys\n ? `Omit & { '...props': ${groupKeys} }>`\n : 'MyProps'\n const code =\n apiRef.code ??\n `\nimport type { ComponentProps, HTMLAttributes } from 'react'\nimport type { ComboboxInputProps } from '../packages/nextra/node_modules/@headlessui/react'\nimport { ${name} as MyComponent } from '${packageName}'\n\ntype MyProps = ComponentProps\ntype $ = ${result}\n\nexport default $`\n const flattened = isFlattened !== false\n const fcPropsDefinition = generateDefinition({ code, flattened })\n const {\n // @ts-expect-error -- exist\n signatures: _signatures,\n ...fcDefinition\n } = generateDefinition({\n code: `export { ${name} as default } from '${packageName}'`,\n flattened\n })\n const definition = {\n ...fcPropsDefinition,\n ...fcDefinition\n }\n const res = await generateApiReference(apiRef, {\n title: 'Component',\n subtitle: 'Props',\n definition\n // bottomMdxContent: `\n // **Tip for TypeScript users:** \n // You can retrieve the props type for the \\`<${name}>\\` component using \\`React.ComponentProps\\`.\n // `\n })\n const filePath =\n fcDefinition.filePath &&\n path\n .relative('..', fcDefinition.filePath)\n .replace(/\\.d.ts$/, '.tsx')\n .replace('/dist/', '/src/')\n // Add edit on GitHub link to points on a source file\n res.metadata.filePath = `https://github.com/shuding/nextra/tree/main/${filePath}`\n\n return res\n}\n\nexport async function generateMetadata(props: PageProps) {\n const { metadata } = await getReference(props)\n return metadata\n}\n\ntype PageProps = Readonly<{\n params: Promise<{ name: string }>\n}>\n\nconst Page: FC = async props => {\n const {\n default: MDXContent,\n toc,\n metadata,\n sourceCode\n } = await getReference(props)\n return (\n \n \n \n )\n}\n\nexport default Page\n"
},
{
"path": "docs/app/docs/built-ins/page.mdx",
"content": "---\nasIndexPage: true\nsidebarTitle: Built-In Components\n---\n\nimport {\n CardsIcon,\n FolderTreeIcon,\n IdCardIcon,\n OneIcon,\n TableIcon\n} from '@components/icons'\nimport { Callout } from 'nextra/components'\nimport { GitHubWarningIcon } from 'nextra/icons'\nimport { OverviewPage } from '../../_components/overview-page'\nimport { getEnhancedPageMap } from '../../../components/get-page-map'\n\n# Built-Ins\n\n\n This API reference is automatically generated from the catch-all route file\n `/docs/built-ins/[name]/page.tsx` using the new [Nextra ``\n component](/docs/built-ins/tsdoc).\n\n\nNextra includes a couple of built-in components that you can use to better style\nyour content:\n\n{/* `pageMap` prop will be removed once Nextra will add dynamic routes in pageMap */}\n\n o.name === 'docs')\n .children.find(o => o.name === 'built-ins').children\n }\n icons={{\n WarningIcon: GitHubWarningIcon,\n IdCardIcon,\n FolderTreeIcon,\n OneIcon,\n TableIcon,\n CardsIcon\n }}\n/>\n"
},
{
"path": "docs/app/docs/custom-theme/old.mdx",
"content": "### Render metadata for the active page\n\n> [!WARNING]\n>\n> Docs from Nextra 3\n\nOther than `children`, some other useful props are passed to the theme layout\ntoo. With the `pageOpts` props, the theme can access the page's meta\ninformation.\n\nFor example, let's implement these features:\n\n- Render the page title in ``\n- Show a simple Table of Contents via MDX `<Wrapper>` component\n- Add a meta tag for `og:image` via the front matter\n\n```tsx filename=\"theme.tsx\" /pageOpts/\nimport Head from 'next/head'\nimport type { NextraThemeLayoutProps } from 'nextra'\nimport { MDXProvider } from 'nextra/mdx'\n\nexport default function Layout({ children, pageOpts }: NextraThemeLayoutProps) {\n const { title, frontMatter } = pageOpts\n\n return (\n <>\n <Head>\n <title>{title}\n \n \n {children}\n \n )\n}\n\nfunction MyWrapper({ children, toc }) {\n return (\n <>\n
My Theme
\n Table of Contents:\n
\n {toc.map(heading => (\n
{heading.value}
\n ))}\n
\n
{children}
\n \n )\n}\n```\n\n### Use page map of the entire site\n\n> [!WARNING]\n>\n> Docs from Nextra 3\n\nNow, if you want to render something like a sidebar or a navigation bar, which\nrelies on information of not only the current page but also other pages, you can\nuse the `pageMap` value.\n\nFor example, we can render a simple navigation list with all the pages in the\ntop level:\n\n```tsx filename=\"theme.tsx\" /pageMap/\nimport Link from 'next/link'\nimport type { NextraThemeLayoutProps } from 'nextra'\n\nexport default function Layout({ children, pageOpts }: NextraThemeLayoutProps) {\n const { pageMap } = pageOpts\n\n return (\n
\n
My Theme
\n {pageMap.map(item => {\n if ('route' in item && !('children' in item)) {\n return (\n \n {item.route}\n \n )\n }\n })}\n
{children}
\n
\n )\n}\n```\n\nThere are other item kinds such as `Folder` (for directories) and `Meta` (for\n`_meta` files). All the items are typed so you can easily know the properties.\n"
},
{
"path": "docs/app/docs/custom-theme/page.mdx",
"content": "import { ExampleCode } from 'components/example-code'\nimport { Steps } from 'nextra/components'\nimport OldDocs from './old.mdx'\n\n# Custom Theme\n\nA theme in Nextra works like a layout, that will be rendered as a wrapper for\nall pages. This docs will walk you through the process of creating a custom\ntheme.\n\n> [!NOTE]\n>\n> Source code for the following custom theme can be found\n> [here](https://github.com/shuding/nextra/tree/main/examples/custom-theme).\n\n## Create a custom theme\n\n\n### Create a root layout\n\n\n\n### Create [`mdx-components` file](/docs/file-conventions/mdx-components-file)\n\n\n\n\n### Create a basic theme\n\nYou can now start working on your theme! Create the `nextra-theme.tsx` file, it\naccepts a `children` prop, which is the MDX content of the current page, and\nwraps some other elements around the content:\n\n\n\n### Create navbar and footer\n\n\n\n\n### Create sidebar\n\n\n\n### Add first MDX page\n\nAfter creating the theme, you can simply add a MDX file as `app/page.mdx` and\nsee the result:\n\n\n\n \n\nInside your theme layout, you can use CSS imports or other ways to style it.\nNext.js hooks such as `usePathname` are also available.\n\n{process.env.NODE_ENV !== 'production' && }\n\n\n"
},
{
"path": "docs/app/docs/docs-theme/api/page.mdx",
"content": "# API\n\n## `useThemeConfig` hook\n\nThe `useThemeConfig` hook returns values of your\n[theme configuration](/docs/docs-theme/theme-configuration) and is made to\ndynamically configure your project.\n\n```js\nimport { useThemeConfig } from 'nextra-theme-docs'\n```\n\n\n\n## `useConfig` hook\n\n```js\nimport { useConfig } from 'nextra-theme-docs'\n```\n\nThe `useConfig` hook returns data from your current page context.\n\n\n"
},
{
"path": "docs/app/docs/docs-theme/built-ins/footer/page.mdx",
"content": "---\nsidebarTitle: Footer\n---\n\nimport { ToggleVisibilitySection } from 'components/toggle-visibility-section'\n\n# Footer Component\n\nThe footer area of the website. You can specify content for your default footer.\n\n## Props\n\n\"\n/>\n\n## Example\n\nYou can add content, such as copyright information by passing it as `children`\nof the `Footer` component:\n\n```jsx filename=\"app/layout.jsx\"\nimport { Footer, Layout } from 'nextra-theme-docs'\n\nexport default function MyLayout({ children, ...props }) {\n return (\n \n {children}\n \n {children}\n \n )\n}\n```\n\n`\" property=\"footer\" />\n"
},
{
"path": "docs/app/docs/docs-theme/built-ins/layout/old.mdx",
"content": "## MDX Components [!TODO]\n\nProvide custom [MDX components](https://mdxjs.com/table-of-components) to render\nthe content. For example, you can use a custom `pre` component to render code\nblocks.\n"
},
{
"path": "docs/app/docs/docs-theme/built-ins/layout/page.mdx",
"content": "---\nsidebarTitle: Layout\n---\n\nimport { ToggleVisibilitySection } from 'components/toggle-visibility-section'\n\nexport function PartialTSDoc({ flattened, props }) {\n return (\n , ${props.map(prop => JSON.stringify(prop)).join('|')}>\nexport default $`}\n />\n )\n}\n\n# Layout Component\n\nThe theme is configured with the `` component. You should pass your\nconfig options as Layout's `props`, for example:\n\n```jsx filename=\"app/layout.jsx\" {8-9}\nimport { Layout } from 'nextra-theme-docs'\n\nexport default function MyLayout({ children, ...props }) {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n```\n\nDetailed information for each option is listed below.\n\n## Props\n\n## Page Map\n\n\n\n## Banner\n\n\n\n## Navbar\n\n\n\n`\" property=\"navbar\" />\n\n## Footer\n\n\n\n`\" property=\"footer\" />\n\n## Search\n\n\n\n## Docs Repository\n\nSet the repository URL of the documentation. It's used to generate the\n\"[Edit this page](#edit-link)\" link, the \"[Feedback](#feedback-link)\" link and\n\"[Report of broken link](./not-found)\" on\n[not found page](https://nextjs.org/docs/app/api-reference/file-conventions/not-found).\n\n\n\n### Specify a Path\n\nIf the documentation is inside a monorepo, a subfolder, or a different branch of\nthe repository, you can simply set the `docsRepositoryBase` to the root path of\nthe `app/` (App Router) folder of your docs. For example:\n\n```jsx filename=\"app/layout.jsx\"\n\n {children}\n\n```\n\nThen Nextra will automatically generate the correct file path for all pages.\n\n## Dark Mode and Themes\n\nCustomize the theme behavior of the website.\n\n\n\nimport Old from './old.mdx'\n\n{process.env.NODE_ENV !== 'production' && }\n\n## Edit Link\n\nShow an \"Edit this page\" link on the page that points to the file URL on GitHub\n(or other places).\n\n\n\n> [!TIP]\n>\n> To disable it, you can set `editLink` to `null`.\n\n## Feedback Link\n\nThe built-in feedback link provides a way for users to submit feedback about the\ndocumentation.\n\n\n\n> [!TIP]\n>\n> To disable it, you can set `feedback.content` to `null`.\n\n## I18n\n\n\n\n## Last Updated Date\n\nShow the last updated date of a page. It's useful for showing the freshness of\nthe content.\n\n\n\n\n\n## Navigation\n\nShow previous and next page links on the bottom of the content. It's useful for\nnavigating between pages.\n\n\n\n\n\n```jsx filename=\"app/layout.jsx\"\n\n {children}\n\n```\n\nThe above is also equivalent to `navigation: true{:js}`.\n\n\n\n## Sidebar\n\n\n\n### Menu Collapse Level\n\nBy default, the sidebar menu is collapsed at level `2`. You can change it by\nsetting `sidebar.defaultMenuCollapseLevel` to a different number. For example,\nwhen set to `1`, every folder will be collapsed by default and when set to\n`Infinity`, all nested folders will be expanded by default.\n\nIf `sidebar.autoCollapse` is set to `true`, then all folders that do not contain\nan active/focused route will automatically collapse up to the level set by\n`sidebar.defaultMenuCollapseLevel`. e.g. if `defaultMenuCollapseLevel` is `2`,\nthen top-level folders will not auto-collapse.\n\n### Customize Sidebar Content\n\nTogether with the [Separators](/docs/docs-theme/page-configuration#separators)\nitem, you can customize how the sidebar content is rendered by using JSX\nelements:\n\n```jsx filename=\"_meta.jsx\" {5-10}\nexport default {\n index: 'Intro',\n '--': {\n type: 'separator',\n title: (\n
\n \n {children}\n
\n )\n },\n frameworks: 'JS Frameworks & Libs',\n about: 'About'\n}\n```\n\n\n\n`\" property=\"sidebar\" />\n\n### Customize Sidebar with Front Matter\n\nIn addition, you can customize the sidebar title using the `sidebarTitle`\nproperty in your front matter:\n\n```mdx filename=\"getting-started.mdx\"\n---\nsidebarTitle: Getting Started 🚀\n---\n```\n\nThe priority of the sidebar title is as follows:\n\n1. A non-empty title from the `_meta` file.\n1. `sidebarTitle` in the front matter.\n1. `title` in the front matter.\n1. The title derived from the first `h1` Markdown heading (e.g.\n `# Dima Machina`).\n1. If none of the above are available, it falls back to the filename of the\n page, formatted according to [The Chicago Manual of Style](https://title.sh).\n\n## Theme Switch\n\n\n\nYou are able to customize the option names for localization or other purposes:\n\n```jsx filename=\"app/layout.jsx\"\n\n {children}\n\n```\n\n## Table of Contents (TOC)\n\nShow a table of contents on the right side of the page. It's useful for\nnavigating between headings.\n\n\n\n### Floating TOC\n\nWhen enabled, the TOC will be displayed on the right side of the page, and it\nwill be sticky when scrolling. If it's disabled, the TOC will be displayed\ndirectly on the page sidebar.\n\n`\" property=\"toc\" />\n"
},
{
"path": "docs/app/docs/docs-theme/built-ins/navbar/page.mdx",
"content": "---\nsidebarTitle: Navbar\n---\n\nimport { ToggleVisibilitySection } from 'components/toggle-visibility-section'\nimport { generateTsFromZod } from 'nextra/tsdoc'\n\n# Navbar Component\n\n## Props\n\n\n\n### Logo\n\nThe logo of the website rendered on the navbar.\n\n\n <>\n {/* prettier-ignore */}\n [Live example on StackBlitz](https://stackblitz.com/edit/nextra-2-docs-yrlccm?file=theme.config.jsx)\n\n\n```jsx filename=\"app/layout.jsx\"\n\n \n \n My Cool Project\n \n \n }\n/>\n```\n\n### Project link\n\nShow a button that links to your project's homepage on the navbar. By default,\nit links to Nextra's GitHub repository.\n\nYou can configure `projectLink` and `projectIcon` to customize the project link,\nfor example make it link to your GitLab repository:\n\n\n\n```jsx filename=\"app/layout.jsx\"\n\n \n \n }\n/>\n```\n\n### Chat link\n\nShow a button that links to your project's forum or other social media on the\nnavbar.\n\nYou can configure `chatLink` and `chatIcon` to customize the chat link, for\nexample make it link to your Twitter account:\n\n```jsx filename=\"app/layout.jsx\"\n\n \n \n }\n/>\n```\n\n### Menu and custom links\n\nCheck out [Page Configuration](/docs/docs-theme/page-configuration#navbar-items)\nto learn how to add custom menus or links to the navbar.\n\n`\" property=\"navbar\" />\n"
},
{
"path": "docs/app/docs/docs-theme/built-ins/not-found/page.mdx",
"content": "---\nsidebarTitle: NotFoundPage\n---\n\n# NotFoundPage Component\n\nOptions to configure report of broken link on not found page.\n\n## Props\n\n\n\n## Example\n\n```jsx filename=\"app/not-found.jsx\"\nimport { NotFoundPage } from 'nextra-theme-docs'\n\nexport default function NotFound() {\n return (\n \n
The page is not found
\n \n )\n}\n```\n"
},
{
"path": "docs/app/docs/docs-theme/built-ins/page.mdx",
"content": "---\nasIndexPage: true\nsidebarTitle: Built-In Components\nicon: BoxIcon\n---\n\nimport { OverviewPage } from '../../../_components/overview-page'\n\n# Built-Ins\n\n\n"
},
{
"path": "docs/app/docs/docs-theme/page.mdx",
"content": "---\nasIndexPage: true\nsidebarTitle: Docs Theme\n---\n\n# Nextra Docs Theme\n\nimport { BoxIcon, ChevronRightIcon } from '@components/icons'\nimport { OverviewPage } from '../../_components/overview-page'\n\n\n"
},
{
"path": "docs/app/docs/docs-theme/start/page.mdx",
"content": "---\nsidebarTitle: Get Started\nicon: ChevronRightIcon\n---\n\nimport InstallNextraTheme from '@components/install-nextra-theme.mdx'\nimport ReadyToGo from '@components/ready-to-go.mdx'\n\nimport { Steps } from 'nextra/components'\n\n# Docs Theme\n\nNextra Docs Theme is a theme that includes almost everything you need to build a\nmodern documentation website. It includes:\n\n- a top navigation bar\n- a search bar\n- a pages sidebar\n- a table of contents (TOC)\n- and other built-in components\n\n> [!TIP]\n>\n> This website itself is built with the Nextra Docs Theme.\n\n## Start as a New Project\n\n\n### Install\n\nTo create a Nextra Docs site manually, you have to install **Next.js**,\n**React**, **Nextra**, and **Nextra Docs Theme**. In your project directory, run\nthe following command to install the dependencies:\n\n```sh npm2yarn\nnpm i next react react-dom nextra nextra-theme-docs\n```\n\n> [!NOTE]\n>\n> If you already have Next.js installed in your project, you only need to\n> install `nextra` and `nextra-theme-docs` as the add-ons.\n\n\n\n```jsx filename=\"app/layout.jsx\"\nimport { Footer, Layout, Navbar } from 'nextra-theme-docs'\nimport { Banner, Head } from 'nextra/components'\nimport { getPageMap } from 'nextra/page-map'\nimport 'nextra-theme-docs/style.css'\n\nexport const metadata = {\n // Define your metadata here\n // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata\n}\n\nconst banner = Nextra 4.0 is released 🎉\nconst navbar = (\n Nextra}\n // ... Your additional navbar options\n />\n)\nconst footer = \n\nexport default async function RootLayout({ children }) {\n return (\n \n \n {/* Your additional tags should be passed as `children` of `` element */}\n \n \n \n {children}\n \n \n
![\"Inkeep](\"/docs/app/showcase/_logos/inkeep.png\")
\n \n \n ![\"xyflow](\"/docs/app/showcase/_logos/xyflow.png\")
\n \n