···1----
2-slug: first-blog-post
3-title: First Blog Post
4-authors: [slorber, yangshun]
5-tags: [hola, docusaurus]
6----
7-8-Lorem ipsum dolor sit amet...
9-10-<!-- truncate -->
11-12-...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
···000000000000
-44
website/blog/2019-05-29-long-blog-post.md
···1----
2-slug: long-blog-post
3-title: Long Blog Post
4-authors: yangshun
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
···00000000000000000000000000000000000000000000
-24
website/blog/2021-08-01-mdx-blog-post.mdx
···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-:::
15-16-{/* truncate */}
17-18-For example, use JSX to create an interactive button:
19-20-```js
21-<button onClick={() => alert('button clicked!')}>Click me!</button>
22-```
23-24-<button onClick={() => alert('button clicked!')}>Click me!</button>
···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-Here are a few tips you might find useful.
11-12-<!-- truncate -->
13-14-Simply add Markdown files (or folders) to the `blog` directory.
15-16-Regular blog authors can be added to `authors.yml`.
17-18-The blog post date can be extracted from filenames, such as:
19-20-- `2019-05-30-welcome.md`
21-- `2019-05-30-welcome/index.md`
22-23-A blog post folder can be convenient to co-locate blog post images:
24-25-
26-27-The blog supports tags as well!
28-29-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
···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-- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
19-- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
20-- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
21-- Add a [search bar](https://docusaurus.io/docs/search)
22-- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
23-- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
···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 as you like.
32-```
33-34-A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
···0000000000000000000000000000000000
-57
website/docs/tutorial-basics/create-a-document.md
···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](http://localhost:3000/docs/hello).
24-25-## Configure the Sidebar
26-27-Docusaurus automatically **creates a sidebar** from the `docs` folder.
28-29-Add metadata 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-```js title="sidebars.js"
45-export default {
46- tutorialSidebar: [
47- 'intro',
48- // highlight-next-line
49- 'hello',
50- {
51- type: 'category',
52- label: 'Tutorial',
53- items: ['tutorial-basics/create-a-document'],
54- },
55- ],
56-};
57-```
···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](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](http://localhost:3000/my-markdown-page).
···0000000000000000000000000000000000000000000
-31
website/docs/tutorial-basics/deploy-your-site.md
···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/](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)**).
···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-You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
47-48-```md
49-
50-```
51-52-
53-54-You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
55-56-```md
57-
58-```
59-60-## Code Blocks
61-62-Markdown code blocks are supported with Syntax highlighting.
63-64-````md
65-```jsx title="src/components/HelloDocusaurus.js"
66-function HelloDocusaurus() {
67- return <h1>Hello, Docusaurus!</h1>;
68-}
69-```
70-````
71-72-```jsx title="src/components/HelloDocusaurus.js"
73-function HelloDocusaurus() {
74- return <h1>Hello, Docusaurus!</h1>;
75-}
76-```
77-78-## Admonitions
79-80-Docusaurus has a special syntax to create admonitions and callouts:
81-82-```md
83-:::tip My tip
84-85-Use this awesome feature option
86-87-:::
88-89-:::danger Take care
90-91-This action is dangerous
92-93-:::
94-```
95-96-:::tip My tip
97-98-Use this awesome feature option
99-100-:::
101-102-:::danger Take care
103-104-This action is dangerous
105-106-:::
107-108-## MDX and React Components
109-110-[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
111-112-```jsx
113-export const Highlight = ({children, color}) => (
114- <span
115- style={{
116- backgroundColor: color,
117- borderRadius: '20px',
118- color: '#fff',
119- padding: '10px',
120- cursor: 'pointer',
121- }}
122- onClick={() => {
123- alert(`You clicked the color ${color} with label ${children}`)
124- }}>
125- {children}
126- </span>
127-);
128-129-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
130-131-This is <Highlight color="#1877F2">Facebook blue</Highlight> !
132-```
133-134-export const Highlight = ({children, color}) => (
135- <span
136- style={{
137- backgroundColor: color,
138- borderRadius: '20px',
139- color: '#fff',
140- padding: '10px',
141- cursor: 'pointer',
142- }}
143- onClick={() => {
144- alert(`You clicked the color ${color} with label ${children}`);
145- }}>
146- {children}
147- </span>
148-);
149-150-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
151-152-This is <Highlight color="#1877F2">Facebook blue</Highlight> !
···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-export default {
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`
···1----
2-sidebar_position: 2
3----
4-5-# Translate your site
6-7-Let's translate `docs/intro.md` to French.
8-9-## Configure i18n
10-11-Modify `docusaurus.config.js` to add support for the `fr` locale:
12-13-```js title="docusaurus.config.js"
14-export default {
15- i18n: {
16- defaultLocale: 'en',
17- locales: ['en', 'fr'],
18- },
19-};
20-```
21-22-## Translate a doc
23-24-Copy the `docs/intro.md` file to the `i18n/fr` folder:
25-26-```bash
27-mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
28-29-cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
30-```
31-32-Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
33-34-## Start your localized site
35-36-Start your site on the French locale:
37-38-```bash
39-npm run start -- --locale fr
40-```
41-42-Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
43-44-:::caution
45-46-In development, you can only use one locale at a time.
47-48-:::
49-50-## Add a Locale Dropdown
51-52-To navigate seamlessly across languages, add a locale dropdown.
53-54-Modify the `docusaurus.config.js` file:
55-56-```js title="docusaurus.config.js"
57-export default {
58- themeConfig: {
59- navbar: {
60- items: [
61- // highlight-start
62- {
63- type: 'localeDropdown',
64- },
65- // highlight-end
66- ],
67- },
68- },
69-};
70-```
71-72-The locale dropdown now appears in your navbar:
73-74-
75-76-## Build your localized site
77-78-Build your site for a specific locale:
79-80-```bash
81-npm run build -- --locale fr
82-```
83-84-Or build your site to include all the locales at once:
85-86-```bash
87-npm run build
88-```
···1-import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
23// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
4-5-/**
6- * Creating a sidebar enables you to:
7- - create an ordered group of docs
8- - render a sidebar for each doc of that group
9- - provide next/previous navigation
10-11- The sidebars can be generated from the filesystem, or explicitly defined here.
12-13- Create as many sidebars as you want.
14- */
15const sidebars: SidebarsConfig = {
16- // By default, Docusaurus generates a sidebar from the docs folder structure
17- tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
18-19- // But you can create a sidebar manually
20- /*
21- tutorialSidebar: [
22- 'intro',
23- 'hello',
24- {
25- type: 'category',
26- label: 'Tutorial',
27- items: ['tutorial-basics/create-a-document'],
28- },
29- ],
30- */
31};
3233export default sidebars;
···1+import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
23// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
000000000004const sidebars: SidebarsConfig = {
5+ manualSidebar: [{ type: "autogenerated", dirName: "." }],
000000000000006};
78export default sidebars;