From f52fa06561cd57b9609d4dd1a0bd26bacd9e01c6 Mon Sep 17 00:00:00 2001 From: Dover Date: Wed, 29 Aug 2018 23:38:07 -0400 Subject: [PATCH 1/2] added new readme.md --- examples/basics/README.md | 181 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 examples/basics/README.md diff --git a/examples/basics/README.md b/examples/basics/README.md new file mode 100644 index 000000000000..b9e5453c021a --- /dev/null +++ b/examples/basics/README.md @@ -0,0 +1,181 @@ +This website was created with [Docusaurus](https://docusaurus.io/). + +# What's In This Document +* [Get Started in 5 Minutes](#get-started-in-5-minutes) +* [Directory Structure](#directory-structure) +* [Editing Content](#editing-content) +* [Adding Content](#adding-content) +* [Full Documentation](#full-documentation) + +# Get Started in 5 Minutes +1. Make sure all the dependencies for the website are installed: +```sh +# install dependencies +$ yarn +``` +2. Run your dev server: +```sh +# start the site +$ yarn start +``` + +## Directory Structure +Your project file structure should look something like this +``` +my-docusaurus/ + docs/ + doc-1.md + doc-2.md + doc-3.md + website/ + blog/ + 2016-3-11-oldest-post.md + 2017-10-24-newest-post.md + core/ + node_modules/ + pages/ + static/ + css/ + img/ + package.json + sidebar.json + siteConfig.js +``` + +# Editing Content + +## Editing an existing docs page +1) Edit docs by navigating to `docs/` and editing the corresponding document: + +`docs/doc-to-be-edited.md` +```markdown +--- +id: page-needs-edit +title: This Doc Needs To Be Edited +--- + +Edit me... +``` + +For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) + +## Editing an existing blog post +1) Edit blog posts by navigating to `website/blog` and editing the corresponding post: + +`website/blog/post-to-be-edited.md` +```markdown +--- +id: post-needs-edit +title: This Blog Post Needs To Be Edited +--- + +Edit me... +``` + +For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) + +# Adding Content + +## Adding a new docs page to an existing sidebar +1. Create the doc as a new markdown file in /docs: + +`docs/newly-created-doc.md` +```markdown +--- +id: newly-created-doc +title: This Doc Needs To Be Edited +--- + +My new content here.. +``` + +2. Refer to that doc's ID in an existing sidebar in website/sidebar.json: + +`website/sidebar.json` +```javascript +// add newly-created-doc to the Getting Started category of docs +{ + "docs": { + "Getting Started": [ + "quick-start", + "newly-created-doc" // new doc here + ], + ... + }, + ... +} +``` + +For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) + +## Adding a new blog post +1. Make sure there is a header link to your blog in `website/siteConfig.js`: + +`website/siteConfig.js` +```javascript +headerLinks: [ + ... + { blog: true, label: 'Blog' }, + ... +] +``` + +2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: + +`website/blog/2018-05-21-New-Blog-Post.md` +```markdown +--- +author: Frank Li +authorURL: https://twitter.com/foobarbaz +authorFBID: 503283835 +title: New Blog Post +--- + +Lorem Ipsum... +``` + +For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) + +## Adding items to your site's top navigation bar +1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: + +`website/siteConfig.js` +```javascript +{ + headerLinks: [ + ... + /* you can add docs */ + { doc: 'my-examples', label: 'Examples' }, + /* you can add custom pages */ + { page: 'help', label: 'Help' }, + /* you can add external links */ + { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, + ... + ], + ... +} +``` + +For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) + +## Adding custom pages +1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: +2. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the headerLinks element: + +`website/siteConfig.js` +```javascript +{ + headerLinks: [ + ... + { page: 'my-new-custom-page', label: 'My New Custom Page' }, + ... + ], + ... +} +``` + +For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages) + +# Full Documentation + +Full documentation can be found at the [website](https://docusaurus.io/) From c78ae64f954956ff76d73329e029db48d3bb8af0 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sat, 1 Sep 2018 13:49:32 -0700 Subject: [PATCH 2/2] Update README.md --- examples/basics/README.md | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/examples/basics/README.md b/examples/basics/README.md index b9e5453c021a..f3da77ff3424 100644 --- a/examples/basics/README.md +++ b/examples/basics/README.md @@ -1,6 +1,7 @@ This website was created with [Docusaurus](https://docusaurus.io/). # What's In This Document + * [Get Started in 5 Minutes](#get-started-in-5-minutes) * [Directory Structure](#directory-structure) * [Editing Content](#editing-content) @@ -8,19 +9,24 @@ This website was created with [Docusaurus](https://docusaurus.io/). * [Full Documentation](#full-documentation) # Get Started in 5 Minutes + 1. Make sure all the dependencies for the website are installed: + ```sh -# install dependencies +# Install dependencies $ yarn ``` 2. Run your dev server: + ```sh -# start the site +# Start the site $ yarn start ``` ## Directory Structure + Your project file structure should look something like this + ``` my-docusaurus/ docs/ @@ -45,9 +51,11 @@ my-docusaurus/ # Editing Content ## Editing an existing docs page -1) Edit docs by navigating to `docs/` and editing the corresponding document: + +Edit docs by navigating to `docs/` and editing the corresponding document: `docs/doc-to-be-edited.md` + ```markdown --- id: page-needs-edit @@ -60,7 +68,8 @@ Edit me... For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) ## Editing an existing blog post -1) Edit blog posts by navigating to `website/blog` and editing the corresponding post: + +Edit blog posts by navigating to `website/blog` and editing the corresponding post: `website/blog/post-to-be-edited.md` ```markdown @@ -77,10 +86,10 @@ For more information about blog posts, click [here](https://docusaurus.io/docs/e # Adding Content ## Adding a new docs page to an existing sidebar -1. Create the doc as a new markdown file in /docs: -`docs/newly-created-doc.md` -```markdown +1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: + +```md --- id: newly-created-doc title: This Doc Needs To Be Edited @@ -89,11 +98,10 @@ title: This Doc Needs To Be Edited My new content here.. ``` -2. Refer to that doc's ID in an existing sidebar in website/sidebar.json: +1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: -`website/sidebar.json` ```javascript -// add newly-created-doc to the Getting Started category of docs +// Add newly-created-doc to the Getting Started category of docs { "docs": { "Getting Started": [ @@ -109,6 +117,7 @@ My new content here.. For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) ## Adding a new blog post + 1. Make sure there is a header link to your blog in `website/siteConfig.js`: `website/siteConfig.js` @@ -123,6 +132,7 @@ headerLinks: [ 2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: `website/blog/2018-05-21-New-Blog-Post.md` + ```markdown --- author: Frank Li @@ -137,6 +147,7 @@ Lorem Ipsum... For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) ## Adding items to your site's top navigation bar + 1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: `website/siteConfig.js` @@ -159,8 +170,9 @@ For more information about blog posts, click [here](https://docusaurus.io/docs/e For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) ## Adding custom pages + 1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: -2. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the headerLinks element: +1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: `website/siteConfig.js` ```javascript @@ -174,8 +186,8 @@ For more information about the navigation bar, click [here](https://docusaurus.i } ``` -For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages) +For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). # Full Documentation -Full documentation can be found at the [website](https://docusaurus.io/) +Full documentation can be found on the [website](https://docusaurus.io/).