Skip to content

Commit 96c2721

Browse files
Dhaiwat10Dhaiwat10
committed
Initial commit
Created from https://vercel.com/new
0 parents  commit 96c2721

38 files changed

+3086
-0
lines changed

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
.next
3+
.DS_Store
4+
yarn-error.log
5+
dist
6+
examples
7+
packages

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.next
2+
node_modules

‎LICENSE

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

‎next.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const withNextra = require('nextra')({
2+
theme: 'nextra-theme-docs',
3+
themeConfig: './theme.config.js',
4+
unstable_staticImage: true,
5+
})
6+
module.exports = withNextra()

‎package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "nextra",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "next",
8+
"start": "next start",
9+
"build": "next build"
10+
},
11+
"author": "Shu Ding",
12+
"license": "MIT",
13+
"dependencies": {
14+
"next": "^12.1.0",
15+
"nextra": "^1.1.0",
16+
"nextra-theme-docs": "^1.2.2",
17+
"react": "^17.0.1",
18+
"react-dom": "^17.0.1"
19+
},
20+
"devDependencies": {
21+
"prettier": "^2.0.5"
22+
},
23+
"prettier": {
24+
"semi": false,
25+
"singleQuote": true
26+
}
27+
}

‎pages/_app.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import 'nextra-theme-docs/style.css'
2+
3+
export default function Nextra({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}

‎pages/advanced/code-highlighting.mdx

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

‎pages/advanced/meta.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"code-highlighting": "Code Highlighting"
3+
}

‎pages/features/i18n.mdx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Callout from 'nextra-theme-docs/callout'
2+
3+
# Next.js I18n
4+
5+
<Callout emoji="⚠️">This feature is only available in the docs theme.</Callout>
6+
7+
Nextra supports [Next.js Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing) out of the box.
8+
9+
To add multi-language pages to your Nextra application, just need to config `i18n` in `next.config.js`:
10+
11+
```js
12+
// next.config.js
13+
const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
14+
module.exports = withNextra({
15+
i18n: {
16+
locales: ['en', 'zh', 'de'],
17+
defaultLocale: 'en',
18+
},
19+
})
20+
```
21+
22+
Then, add the locale codes to your file extensions (required for the default locale too):
23+
24+
```plaintext
25+
/pages
26+
index.en.md
27+
index.zh.md
28+
index.de.md
29+
meta.en.json
30+
meta.zh.json
31+
meta.de.json
32+
...
33+
```
34+
35+
Finally, add the `i18n` option to your `theme.config.js` to configure the language dropdown:
36+
37+
```jsx
38+
i18n: [
39+
{ locale: 'en', text: 'English' },
40+
{ locale: 'zh', text: '中文' },
41+
{ locale: 'de', text: 'Deutsch' },
42+
{ locale: 'ar', text: 'العربية', direction: 'rtl' },
43+
]
44+
```

‎pages/features/image.mdx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Next.js Image
2+
3+
You can use [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) directly in MDX.
4+
5+
If the `demo.png` file is located at `/public/demo.png`, you can use the code below to display it:
6+
7+
```markdown
8+
import Image from 'next/image'
9+
10+
<Image src="/demo.png" alt="Hello" width={500} height={500} />
11+
```
12+
13+
## Static Image
14+
15+
import Callout from 'nextra-theme-docs/callout'
16+
17+
<Callout emoji="⚠️">
18+
You need to opt-in to this feature by enabling [`unstable_staticImage:
19+
true`](/get-started#create-manually).
20+
</Callout>
21+
22+
Nextra also supports automatic static image imports, you no longer need to specify the width and height of the image manually,
23+
and you can directly use the Markdown syntax to display the same image:
24+
25+
```markdown
26+
![Hello](../../public/demo.png)
27+
```
28+
29+
With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:
30+
31+
<br />
32+
33+
![Nextra](../../public/og.png)

‎pages/features/mdx.mdx

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# MDX
2+
3+
With Nextra, all your `.md` and `.mdx` files under the pages directory will be rendered with [MDX](https://mdxjs.com/about), it's an
4+
advanced Markdown format with React component support.
5+
6+
You can use import and use React components inside your Markdown files like this:
7+
8+
```markdown
9+
import Callout from 'nextra-theme-docs/callout'
10+
11+
**Markdown With React Components**
12+
13+
<Callout emoji="✅">
14+
**MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
15+
It receives an MDX string and outputs a _JSX string_. It does this by parsing
16+
the MDX document to a syntax tree and then generates a JSX document from that tree.
17+
</Callout>
18+
```
19+
20+
Generates:
21+
22+
import Callout from 'nextra-theme-docs/callout'
23+
24+
<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
25+
**Markdown With React Components**
26+
27+
<Callout emoji="✅">
28+
**MDX** (the library), at its core, transforms MDX (the syntax) to JSX. It
29+
receives an MDX string and outputs a _JSX string_. It does this by parsing the
30+
MDX document to a syntax tree and then generates a JSX document from that
31+
tree.
32+
</Callout>
33+
</div>
34+
35+
## Heading
36+
37+
<br />
38+
39+
# **Hello**, This Is a _Title_ Inside `h1`
40+
41+
<h2>**Hello**, This Is a _Title_ Inside `h2`</h2>
42+
{/* using html tag to avoid being rendered in the sidebar */}
43+
44+
### **Hello**, This Is a _Title_ Inside `h3`
45+
46+
#### **Hello**, This Is a _Title_ Inside `h4`
47+
48+
##### **Hello**, This Is a _Title_ Inside `h5`
49+
50+
###### **Hello**, This Is a _Title_ Inside `h6`
51+
52+
## List
53+
54+
1. one
55+
2. two
56+
3. three
57+
58+
- one
59+
- two
60+
- three
61+
62+
## Task List
63+
64+
```markdown
65+
- [x] Write the press release
66+
- [ ] Update the website
67+
- [ ] Contact the media
68+
```
69+
70+
Renders
71+
72+
- [x] Write the press release
73+
- [ ] Update the website
74+
- [ ] Contact the media
75+
76+
## Syntax Highlighting
77+
78+
Automatic syntax highlighting:
79+
80+
````markdown
81+
```js
82+
console.log('hello, world')
83+
```
84+
````
85+
86+
Renders:
87+
88+
```js
89+
console.log('hello, world')
90+
```
91+
92+
You can also add the `highlight=<line|range>` modifier to highlight specific lines:
93+
94+
````markdown
95+
```jsx highlight=4,6-8
96+
import useSWR from 'swr'
97+
98+
function Profile() {
99+
const { data, error } = useSWR('/api/user', fetcher)
100+
101+
if (error) return <div>failed to load</div>
102+
if (!data) return <div>loading...</div>
103+
return <div>hello {data.name}!</div>
104+
}
105+
```
106+
````
107+
108+
```jsx highlight=4,6-8
109+
import useSWR from 'swr'
110+
111+
function Profile() {
112+
const { data, error } = useSWR('/api/user', fetcher)
113+
114+
if (error) return <div>failed to load</div>
115+
if (!data) return <div>loading...</div>
116+
return <div>hello {data.name}!</div>
117+
}
118+
```
119+
120+
## Inline Code
121+
122+
You can use \`content\` to wrap inline code content like: `let x = 1`.
123+
124+
## Blockquote
125+
126+
> 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.
127+
>
128+
> — Alan Kay, A Personal Computer for Children of All Ages
129+
130+
Nested quotes:
131+
132+
> > 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.
133+
> >
134+
> > — Alan Kay, A Personal Computer for Children of All Ages
135+
>
136+
> This is **great**.
137+
>
138+
> — Shu Ding.
139+
140+
## Table
141+
142+
| Syntax | Description | Test Text |
143+
| :------------ | :---------: | ----------: |
144+
| Header | Title | Here's this |
145+
| Paragraph | Text | And more |
146+
| Strikethrough | | ~~Text~~ |
147+
148+
## React Components
149+
150+
React components and Markdown can be **mixed together**, for instance:
151+
152+
```markdown
153+
> <Callout>
154+
> Give [**Nextra**](https://github.com/shuding/nextra) a star!
155+
> </Callout>
156+
```
157+
158+
Renders:
159+
160+
> <Callout>
161+
> Give [**Nextra**](https://github.com/shuding/nextra) a star!
162+
> </Callout>

‎pages/features/meta.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"mdx": "MDX",
3+
"ssg": "Next.js SSG",
4+
"i18n": "Next.js i18n",
5+
"image": "Next.js Image",
6+
"themes": "Themes"
7+
}

0 commit comments

Comments
 (0)