'light' \| 'dark' | `'light'` | The color mode when user first visits the site. |
| `disableSwitch` | `boolean` | `false` | Hides the switch in the navbar. Useful if you want to support a single color mode. |
| `respectPrefersColorScheme` | `boolean` | `false` | Whether to use the `prefers-color-scheme` media-query, using user system preferences, instead of the hardcoded `defaultMode`. |
-| `switchConfig` | _See below_ | _See below_ | Dark/light switch icon options. |
-| `switchConfig.darkIcon` | `string` | `'🌜'` | Icon for the switch while in dark mode. |
-| `switchConfig.darkIconStyle` | JSX style object (see [documentation](https://reactjs.org/docs/dom-elements.html#style)) | `{}` | CSS to apply to dark icon. |
-| `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. |
-| `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. |
@@ -46,18 +41,6 @@ module.exports = {
defaultMode: 'light',
disableSwitch: false,
respectPrefersColorScheme: false,
- switchConfig: {
- darkIcon: '🌙',
- darkIconStyle: {
- marginLeft: '2px',
- },
- // Unicode icons such as '\u2600' will work
- // Unicode with 5 chars require brackets: '\u{1F602}'
- lightIcon: '\u{1F602}',
- lightIconStyle: {
- marginLeft: '1px',
- },
- },
},
// highlight-end
},
@@ -918,9 +901,9 @@ import {useColorMode} from '@docusaurus/theme-common';
const Example = () => {
// highlight-next-line
- const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
+ const {colorMode, setColorMode} = useColorMode();
- return Dark mode is now {isDarkTheme ? 'on' : 'off'}
; + returnDark mode is now {colorMode === 'dark' ? 'on' : 'off'}
; }; ``` diff --git a/website/versioned_docs/version-2.0.0-beta.16/api/themes/theme-live-codeblock.md b/website/versioned_docs/version-2.0.0-beta.18/api/themes/theme-live-codeblock.md similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/api/themes/theme-live-codeblock.md rename to website/versioned_docs/version-2.0.0-beta.18/api/themes/theme-live-codeblock.md diff --git a/website/versioned_docs/version-2.0.0-beta.16/api/themes/theme-search-algolia.md b/website/versioned_docs/version-2.0.0-beta.18/api/themes/theme-search-algolia.md similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/api/themes/theme-search-algolia.md rename to website/versioned_docs/version-2.0.0-beta.18/api/themes/theme-search-algolia.md diff --git a/website/versioned_docs/version-2.0.0-beta.16/assets/docusaurus-asset-example-banner.png b/website/versioned_docs/version-2.0.0-beta.18/assets/docusaurus-asset-example-banner.png similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/assets/docusaurus-asset-example-banner.png rename to website/versioned_docs/version-2.0.0-beta.18/assets/docusaurus-asset-example-banner.png diff --git a/website/versioned_docs/version-2.0.0-beta.16/assets/docusaurus-asset-example.docx b/website/versioned_docs/version-2.0.0-beta.18/assets/docusaurus-asset-example.docx similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/assets/docusaurus-asset-example.docx rename to website/versioned_docs/version-2.0.0-beta.18/assets/docusaurus-asset-example.docx diff --git a/website/versioned_docs/version-2.0.0-beta.16/assets/docusaurus-asset-example.xyz b/website/versioned_docs/version-2.0.0-beta.18/assets/docusaurus-asset-example.xyz similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/assets/docusaurus-asset-example.xyz rename to website/versioned_docs/version-2.0.0-beta.18/assets/docusaurus-asset-example.xyz diff --git a/website/versioned_docs/version-2.0.0-beta.16/blog.mdx b/website/versioned_docs/version-2.0.0-beta.18/blog.mdx similarity index 97% rename from website/versioned_docs/version-2.0.0-beta.16/blog.mdx rename to website/versioned_docs/version-2.0.0-beta.18/blog.mdx index bdee3fcb351f..3e0173879a5f 100644 --- a/website/versioned_docs/version-2.0.0-beta.16/blog.mdx +++ b/website/versioned_docs/version-2.0.0-beta.18/blog.mdx @@ -185,7 +185,7 @@ date: 2021-09-13T18:00 ## Blog post authors {#blog-post-authors} -Use the `authors` front matter field to declare blog post authors. +Use the `authors` front matter field to declare blog post authors. An author should have at least a `name` or an `image_url`. Docusaurus uses information like `url`, `email`, and `title`, but any other information is allowed. ### Inline authors {#inline-authors} @@ -202,6 +202,7 @@ authors: title: Co-creator of Docusaurus 1 url: https://github.com/JoelMarcey image_url: https://github.com/JoelMarcey.png + email: jimarcey@gmail.com --- ``` @@ -215,6 +216,7 @@ authors: title: Co-creator of Docusaurus 1 url: https://github.com/JoelMarcey image_url: https://github.com/JoelMarcey.png + email: jimarcey@gmail.com - name: Sébastien Lorber title: Docusaurus maintainer url: https://sebastienlorber.com @@ -259,6 +261,7 @@ jmarcey: title: Co-creator of Docusaurus 1 url: https://github.com/JoelMarcey image_url: https://github.com/JoelMarcey.png + email: jimarcey@gmail.com slorber: name: Sébastien Lorber @@ -353,6 +356,12 @@ website/i18n/[locale]/docusaurus-plugin-content-blog/authors.yml An author, either declared through front matter or through the authors map, needs to have a name or an avatar, or both. If all authors of a post don't have names, Docusaurus will display their avatars compactly. See [this test post](/tests/blog/2022/01/20/image-only-authors) for the effect. +:::caution Feed generation + +[RSS feeds](#feed) require the author's email to be set for the author to appear in the feed. + +::: + ## Reading time {#reading-time} Docusaurus generates a reading time estimation for each blog post based on word count. We provide an option to customize this. diff --git a/website/versioned_docs/version-2.0.0-beta.16/browser-support.md b/website/versioned_docs/version-2.0.0-beta.18/browser-support.md similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/browser-support.md rename to website/versioned_docs/version-2.0.0-beta.18/browser-support.md diff --git a/website/versioned_docs/version-2.0.0-beta.16/cli.md b/website/versioned_docs/version-2.0.0-beta.18/cli.md similarity index 96% rename from website/versioned_docs/version-2.0.0-beta.16/cli.md rename to website/versioned_docs/version-2.0.0-beta.18/cli.md index f300d26abef7..530c55c7a49f 100644 --- a/website/versioned_docs/version-2.0.0-beta.16/cli.md +++ b/website/versioned_docs/version-2.0.0-beta.18/cli.md @@ -50,6 +50,16 @@ Please note that some functionality (for example, anchor links) will not work in ::: +:::info Development over network + +When forwarding port 3000 from a remote server or VM (e.g. GitHub Codespaces), you can run the dev server on `0.0.0.0` to make it listen on the local IP. + +```bash npm2yarn +npm run start -- --host 0.0.0.0 +``` + +::: + #### Enabling HTTPS {#enabling-https} There are multiple ways to obtain a certificate. We will use [mkcert](https://github.com/FiloSottile/mkcert) as an example. diff --git a/website/versioned_docs/version-2.0.0-beta.16/configuration.md b/website/versioned_docs/version-2.0.0-beta.18/configuration.md similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/configuration.md rename to website/versioned_docs/version-2.0.0-beta.18/configuration.md diff --git a/website/versioned_docs/version-2.0.0-beta.16/deployment.mdx b/website/versioned_docs/version-2.0.0-beta.18/deployment.mdx similarity index 97% rename from website/versioned_docs/version-2.0.0-beta.16/deployment.mdx rename to website/versioned_docs/version-2.0.0-beta.18/deployment.mdx index 5abf43320e68..d2016ed0d58f 100644 --- a/website/versioned_docs/version-2.0.0-beta.16/deployment.mdx +++ b/website/versioned_docs/version-2.0.0-beta.18/deployment.mdx @@ -213,7 +213,7 @@ Refer to [slorber/trailing-slash-guide](https://github.com/slorber/trailing-slas Deploying your Docusaurus project to [Vercel](https://vercel.com/) will provide you with [various benefits](https://vercel.com/) in the areas of performance and ease of use. -To deploy your Docusaurus project with a [Vercel for Git Integration](https://vercel.com/docs/git-integrations), make sure it has been pushed to a Git repository. +To deploy your Docusaurus project with a [Vercel for Git Integration](https://vercel.com/docs/concepts/git), make sure it has been pushed to a Git repository. Import the project into Vercel using the [Import Flow](https://vercel.com/import/git). During the import, you will find all relevant options preconfigured for you; however, you can choose to change any of these options, a list of which can be found [here](https://vercel.com/docs/build-step#build-&-development-settings). @@ -339,12 +339,12 @@ Alternatively, you can use SSH (`USE_SSH=true`) to log in. [GitHub Actions](https://help.github.com/en/actions) allow you to automate, customize, and execute your software development workflows right in your repository. -The workflow examples below assume your website source resides in the `main` branch of your repository (the _source branch_ is `main`), under a folder called `website/`, and your [publishing source](https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) is configured for the `gh-pages` branch (the _deployment branch_ is `gh-pages`). +The workflow examples below assume your website source resides in the `main` branch of your repository (the _source branch_ is `main`), and your [publishing source](https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) is configured for the `gh-pages` branch (the _deployment branch_ is `gh-pages`). Our goal is that: -1. When a new pull request is made to `main` and updates `website/`, there's an action that ensures the site builds successfully, without actually deploying. This job will be called `test-deploy`. -2. When a pull request is merged to the `main` branch or someone pushes to the `main` branch directly and `website/` is updated, it will be built and deployed to the `gh-pages` branch. After that, the new build output will be served on the GitHub Pages site. This job will be called `deploy`. +1. When a new pull request is made to `main`, there's an action that ensures the site builds successfully, without actually deploying. This job will be called `test-deploy`. +2. When a pull request is merged to the `main` branch or someone pushes to the `main` branch directly, it will be built and deployed to the `gh-pages` branch. After that, the new build output will be served on the GitHub Pages site. This job will be called `deploy`. Here are two approaches to deploying your docs with GitHub Actions. Based on the location of your deployment branch (`gh-pages`), choose the relevant tab below: @@ -369,7 +369,7 @@ Add these two workflow files: These files assume you are using yarn. If you use npm, change `cache: yarn`, `yarn install --frozen-lockfile`, `yarn build` to `cache: npm`, `npm ci`, `npm run build` accordingly. -If your Docusaurus project is not at the root of the repo, you would need to change the paths as well. +If your Docusaurus project is not at the root of your repo, you may need to configure a [default working directory](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#example-set-the-default-shell-and-working-directory), and adjust the paths accordingly. ::: @@ -499,7 +499,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v3 with: - node-version: 14.x + node-version: 16.x cache: yarn - uses: webfactory/ssh-agent@v0.5.0 with: diff --git a/website/versioned_docs/version-2.0.0-beta.16/docusaurus-core.md b/website/versioned_docs/version-2.0.0-beta.18/docusaurus-core.md similarity index 100% rename from website/versioned_docs/version-2.0.0-beta.16/docusaurus-core.md rename to website/versioned_docs/version-2.0.0-beta.18/docusaurus-core.md diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/creating-pages.md b/website/versioned_docs/version-2.0.0-beta.18/guides/creating-pages.md similarity index 98% rename from website/versioned_docs/version-2.0.0-beta.16/guides/creating-pages.md rename to website/versioned_docs/version-2.0.0-beta.18/guides/creating-pages.md index bf4c277d4a15..160b4dbf1dec 100644 --- a/website/versioned_docs/version-2.0.0-beta.16/guides/creating-pages.md +++ b/website/versioned_docs/version-2.0.0-beta.18/guides/creating-pages.md @@ -35,9 +35,9 @@ Create a file `/src/pages/helloReact.js`: import React from 'react'; import Layout from '@theme/Layout'; -function Hello() { +export default function Hello() { return ( -
);
}
-
-export default Hello;
```
Once you save the file, the development server will automatically reload the changes. Now open `http://localhost:3000/helloReact` and you will see the new page you just created.
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-create-doc.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-create-doc.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-create-doc.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-create-doc.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-introduction.md b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-introduction.md
similarity index 85%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-introduction.md
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-introduction.md
index 426186a72bbd..02e9d76b45cd 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-introduction.md
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-introduction.md
@@ -37,17 +37,31 @@ id: part1
Lorem ipsum
```
-If you want more control over the last part of the document URL, it is possible to add a `slug` (defaults to the `id`).
+### Customizing doc URLs {#customizing-doc-urls}
+
+By default, a document's URL location is its file path relative to the `docs` folder. Use the `slug` front matter to change a document's URL.
+
+For example, suppose your site structure looks like this:
+
+```bash
+website # Root directory of your site
+└── docs
+ └── guide
+ └── hello.md
+```
+
+By default `hello.md` will be available at `/docs/guide/hello`. You can change its URL location to `/docs/bonjour`:
```md
---
-id: part1
-slug: part1.html
+slug: /bonjour
---
Lorem ipsum
```
+`slug` will be appended to the doc plugin's `routeBasePath`, which is `/docs` by default. See [Docs-only mode](#docs-only-mode) for how to remove the `/docs` part from the URL.
+
:::note
It is possible to use:
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-markdown-features.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-markdown-features.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-markdown-features.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-markdown-features.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-multi-instance.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-multi-instance.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/docs-multi-instance.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/docs-multi-instance.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/autogenerated.md b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/autogenerated.md
similarity index 97%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/autogenerated.md
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/autogenerated.md
index 807de81571de..239888b99f30 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/autogenerated.md
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/autogenerated.md
@@ -323,7 +323,7 @@ sidebar_class_name: green
This is the easy tutorial!
```
-**For categories**: add a `_category_.json` or `_category_.yml` file in the respective folder. You can specify any category metadata and also the `position` metadata.
+**For categories**: add a `_category_.json` or `_category_.yml` file in the respective folder. You can specify any category metadata and also the `position` metadata. `label`, `className`, `position`, and `customProps` will default to the respective values of the category's linked doc, if there is one.
@@ -338,6 +338,9 @@ This is the easy tutorial!
"link": {
"type": "generated-index",
"title": "Tutorial overview"
+ },
+ "customProps": {
+ "description": "This description can be used in the swizzled DocCard"
}
}
```
@@ -354,6 +357,8 @@ className: red
link:
type: generated-index
title: Tutorial overview
+customProps:
+ description: This description can be used in the swizzled DocCard
```
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/index.md b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/index.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/index.md
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/index.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/items.md b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/items.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/items.md
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/items.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/multiple-sidebars.md b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/multiple-sidebars.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/sidebar/multiple-sidebars.md
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/sidebar/multiple-sidebars.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/docs/versioning.md b/website/versioned_docs/version-2.0.0-beta.18/guides/docs/versioning.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/docs/versioning.md
rename to website/versioned_docs/version-2.0.0-beta.18/guides/docs/versioning.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/_markdown-partial-example.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/_markdown-partial-example.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/_markdown-partial-example.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/_markdown-partial-example.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-admonitions.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-admonitions.mdx
similarity index 99%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-admonitions.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-admonitions.mdx
index 365641ab2504..3302ee532661 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-admonitions.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-admonitions.mdx
@@ -87,14 +87,14 @@ If you use [Prettier](https://prettier.io) to format your Markdown files, Pretti
```md
-::: note
+:::note
Hello world
:::
-::: note
+:::note
Hello world
:::
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-assets.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-assets.mdx
similarity index 92%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-assets.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-assets.mdx
index 32194db3291e..321ddb5d9ad2 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-assets.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-assets.mdx
@@ -6,6 +6,8 @@ slug: /markdown-features/assets
---
import BrowserWindow from '@site/src/components/BrowserWindow';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
Sometimes you want to link to assets (e.g. docx files, images...) directly from Markdown files, and it is convenient to co-locate the asset next to the Markdown file using it.
@@ -24,12 +26,18 @@ Let's imagine the following file structure:
You can display images in three different ways: Markdown syntax, CJS require, or ES imports syntax.
+
+
+
Display images using simple Markdown syntax:
```md
```
+
+
+
Display images using inline CommonJS `require` in JSX image tag:
```jsx
@@ -39,6 +47,9 @@ Display images using inline CommonJS `require` in JSX image tag:
/>
```
+
+
+
Display images using ES `import` syntax and JSX image tag:
```jsx
@@ -47,7 +58,10 @@ import myImageUrl from './assets/docusaurus-asset-example-banner.png';
;
```
-This results in displaying the image:
+
+
+
+All of the above result in displaying the image:
@@ -63,7 +77,7 @@ If you are using [@docusaurus/plugin-ideal-image](../../api/plugins/plugin-ideal
## Files {#files}
-In the same way, you can link to existing assets by requiring them and using the returned url in videos, links, etc.
+In the same way, you can link to existing assets by `require`'ing them and using the returned URL in `video`s, `a` anchor links, etc.
```md
# My Markdown page
@@ -89,7 +103,7 @@ or
:::info markdown links are always file paths
-If you use the Markdown image or link syntax, all asset paths will be resolved as file paths by Docusaurus and automatically converted to `require()` calls. You don't need to use `require()` in Markdown unless you use the JSX syntax.
+If you use the Markdown image or link syntax, all asset paths will be resolved as file paths by Docusaurus and automatically converted to `require()` calls. You don't need to use `require()` in Markdown unless you use the JSX syntax, which you do have to handle yourself.
:::
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-code-blocks.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-code-blocks.mdx
similarity index 87%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-code-blocks.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-code-blocks.mdx
index 7934b6ebaafb..085d944ca429 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-code-blocks.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -14,11 +14,13 @@ Code blocks within documentation are super-powered 💪.
You can add a title to the code block by adding a `title` key after the language (leave a space between them).
- ```jsx title="/src/components/HelloCodeTitle.js"
- function HelloCodeTitle(props) {
- return
@@ -34,9 +36,11 @@ function HelloCodeTitle(props) {
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 the specifications of MDX.
- ```js
- console.log('Every repo must come with a mascot.');
- ```
+````md
+```js
+console.log('Every repo must come with a mascot.');
+```
+````
Use the matching language meta string for your code block, and Docusaurus will pick up syntax highlighting automatically, powered by [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer).
@@ -127,26 +131,28 @@ You can refer to [Prism's official language definitions](https://github.com/Pris
You can use comments with `highlight-next-line`, `highlight-start`, and `highlight-end` to select which lines are highlighted.
- ```js
- function HighlightSomeText(highlight) {
- if (highlight) {
- // highlight-next-line
- return 'This text is highlighted!';
- }
+````md
+```js
+function HighlightSomeText(highlight) {
+ if (highlight) {
+ // highlight-next-line
+ return 'This text is highlighted!';
+ }
- return 'Nothing highlighted';
- }
+ return 'Nothing highlighted';
+}
- function HighlightMoreText(highlight) {
- // highlight-start
- if (highlight) {
- return 'This range is highlighted!';
- }
- // highlight-end
+function HighlightMoreText(highlight) {
+ // highlight-start
+ if (highlight) {
+ return 'This range is highlighted!';
+ }
+ // highlight-end
- return 'Nothing highlighted';
- }
- ```
+ return 'Nothing highlighted';
+}
+```
+````
````mdx-code-block
@@ -177,14 +183,14 @@ function HighlightMoreText(highlight) {
Supported commenting syntax:
-| Language | Syntax |
+| Style | Syntax |
| ---------- | ------------------------ |
-| JavaScript | `/* ... */` and `// ...` |
-| JSX | `{/* ... */}` |
-| Python | `# ...` |
-| HTML | `` |
+| C-style | `/* ... */` and `// ...` |
+| JSX-style | `{/* ... */}` |
+| Bash-style | `# ...` |
+| HTML-style | `` |
-If there's a syntax that is not currently supported, we are open to adding them! Pull requests welcome.
+We will do our best to infer which set of comment styles to use based on the language, and default to allowing _all_ comment styles. If there's a comment style that is not currently supported, we are open to adding them! Pull requests welcome.
To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class to the highlighted lines. You will need to define your own styling for this CSS, possibly in your `src/css/custom.css` with a custom background color which is dependent on your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly.
@@ -207,19 +213,21 @@ To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class t
You can also specify highlighted line ranges within the language meta string (leave a space after the language). To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the `parse-number-range` library and you can find [more syntax](https://www.npmjs.com/package/parse-numeric-range) on their project details.
- ```jsx {1,4-6,11}
- import React from 'react';
+````md
+```jsx {1,4-6,11}
+import React from 'react';
- function MyComponent(props) {
- if (props.isBar) {
- return
@@ -265,9 +273,7 @@ In the future, we may extend the magic comment system and let you define custom
(Powered by [React Live](https://github.com/FormidableLabs/react-live))
-You can create an interactive coding editor with the `@docusaurus/theme-live-codeblock` plugin.
-
-First, add the plugin to your package.
+You can create an interactive coding editor with the `@docusaurus/theme-live-codeblock` plugin. First, add the plugin to your package.
```bash npm2yarn
npm install --save @docusaurus/theme-live-codeblock
@@ -285,28 +291,30 @@ module.exports = {
To use the plugin, create a code block with `live` attached to the language meta string.
- ```jsx live
- function Clock(props) {
- const [date, setDate] = useState(new Date());
- useEffect(() => {
- var timerID = setInterval(() => tick(), 1000);
-
- return function cleanup() {
- clearInterval(timerID);
- };
- });
-
- function tick() {
- setDate(new Date());
- }
-
- return (
- `](./markdown-features-tabs.mdx) component in the classic theme so that you can use it for other non-code scenarios as well.
-The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are **intentional**. This is a current limitation of MDX: you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.
+The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block are **intentional**. This is a [current limitation of MDX](./markdown-features-react.mdx#markdown-and-jsx-interoperability): you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.
````jsx
import Tabs from '@theme/Tabs';
@@ -467,7 +475,7 @@ function helloWorld() {
```py
def hello_world():
- print 'Hello, world!'
+ print("Hello, world!")
```
@@ -503,7 +511,7 @@ function helloWorld() {
```py
def hello_world():
- print 'Hello, world!'
+ print("Hello, world!")
```
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-head-metadata.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-head-metadata.mdx
similarity index 63%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-head-metadata.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-head-metadata.mdx
index fa987eb1fedf..1a2c04095c1c 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-head-metadata.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-head-metadata.mdx
@@ -7,9 +7,7 @@ slug: /markdown-features/head-metadata
# Head Metadata
-Docusaurus automatically sets useful page metadata in ``, `` and `` for you.
-
-It is possible to add extra metadata (or override existing ones) by using the `` tag in Markdown files:
+Docusaurus automatically sets useful page metadata in ``, `` and `` for you. It is possible to add extra metadata (or override existing ones) with the `` tag in Markdown files:
```md title="markdown-features-head-metadata.mdx"
---
@@ -46,22 +44,18 @@ My text
:::tip
-This `` declaration has been added to the current Markdown doc, as a demo.
-
-Open your browser DevTools and check how this page's metadata has been affected.
+This `` declaration has been added to the current Markdown doc as a demo. Open your browser DevTools and check how this page's metadata has been affected.
:::
-:::tip
+:::tip You don't need this for regular SEO
-**You don't always need this for typical SEO needs.** Content plugins (e.g. docs and blog) provide front matter options like `description`, `keywords`, and `image`, which will be automatically applied to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `` tag.
+Content plugins (e.g. docs and blog) provide front matter options like `description`, `keywords`, and `image`, which will be automatically applied to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `` tag.
:::
:::note
-This feature is built on top of the Docusaurus [``](./../../docusaurus-core.md#head) component.
-
-Refer to [react-helmet](https://github.com/nfl/react-helmet) for exhaustive documentation.
+This feature is built on top of the Docusaurus [``](./../../docusaurus-core.md#head) component. Refer to [react-helmet](https://github.com/nfl/react-helmet) for exhaustive documentation.
:::
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-headings.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-headings.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-headings.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-headings.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-inline-toc.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-inline-toc.mdx
similarity index 81%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-inline-toc.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-inline-toc.mdx
index 4a48251ac4d0..8369a133184d 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-inline-toc.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-inline-toc.mdx
@@ -7,15 +7,11 @@ slug: /markdown-features/inline-toc
import BrowserWindow from '@site/src/components/BrowserWindow';
-Each Markdown document displays a tab of content on the top-right corner.
-
-But it is also possible to display an inline table of contents directly inside a markdown document, thanks to MDX.
+Each Markdown document displays a table of contents on the top-right corner. But it is also possible to display an inline table of contents directly inside a markdown document, thanks to MDX.
## Full table of contents {#full-table-of-contents}
-The `toc` variable is available in any MDX document and contains all the headings of an MDX document.
-
-By default, only `h2` and `h3` headings are displayed in the TOC. You can change which heading levels are visible by setting `minHeadingLevel` or `maxHeadingLevel`.
+The `toc` variable is available in any MDX document and contains all the headings of an MDX document. By default, only `h2` and `h3` headings are displayed in the TOC. You can change which heading levels are visible by setting `minHeadingLevel` or `maxHeadingLevel` for individual `TOCInline` components.
```jsx
import TOCInline from '@theme/TOCInline';
@@ -27,9 +23,7 @@ import TOCInline from '@theme/TOCInline';
import TOCInline from '@theme/TOCInline';
-
```
@@ -53,12 +47,19 @@ import TOCInline from '@theme/TOCInline';
node.level === 2 || node.level === 4)}
+ minHeadingLevel={2}
+ // Show h4 headings in addition to the default h2 and h3 headings
+ maxHeadingLevel={4}
/>;
```
```mdx-code-block
- node.level === 2 || node.level === 4)} />
+ node.level === 2 || node.level === 4)}
+ minHeadingLevel={2}
+ maxHeadingLevel={4}
+/>
```
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-intro.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-intro.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-intro.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-intro.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-math-equations.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-math-equations.mdx
similarity index 95%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-math-equations.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-math-equations.mdx
index d785f3d027c0..e3281d6fd6ad 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-math-equations.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-math-equations.mdx
@@ -17,9 +17,10 @@ Please read [KaTeX](https://katex.org) documentation for more details.
Write inline math equations by wrapping LaTeX equations between `$`:
-```mdx
-Let $f\colon[a,b] \to \R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)=
-\int_{a}^{x} f(t)\,dt$. Then $$F$$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.
+```latex
+Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be
+$F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that
+$f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.
```
@@ -33,7 +34,7 @@ Let $f\colon[a,b] \to \R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x
For equation block or display mode, use line breaks and `$$`:
-```mdx
+```latex
$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-plugins.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-plugins.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-plugins.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-plugins.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-react.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-react.mdx
similarity index 98%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-react.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-react.mdx
index be6f0018fa05..08530fd72efc 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-react.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-react.mdx
@@ -352,7 +352,7 @@ Now you can import code snippets from another file as it is:
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!./myComponent';
-{MyComponentSource}
+{MyComponentSource}
```
@@ -362,7 +362,7 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponen
-{MyComponentSource}
+{MyComponentSource}
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-react.module.css b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-react.module.css
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-react.module.css
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-react.module.css
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-tabs-styles.module.css b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-tabs-styles.module.css
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-tabs-styles.module.css
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-tabs-styles.module.css
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-tabs.mdx b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-tabs.mdx
similarity index 98%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-tabs.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-tabs.mdx
index 55ce040ead00..062a9abe54f7 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/markdown-features/markdown-features-tabs.mdx
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/markdown-features/markdown-features-tabs.mdx
@@ -12,7 +12,7 @@ import TabItem from '@theme/TabItem';
import styles from './markdown-features-tabs-styles.module.css';
```
-Docusaurus provides `` components that you can use thanks to [MDX](./markdown-features-react.mdx):
+Docusaurus provides the `` component that you can use in Markdown thanks to [MDX](./markdown-features-react.mdx):
```jsx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/guides/whats-next.md b/website/versioned_docs/version-2.0.0-beta.18/guides/whats-next.md
similarity index 89%
rename from website/versioned_docs/version-2.0.0-beta.16/guides/whats-next.md
rename to website/versioned_docs/version-2.0.0-beta.18/guides/whats-next.md
index 17c322a59b8e..7782f58eeb29 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/guides/whats-next.md
+++ b/website/versioned_docs/version-2.0.0-beta.18/guides/whats-next.md
@@ -6,8 +6,8 @@ Congratulations! You have understood most core features of Docusaurus now. You h
- [Used the docs plugin](./docs/docs-introduction.md) to create documentation pages. This includes [configuring the sidebar](./docs/sidebar/index.md), and even [versioning](./docs/versioning.md)
- [Used the blog plugin](../blog.mdx) to create a fully featured blog
- Tried your hands on [a range of Markdown features](./markdown-features/markdown-features-intro.mdx), which are useful for all content plugins
-- [Used stylesheets](../styling-layout.md) to customize your site's appearance
-- [Put images and other assets](../static-assets.md) in your pages
+- [Used stylesheets](../styling-layout.md) or [swizzling](../swizzling.md) to customize your site's appearance
+- [Included images and other assets](../static-assets.md) in your pages
- [Added search](../search.md) to your site
- Understood how [browser support](../browser-support.md) and [SEO](../seo.md) are done through standard Docusaurus APIs
- Learned about how [individual plugins](../using-plugins.md) are installed and configured
diff --git a/website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-crowdin.mdx b/website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-crowdin.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-crowdin.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-crowdin.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-git.md b/website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-git.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-git.md
rename to website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-git.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-introduction.md b/website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-introduction.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-introduction.md
rename to website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-introduction.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-tutorial.md b/website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-tutorial.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/i18n/i18n-tutorial.md
rename to website/versioned_docs/version-2.0.0-beta.18/i18n/i18n-tutorial.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/installation.md b/website/versioned_docs/version-2.0.0-beta.18/installation.md
similarity index 90%
rename from website/versioned_docs/version-2.0.0-beta.16/installation.md
rename to website/versioned_docs/version-2.0.0-beta.18/installation.md
index 0a79f9b3f7cb..ceee8a5df6c8 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/installation.md
+++ b/website/versioned_docs/version-2.0.0-beta.18/installation.md
@@ -41,7 +41,7 @@ If you do not specify `name` or `template`, it will prompt you for them.
We recommend the `classic` template so that you can get started quickly, and it contains features found in Docusaurus 1. The `classic` template contains `@docusaurus/preset-classic` which includes standard documentation, a blog, custom pages, and a CSS framework (with dark mode support). You can get up and running extremely quickly with the classic template and customize things later on when you have gained more familiarity with Docusaurus.
-The `template` also accepts a git repo URL or a local file path, with the latter evaluated relative to the current working directory. The repo/folder content will be copied to the site directory. If it's a git repository, you can also specify a cloning strategy. Run `npx create-docusaurus@latest --help` for more information.
+The `template` also accepts a git repo URL or a local file path, with the latter evaluated relative to the current working directory. The repo/folder content will be copied to the site directory. If it's a git repository, you can also specify a cloning strategy.
You can also use the template's TypeScript variant by passing the `--typescript` flag.
@@ -66,24 +66,24 @@ You can also initialize a new project using your preferred project manager:
````mdx-code-block
-
+
```bash
-npm init docusaurus website classic
+npm init docusaurus
```
```bash
-yarn create docusaurus website classic
+yarn create docusaurus
```
```bash
-pnpm create docusaurus website classic
+pnpm create docusaurus
```
@@ -99,11 +99,7 @@ Docusaurus makes best efforts to select a package manager to install dependencie
npx create-docusaurus@latest my-website classic --package-manager yarn
```
-If you want to skip installing dependencies, use the `--skip-install` option.
-
-```bash
-npx create-docusaurus@latest my-website classic --skip-install
-```
+Run `npx create-docusaurus@latest --help` for more information about all available flags.
## Project structure {#project-structure}
@@ -137,10 +133,10 @@ my-website
### Project structure rundown {#project-structure-rundown}
-- `/blog/` - Contains the blog Markdown files. You can delete the directory if you do not want/need a blog. More details can be found in the [blog guide](blog.mdx)
-- `/docs/` - Contains the Markdown files for the docs. Customize the order of the docs sidebar in `sidebars.js`. More details can be found in the [docs guide](./guides/docs/docs-markdown-features.mdx)
-- `/src/` - Non-documentation files like pages or custom React components. You don't have to strictly put your non-documentation files in here but putting them under a centralized directory makes it easier to specify in case you need to do some sort of linting/processing
- - `/src/pages` - Any files within this directory will be converted into a website page. More details can be found in the [pages guide](guides/creating-pages.md)
+- `/blog/` - Contains the blog Markdown files. You can delete the directory if you've disabled the blog plugin, or you can change its name after setting the `path` option. More details can be found in the [blog guide](blog.mdx)
+- `/docs/` - Contains the Markdown files for the docs. Customize the order of the docs sidebar in `sidebars.js`. You can delete the directory if you've disabled the docs plugin, or you can change its name after setting the `path` option. More details can be found in the [docs guide](./guides/docs/docs-markdown-features.mdx)
+- `/src/` - Non-documentation files like pages or custom React components. You don't have to strictly put your non-documentation files here, but putting them under a centralized directory makes it easier to specify in case you need to do some sort of linting/processing
+ - `/src/pages` - Any JSX/TSX/MDX file within this directory will be converted into a website page. More details can be found in the [pages guide](guides/creating-pages.md)
- `/static/` - Static directory. Any contents inside here will be copied into the root of the final `build` directory
- `/docusaurus.config.js` - A config file containing the site configuration. This is the equivalent of `siteConfig.js` in Docusaurus v1
- `/package.json` - A Docusaurus website is a React app. You can install and use any npm packages you like in them
diff --git a/website/versioned_docs/version-2.0.0-beta.16/introduction.md b/website/versioned_docs/version-2.0.0-beta.18/introduction.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/introduction.md
rename to website/versioned_docs/version-2.0.0-beta.18/introduction.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/migration/migration-automated.md b/website/versioned_docs/version-2.0.0-beta.18/migration/migration-automated.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/migration/migration-automated.md
rename to website/versioned_docs/version-2.0.0-beta.18/migration/migration-automated.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/migration/migration-manual.md b/website/versioned_docs/version-2.0.0-beta.18/migration/migration-manual.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/migration/migration-manual.md
rename to website/versioned_docs/version-2.0.0-beta.18/migration/migration-manual.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/migration/migration-overview.md b/website/versioned_docs/version-2.0.0-beta.18/migration/migration-overview.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/migration/migration-overview.md
rename to website/versioned_docs/version-2.0.0-beta.18/migration/migration-overview.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/migration/migration-translated-sites.md b/website/versioned_docs/version-2.0.0-beta.18/migration/migration-translated-sites.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/migration/migration-translated-sites.md
rename to website/versioned_docs/version-2.0.0-beta.18/migration/migration-translated-sites.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/migration/migration-versioned-sites.md b/website/versioned_docs/version-2.0.0-beta.18/migration/migration-versioned-sites.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/migration/migration-versioned-sites.md
rename to website/versioned_docs/version-2.0.0-beta.18/migration/migration-versioned-sites.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/playground.mdx b/website/versioned_docs/version-2.0.0-beta.18/playground.mdx
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/playground.mdx
rename to website/versioned_docs/version-2.0.0-beta.18/playground.mdx
diff --git a/website/versioned_docs/version-2.0.0-beta.16/search.md b/website/versioned_docs/version-2.0.0-beta.18/search.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/search.md
rename to website/versioned_docs/version-2.0.0-beta.18/search.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/seo.md b/website/versioned_docs/version-2.0.0-beta.18/seo.md
similarity index 96%
rename from website/versioned_docs/version-2.0.0-beta.16/seo.md
rename to website/versioned_docs/version-2.0.0-beta.18/seo.md
index 111560af2801..3c61f7fae51b 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/seo.md
+++ b/website/versioned_docs/version-2.0.0-beta.18/seo.md
@@ -42,8 +42,30 @@ Similar to [global metadata](#global-metadata), Docusaurus also allows for the a
Some content...
```
+Docusaurus automatically adds `description`, `title`, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
+
+```md
+---
+title: Title for search engines; can be different from the actual heading
+description: A short description of this page
+image: a thumbnail image to be shown in social media cards
+keywords: [keywords, describing, the main topics]
+---
+```
+
+When creating your React page, adding these fields in `Layout` would also improve SEO.
+
+:::tip
+
+Prefer to use front matter for fields like `description` and `keywords`: Docusaurus will automatically apply this to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `` tag.
+
+:::
+
+For JSX pages, you can use the Docusaurus [``](docusaurus-core.md#head) component.
+
```jsx title="my-react-page.jsx"
import React from 'react';
+import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
export default function page() {
@@ -58,22 +80,9 @@ export default function page() {
}
```
-Docusaurus automatically adds `description`, `title`, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
-
-```md
----
-title: Title for search engines; can be different from the actual heading
-description: A short description of this page
-image: a thumbnail image to be shown in social media cards
-keywords: [keywords, describing, the main topics]
----
-```
-
-When creating your React page, adding these fields in `Layout` would also improve SEO.
-
:::tip
-Prefer to use front matter for fields like `description` and `keywords`: Docusaurus will automatically apply this to both `description` and `og:description`, while you would have to manually declare two metadata tags when using the `` tag.
+For convenience, the default theme `` component accept `title` and `description` as props.
:::
diff --git a/website/versioned_docs/version-2.0.0-beta.16/static-assets.md b/website/versioned_docs/version-2.0.0-beta.18/static-assets.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/static-assets.md
rename to website/versioned_docs/version-2.0.0-beta.18/static-assets.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/styling-layout.md b/website/versioned_docs/version-2.0.0-beta.18/styling-layout.md
similarity index 91%
rename from website/versioned_docs/version-2.0.0-beta.16/styling-layout.md
rename to website/versioned_docs/version-2.0.0-beta.18/styling-layout.md
index e2f877d4b362..b6cba21b2e5d 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/styling-layout.md
+++ b/website/versioned_docs/version-2.0.0-beta.18/styling-layout.md
@@ -20,7 +20,7 @@ There are a few approaches/frameworks which will work, depending on your prefere
This is the most traditional way of styling that most developers (including non-front-end developers) would be familiar with. It works fine for small websites that do not have much customization.
-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 them 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 them as an option of the classic theme.
```js title="docusaurus.config.js"
module.exports = {
@@ -114,7 +114,7 @@ Alternatively, use the following tool to generate the different shades for your
### Dark Mode {#dark-mode}
-In light mode, the `` element has a `data-theme="light"` attribute; and in dark mode, it's `data-theme="dark"`. Therefore, you can scope your CSS to dark-mode-only by targeting `html` with a specific attribute.
+In light mode, the `` element has a `data-theme="light"` attribute; in dark mode, it's `data-theme="dark"`. Therefore, you can scope your CSS to dark-mode-only by targeting `html` with a specific attribute.
```css
/* Overriding root Infima variables */
@@ -129,14 +129,14 @@ In light mode, the `` element has a `data-theme="light"` attribute; and in
### Mobile View {#mobile-view}
-Docusaurus uses `966px` as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries.
+Docusaurus uses `996px` as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries.
```css
.banner {
padding: 4rem;
}
/** In mobile view, reduce the padding */
-@media screen and (max-width: 966px) {
+@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
@@ -145,7 +145,7 @@ Docusaurus uses `966px` as the cutoff between mobile screen width and desktop. I
## CSS modules {#css-modules}
-To style your components using [CSS Modules](https://github.com/css-modules/css-modules), name your stylesheet files with the `.module.css` suffix (e.g. `welcome.module.css`). webpack will load such CSS files as CSS modules and you have to reference the class names from the imported CSS module (as opposed to using plain strings). This is similar to the convention used in [Create React App](https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet).
+To style your components using [CSS Modules](https://github.com/css-modules/css-modules), name your stylesheet files with the `.module.css` suffix (e.g. `welcome.module.css`). Webpack will load such CSS files as CSS modules and you have to reference the class names as properties of the imported CSS module (as opposed to using plain strings). This is similar to the convention used in [Create React App](https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet).
```css title="styles.module.css"
.main {
@@ -180,7 +180,7 @@ The class names will be processed by webpack into a globally unique class name d
:::caution
-This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640).
+CSS-in-JS support is a work in progress, so libs like MUI may have display quirks. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640).
:::
diff --git a/website/versioned_docs/version-2.0.0-beta.16/swizzling.md b/website/versioned_docs/version-2.0.0-beta.18/swizzling.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/swizzling.md
rename to website/versioned_docs/version-2.0.0-beta.18/swizzling.md
diff --git a/website/versioned_docs/version-2.0.0-beta.16/typescript-support.md b/website/versioned_docs/version-2.0.0-beta.18/typescript-support.md
similarity index 99%
rename from website/versioned_docs/version-2.0.0-beta.16/typescript-support.md
rename to website/versioned_docs/version-2.0.0-beta.18/typescript-support.md
index 3f9e09716855..13f6ad57158e 100644
--- a/website/versioned_docs/version-2.0.0-beta.16/typescript-support.md
+++ b/website/versioned_docs/version-2.0.0-beta.18/typescript-support.md
@@ -115,7 +115,7 @@ By default, the Docusaurus TypeScript config does not type-check JavaScript file
The `// @ts-check` comment ensures the config file is properly type-checked when running:
```bash npm2yarn
-npm run tsc
+npx tsc
```
:::
diff --git a/website/versioned_docs/version-2.0.0-beta.16/using-plugins.md b/website/versioned_docs/version-2.0.0-beta.18/using-plugins.md
similarity index 100%
rename from website/versioned_docs/version-2.0.0-beta.16/using-plugins.md
rename to website/versioned_docs/version-2.0.0-beta.18/using-plugins.md
diff --git a/website/versioned_sidebars/version-2.0.0-beta.16-sidebars.json b/website/versioned_sidebars/version-2.0.0-beta.18-sidebars.json
similarity index 100%
rename from website/versioned_sidebars/version-2.0.0-beta.16-sidebars.json
rename to website/versioned_sidebars/version-2.0.0-beta.18-sidebars.json
diff --git a/website/versions.json b/website/versions.json
index c93a85922de0..17b19bf8eb64 100644
--- a/website/versions.json
+++ b/website/versions.json
@@ -1,4 +1,4 @@
[
- "2.0.0-beta.17",
- "2.0.0-beta.16"
+ "2.0.0-beta.18",
+ "2.0.0-beta.17"
]
diff --git a/website/versionsArchived.json b/website/versionsArchived.json
index 561012c93e6b..c1fdc2893621 100644
--- a/website/versionsArchived.json
+++ b/website/versionsArchived.json
@@ -1,4 +1,5 @@
{
+ "2.0.0-beta.16": "https://623daf53d815110008446e27--docusaurus-2.netlify.app/docs/2.0.0-beta.16",
"2.0.0-beta.15": "https://6220d0362c028b000827f851--docusaurus-2.netlify.app/docs/2.0.0-beta.15",
"2.0.0-beta.14": "https://6218ceed1b19a70008d9c348--docusaurus-2.netlify.app/docs/2.0.0-beta.14",
"2.0.0-beta.13": "https://61f16eafc42e860008d41557--docusaurus-2.netlify.app/docs/2.0.0-beta.13",
Hello, {props.name}
; - } - ``` +````md +```jsx title="/src/components/HelloCodeTitle.js" +function HelloCodeTitle(props) { + returnHello, {props.name}
; +} +``` +````Bar
;
- }
+function MyComponent(props) {
+ if (props.isBar) {
+ return Bar
;
+ }
- return Foo
;
- }
+ return Foo
;
+}
- export default MyComponent;
- ```
+export default MyComponent;
+```
+````
-
- );
- }
- ```
+````md
+```jsx live
+function Clock(props) {
+ const [date, setDate] = useState(new Date());
+ useEffect(() => {
+ var timerID = setInterval(() => tick(), 1000);
+
+ return function cleanup() {
+ clearInterval(timerID);
+ };
+ });
+
+ function tick() {
+ setDate(new Date());
+ }
+
+ return (
+ It is {date.toLocaleTimeString()}.
-
+
+ );
+}
+```
+````
The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live.
@@ -445,9 +453,9 @@ Syntax highlighting only works on plain strings. Docusaurus will not attempt to
With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switch between them using a tabs component.
-Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a generic Tabs component in the classic theme so that you can use it for other non-code scenarios as well.
+Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a general-purpose [`