aboutsummaryrefslogtreecommitdiff
path: root/docs/tutorial
diff options
context:
space:
mode:
authorFuwn <[email protected]>2021-04-06 20:11:26 -0700
committerFuwn <[email protected]>2021-04-06 20:11:26 -0700
commit6e04b1bab644045398b213900b60bf1ac1c0272d (patch)
tree0cc17281bbd67244efc3c23e71297c9cbaa9c0d8 /docs/tutorial
parentchore: Create contribution guidelines (diff)
downloadsite-6e04b1bab644045398b213900b60bf1ac1c0272d.tar.xz
site-6e04b1bab644045398b213900b60bf1ac1c0272d.zip
major: Furnish repository
Diffstat (limited to 'docs/tutorial')
-rw-r--r--docs/tutorial/create-a-blog-post.md25
-rw-r--r--docs/tutorial/create-a-document.md38
-rw-r--r--docs/tutorial/create-a-page.md45
-rw-r--r--docs/tutorial/getting-started.md28
-rw-r--r--docs/tutorial/markdown-features.mdx.dev128
-rw-r--r--docs/tutorial/thank-you.md17
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
+![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 (
+ <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)