Initial commit

Created from https://vercel.com/new

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+.DS_Store
+yarn-error.log
+dist
+examples
+packages

.prettierignore

@@ -0,0 +1,2 @@
+.next
+node_modules

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Shu Ding
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

next.config.js

@@ -0,0 +1,6 @@
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.js',
+  unstable_staticImage: true,
+})
+module.exports = withNextra()

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nextra",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  },
+  "author": "Shu Ding",
+  "license": "MIT",
+  "dependencies": {
+    "next": "^12.1.0",
+    "nextra": "^1.1.0",
+    "nextra-theme-docs": "^1.2.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "prettier": "^2.0.5"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  }
+}

pages/_app.js

@@ -0,0 +1,5 @@
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  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"
+}