diff --git a/packages/docusaurus-init/bin/index.js b/packages/docusaurus-init/bin/index.js old mode 100644 new mode 100755 diff --git a/packages/docusaurus/CHANGELOG.md b/packages/docusaurus/CHANGELOG.md index 16384e630f..5dfe752f79 100644 --- a/packages/docusaurus/CHANGELOG.md +++ b/packages/docusaurus/CHANGELOG.md @@ -4,6 +4,10 @@ - Added Google analytics and Google gtag plugins. - Moved source components to `/src`. Please create a `website/src` directory and move your `/pages` and `/theme` code into it. This is to make it easier to integrate your website with external build/static analysis tooling (you can now just pass in `src/**/*.js` as the path to process). +- Added more documentation thanks to @wgao19. +- Deprecate the current docs plugin. The docs plugin as of 2.0.0-alpha.19 is heavily based on V1 specifications and we intend to create a better one that fixes some of the inconsistencies in V1. If you have swizzled any doc components, you will have to update their names. You are highly encourages to not swizzle the legacy doc components until we have completed the new docs plugin. +- Render the NotFound page if an unspecified route was accessed. +- Clicking on the logo in the mobile sliding navigation will now bring you to the homepage. ## 2.0.0-alpha.19 diff --git a/website/docs/advanced-plugins.md b/website/docs/advanced-plugins.md index 6ebf9a49f0..7c5345e1ee 100644 --- a/website/docs/advanced-plugins.md +++ b/website/docs/advanced-plugins.md @@ -11,7 +11,7 @@ Docusaurus Plugins are very similar to [Gatsby Plugins](https://www.gatsbyjs.org In most cases, plugins are there to fetch data and create routes. A plugin could take in components as part of its options and to act as the wrapper for the page. -## Lifecycle Methods +## Lifecycle methods @@ -26,13 +26,13 @@ For example, the in docusaurus-plugin-content-docs: In contentLoaded, for each doc Markdown file, a route is created: /doc/installation, /doc/getting-started, etc. --> -## How to Create Plugins +## How to create plugins _This section is a work in progress._ -## Official Plugins +## Official plugins ### `@docusaurus/plugin-content-blog` @@ -164,22 +164,22 @@ module.exports = { }; ``` -### `@docusaurus/plugin-content-analytics` +### `@docusaurus/plugin-google-analytics` The classic template ships with this plugin for Google Analytics. To use this analytics, specify the plugin in the `plugins` field, and provide your Google Analytics configuration in [theme config](./using-themes.md). ```js // docusaurus.config.js module.exports = { - plugins: ['@docusaurus/plugin-content-analytics'], + plugins: ['@docusaurus/plugin-google-analytics'], }; ``` -### `@docusaurus/plugin-content-gtag` +### `@docusaurus/plugin-google-gtag` _This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._ -### `@docusaurus/plugin-content-sitemap` +### `@docusaurus/plugin-sitemap` The classic template ships with this plugin. @@ -187,7 +187,7 @@ The classic template ships with this plugin. // docusaurus.config.js module.exports = { plugins: [ - '@docusaurus/plugin-content-sitemap', + '@docusaurus/plugin-sitemap', { cacheTime: 600 * 1000, // 600 sec - cache purge period changefreq: 'weekly', diff --git a/website/docs/configuration.md b/website/docs/configuration.md index 0fedac5f20..249ef2c969 100644 --- a/website/docs/configuration.md +++ b/website/docs/configuration.md @@ -7,7 +7,7 @@ title: Configuration Docusaurus has a unique take on configurations. We encourage you to congregate information of your site into one place. We will guard the fields of this file, and facilitate making this data object accessible across your site. -Keeping a well-maintained `docusaurus.config.js` helps you, your collaborators, and your open source contributors be able to focus on docs while having certain fields easy to customize. +Keeping a well-maintained `docusaurus.config.js` helps you, your collaborators, and your open source contributors be able to focus on documentation while still being able to easily customize fields. For reference to each of the configurable fields, you may refer to the API reference of [docusaurus.config.js](docusaurus.config.js.md). @@ -24,13 +24,13 @@ The configurations can be categorized into: - [Theme Configurations, Plugins, and Presets](#theme-plugins-and-presets-configurations) - [Custom Configurations](#custom-configurations) -### Site Metadata +### Site metadata Site metadata contains the essential global metadata such as titles and `favicon`. They are used by your website in a number of places such as your site's title and headings, browser tab icon, social sharing (Facebook, Twitter) information and for search engine optimization (SEO). -### Deployment Configurations +### Deployment configurations Deployment configurations are used when you deploy your site with Docusaurus' `deploy` command. The related fields are: @@ -38,9 +38,9 @@ Deployment configurations are used when you deploy your site with Docusaurus' `d -You may also check the [Deployment docs](deployment.md) for more information about the fields. +You may also check the [deployment docs](deployment.md) for more information about the fields. -### Themes, Plugins, and Presets Configurations +### Themes, Plugins, and Presets configurations _This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._ @@ -57,7 +57,7 @@ TODO: --> -### Custom Configurations +### Custom configurations Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom field, define it on `customFields` @@ -73,7 +73,7 @@ module.exports = { }; ``` -## Accessing Configuration From Your Site +## Accessing configuration from components Your configuration object will be made available to all the components of your site. And you may access them via context as `siteConfig`: diff --git a/website/docs/creating-pages.md b/website/docs/creating-pages.md index a838865691..20f16f46b7 100644 --- a/website/docs/creating-pages.md +++ b/website/docs/creating-pages.md @@ -3,13 +3,13 @@ id: creating-pages title: Creating Pages --- -In this section, we will learn about creating ad-hoc pages in Docusaurus using React. This is most useful for creating one-off standalone pages. +In this section, we will learn about creating ad-hoc pages in Docusaurus using React. This is most useful for creating one-off standalone pages like a showcase page, playground page or support page. -### Creating Pages +## Adding a new page -In the `src/pages` directory, create a file called `hello.js` with the following contents: +In the `/src/pages/` directory, create a file called `hello.js` with the following contents: ```jsx import React from 'react'; @@ -39,20 +39,41 @@ export default Hello; Once you save the file, the development server will automatically reload the changes. Now open http://localhost:3000/hello, you will see the new page you just created. -Any file you create under `pages` directory will be automatically converted to a page, converting the directory hierarchy into paths. For example: +Each page doesn't come with any styling. You will need to import the `Layout` component from `@theme/Layout` and wrap your contents within that component if you want the navbar and/or footer to appear. -- `pages/index.js` → `/` -- `pages/test.js` → `/test` -- `pages/foo/test.js` → `/foo/test` -- `pages/foo/index.js` → `/foo` +## Routing -### Using React +If you are familiar with other static site generators like Jekyll and Next, this routing approach will feel familiar to you. Any JavaScript file you create under `/src/pages/` directory will be automatically converted to a website page, following the `/src/pages/` directory hierarchy. For example: -React is used as the UI library to create pages. You can leverage on the expressibility of React to build rich web content. +- `/src/pages/index.js` → `/` +- `/src/pages/test.js` → `/test` +- `/src/pages/foo/test.js` → `/foo/test` +- `/src/pages/foo/index.js` → `/foo` + +In this component-based development era, it is encouraged to co-locate your styling, markup and behavior together into components. Each page is a component, and if you need to customize your page design with your own styles, we recommend co-locating your styles with the page component in its own directory. For example, to create a "Support" page, you could do one of the following: + +- Add a `/src/pages/support.js` file +- Create a `/src/pages/support/` directory and a `/src/pages/support/index.js` file. + +The latter is preferred as it has the benefits of letting you put files related to the page within that directory. For e.g. a CSS module file (`styles.module.css`) with styles meant to only be used on the "Support" page. **Note:** this is merely a recommended directory structure and you will still need to manually import the CSS module file within your component module (`support/index.js`). + +```sh +my-website +├── src +│ └── pages +│ ├── styles.module.css +│ ├── index.js +│ └── support +│ ├── index.js +│ └── styles.module.css +. +``` + +## Using React + +React is used as the UI library to create pages. Every page component should export a React component and you can leverage on the expressibility of React to build rich and interactive content. diff --git a/website/docs/deployment.md b/website/docs/deployment.md index 214f0c500c..4aace0def1 100644 --- a/website/docs/deployment.md +++ b/website/docs/deployment.md @@ -11,13 +11,13 @@ npm build Once it finishes, you should see the production build under the `build/` directory. -You can deploy your site to static site hosting services such as [GitHub Pages](https://pages.github.com/), [Render](https://render.com/static-sites), and [Netlify](https://www.netlify.com/). Docusaurus sites are server rendered so they work without JavaScript too! +You can deploy your site to static site hosting services such as [GitHub Pages](https://pages.github.com/), [Now](https://zeit.co/now), [Netlify](https://www.netlify.com/), and [Render](https://render.com/static-sites). Docusaurus sites are statically rendered so they work without JavaScript too! ## Deploying to GitHub Pages Docusaurus provides a easy way to publish to GitHub Pages. -### `docusaurus.config.js` Settings +### `docusaurus.config.js` settings First, modify your `docusaurus.config.js` and add the required params: @@ -45,7 +45,7 @@ module.exports = { } ``` -### Environment Settings +### Environment settings Specify the Git user as an environment variable. @@ -76,6 +76,14 @@ References: --> +## Deploying to Now + +_This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._ + +## Deploying to Netlify + +_This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._ + ## Deploying to Render Render offers [free static site hosting](https://render.com/docs/static-sites) with fully managed SSL, custom domains, a global CDN and continuous auto deploys from your Git repo. Deploy your app in just a few minutes by following these steps. @@ -84,16 +92,12 @@ Render offers [free static site hosting](https://render.com/docs/static-sites) w 2. Select the branch to deploy. The default is `master`. -2. Enter the following values during creation. +3. Enter the following values during creation. - | Field | Value | - | ------- | ----- | - | **Environment** | `Static Site` | - | **Build Command** | `yarn build` | - | **Publish Directory** | `build` | + | Field | Value | + | --------------------- | ------------- | + | **Environment** | `Static Site` | + | **Build Command** | `yarn build` | + | **Publish Directory** | `build` | That's it! Your app will be live on your Render URL as soon as the build finishes. - -## Deployment with Netlify - -_This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._ diff --git a/website/docs/design-principles.md b/website/docs/design-principles.md index 34aac073b8..5593332c25 100644 --- a/website/docs/design-principles.md +++ b/website/docs/design-principles.md @@ -5,17 +5,19 @@ title: Design Principles _This section is a work in progress._ -- Easy to learn but most things are still achievable by users, even if it takes them more code and more time to write. Not having abstractions is better than having the wrong abstractions, and we don't want users to have to hack around the wrong abstractions. Mandatory talk - [Minimal API Surface Area](https://www.youtube.com/watch?v=4anAwXYqLG8) -- Intuitive project structure - users will not feel overwhelmed when looking at the project directory of a Docusaurus project. It should look intuitive and easy to build on top of. -- The separations of concerns between each layer of our stack (content/theming/styling) should be clear - well-abstracted and modular. -- Sensible defaults - Common and popular performance optimizations and configurations will be done for users but they are given the option to override them. -- No vendor-lock in - Users are not required to use the default plugins or CSS, although they are highly encouraged to. Certain lower-level infra level stuff like React Loadable, React Router are fine, but not higher level ones, such as choice of Markdown engines, CSS frameworks, CSS methodology. +- **Little to learn** - Docusaurus should be easy to learn and use as the API is quite small. Most things will still be achievable by users, even if it takes them more code and more time to write. Not having abstractions is better than having the wrong abstractions, and we don't want users to have to hack around the wrong abstractions. Mandatory talk - [Minimal API Surface Area](https://www.youtube.com/watch?v=4anAwXYqLG8) +- **Intuitive** - Users will not feel overwhelmed when looking at the project directory of a Docusaurus project or adding new features. It should look intuitive and easy to build on top of, using approaches they are familiar with. +- **Layered architecture** - The separations of concerns between each layer of our stack (content/theming/styling) should be clear - well-abstracted and modular. +- **Sensible defaults** - Common and popular performance optimizations and configurations will be done for users but they are given the option to override them. +- **No vendor-lock in** - Users are not required to use the default plugins or CSS, although they are highly encouraged to. Certain lower-level infra level stuff like React Loadable, React Router are fine, but not higher level ones, such as choice of Markdown engines, CSS frameworks, CSS methodology. -## How Docusaurus Works +## How Docusaurus works -We believe that as devlopers, knowing how a library works is helpful in allowing us to become better at using it. Hence we're dedicating effort into explaining the architecture and various components of Docusaurus with the hope that users reading it will gain a deeper understanding of the tool and be even more proficient in using it. +We believe that as developers, knowing how a library works is helpful in allowing us to become better at using it. Hence we're dedicating effort into explaining the architecture and various components of Docusaurus with the hope that users reading it will gain a deeper understanding of the tool and be even more proficient in using it. + +_This section is a work in progress._ + +## Staying informed - [GitHub](https://github.com/facebook/docusaurus) - [Twitter](https://twitter.com/docusaurus) - [Blog](/blog) -## Something Missing? +## Something missing? If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please [file an issue](https://github.com/facebook/docusaurus) for us, or send a tweet mentioning the [@docusaurus](https://twitter.com/docusaurus) Twitter account. diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index d106e90608..e3ada5773f 100644 --- a/website/docs/markdown-features.mdx +++ b/website/docs/markdown-features.mdx @@ -21,20 +21,21 @@ In this section, we'd like to introduce you to the tools we've picked that we be Markdown is a syntax that enables you to write formatted content in an easy-to-use syntax. The [standard Markdown syntax](https://daringfireball.net/projects/markdown/syntax) is supported and we use [MDX](https://mdxjs.com/) as the parsing engine, which can do much more than just parsing Markdown. More on that later. -Create a markdown file, `greeting.md`, and place it under the `docs` directory of your website's root. +Create a markdown file, `greeting.md`, and place it under the `docs` directory. ```bash website # root directory of your site ├── docs │   └── greeting.md -├── pages +├── src +│   └── pages ├── docusaurus.config.js ├── ... ``` -In the beginning of this file, specify `id` the `title` in the front matter, so that Docusaurus will pick them up correctly when generating your site. +In the top of the file, specify `id` the `title` in the front matter, so that Docusaurus will pick them up correctly when generating your site. ```markdown --- @@ -90,7 +91,7 @@ The headers are well-spaced so that the hierarchy is clear. -### Embedding React Components +### Embedding React components Docusaurus has built-in support for [MDX](https://mdxjs.com), which allows you to write JSX within your Markdown files and render them as React components. @@ -141,7 +142,7 @@ I can write **Markdown** alongside my _JSX_! You can also import your own components defined in other files or third-party components installed via npm! Check out the [MDX docs](https://mdxjs.com/) to see what other fancy stuff you can do with MDX. -### Syntax Highlighting +### Syntax highlighting Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out [this reference](https://github.com/mdx-js/specification) for specifications of MDX. @@ -159,7 +160,7 @@ console.log('Every repo must come with a mascot.'); **Work in Progress** Currently the Prism theme we use is [Night Owl](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/nightOwl.js). We will support customized theme in a future version. -### Interactive Coding Editor +### Interactive code editor (Powered by [React Live](https://github.com/FormidableLabs/react-live)) @@ -231,4 +232,4 @@ function Clock(props) { } ``` -**Note** The React Live component is rather big in bundle size. It is an opt-in. +**Note:** The React Live component is rather big in bundle size. It is an opt-in. diff --git a/website/docs/api-plugins.md b/website/docs/plugins-api.md similarity index 90% rename from website/docs/api-plugins.md rename to website/docs/plugins-api.md index c6f5ee6ceb..0fc9e1d147 100644 --- a/website/docs/api-plugins.md +++ b/website/docs/plugins-api.md @@ -5,17 +5,18 @@ title: Plugins Plugins are one of the best ways to add functionality to our Docusaurus. Plugins allow third-party developers to extend or modify the default functionality that Docusaurus provides. -## Installing a Plugin +## Installing a plugin -A plugin is usually a dependency, so you install them like other packages in node using NPM. +A plugin is an npm package, so you install them like other npm packages using npm. ```bash yarn add docusaurus-plugin-name ``` -Then you add it in your site's `docusaurus.config.js` plugin arrays: +Then you add it in your site's `docusaurus.config.js`'s `plugins` option: ```jsx +// docusaurus.config.js module.exports = { plugins: [ '@docusaurus/plugin-content-pages', @@ -34,6 +35,7 @@ module.exports = { Docusaurus can also load plugins from your local directory, you can do something like the following: ```jsx +// docusaurus.config.js const path = require('path'); module.exports = { @@ -45,7 +47,7 @@ module.exports = { Plugins are modules which export a function that takes in the context, options and returns a plain JavaScript object that has some properties defined. -For examples, please refer to several official plugins created. +For examples, please refer to several [official plugins](https://github.com/facebook/docusaurus/tree/master/packages) created. ```jsx const DEFAULT_OPTIONS = { diff --git a/website/docs/sidebar.md b/website/docs/sidebar.md index 835ff24ea3..6c89319140 100644 --- a/website/docs/sidebar.md +++ b/website/docs/sidebar.md @@ -3,7 +3,7 @@ id: sidebar title: Sidebar --- -To generate a sidebar to your Docusaurus site, you need to define a file that exports a JS module and pass that into `docusaurus-plugin-docs` directly or via the `docusaurus-preset-classic`. If you are using the classic preset, you can find the `sidebars.js` under the root directory already created for you, so you may edit it directly for customization. +To generate a sidebar to your Docusaurus site, you need to define a file that exports a JS module and pass that into the `@docusaurus/plugin-docs` plugin directly or via `@docusaurus/preset-classic`. If you are using the classic preset, you can find the `sidebars.js` under the root directory already created for you, so you may edit it directly for customization. @@ -29,7 +29,7 @@ module.exports = { }; ``` -The `docs` key in the file is just the name of that particular sidebar hierarchy, and can be renamed to something else. You can have multiple sidebars for different Markdown files by adding more top-level keys to the exported object. +The `docs` key in the exported object is just the name of that particular sidebar hierarchy, and can be renamed to something else. You can have multiple sidebars for different Markdown files by adding more top-level keys to the exported object. ## Subcategories diff --git a/website/docs/static-assets.md b/website/docs/static-assets.md index 0d2d9c5a52..e04fe774ef 100644 --- a/website/docs/static-assets.md +++ b/website/docs/static-assets.md @@ -3,28 +3,29 @@ id: static-assets title: Static Assets --- -In general, every website needs assets: images, stylesheets, favicons and etc. In such cases, -you can create a folder named `static` at the root of your project. Every file you put into that folder will be copied into the generated build folder. E.g. if you add a file named `sun.jpg` to the static folder, it’ll be copied to `build/sun.jpg` +In general, every website needs assets: images, stylesheets, favicons and etc. In such cases, you can create a directory named `static` at the root of your project. Every file you put into that directory will be copied into the the root of the generated `build` folder with the directory hierarchy preserved. E.g. if you add a file named `sun.jpg` to the static folder, it’ll be copied to `build/sun.jpg`. -This means that if the site's baseUrl is `/`, an image in `static/img/docusaurus_keytar.svg` is available at `docusaurus_keytar.svg`. +This means that if the site's `baseUrl` is `/`, an image in `/static/img/docusaurus_keytar.svg` is available at `/docusaurus_keytar.svg`. + ## Referencing your static asset You can reference assets from the static folder in your code with absolute path, i.e. starting with a slash /. -Markdown example: +### Markdown example ```markdown -![docusaurus logo](/img/docusaurus.png) + +![Docusaurus logo](/img/docusaurus.png) ``` Result: -![docusaurus logo](/img/docusaurus.png) +![Docusaurus logo](/img/docusaurus.png) -JSX example: +### JSX example ```jsx // reference static/img/slash-birth.png @@ -35,8 +36,7 @@ Result: docusaurus mascot - Keep in mind that: - None of the files in static folder will be post-processed or minified. -- Missing files will not be called at compilation time, and will cause 404 errors for your users. +- Missing files will not be called at compilation time, and will result in a 404 error. diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md index 61d5452151..ec9c0fbe0e 100644 --- a/website/docs/styling-layout.md +++ b/website/docs/styling-layout.md @@ -5,7 +5,7 @@ title: Styling and Layout ## Traditional CSS -If you're using `@docusaurus/preset-classic`, you can create your own CSS files (e.g. `src/css/custom.css`) and import them globally by passing it as an option into the preset. +If you're using `@docusaurus/preset-classic`, you can create your own CSS files (e.g. `/src/css/custom.css`) and import them globally by passing it as an option into the preset. ```diff // docusaurus.config.js @@ -26,15 +26,15 @@ module.exports = { Any CSS you write within that file will be available globally and can be referenced directly using string literals. This is the most traditional approach to writing CSS and is fine for small websites that do not have much customization. -## Styling your Site with Infima +## Styling your site with Infima -`@docusaurus/preset-classic` uses [Infima CSS](https://infima-dev.netlify.com/) as the underlying styling framework. Infima provides powerful and flexible layout and styling suitable for content-centric websites. For more details of Infima, check out [Infima docs](https://infima-dev.netlify.com/). +`@docusaurus/preset-classic` uses [Infima](https://infima-dev.netlify.com/) as the underlying styling framework. Infima provides flexible layout and common UI components styling suitable for content-centric websites (blogs, documentation, landing pages). For more details, check out the [Infima website](https://infima-dev.netlify.com/). When you `init` your Docusaurus 2 project, the website will be generated with basic Infima stylesheets and default styling. You may customize the styling by editing the `src/css/custom.css` file. ```css /** - * src/css/custom.css + * /src/css/custom.css * You can override the default Infima variables here. * Note: this is not a complete list of --ifm- variables. */ @@ -49,22 +49,24 @@ When you `init` your Docusaurus 2 project, the website will be generated with ba } ``` +In future, we will provide an easier way to generate the different shades of colors. + -## Styling Approaches +## Styling approaches A Docusaurus site is a single-page React application. You can style it the way you style React apps. There are a few approaches/frameworks which will work, depending on your preferences and the type of website you are trying to build. Websites that are highly interactive and behave more like web apps will benefit from a more modern styling approaches that co-locate styles with the components. Component styling can also be particularly useful when you wish to customize or swizzle a component. -### Global Styles +### Global styles This is the most traditional way of styling that most developers (including non-front end developers) would be familiar with. -Assuming you are using `@docusaurus/preset-classic` and `src/css/custom.css` was passed in to the preset config, styles inside that file would be available globally. +Assuming you are using `@docusaurus/preset-classic` and `/src/css/custom.css` was passed in to the preset config, styles inside that file would be available globally. ```css -/* src/css/custom.css */ +/* /src/css/custom.css */ .purple-text { color: rebeccapurple; } diff --git a/website/docs/api-themes.md b/website/docs/themes-api.md similarity index 96% rename from website/docs/api-themes.md rename to website/docs/themes-api.md index e2729235c8..ce7f724a40 100644 --- a/website/docs/api-themes.md +++ b/website/docs/themes-api.md @@ -1,5 +1,5 @@ --- -id: themes +id: themes-api title: Themes --- diff --git a/website/docs/using-plugins.md b/website/docs/using-plugins.md index 40b42f773f..10b6928b67 100644 --- a/website/docs/using-plugins.md +++ b/website/docs/using-plugins.md @@ -7,11 +7,11 @@ title: Using Plugins Plugins are the building blocks which add features to a Docusaurus 2 site. Each plugin handles its own individual feature. Plugins may work be bundled together and distributed via [presets](advanced-presets.md). -Docusaurus 2 provides a few essential plugins such as [Google Analytics](#docusaurus-plugin-content-analytics) and [Sitemap](#docusaurus-plugin-content-sitemap). You may also write your own plugins for customized features. +Docusaurus 2 provides a few essential plugins such as [Google Analytics](advanced-plugins.md#docusaurusplugin-google-analytics) and [Sitemap](advanced-plugins.md#docusaurusplugin-sitemap). You may also write your own plugins for customized features. -In this doc, we talk about how to use plugins with Docusaurus' official plugins. To learn about the design implementation and how to write your own plugins, check out [Advanced Guides: Plugins](advanced-plugins.md). For API reference, check out [API Reference: Plugins](api-plugins.md). +In this doc, we talk about how to use plugins with Docusaurus' official plugins. To learn about the design implementation and how to write your own plugins, check out [Advanced Guides: Plugins](advanced-plugins.md). For API reference, check out [API Reference: Plugins](plugins-api.md). -## Using Plugins +## Using plugins To use a plugin, add the plugin to the `plugins` field of your `docusaurus.config.js`. @@ -35,9 +35,9 @@ module.exports = { }; ``` -## Passing Options to Docusaurus Plugins Within Preset +## Passing options to Docusaurus plugins via preset -Docusaurus' classic template is scaffolded with the classic preset, which in turn includes the following official plugins. You may read more about the configurations of these plugins in our [Advanced Guides: Plugins](advanced-plugins.md). +Docusaurus' classic template is scaffolded with the classic preset, which includes the following official plugins. You may read more about the configurations of these plugins in our [Advanced Guides: Plugins](advanced-plugins.md). - `@docusaurus/plugin-content-blog` - `@docusaurus/plugin-content-docs` diff --git a/website/docs/using-themes.md b/website/docs/using-themes.md index 77176b2f35..24154fd55f 100644 --- a/website/docs/using-themes.md +++ b/website/docs/using-themes.md @@ -16,7 +16,7 @@ High-level overview about themes: Related pieces --- - [Advanced Guide – Themes](advanced-themes.md) -- [API - Themes](api-themes.md) +- [API - Themes](themes-api.md) References --- diff --git a/website/sidebars.js b/website/sidebars.js index ffa68c8f62..e1c309eb2a 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -16,10 +16,11 @@ module.exports = { Guides: [ 'creating-pages', 'styling-layout', + 'static-assets', { type: 'category', label: 'Docs', - items: ['markdown-features', 'sidebar', 'static-assets'], + items: ['markdown-features', 'sidebar'], }, 'blog', 'reaching-users', @@ -37,6 +38,7 @@ module.exports = { 'docusaurus-core', 'docusaurus.config.js', 'plugins-api', + 'themes-api', ], }, };