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,2 @@
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+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": "^10.0.8-canary.9",
+    "nextra": "^0.4.1",
+    "nextra-theme-docs": "^1.1.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 customze 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/blog/get-started.mdx

@@ -0,0 +1,47 @@
+# Get Started
+
+### Configurations
+
+1. Install Next.js and React: `yarn add next react react-dom`
+
+2. Install Nextra and the blog theme: `yarn add nextra 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')('nextra-theme-blog', './theme.config.js')
+module.exports = withNextra()
+```
+
+```jsx
+// theme.config.js
+export default {
+  footer: <p>MIT 2020 © Shu Ding.</p>,
+  head: <>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Nextra: the next blog builder" />
+    <meta name="og:title" content="Nextra: the next blog builder" />
+  </>
+}
+```
+
+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! 
+
+---
+
+import Callout from 'nextra-theme-docs/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/blog/meta.json

@@ -0,0 +1,3 @@
+{
+  "get-started": "Get Started"
+}

pages/docs/anchors.md

@@ -0,0 +1,57 @@
+# Anchor Links
+
+`h2` tags will become anchors in the sidebar automatically.
+
+## When You Are Old
+
+When you are old and grey and full of sleep,  
+And nodding by the fire, take down this book,  
+And slowly read, and dream of the soft look  
+Your eyes had once, and of their shadows deep;
+
+How many loved your moments of glad grace,  
+And loved your beauty with love false or true,  
+But one man loved the pilgrim soul in you,  
+And loved the sorrows of your changing face;
+
+And bending down beside the glowing bars,  
+Murmur, a little sadly, how Love fled  
+And paced upon the mountains overhead  
+And hid his face amid a crowd of stars.
+
+## The Young Man's Song
+
+I whispered, "I am too young,"  
+And then, "I am old enough";  
+Wherefore I threw a penny  
+To find out if I might love.  
+"Go and love, go and love, young man,  
+If the lady be young and fair,"  
+Ah, penny, brown penny, brown penny,  
+I am looped in the loops of her hair.  
+
+Oh, love is the crooked thing,  
+There is nobody wise enough  
+To find out all that is in it,  
+For he would be thinking of love  
+Till the stars had run away,  
+And the shadows eaten the moon.  
+Ah, penny, brown penny, brown penny,  
+One cannot begin it too soon.  
+
+## The Sorrow of Love
+
+The quarrel of the sparrows in the eaves,  
+The full round moon and the star-laden sky,  
+And the loud song of the ever-singing leaves,  
+Had hid away earth's old and weary cry.  
+
+And then you came with those red mournful lips,  
+And with you came the whole of the world's tears,  
+And all the sorrows of her labouring ships,  
+And all the burden of her myriad years.  
+
+And now the sparrows warring in the eaves,  
+The curd-pale moon, the white stars in the sky,  
+And the loud chaunting of the unquiet leaves  
+Are shaken with earth's old and weary cry.  

pages/docs/built-in-components.mdx

@@ -0,0 +1,81 @@
+# Built-In Components
+
+Some helpful built-in components from `nextra-theme-docs`.
+
+## Callout
+
+import Callout from 'nextra-theme-docs/callout'
+
+#### Example
+
+<Callout>
+  A **callout** is a short piece of text intended to attract attention.
+</Callout>
+
+<Callout emoji="🦤">
+  The **dodo** is an extinct flightless bird that was endemic to the island of Mauritius, east of Madagascar in the Indian Ocean.
+</Callout>
+
+#### Usage
+
+```mdx
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="🦤">
+  The **dodo** is an extinct flightless bird.
+</Callout>
+```
+
+## Bleed
+
+import Bleed from 'nextra-theme-docs/bleed'
+
+#### Example
+
+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 providers 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/docs/get-started.mdx

@@ -0,0 +1,78 @@
+# Get Started
+
+Create your own Nextra site and deploy to Vercel:
+
+[![](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra&c=1)
+
+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.
+
+---
+
+### Configurations
+
+1. Install Next.js and React: `yarn add next react react-dom`
+
+2. Install Nextra and the docs theme: `yarn add nextra nextra-theme-docs`
+
+3. Create the following Next.js config and theme config under the root directory:
+
+```jsx
+// next.config.js
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra()
+```
+
+```jsx
+// theme.config.js
+export default {
+  repository: 'https://github.com/shuding/nextra', // project repo
+  docsRepository: 'https://github.com/shuding/nextra', // docs repo
+  branch: 'master', // branch of docs
+  path: '/', // path of docs
+  titleSuffix: ' – Nextra',
+  nextLinks: true,
+  prevLinks: true,
+  search: true,
+  customSearch: null, // customizable, you can use algolia for example
+  darkMode: true,
+  footer: true,
+  footerText: 'MIT 2020 © Shu Ding.',
+  footerEditOnGitHubLink: true, // will link to the docs repo
+  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" />
+  </>
+}
+```
+
+4. 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} />
+}
+```
+
+5. You are good to go! 
+
+---
+
+import Callout from 'nextra-theme-docs/callout'
+
+<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.
+
+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/docs/meta.json

@@ -0,0 +1,6 @@
+{
+  "get-started": "Get Started",
+  "structure": "Structure",
+  "built-in-components": "Built-In Components",
+  "anchors": "Anchor Links"
+}

pages/docs/structure.md

@@ -0,0 +1,7 @@
+# Structure
+
+Just put all the Markdown files (`.md`, `.mdx`) under the `pages` directory. File system is the best way to organize your documentation:
+
+![](/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)).