feat: use nextra

package.json

@@ -20,6 +20,8 @@
   },
   "dependencies": {
     "next": "^12.1.5",
+    "nextra": "^1.1.0",
+    "nextra-theme-docs": "^1.2.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

pages/_app.tsx

@@ -0,0 +1,6 @@
+import { AppProps } from "next/app";
+import "nextra-theme-docs/style.css";
+
+export default function Nextra ({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

pages/advanced/code-highlighting.mdx

@@ -0,0 +1,26 @@
+# Code Highlighting
+
+`nextra-theme-docs` uses [Prism](https://prismjs.com) and [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) 
+to highlight the code blocks. This section covers how you can customize it.
+
+## More Languages
+
+To keep the bundle small, only a [subset of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js)
+are included in the syntax highlighter. If you want to add more languages, you can do the following:
+
+1. Run `yarn add prismjs prism-react-renderer` to add dependencies to your Nextra project.
+2. Add the following code to your `pages/_app.js`:
+
+```jsx
+import Prism from 'prism-react-renderer/prism'
+
+(typeof global !== "undefined" ? global : window).Prism = Prism
+
+require("prismjs/components/prism-kotlin")
+require("prismjs/components/prism-csharp")
+```
+
+Restart your app and you will have Kotlin and C# code highlighting supported. 
+You can find the full list of available languages [here](https://github.com/PrismJS/prism/tree/master/components).
+
+{/*## Custom Themes*/}

pages/advanced/meta.json

@@ -0,0 +1,3 @@
+{
+  "code-highlighting": "Code Highlighting"
+}

pages/features/i18n.mdx

@@ -0,0 +1,44 @@
+import Callout from 'nextra-theme-docs/callout'
+
+# Next.js I18n
+
+<Callout emoji="⚠️">This feature is only available in the docs theme.</Callout>
+
+Nextra supports [Next.js Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing) out of the box.
+
+To add multi-language pages to your Nextra application, just need to config `i18n` in `next.config.js`:
+
+```js
+// next.config.js
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra({
+  i18n: {
+    locales: ['en', 'zh', 'de'],
+    defaultLocale: 'en',
+  },
+})
+```
+
+Then, add the locale codes to your file extensions (required for the default locale too):
+
+```plaintext
+/pages
+  index.en.md
+  index.zh.md
+  index.de.md
+  meta.en.json
+  meta.zh.json
+  meta.de.json
+  ...
+```
+
+Finally, add the `i18n` option to your `theme.config.js` to configure the language dropdown:
+
+```jsx
+i18n: [
+  { locale: 'en', text: 'English' },
+  { locale: 'zh', text: '中文' },
+  { locale: 'de', text: 'Deutsch' },
+  { locale: 'ar', text: 'العربية', direction: 'rtl' },
+]
+```

pages/features/image.mdx

@@ -0,0 +1,33 @@
+# Next.js Image
+
+You can use [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) directly in MDX.
+
+If the `demo.png` file is located at `/public/demo.png`, you can use the code below to display it:
+
+```markdown
+import Image from 'next/image'
+
+<Image src="/demo.png" alt="Hello" width={500} height={500} />
+```
+
+## Static Image
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="⚠️">
+  You need to opt-in to this feature by enabling [`unstable_staticImage:
+  true`](/get-started#create-manually).
+</Callout>
+
+Nextra also supports automatic static image imports, you no longer need to specify the width and height of the image manually,
+and you can directly use the Markdown syntax to display the same image:
+
+```markdown
+![Hello](../../public/demo.png)
+```
+
+With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:
+
+<br />
+
+![Nextra](../../public/og.png)

pages/features/mdx.mdx

@@ -0,0 +1,162 @@
+# MDX
+
+With Nextra, all your `.md` and `.mdx` files under the pages directory will be rendered with [MDX](https://mdxjs.com/about), it's an
+advanced Markdown format with React component support.
+
+You can use import and use React components inside your Markdown files like this:
+
+```markdown
+import Callout from 'nextra-theme-docs/callout'
+
+**Markdown With React Components**
+
+<Callout emoji="✅">
+  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
+  It receives an MDX string and outputs a _JSX string_. It does this by parsing
+  the MDX document to a syntax tree and then generates a JSX document from that tree. 
+</Callout>
+```
+
+Generates:
+
+import Callout from 'nextra-theme-docs/callout'
+
+<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
+**Markdown With React Components**
+
+<Callout emoji="✅">
+  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX. It
+  receives an MDX string and outputs a _JSX string_. It does this by parsing the
+  MDX document to a syntax tree and then generates a JSX document from that
+  tree.
+</Callout>
+</div>
+
+## Heading
+
+<br />
+
+# **Hello**, This Is a _Title_ Inside `h1`
+
+<h2>**Hello**, This Is a _Title_ Inside `h2`</h2>
+{/* using html tag to avoid being rendered in the sidebar */}
+
+### **Hello**, This Is a _Title_ Inside `h3`
+
+#### **Hello**, This Is a _Title_ Inside `h4`
+
+##### **Hello**, This Is a _Title_ Inside `h5`
+
+###### **Hello**, This Is a _Title_ Inside `h6`
+
+## List
+
+1. one
+2. two
+3. three
+
+- one
+- two
+- three
+
+## Task List
+
+```markdown
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+```
+
+Renders
+
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+
+## Syntax Highlighting
+
+Automatic syntax highlighting:
+
+````markdown
+```js
+console.log('hello, world')
+```
+````
+
+Renders:
+
+```js
+console.log('hello, world')
+```
+
+You can also add the `highlight=<line|range>` modifier to highlight specific lines:
+
+````markdown
+```jsx highlight=4,6-8
+import useSWR from 'swr'
+
+function Profile() {
+  const { data, error } = useSWR('/api/user', fetcher)
+
+  if (error) return <div>failed to load</div>
+  if (!data) return <div>loading...</div>
+  return <div>hello {data.name}!</div>
+}
+```
+````
+
+```jsx highlight=4,6-8
+import useSWR from 'swr'
+
+function Profile() {
+  const { data, error } = useSWR('/api/user', fetcher)
+
+  if (error) return <div>failed to load</div>
+  if (!data) return <div>loading...</div>
+  return <div>hello {data.name}!</div>
+}
+```
+
+## Inline Code
+
+You can use \`content\` to wrap inline code content like: `let x = 1`.
+
+## Blockquote
+
+> Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
+>
+> — Alan Kay, A Personal Computer for Children of All Ages
+
+Nested quotes:
+
+> > Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
+> >
+> > — Alan Kay, A Personal Computer for Children of All Ages
+>
+> This is **great**.
+>
+> — Shu Ding.
+
+## Table
+
+| Syntax        | Description |   Test Text |
+| :------------ | :---------: | ----------: |
+| Header        |    Title    | Here's this |
+| Paragraph     |    Text     |    And more |
+| Strikethrough |             |    ~~Text~~ |
+
+## React Components
+
+React components and Markdown can be **mixed together**, for instance:
+
+```markdown
+> <Callout>
+>   Give [**Nextra**](https://github.com/shuding/nextra) a star!
+> </Callout>
+```
+
+Renders:
+
+> <Callout>
+>   Give [**Nextra**](https://github.com/shuding/nextra) a star!
+> </Callout>

pages/features/meta.json

@@ -0,0 +1,7 @@
+{
+  "mdx": "MDX",
+  "ssg": "Next.js SSG",
+  "i18n": "Next.js i18n",
+  "image": "Next.js Image",
+  "themes": "Themes"
+}

pages/features/ssg.mdx

@@ -0,0 +1,68 @@
+# Next.js SSG
+
+With Next.js, you can pre-render your page using [Static Generation (SSG)](https://nextjs.org/docs/basic-features/pages#static-generation-recommended). Your pages will be generated at build time and statically served to visitors. It can also be cached by a CDN to maximize the performance.
+
+This is supported by Nextra too. Here's an example:
+
+import { useSSG } from 'nextra/ssg'
+
+export const getStaticProps = ({ params }) => {
+  return fetch(`https://api.github.com/repos/shuding/nextra`)
+    .then((res) => res.json())
+    .then((repo) => ({
+      props: {
+        // We add an `ssg` field to the page props,
+        // which will be provided to the Nextra `useSSG` hook.
+        ssg: {
+          stars: repo.stargazers_count,
+        },
+      },
+      // The page will be considered as stale and regenerated every 60 seconds.
+      revalidate: 60,
+    }))
+}
+
+export const Stars = () => {
+  // Get the data from SSG, and render it as a component.
+  const { stars } = useSSG()
+  return <strong>{stars}</strong>
+}
+
+<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
+  Nextra has <Stars /> stars on GitHub!
+</div>
+
+The number above was generated at build time via `getStaticProps`. With [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) enabled, it will be kept up to date.
+
+---
+
+Here's the MDX code for the example above:
+
+```js
+import { useSSG } from 'nextra/ssg'
+
+export const getStaticProps = ({ params }) => {
+  return fetch(`https://api.github.com/repos/shuding/nextra`)
+    .then((res) => res.json())
+    .then((repo) => ({
+      props: {
+        // We add an `ssg` field to the page props,
+        // which will be provided to the Nextra `useSSG` hook.
+        ssg: {
+          stars: repo.stargazers_count,
+        },
+      },
+      // The page will be considered as stale and regenerated every 60 seconds.
+      revalidate: 60,
+    }))
+}
+
+export const Stars = () => {
+  // Get the data from SSG, and render it as a component.
+  const { stars } = useSSG()
+  return <strong>{stars}</strong>
+}
+
+
+Nextra has <Stars /> stars on GitHub!
+```

pages/features/themes.mdx

@@ -0,0 +1,12 @@
+# Themes
+
+Nextra itself is basically a plugin that normalizes your Markdown routes in Next.js into structural data, and it doesn't handle any styling related thing. A **theme** is what renders your actual pages, it works like a layout component in React.
+
+Nextra has 2 official themes that you can use:
+
+- [Docs Theme](/themes/docs)
+- [Blog Theme](/themes/blog)
+
+You can also extend your own themes. Here's a great starter example by [@jaredpalmer](https://github.com/jaredpalmer):
+
+- [Nextra Blank Custom Theme/Boilerplate Example](https://github.com/jaredpalmer/nextra-blank-custom-theme)

pages/get-started.mdx

@@ -0,0 +1,95 @@
+# Get Started
+
+## Quick Start with Vercel
+
+You can start by creating your own Nextra site and deploying to Vercel by clicking the link:
+
+[![](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=Markdown%20powered%20docs%20site.%20Built%20with%20Next.js.&demo-image=https%3A%2F%2Fnextra.vercel.app%2Fdemo.png&demo-title=Documentation%20Starter%20Kit&demo-url=https%3A%2F%2Fnextra.vercel.app%2F&project-name=nextjs-docs&repository-name=nextjs-docs&s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra&from=templates)
+
+Vercel will create the Nextra repository and deploy the site for you with just a few clicks.  
+Once done, every change in the repository will be deployed automatically.
+
+## Create Manually
+
+Nextra works like a Next.js plugin, and it accepts a theme config (layout) to render the page. To start:
+
+1. Install Next.js, Nextra and React: `yarn add next nextra react react-dom`
+
+2. Install the docs theme (you can use any theme you like): `yarn add nextra-theme-docs`
+
+3. Create the following Next.js config:
+
+```jsx
+// next.config.js
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.js',
+  // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
+})
+module.exports = withNextra()
+```
+
+4. Create a `theme.config.js` file for the docs theme:
+
+```jsx
+// theme.config.js
+export default {
+  projectLink: 'https://github.com/shuding/nextra', // GitHub link in the navbar
+  docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // base URL for the docs repository
+  titleSuffix: ' – Nextra',
+  nextLinks: true,
+  prevLinks: true,
+  search: true,
+  customSearch: null, // customizable, you can use algolia for example
+  darkMode: true,
+  footer: true,
+  footerText: `MIT ${new Date().getFullYear()} © Shu Ding.`,
+  footerEditLink: `Edit this page on GitHub`,
+  logo: (
+    <>
+      <svg>...</svg>
+      <span>Next.js Static Site Generator</span>
+    </>
+  ),
+  head: (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="description" content="Nextra: the next docs builder" />
+      <meta name="og:title" content="Nextra: the next docs builder" />
+    </>
+  ),
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout>
+  More configuration options for the docs theme can be found
+  [here](/themes/docs/configuration).
+</Callout>
+
+5. Create `pages/_app.js` and include the theme stylesheet:
+
+```jsx
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+6. You are good to go! Run `yarn next` to start.
+
+---
+
+<span id="sidebar-and-anchor-links" />
+<Callout>
+  Any `.md` or `.mdx` file will turn into a doc page and be displayed in
+  sidebar. You can also create a `meta.json` file to customize the page order
+  and title. <br /> Check the source code: https://github.com/shuding/nextra for
+  more information.
+</Callout>
+
+<Callout>
+You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.js`.
+</Callout>

pages/index.mdx

@@ -0,0 +1,11 @@
+import Bleed from 'nextra-theme-docs/bleed'
+
+# Nextra
+
+**Nextra** is a [Next.js](https://nextjs.org) based static site generator.
+
+It supports Markdown and React components ([MDX](/features/mdx)), automatically generated [sidebar and anchor links](/get-started#sidebar-and-anchor-links), file-system based routing, built-in syntax highlighting, image optimization, custom layouts, i18n, and all the features you love about Next.js.
+
+Here's what you will get in 1 minute:
+
+<Bleed>![Nextra Example](../public/demo.png)</Bleed>

pages/meta.json

@@ -0,0 +1,7 @@
+{
+  "index": "Introduction",
+  "get-started": "Get Started",
+  "features": "Features",
+  "themes": "Themes",
+  "advanced": "Advanced"
+}

pages/themes/blog/index.mdx

@@ -0,0 +1,75 @@
+# Get Started
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout>
+  An example of the blog theme can be found
+  [here](https://github.com/vercel-solutions/nextjs-portfolio-starter).
+</Callout>
+
+Similar to the docs theme, you can install the blog theme with the following commands:
+
+### Configurations
+
+1. Install Next.js, Nextra and React: `yarn add next nextra react react-dom`
+
+2. Install the blog theme: `yarn add nextra-theme-blog`
+
+3. Create the following Next.js config and theme config under the root directory:
+
+```jsx
+// next.config.js
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-blog',
+  themeConfig: './theme.config.js',
+  // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
+})
+module.exports = withNextra()
+```
+
+```jsx
+// theme.config.js
+export default {
+  footer: <p>MIT 2021 © Nextra.</p>,
+  head: ({ title, meta }) => (
+    <>
+      {meta.description && <meta name="description" content={meta.description} />}
+      {meta.tag && <meta name="keywords" content={meta.tag} />}
+      {meta.author && <meta name="author" content={meta.author} />}
+    </>
+  ),
+  readMore: 'Read More →',
+  titleSuffix: null,
+  postFooter: null,
+  cusdis: {
+    appId: 'your_app_id',
+    host: 'your_host(optional)',
+    lang: 'your_lang'
+  },
+  darkMode: false,
+  navs: [
+    {
+      url: 'https://github.com/shuding/nextra',
+      name: 'Nextra'
+    }
+  ]
+}
+```
+
+4. Create `pages/_app.js` and include the theme stylesheet:
+
+```jsx
+import 'nextra-theme-blog/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+5. You are good to go!
+
+---
+
+<Callout>
+You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.js`.
+</Callout>

pages/themes/blog/meta.json

@@ -0,0 +1,3 @@
+{
+  "index": "Installation"
+}

pages/themes/docs/bleed.mdx

@@ -0,0 +1,62 @@
+# Bleed
+
+A built-in component provided by `nextra-theme-docs`.
+
+## Example
+
+import Bleed from 'nextra-theme-docs/bleed'
+
+When wrapping your content with `<Bleed>`, it will be slightly wider than the container
+and will overflow on both sides.
+
+<Bleed>
+  <div style={{ border: '1px solid #888', padding: '4rem 2.5rem', textAlign: 'center' }}>
+    _There is nothing to writing. All you do is sit down at a typewriter and **bleed**._
+
+    — Ernest Hemingway
+
+  </div>
+</Bleed>
+
+It provides a better reading experience when you want to present some graphical information, which normally
+looks nicer in a larger size.
+
+For example you can put text, image, video or any component inside:
+
+<Bleed>
+  <iframe
+    width="100%"
+    height="430"
+    src="https://www.youtube.com/embed/3hccXiXI0u8"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen
+  />
+</Bleed>
+
+You can even make it full-bleed using `<Bleed full>`:
+
+<Bleed full>
+  ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
+</Bleed>
+
+## Usage
+
+```mdx
+import Bleed from 'nextra-theme-docs/bleed'
+
+<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
+
+<Bleed full>
+  ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
+</Bleed>
+
+<Bleed full>
+  <iframe
+    src="https://codesandbox.io/embed/swr-states-4une7"
+    width="100%"
+    height="500px"
+    title="SWR-States"
+  ></iframe>
+</Bleed>
+```

pages/themes/docs/callout.mdx

@@ -0,0 +1,57 @@
+# Callout Component
+
+A built-in component provided by `nextra-theme-docs`.
+
+import Callout from 'nextra-theme-docs/callout'
+
+## Example
+
+<Callout>
+  A **callout** is a short piece of text intended to attract attention.
+</Callout>
+
+## Usage
+
+### Default
+
+<Callout emoji="👾">
+  **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
+  Nishikado.
+</Callout>
+
+```mdx
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="👾">
+  **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
+  Nishikado.
+</Callout>
+```
+
+### Warning
+
+<Callout type="warning" emoji="⚠️">
+  This API will be deprecated soon.
+</Callout>
+
+```mdx
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout type="warning" emoji="⚠️">
+  This API will be deprecated soon.
+</Callout>
+```
+
+### Error
+
+<Callout type="error" emoji="🚫">
+  This is a dangerous feature that can cause everything to explode.
+</Callout>
+
+```mdx
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout type="error" emoji="️🚫">
+  This is a dangerous feature that can cause everything to explode.
+</Callout>
+```

pages/themes/docs/configuration.mdx

@@ -0,0 +1,221 @@
+# Configuration
+
+To configure the theme, edit or create
+the `theme.config.js` file in the root
+directory. The file looks something like this:
+
+```ts
+export default {
+  projectLink: 'https://gitlab.com/librewolf-community/browser',
+  titleSuffix: ' – Nextra',
+  footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
+  // ...
+}
+```
+
+## `projectLink`
+
+The URL that the button in the top right will point to.
+
+**Type:** `string`\
+**Default:** `https://github.com/shuding/nextra`
+
+## `projectLinkIcon`
+
+Changes the icon that is shown in the top right.
+
+**Type:** `ReactNode`
+**Default:** GitHub icon
+
+**Example:**
+
+```jsx
+import Gitlab from '@geist-ui/react-icons/gitlab'
+
+export default {
+  projectLinkIcon: <Gitlab />,
+}
+```
+
+## `docsRepositoryBase`
+
+The base URL of the GitHub repository the docs are located in. This will be used for the `Edit this Page on GitHub` button.
+
+**Type:** `string`\
+**Default:** `https://github.com/shuding/nextra`
+
+## `titleSuffix`
+
+Suffix that will be added to page titles in the URL bar.
+
+**Type:** `string`\
+**Default:** `– Nextra`
+
+## `nextLinks` and `prevLinks`
+
+Specifies if arrows are being shown at the bottom
+of a page showing the next and previous page, like
+the ones at the bottom of this page.
+
+**Type:** `boolean`\
+**Default:** `true`
+
+## `search`
+
+Specifies if a search box should be shown in the top right.
+
+**Type:** `boolean`\
+**Default:** `true`
+
+## `customSearch`
+
+A custom component to display instead of the search bar in the top right, for example Algolia.
+
+**Type:** `ReactNode`
+
+## `darkMode`
+
+Specifies if the user can select a dark mode.
+
+**Type:** `boolean`\
+**Default:** `true`
+
+## `defaultMenuCollapsed`
+
+Specifies if the menu on the left is collapsed by default.
+
+**Type:** `boolean`\
+**Default:** `false`
+
+## `font`
+
+Specifies if nextra should load its own fonts. Disable this if you want to use a custom font.
+
+**Type:** `boolean`\
+**Default:** `true`
+
+## `footer`
+
+Specifies if the footer should be shown.
+
+**Type:** `boolean`\
+**Default:** `true`
+
+## `footerText`
+
+The text that is shown on the left of the footer.
+
+**Type:** `ReactNode`
+
+**Example:**
+
+```js
+export default {
+  footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
+}
+```
+
+## `footerEditLink`
+
+The text that should be shown on the link that leads to the editable page on the repository.
+
+**Type:** `boolean`\
+**Default:** `Edit this page`
+
+**Example:** `Edit this page on GitHub`
+
+## `logo`
+
+The logo in the top left.
+
+**Type:** `ReactNode`\
+
+**Example:**
+
+```jsx
+export default {
+  logo: (
+    <React.Fragment>
+      <span className="mr-2 font-extrabold hidden md:inline">Nextra</span>
+      <span className="text-gray-600 font-normal hidden md:inline">
+        The Next Docs Builder
+      </span>
+    </React.Fragment>
+  ),
+}
+```
+
+## `head`
+
+The head that should be inserted into the html document.
+
+**Type:** `ReactNode`
+
+**Example:**
+
+```jsx
+export default {
+  head: (
+    <React.Fragment>
+      <meta name="msapplication-TileColor" content="#ffffff" />
+      <meta name="theme-color" content="#ffffff" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta httpEquiv="Content-Language" content="en" />
+      <meta name="description" content="Nextra: the next docs builder" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@shuding_" />
+      <meta property="og:title" content="Nextra: the next docs builder" />
+      <meta property="og:description" content="Nextra: the next docs builder" />
+      <meta name="apple-mobile-web-app-title" content="Nextra" />
+    </React.Fragment>
+  ),
+}
+```
+
+## `direction`
+
+The direction of the text on the page
+
+**Type:** `ltr` || `rtl`
+
+## `i18n`
+
+The internationalization (i18n) config. See more [here](/features/i18n).
+
+## `floatTOC`
+
+Specifies if the table of conents of a page
+(the headings) should be displayed floating
+on the right instead of being integrated in
+the menu on the left.
+
+**Type:** `boolean`\
+**Default:** `false`
+
+import Callout from 'nextra-theme-docs/callout'
+
+export const Unstable = () => (
+  <Callout type="error" emoji="">
+    This is an unstable and experimental feature and not recomended for general
+    use.
+  </Callout>
+)
+
+## `unstable_faviconGlyph`
+
+A glyph that should be used as a favicon.
+
+**Type:** `char`
+
+<Unstable />
+
+## `unstable_stork`
+
+Use [Stork Search](https://stork-search.net/) for the
+search bar, a library for fast full-text search powered
+by WebAssembly.
+
+**Type:** `boolean`\
+**Default:** `false`
+
+<Unstable />

pages/themes/docs/index.mdx

@@ -0,0 +1,15 @@
+# Docs Theme
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout>This website is built with the docs theme.</Callout>
+
+The [Get Started](/get-started) page is a great place to start.
+
+Just put all your Markdown files (`.md`, `.mdx`) under the `pages` directory. It's the best way to organize your documentation:
+
+<br />
+
+![](../../../public/demo.png)
+
+You can also use a `meta.json` file to config the order and displayed name of the page ([example](https://github.com/shuding/nextra/blob/master/pages/meta.json)).

pages/themes/docs/meta.json

@@ -0,0 +1,6 @@
+{
+  "index": "Installation",
+  "configuration": "Configuration",
+  "callout": "Callout",
+  "bleed": "Bleed"
+}

pages/themes/meta.json

@@ -0,0 +1,4 @@
+{
+  "docs": "Docs Theme",
+  "blog": "Blog Theme"
+}

src/pages/_app.tsx

@@ -1,6 +0,0 @@
-import { AppProps } from 'next/app';
-import '@/styles/global.css';
-
-export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}

src/pages/index.tsx

@@ -1,75 +0,0 @@
-import Head from 'next/head';
-import Image from 'next/image';
-
-import styles from '@/styles/Home.module.css';
-
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>TypeScript starter for Next.js</title>
-        <meta
-          name="description"
-          content="TypeScript starter for Next.js that includes all you need to build amazing apps"
-        />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{` `}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <p className={styles.description}>This is not an official starter!</p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=typescript-nextjs-starter"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=typescript-nextjs-starter"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{` `}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  );
-}

src/styles/Home.module.css

@@ -1,121 +0,0 @@
-.container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.main {
-  padding: 5rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-  margin-top: 3rem;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}

src/styles/global.css

@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}