diff options
| author | Fuwn <[email protected]> | 2021-04-06 20:11:26 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2021-04-06 20:11:26 -0700 |
| commit | 6e04b1bab644045398b213900b60bf1ac1c0272d (patch) | |
| tree | 0cc17281bbd67244efc3c23e71297c9cbaa9c0d8 /docs/tutorial | |
| parent | chore: Create contribution guidelines (diff) | |
| download | site-6e04b1bab644045398b213900b60bf1ac1c0272d.tar.xz site-6e04b1bab644045398b213900b60bf1ac1c0272d.zip | |
major: Furnish repository
Diffstat (limited to 'docs/tutorial')
| -rw-r--r-- | docs/tutorial/create-a-blog-post.md | 25 | ||||
| -rw-r--r-- | docs/tutorial/create-a-document.md | 38 | ||||
| -rw-r--r-- | docs/tutorial/create-a-page.md | 45 | ||||
| -rw-r--r-- | docs/tutorial/getting-started.md | 28 | ||||
| -rw-r--r-- | docs/tutorial/markdown-features.mdx.dev | 128 | ||||
| -rw-r--r-- | docs/tutorial/thank-you.md | 17 |
6 files changed, 281 insertions, 0 deletions
diff --git a/docs/tutorial/create-a-blog-post.md b/docs/tutorial/create-a-blog-post.md new file mode 100644 index 0000000..4485a8a --- /dev/null +++ b/docs/tutorial/create-a-blog-post.md @@ -0,0 +1,25 @@ +--- +title: Create a Blog Post +--- + +This page will help you on how to create blog posts in Docusaurus. + +## Create a Blog Post + +Create a file at `blog/2021-02-28-greetings.md`: + +```md title="blog/2021-02-28-greetings.md" +--- +title: Greetings! +author: Steven Hansel +author_title: Docusaurus Contributor +author_url: https://github.com/ShinteiMai +author_image_url: https://github.com/ShinteiMai.png +--- + +Congratulations, you have made your first post! + +Feel free to play around and edit this post as much you like. +``` + +A new blog post is now available at `http://localhost:3000/blog/greetings`. diff --git a/docs/tutorial/create-a-document.md b/docs/tutorial/create-a-document.md new file mode 100644 index 0000000..7922129 --- /dev/null +++ b/docs/tutorial/create-a-document.md @@ -0,0 +1,38 @@ +--- +title: Create a Document +--- + +Documents are pages with a **sidebar**, a **previous/next navigation** and many other useful features. + +## Create a Document + +Create a markdown file at `docs/my-doc.md`: + +```mdx title="docs/hello.md" +--- +title: Hello, World! +--- + +## Hello, World! + +This is your first document in **Docusaurus**, Congratulations! +``` + +A new document is now available at `http://localhost:3000/docs/hello`. + +## Add your document to the sidebar + +Add `hello` to the `sidebars.js` file: + +```diff title="sidebars.js" +module.exports = { + docs: [ + { + type: 'category', + label: 'Docusaurus Tutorial', +- items: ['getting-started', 'create-a-doc', ...], ++ items: ['getting-started', 'create-a-doc', 'hello', ...], + }, + ], +}; +``` diff --git a/docs/tutorial/create-a-page.md b/docs/tutorial/create-a-page.md new file mode 100644 index 0000000..1056090 --- /dev/null +++ b/docs/tutorial/create-a-page.md @@ -0,0 +1,45 @@ +--- +title: Create a Page +--- + +Any React or Markdown file created under `src/pages` directory is converted into a website page: + +- `src/pages/index.js` -> `localhost:3000/` +- `src/pages/foo.md` -> `localhost:3000/foo` +- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar` + +## Create a React Page + +Create a file at `src/pages/my-react-page.js`: + +```jsx title="src/pages/my-react-page.js" +import React from 'react'; +import Layout from '@theme/Layout'; + +function HelloWorld() { + return ( + <Layout> + <h1>My React page</h1> + <p>This is a React page</p> + </Layout> + ); +} +``` + +A new page is now available at `http://localhost:3000/my-react-page`. + +## Create a Markdown Page + +Create a file at `src/pages/my-markdown-page.md`: + +```mdx title="src/pages/my-markdown-page.md" +--- +title: My Markdown page +--- + +# My Markdown page + +This is a Markdown page +``` + +A new page is now available at `http://localhost:3000/my-markdown-page`. diff --git a/docs/tutorial/getting-started.md b/docs/tutorial/getting-started.md new file mode 100644 index 0000000..43df86a --- /dev/null +++ b/docs/tutorial/getting-started.md @@ -0,0 +1,28 @@ +--- +title: Getting Started +slug: / +--- + +## Step 1: Generate a new Docusaurus site + +If you haven't already, generate a new Docusaurus site using the classic template: + +```shell +npx @docusaurus/init@latest init my-website classic +``` + +## Step 2: Start your Docusaurus site + +Run the development server in the newly created `my-website` folder: + +```shell +cd my-website + +npx docusaurus start +``` + +Open `docs/getting-started.md` and edit some lines. The site reloads automatically and display your changes. + +## That's it! + +Congratulations! You've successfully run and modified your Docusaurus project. diff --git a/docs/tutorial/markdown-features.mdx.dev b/docs/tutorial/markdown-features.mdx.dev new file mode 100644 index 0000000..622391d --- /dev/null +++ b/docs/tutorial/markdown-features.mdx.dev @@ -0,0 +1,128 @@ +--- +title: Markdown Features +--- + +Docusaurus supports the [Markdown](https://daringfireball.net/projects/markdown/syntax) syntax and has some additional features. + +## Front Matter + +Markdown documents can have associated metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/): + +```md +--- +id: my-doc +title: My document title +description: My document description +sidebar_label: My doc +--- + +Markdown content +``` + +## Markdown links + +Regular Markdown links are supported using url paths or relative file paths. + +```md +Let's see how to [Create a page](/create-a-page). +``` + +```md +Let's see how to [Create a page](./create-a-page.md). +``` + +Let's see how to [Create a page](./create-a-page.md). + +## Markdown images + +Regular Markdown images are supported. + +Add an image at `static/img/docusaurus.png` and use this Markdown declaration: + +```md + +``` + + + +## Code Blocks + +Markdown code blocks are supported with Syntax highlighting. + + ```jsx title="src/components/HelloDocusaurus.js" + function HelloDocusaurus() { + return ( + <h1>Hello, Docusaurus!</h1> + ) + } + ``` + +```jsx title="src/components/HelloDocusaurus.js" +function HelloDocusaurus() { + return <h1>Hello, Docusaurus!</h1>; +} +``` + +## Admonitions + +Docusaurus has a special syntax to create admonitions and callouts: + + :::tip My tip + + Use this awesome feature option + + ::: + + :::danger Take care + + This action is dangerous + + ::: + +:::tip My tip + +Use this awesome feature option + +::: + +:::danger Take care + +This action is dangerous + +::: + +## React components + +Thanks to [MDX](https://mdxjs.com/), you can make your doc more interactive and use React components inside Markdown: + +```jsx +export const Highlight = ({children, color}) => ( + <span + style={{ + backgroundColor: color, + borderRadius: '2px', + color: 'red', + padding: '0.2rem', + }}> + {children} + </span> +); + +<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors. +``` + +export const Highlight = ({children, color}) => ( + <span + style={{ + backgroundColor: color, + borderRadius: '2px', + color: '#fff', + padding: '0.2rem', + }}> + {children} + </span> +); + +<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2"> + Facebook blue +</Highlight> are my favorite colors. diff --git a/docs/tutorial/thank-you.md b/docs/tutorial/thank-you.md new file mode 100644 index 0000000..808847e --- /dev/null +++ b/docs/tutorial/thank-you.md @@ -0,0 +1,17 @@ +--- +title: Thank you! +--- + +Congratulations on making it this far! + +You have learned the **basics of Docusaurus** and made some changes to the **initial template**. + +But Docusaurus has **much more to offer**! + +## What's next? + +- [Read the official documentation](https://v2.docusaurus.io/). +- [Design and Layout your Docusaurus site](https://v2.docusaurus.io/docs/styling-layout) +- [Integrate a search bar into your site](https://v2.docusaurus.io/docs/search) +- [Find inspirations in Docusaurus showcase](https://v2.docusaurus.io/showcase) +- [Get involved in the Docusaurus Community](https://v2.docusaurus.io/community/support) |