From 6e04b1bab644045398b213900b60bf1ac1c0272d Mon Sep 17 00:00:00 2001 From: Fuwn Date: Tue, 6 Apr 2021 20:11:26 -0700 Subject: major: Furnish repository --- docs/tutorial/create-a-blog-post.md | 25 +++++++ docs/tutorial/create-a-document.md | 38 ++++++++++ docs/tutorial/create-a-page.md | 45 +++++++++++ docs/tutorial/getting-started.md | 28 +++++++ docs/tutorial/markdown-features.mdx.dev | 128 ++++++++++++++++++++++++++++++++ docs/tutorial/thank-you.md | 17 +++++ 6 files changed, 281 insertions(+) create mode 100644 docs/tutorial/create-a-blog-post.md create mode 100644 docs/tutorial/create-a-document.md create mode 100644 docs/tutorial/create-a-page.md create mode 100644 docs/tutorial/getting-started.md create mode 100644 docs/tutorial/markdown-features.mdx.dev create mode 100644 docs/tutorial/thank-you.md (limited to 'docs/tutorial') 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 ( + +

My React page

+

This is a React page

+ + ); +} +``` + +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 +![Docusaurus logo](/img/docusaurus.png) +``` + +![Docusaurus logo](/img/docusaurus.png) + +## Code Blocks + +Markdown code blocks are supported with Syntax highlighting. + + ```jsx title="src/components/HelloDocusaurus.js" + function HelloDocusaurus() { + return ( +

Hello, Docusaurus!

+ ) + } + ``` + +```jsx title="src/components/HelloDocusaurus.js" +function HelloDocusaurus() { + return

Hello, Docusaurus!

; +} +``` + +## 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}) => ( + + {children} + +); + +Docusaurus green and Facebook blue are my favorite colors. +``` + +export const Highlight = ({children, color}) => ( + + {children} + +); + +Docusaurus green and + Facebook blue + 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) -- cgit v1.2.3