create-docusaurus 0.0.1 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -5
- package/bin/index.js +56 -1
- package/lib/.tsbuildinfo +1 -0
- package/lib/index.d.ts +11 -0
- package/lib/index.js +235 -0
- package/package.json +19 -3
- package/src/index.ts +289 -0
- package/templates/README.md +8 -0
- package/templates/classic/docusaurus.config.js +118 -0
- package/templates/classic/package.json +40 -0
- package/templates/classic/src/components/HomepageFeatures.js +64 -0
- package/templates/classic/src/components/HomepageFeatures.module.css +11 -0
- package/templates/classic/src/css/custom.css +28 -0
- package/templates/classic/src/pages/index.js +40 -0
- package/templates/classic/src/pages/index.module.css +23 -0
- package/templates/classic-typescript/package.json +46 -0
- package/templates/classic-typescript/src/components/HomepageFeatures.tsx +76 -0
- package/templates/classic-typescript/src/pages/index.tsx +40 -0
- package/templates/classic-typescript/tsconfig.json +7 -0
- package/templates/facebook/.eslintrc.js +60 -0
- package/templates/facebook/.prettierignore +3 -0
- package/templates/facebook/.prettierrc +9 -0
- package/templates/facebook/.stylelintrc.js +13 -0
- package/templates/facebook/README.md +41 -0
- package/templates/facebook/babel.config.js +12 -0
- package/templates/facebook/docusaurus.config.js +152 -0
- package/templates/facebook/gitignore +23 -0
- package/templates/facebook/package.json +56 -0
- package/templates/facebook/sidebars.js +35 -0
- package/templates/facebook/src/css/custom.css +33 -0
- package/templates/facebook/src/pages/index.js +111 -0
- package/templates/facebook/src/pages/styles.module.css +44 -0
- package/templates/facebook/static/img/oss_logo.png +0 -0
- package/templates/shared/README.md +33 -0
- package/templates/shared/babel.config.js +3 -0
- package/templates/shared/blog/2019-05-28-first-blog-post.md +12 -0
- package/templates/shared/blog/2019-05-29-long-blog-post.md +44 -0
- package/templates/shared/blog/2021-08-01-mdx-blog-post.mdx +20 -0
- package/templates/shared/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg +0 -0
- package/templates/shared/blog/2021-08-26-welcome/index.md +25 -0
- package/templates/shared/blog/authors.yml +17 -0
- package/templates/shared/docs/intro.md +35 -0
- package/templates/shared/docs/tutorial-basics/_category_.json +4 -0
- package/templates/shared/docs/tutorial-basics/congratulations.md +21 -0
- package/templates/shared/docs/tutorial-basics/create-a-blog-post.md +34 -0
- package/templates/shared/docs/tutorial-basics/create-a-document.md +55 -0
- package/templates/shared/docs/tutorial-basics/create-a-page.md +43 -0
- package/templates/shared/docs/tutorial-basics/deploy-your-site.md +31 -0
- package/templates/shared/docs/tutorial-basics/markdown-features.mdx +144 -0
- package/templates/shared/docs/tutorial-extras/_category_.json +4 -0
- package/templates/shared/docs/tutorial-extras/manage-docs-versions.md +55 -0
- package/templates/shared/docs/tutorial-extras/translate-your-site.md +88 -0
- package/templates/shared/gitignore +20 -0
- package/templates/shared/sidebars.js +26 -0
- package/templates/shared/src/pages/markdown-page.md +7 -0
- package/templates/shared/static/.nojekyll +0 -0
- package/templates/shared/static/img/docusaurus.png +0 -0
- package/templates/shared/static/img/favicon.ico +0 -0
- package/templates/shared/static/img/logo.svg +1 -0
- package/templates/shared/static/img/tutorial/docsVersionDropdown.png +0 -0
- package/templates/shared/static/img/tutorial/localeDropdown.png +0 -0
- package/templates/shared/static/img/undraw_docusaurus_mountain.svg +170 -0
- package/templates/shared/static/img/undraw_docusaurus_react.svg +169 -0
- package/templates/shared/static/img/undraw_docusaurus_tree.svg +1 -0
- package/tsconfig.json +11 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
* @format
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* CSS files with the .module.css suffix will be treated as CSS modules
|
|
12
|
+
* and scoped locally.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
.heroBanner {
|
|
16
|
+
padding: 4rem 0;
|
|
17
|
+
text-align: center;
|
|
18
|
+
position: relative;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@media screen and (max-width: 966px) {
|
|
23
|
+
.heroBanner {
|
|
24
|
+
padding: 2rem;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.buttons {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.features {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
padding: 2rem 0;
|
|
38
|
+
width: 100%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.featureImage {
|
|
42
|
+
height: 200px;
|
|
43
|
+
width: 200px;
|
|
44
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Website
|
|
2
|
+
|
|
3
|
+
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
|
|
4
|
+
|
|
5
|
+
### Installation
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
$ yarn
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### Local Development
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
$ yarn start
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
|
|
18
|
+
|
|
19
|
+
### Build
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
$ yarn build
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
|
|
26
|
+
|
|
27
|
+
### Deployment
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: first-blog-post
|
|
3
|
+
title: First Blog Post
|
|
4
|
+
authors:
|
|
5
|
+
name: Gao Wei
|
|
6
|
+
title: Docusaurus Core Team
|
|
7
|
+
url: https://github.com/wgao19
|
|
8
|
+
image_url: https://github.com/wgao19.png
|
|
9
|
+
tags: [hola, docusaurus]
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: long-blog-post
|
|
3
|
+
title: Long Blog Post
|
|
4
|
+
authors: endi
|
|
5
|
+
tags: [hello, docusaurus]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
This is the summary of a very long blog post,
|
|
9
|
+
|
|
10
|
+
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
|
|
11
|
+
|
|
12
|
+
<!--truncate-->
|
|
13
|
+
|
|
14
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
15
|
+
|
|
16
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
17
|
+
|
|
18
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
19
|
+
|
|
20
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
21
|
+
|
|
22
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
23
|
+
|
|
24
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
25
|
+
|
|
26
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
27
|
+
|
|
28
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
29
|
+
|
|
30
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
31
|
+
|
|
32
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
33
|
+
|
|
34
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
35
|
+
|
|
36
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
37
|
+
|
|
38
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
39
|
+
|
|
40
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
41
|
+
|
|
42
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
43
|
+
|
|
44
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: mdx-blog-post
|
|
3
|
+
title: MDX Blog Post
|
|
4
|
+
authors: [slorber]
|
|
5
|
+
tags: [docusaurus]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
|
|
9
|
+
|
|
10
|
+
:::tip
|
|
11
|
+
|
|
12
|
+
Use the power of React to create interactive blog posts.
|
|
13
|
+
|
|
14
|
+
```js
|
|
15
|
+
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
|
19
|
+
|
|
20
|
+
:::
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
slug: welcome
|
|
3
|
+
title: Welcome
|
|
4
|
+
authors: [slorber, yangshun]
|
|
5
|
+
tags: [facebook, hello, docusaurus]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
|
|
9
|
+
|
|
10
|
+
Simply add Markdown files (or folders) to the `blog` directory.
|
|
11
|
+
|
|
12
|
+
Regular blog authors can be added to `authors.yml`.
|
|
13
|
+
|
|
14
|
+
The blog post date can be extracted from filenames, such as:
|
|
15
|
+
|
|
16
|
+
- `2019-05-30-welcome.md`
|
|
17
|
+
- `2019-05-30-welcome/index.md`
|
|
18
|
+
|
|
19
|
+
A blog post folder can be convenient to co-locate blog post images:
|
|
20
|
+
|
|
21
|
+

|
|
22
|
+
|
|
23
|
+
The blog supports tags as well!
|
|
24
|
+
|
|
25
|
+
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
endi:
|
|
2
|
+
name: Endilie Yacop Sucipto
|
|
3
|
+
title: Maintainer of Docusaurus
|
|
4
|
+
url: https://github.com/endiliey
|
|
5
|
+
image_url: https://github.com/endiliey.png
|
|
6
|
+
|
|
7
|
+
yangshun:
|
|
8
|
+
name: Yangshun Tay
|
|
9
|
+
title: Front End Engineer @ Facebook
|
|
10
|
+
url: https://github.com/yangshun
|
|
11
|
+
image_url: https://github.com/yangshun.png
|
|
12
|
+
|
|
13
|
+
slorber:
|
|
14
|
+
name: Sébastien Lorber
|
|
15
|
+
title: Docusaurus maintainer
|
|
16
|
+
url: https://sebastienlorber.com
|
|
17
|
+
image_url: https://github.com/slorber.png
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 1
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Tutorial Intro
|
|
6
|
+
|
|
7
|
+
Let's discover **Docusaurus in less than 5 minutes**.
|
|
8
|
+
|
|
9
|
+
## Getting Started
|
|
10
|
+
|
|
11
|
+
Get started by **creating a new site**.
|
|
12
|
+
|
|
13
|
+
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
|
14
|
+
|
|
15
|
+
## Generate a new site
|
|
16
|
+
|
|
17
|
+
Generate a new Docusaurus site using the **classic template**:
|
|
18
|
+
|
|
19
|
+
```shell
|
|
20
|
+
npm init docusaurus@latest my-website classic
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Start your site
|
|
24
|
+
|
|
25
|
+
Run the development server:
|
|
26
|
+
|
|
27
|
+
```shell
|
|
28
|
+
cd my-website
|
|
29
|
+
|
|
30
|
+
npx docusaurus start
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Your site starts at `http://localhost:3000`.
|
|
34
|
+
|
|
35
|
+
Open `docs/intro.md` and edit some lines: the site **reloads automatically** and display your changes.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 6
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Congratulations!
|
|
6
|
+
|
|
7
|
+
You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
|
|
8
|
+
|
|
9
|
+
Docusaurus has **much more to offer**!
|
|
10
|
+
|
|
11
|
+
Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
|
|
12
|
+
|
|
13
|
+
Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
|
|
14
|
+
|
|
15
|
+
## What's next?
|
|
16
|
+
|
|
17
|
+
- Read the [official documentation](https://docusaurus.io/).
|
|
18
|
+
- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
|
|
19
|
+
- Add a [search bar](https://docusaurus.io/docs/search)
|
|
20
|
+
- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
|
|
21
|
+
- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 3
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Create a Blog Post
|
|
6
|
+
|
|
7
|
+
Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
|
|
8
|
+
|
|
9
|
+
## Create your first Post
|
|
10
|
+
|
|
11
|
+
Create a file at `blog/2021-02-28-greetings.md`:
|
|
12
|
+
|
|
13
|
+
```md title="blog/2021-02-28-greetings.md"
|
|
14
|
+
---
|
|
15
|
+
slug: greetings
|
|
16
|
+
title: Greetings!
|
|
17
|
+
authors:
|
|
18
|
+
- name: Joel Marcey
|
|
19
|
+
title: Co-creator of Docusaurus 1
|
|
20
|
+
url: https://github.com/JoelMarcey
|
|
21
|
+
image_url: https://github.com/JoelMarcey.png
|
|
22
|
+
- name: Sébastien Lorber
|
|
23
|
+
title: Docusaurus maintainer
|
|
24
|
+
url: https://sebastienlorber.com
|
|
25
|
+
image_url: https://github.com/slorber.png
|
|
26
|
+
tags: [greetings]
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
Congratulations, you have made your first post!
|
|
30
|
+
|
|
31
|
+
Feel free to play around and edit this post as much you like.
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
A new blog post is now available at `http://localhost:3000/blog/greetings`.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 2
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Create a Document
|
|
6
|
+
|
|
7
|
+
Documents are **groups of pages** connected through:
|
|
8
|
+
|
|
9
|
+
- a **sidebar**
|
|
10
|
+
- **previous/next navigation**
|
|
11
|
+
- **versioning**
|
|
12
|
+
|
|
13
|
+
## Create your first Doc
|
|
14
|
+
|
|
15
|
+
Create a markdown file at `docs/hello.md`:
|
|
16
|
+
|
|
17
|
+
```md title="docs/hello.md"
|
|
18
|
+
# Hello
|
|
19
|
+
|
|
20
|
+
This is my **first Docusaurus document**!
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
A new document is now available at `http://localhost:3000/docs/hello`.
|
|
24
|
+
|
|
25
|
+
## Configure the Sidebar
|
|
26
|
+
|
|
27
|
+
Docusaurus automatically **creates a sidebar** from the `docs` folder.
|
|
28
|
+
|
|
29
|
+
Add metadatas to customize the sidebar label and position:
|
|
30
|
+
|
|
31
|
+
```md title="docs/hello.md" {1-4}
|
|
32
|
+
---
|
|
33
|
+
sidebar_label: 'Hi!'
|
|
34
|
+
sidebar_position: 3
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
# Hello
|
|
38
|
+
|
|
39
|
+
This is my **first Docusaurus document**!
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
It is also possible to create your sidebar explicitly in `sidebars.js`:
|
|
43
|
+
|
|
44
|
+
```diff title="sidebars.js"
|
|
45
|
+
module.exports = {
|
|
46
|
+
tutorialSidebar: [
|
|
47
|
+
{
|
|
48
|
+
type: 'category',
|
|
49
|
+
label: 'Tutorial',
|
|
50
|
+
- items: [...],
|
|
51
|
+
+ items: ['hello'],
|
|
52
|
+
},
|
|
53
|
+
],
|
|
54
|
+
};
|
|
55
|
+
```
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 1
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Create a Page
|
|
6
|
+
|
|
7
|
+
Add **Markdown or React** files to `src/pages` to create a **standalone page**:
|
|
8
|
+
|
|
9
|
+
- `src/pages/index.js` -> `localhost:3000/`
|
|
10
|
+
- `src/pages/foo.md` -> `localhost:3000/foo`
|
|
11
|
+
- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar`
|
|
12
|
+
|
|
13
|
+
## Create your first React Page
|
|
14
|
+
|
|
15
|
+
Create a file at `src/pages/my-react-page.js`:
|
|
16
|
+
|
|
17
|
+
```jsx title="src/pages/my-react-page.js"
|
|
18
|
+
import React from 'react';
|
|
19
|
+
import Layout from '@theme/Layout';
|
|
20
|
+
|
|
21
|
+
export default function MyReactPage() {
|
|
22
|
+
return (
|
|
23
|
+
<Layout>
|
|
24
|
+
<h1>My React page</h1>
|
|
25
|
+
<p>This is a React page</p>
|
|
26
|
+
</Layout>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
A new page is now available at `http://localhost:3000/my-react-page`.
|
|
32
|
+
|
|
33
|
+
## Create your first Markdown Page
|
|
34
|
+
|
|
35
|
+
Create a file at `src/pages/my-markdown-page.md`:
|
|
36
|
+
|
|
37
|
+
```mdx title="src/pages/my-markdown-page.md"
|
|
38
|
+
# My Markdown page
|
|
39
|
+
|
|
40
|
+
This is a Markdown page
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
A new page is now available at `http://localhost:3000/my-markdown-page`.
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 5
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Deploy your site
|
|
6
|
+
|
|
7
|
+
Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
|
|
8
|
+
|
|
9
|
+
It builds your site as simple **static HTML, JavaScript and CSS files**.
|
|
10
|
+
|
|
11
|
+
## Build your site
|
|
12
|
+
|
|
13
|
+
Build your site **for production**:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm run build
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
The static files are generated in the `build` folder.
|
|
20
|
+
|
|
21
|
+
## Deploy your site
|
|
22
|
+
|
|
23
|
+
Test your production build locally:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm run serve
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
The `build` folder is now served at `http://localhost:3000/`.
|
|
30
|
+
|
|
31
|
+
You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 4
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Markdown Features
|
|
6
|
+
|
|
7
|
+
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
|
|
8
|
+
|
|
9
|
+
## Front Matter
|
|
10
|
+
|
|
11
|
+
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
|
|
12
|
+
|
|
13
|
+
```text title="my-doc.md"
|
|
14
|
+
// highlight-start
|
|
15
|
+
---
|
|
16
|
+
id: my-doc-id
|
|
17
|
+
title: My document title
|
|
18
|
+
description: My document description
|
|
19
|
+
slug: /my-custom-url
|
|
20
|
+
---
|
|
21
|
+
// highlight-end
|
|
22
|
+
|
|
23
|
+
## Markdown heading
|
|
24
|
+
|
|
25
|
+
Markdown text with [links](./hello.md)
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Links
|
|
29
|
+
|
|
30
|
+
Regular Markdown links are supported, using url paths or relative file paths.
|
|
31
|
+
|
|
32
|
+
```md
|
|
33
|
+
Let's see how to [Create a page](/create-a-page).
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```md
|
|
37
|
+
Let's see how to [Create a page](./create-a-page.md).
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Result:** Let's see how to [Create a page](./create-a-page.md).
|
|
41
|
+
|
|
42
|
+
## Images
|
|
43
|
+
|
|
44
|
+
Regular Markdown images are supported.
|
|
45
|
+
|
|
46
|
+
Add an image at `static/img/docusaurus.png` and display it in Markdown:
|
|
47
|
+
|
|
48
|
+
```md
|
|
49
|
+

|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+

|
|
53
|
+
|
|
54
|
+
## Code Blocks
|
|
55
|
+
|
|
56
|
+
Markdown code blocks are supported with Syntax highlighting.
|
|
57
|
+
|
|
58
|
+
```jsx title="src/components/HelloDocusaurus.js"
|
|
59
|
+
function HelloDocusaurus() {
|
|
60
|
+
return (
|
|
61
|
+
<h1>Hello, Docusaurus!</h1>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
```jsx title="src/components/HelloDocusaurus.js"
|
|
67
|
+
function HelloDocusaurus() {
|
|
68
|
+
return <h1>Hello, Docusaurus!</h1>;
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Admonitions
|
|
73
|
+
|
|
74
|
+
Docusaurus has a special syntax to create admonitions and callouts:
|
|
75
|
+
|
|
76
|
+
:::tip My tip
|
|
77
|
+
|
|
78
|
+
Use this awesome feature option
|
|
79
|
+
|
|
80
|
+
:::
|
|
81
|
+
|
|
82
|
+
:::danger Take care
|
|
83
|
+
|
|
84
|
+
This action is dangerous
|
|
85
|
+
|
|
86
|
+
:::
|
|
87
|
+
|
|
88
|
+
:::tip My tip
|
|
89
|
+
|
|
90
|
+
Use this awesome feature option
|
|
91
|
+
|
|
92
|
+
:::
|
|
93
|
+
|
|
94
|
+
:::danger Take care
|
|
95
|
+
|
|
96
|
+
This action is dangerous
|
|
97
|
+
|
|
98
|
+
:::
|
|
99
|
+
|
|
100
|
+
## MDX and React Components
|
|
101
|
+
|
|
102
|
+
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
|
|
103
|
+
|
|
104
|
+
```jsx
|
|
105
|
+
export const Highlight = ({children, color}) => (
|
|
106
|
+
<span
|
|
107
|
+
style={{
|
|
108
|
+
backgroundColor: color,
|
|
109
|
+
borderRadius: '20px',
|
|
110
|
+
color: '#fff',
|
|
111
|
+
padding: '10px',
|
|
112
|
+
cursor: 'pointer',
|
|
113
|
+
}}
|
|
114
|
+
onClick={() => {
|
|
115
|
+
alert(`You clicked the color ${color} with label ${children}`)
|
|
116
|
+
}}>
|
|
117
|
+
{children}
|
|
118
|
+
</span>
|
|
119
|
+
);
|
|
120
|
+
|
|
121
|
+
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
|
122
|
+
|
|
123
|
+
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
export const Highlight = ({children, color}) => (
|
|
127
|
+
<span
|
|
128
|
+
style={{
|
|
129
|
+
backgroundColor: color,
|
|
130
|
+
borderRadius: '20px',
|
|
131
|
+
color: '#fff',
|
|
132
|
+
padding: '10px',
|
|
133
|
+
cursor: 'pointer',
|
|
134
|
+
}}
|
|
135
|
+
onClick={() => {
|
|
136
|
+
alert(`You clicked the color ${color} with label ${children}`);
|
|
137
|
+
}}>
|
|
138
|
+
{children}
|
|
139
|
+
</span>
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
|
143
|
+
|
|
144
|
+
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 1
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Manage Docs Versions
|
|
6
|
+
|
|
7
|
+
Docusaurus can manage multiple versions of your docs.
|
|
8
|
+
|
|
9
|
+
## Create a docs version
|
|
10
|
+
|
|
11
|
+
Release a version 1.0 of your project:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm run docusaurus docs:version 1.0
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
|
|
18
|
+
|
|
19
|
+
Your docs now have 2 versions:
|
|
20
|
+
|
|
21
|
+
- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
|
|
22
|
+
- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
|
|
23
|
+
|
|
24
|
+
## Add a Version Dropdown
|
|
25
|
+
|
|
26
|
+
To navigate seamlessly across versions, add a version dropdown.
|
|
27
|
+
|
|
28
|
+
Modify the `docusaurus.config.js` file:
|
|
29
|
+
|
|
30
|
+
```js title="docusaurus.config.js"
|
|
31
|
+
module.exports = {
|
|
32
|
+
themeConfig: {
|
|
33
|
+
navbar: {
|
|
34
|
+
items: [
|
|
35
|
+
// highlight-start
|
|
36
|
+
{
|
|
37
|
+
type: 'docsVersionDropdown',
|
|
38
|
+
},
|
|
39
|
+
// highlight-end
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
The docs version dropdown appears in your navbar:
|
|
47
|
+
|
|
48
|
+

|
|
49
|
+
|
|
50
|
+
## Update an existing version
|
|
51
|
+
|
|
52
|
+
It is possible to edit versioned docs in their respective folder:
|
|
53
|
+
|
|
54
|
+
- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
|
|
55
|
+
- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`
|