+ {/* highlight-start */}
+
+ Welcome to my website
+
+ {/* highlight-end */}
+
+
-
- );
+const SomeImage = () => {
+ // highlight-start
+ const imgSrc = useBaseUrl('/img/myImage.png');
+ // highlight-end
+ return Browse the docs
-- Learn more about Docusaurus using the{' '} - official documentation -
-.default})
+```
+
+:::
+
### `useBaseUrlUtils`
Sometimes `useBaseUrl` is not good enough. This hook return additional utils related to your site's base url.
-- `withBaseUrl`: useful if you need to add base urls to multiple urls at once
+- `withBaseUrl`: useful if you need to add base urls to multiple urls at once.
-```jsx {2,5-7}
+```jsx
import React from 'react';
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
const Component = () => {
const urls = ['/a', '/b'];
+ // highlight-start
const {withBaseUrl} = useBaseUrlUtils();
const urlsWithBaseUrl = urls.map(withBaseUrl);
- return {/* ... */}
;
+ // highlight-end
+ return {/* ... */}
;
};
```
@@ -303,6 +376,54 @@ const MyComponent = () => {
};
```
+## Functions
+
+### `translate`
+
+The imperative counterpart of the [`Hello from Docusaurus
+ +Are you ready to create the documentation site for your open source project? + +Headers
+ +will show up on the table of contents on the upper right + +So that your users will know what this page is all about without scrolling down or even without reading too much. + +Only h2 and h3 will be in the toc
+ +The headers are well-spaced so that the hierarchy is clear. + +- lists will help you +- present the key points +- that you want your users to remember + - and you may nest them + - multiple times + +.default})
+
+or
+
+
+```
+
+The ES imports syntax also works:
+
+```mdx
+# My Markdown page
+
+import myImageUrl from './assets/docusaurus-asset-example-banner.png';
+
+Hello, {props.name}
; + } + ``` + +```jsx title="/src/components/HelloCodeTitle.js" +function HelloCodeTitle(props) { + returnHello, {props.name}
; +} +``` + +## 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. + + ```jsx + 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). + +```jsx +console.log('Every repo must come with a mascot.'); +``` + +By default, the Prism [syntax highlighting theme](https://github.com/FormidableLabs/prism-react-renderer#theming) we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js). You can change this to another theme by passing `theme` field in `prism` as `themeConfig` in your docusaurus.config.js. + +For example, if you prefer to use the `dracula` highlighting theme: + +```js {4} title="docusaurus.config.js" +module.exports = { + themeConfig: { + prism: { + theme: require('prism-react-renderer/themes/dracula'), + }, + }, +}; +``` + +By default, Docusaurus comes with this subset of [commonly used languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js). + +To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages), define it in an array of additional languages. + +For example, if you want to add highlighting for the `powershell` language: + +```js {5} title="docusaurus.config.js" +module.exports = { + // ... + themeConfig: { + prism: { + additionalLanguages: ['powershell'], + }, + // ... + }, +}; +``` + +If you want to add highlighting for languages not yet supported by Prism, you can swizzle `prism-include-languages`: + +```bash npm2yarn +npm run swizzle @docusaurus/theme-classic prism-include-languages +``` + +It will produce `prism-include-languages.js` in your `src/theme` folder. You can add highlighting support for custom languages by editing `prism-include-languages.js`: + +```js {8} title="src/theme/prism-include-languages.js" +const prismIncludeLanguages = (Prism) => { + // ... + + additionalLanguages.forEach((lang) => { + require(`prismjs/components/prism-${lang}`); // eslint-disable-line + }); + + require('/path/to/your/prism-language-definition'); + + // ... +}; +``` + +You can refer to [Prism's official language definitions](https://github.com/PrismJS/prism/tree/master/components) when you are writing your own language definitions. + +## Line highlighting + +You can bring emphasis to certain lines of code by specifying line ranges after the language meta string (leave a space after the language). + + ```jsx {3} + function HighlightSomeText(highlight) { + if (highlight) { + return 'This text is highlighted!'; + } + + return 'Nothing highlighted'; + } + ``` + +```jsx {3} +function HighlightSomeText(highlight) { + if (highlight) { + return 'This text is highlighted!'; + } + + return 'Nothing highlighted'; +} +``` + +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. + +```css title="/src/css/custom.css" +.docusaurus-highlight-code-line { + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +/* If you have a different syntax highlighting theme for dark mode. */ +html[data-theme='dark'] .docusaurus-highlight-code-line { + background-color: ; /* Color which works with dark mode syntax highlighting theme */ +} +``` + +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'; + + function MyComponent(props) { + if (props.isBar) { + returnBar
;
+ }
+
+ return Foo
;
+ }
+
+ export default MyComponent;
+ ```
+
+```jsx {1,4-6,11}
+import React from 'react';
+
+function MyComponent(props) {
+ if (props.isBar) {
+ return Bar
;
+ }
+
+ return Foo
;
+}
+
+export default MyComponent;
+```
+
+You can also use comments with `highlight-next-line`, `highlight-start`, and `highlight-end` to select which lines are highlighted.
+
+ ```jsx
+ function HighlightSomeText(highlight) {
+ if (highlight) {
+ // highlight-next-line
+ return 'This text is highlighted!';
+ }
+
+ return 'Nothing highlighted';
+ }
+
+ function HighlightMoreText(highlight) {
+ // highlight-start
+ if (highlight) {
+ return 'This range is highlighted!';
+ }
+ // highlight-end
+
+ return 'Nothing highlighted';
+ }
+ ```
+
+```jsx
+function HighlightSomeText(highlight) {
+ if (highlight) {
+ // highlight-next-line
+ return 'This text is highlighted!';
+ }
+
+ return 'Nothing highlighted';
+}
+
+function HighlightMoreText(highlight) {
+ // highlight-start
+ if (highlight) {
+ return 'This range is highlighted!';
+ }
+ // highlight-end
+
+ return 'Nothing highlighted';
+}
+```
+
+Supported commenting syntax:
+
+| Language | Syntax |
+| ---------- | ------------------------ |
+| JavaScript | `/* ... */` and `// ...` |
+| JSX | `{/* ... */}` |
+| Python | `# ...` |
+| HTML | `` |
+
+If there's a syntax that is not currently supported, we are open to adding them! Pull requests welcome.
+
+## Interactive code editor
+
+(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.
+
+```bash npm2yarn
+npm install --save @docusaurus/theme-live-codeblock
+```
+
+You will also need to add the plugin to your `docusaurus.config.js`.
+
+```js {3}
+module.exports = {
+ // ...
+ themes: ['@docusaurus/theme-live-codeblock'],
+ // ...
+};
+```
+
+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 (
+
+
+ );
+ }
+ ```
+
+The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live.
+
+```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()}.
+
+
+ );
+}
+```
+
+:::caution react-live and imports
+
+It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.
+
+:::
+
+By default, all React imports are available. If you need more imports available, swizzle the react-live scope:
+
+```bash npm2yarn
+npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
+```
+
+```jsx {3-15,21} title="src/theme/ReactLiveScope/index.js"
+import React from 'react';
+
+const ButtonExample = (props) => (
+
+);
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+ React,
+ ...React,
+ ButtonExample,
+};
+
+export default ReactLiveScope;
+```
+
+The `ButtonExample` component is now available to use:
+
+```jsx live
+function MyPlayground(props) {
+ return (
+ It is {date.toLocaleTimeString()}.
+
+ alert('hey!')}>Click me
+
+ );
+}
+```
+
+## Multi-language support code blocks
+
+With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching 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.
+
+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 is **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.
+
+````jsx
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
++ +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. + +:::caution + +Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](../../migration/migration-manual.md#convert-style-attributes-to-style-objects-in-mdx). + +::: diff --git a/website/docs/guides/markdown-features/markdown-features-tabs.mdx b/website/docs/guides/markdown-features/markdown-features-tabs.mdx new file mode 100644 index 000000000000..65f7930763a8 --- /dev/null +++ b/website/docs/guides/markdown-features/markdown-features-tabs.mdx @@ -0,0 +1,218 @@ +--- +id: tabs +title: Tabs +description: Using tabs inside Docusaurus Markdown +slug: /markdown-features/tabs +--- + +import Tabs from '@theme/Tabs'; + +import TabItem from '@theme/TabItem'; + +To show tabbed content within Markdown files, you can fall back on MDX. Docusaurus provides `
+
+ Welcome to my Docusaurus translated site!
+
+
+
+
+ Welcome to my Docusaurus translated site!
+
+
+
+ {/* highlight-start */}
+
+ Welcome to my website
+
+ {/* highlight-end */}
+
+
+
+
+
+ .default('img/slash-introducing.svg')})
+
Docusaurus 1 used to be a pure documentation site generator. In Docusaurus 2, we rebuilt it from the ground up, allowing for more customizability but preserved the best parts of Docusaurus 1 - easy to get started, versioned docs, and i18n (_coming soon_).
diff --git a/website/docs/lifecycle-apis.md b/website/docs/lifecycle-apis.md
index a97d1cc09359..c41b3ac9143a 100644
--- a/website/docs/lifecycle-apis.md
+++ b/website/docs/lifecycle-apis.md
@@ -346,6 +346,45 @@ module.exports = function (context, options) {
Read the [webpack-merge strategy doc](https://github.com/survivejs/webpack-merge#merging-with-strategies) for more details.
+## `configurePostCss(options)`
+
+Modifies [`postcssOptions` of `postcss-loader`](https://webpack.js.org/loaders/postcss-loader/#postcssoptions) during the generation of the client bundle.
+
+Should return the mutated `postcssOptions`.
+
+By default, `postcssOptions` looks like this:
+
+```js
+const postcssOptions = {
+ ident: 'postcss',
+ plugins: [
+ require('postcss-preset-env')({
+ autoprefixer: {
+ flexbox: 'no-2009',
+ },
+ stage: 4,
+ }),
+ ],
+};
+```
+
+Example:
+
+```js title="docusaurus-plugin/src/index.js"
+module.exports = function (context, options) {
+ return {
+ name: 'docusaurus-plugin',
+ // highlight-start
+ configurePostCss(postcssOptions) {
+ // Appends new PostCSS plugin.
+ postcssOptions.plugins.push(require('postcss-import'));
+ return postcssOptions;
+ },
+ // highlight-end
+ };
+};
+```
+
## `postBuild(props)`
Called when a (production) build finishes.
@@ -362,20 +401,23 @@ type Props = {
postBodyTags: string;
routesPaths: string[];
plugins: Plugin
@@ -531,7 +529,7 @@ const MyPage = () => {
Get started
@@ -552,9 +550,9 @@ The following code could be helpful for migration of various pages:
## Content
-### Remove AUTOGENERATED_TABLE_OF_CONTENTS
+### Replace AUTOGENERATED_TABLE_OF_CONTENTS
-This feature is deprecated. You may read more about it in [this issue](https://github.com/facebook/docusaurus/issues/1549). If you need the feature, use [remark-toc](https://github.com/remarkjs/remark-toc) instead and pass it to docs plugin's `remarkPlugins` option.
+This feature is replaced by [inline table of content](../guides/markdown-features/markdown-features-inline-toc.mdx)
### Update Markdown syntax to be MDX-compatible
@@ -566,7 +564,7 @@ Frontmatter is parsed by [gray-matter](https://github.com/jonschlinkert/gray-mat
### Language-specific code tabs
-Refer to the [multi-language support code blocks](markdown-features.mdx#multi-language-support-code-blocks) section.
+Refer to the [multi-language support code blocks](../guides/markdown-features/markdown-features-code-blocks.mdx#multi-language-support-code-blocks) section.
### Front matter
diff --git a/website/docs/migration/migration-overview.md b/website/docs/migration/migration-overview.md
index 7e96ec37fb99..0f89ca97294a 100644
--- a/website/docs/migration/migration-overview.md
+++ b/website/docs/migration/migration-overview.md
@@ -33,22 +33,30 @@ Your Docusaurus 1 site should have the following structure:
## Docusaurus 2 structure
-After the migration, your Docusaurus 2 site should look like:
+After the migration, your Docusaurus 2 site could look like:
```sh
-website
-├── blog
├── docs
-├── src
-│ ├── components
-│ ├── css
-│ └── pages
-├── static
-├── package.json
-├── sidebars.json
-├── docusaurus.config.js
+└── website
+ ├── blog
+ ├── src
+ │ ├── components
+ │ ├── css
+ │ └── pages
+ ├── static
+ ├── package.json
+ ├── sidebars.json
+ ├── docusaurus.config.js
```
+:::info
+
+This migration does not change the `/docs` folder location, but Docusaurus v2 sites generally have the `/docs` folder inside `/website`
+
+You are free to put the `/docs` folder anywhere you want after having migrated to v2.
+
+:::
+
## Migration process
There are multiple things to migrate to obtain a fully functional Docusaurus 2 website:
diff --git a/website/docs/search.md b/website/docs/search.md
index 527002cfe779..9251a7ddc307 100644
--- a/website/docs/search.md
+++ b/website/docs/search.md
@@ -14,6 +14,8 @@ There are two main options, you can use [Algolia DocSearch](https://docsearch.al
Algolia DocSearch works by crawling the content of your website every 24 hours and putting all the content in an Algolia index. This content is then queried directly from your front-end using the Algolia API. Note that your website needs to be publicly available for this to work (i.e., not behind a firewall). The service is free.
+If your website is [not eligible](https://docsearch.algolia.com/docs/who-can-apply) for the free, hosted version of DocSearch, or if your website sits behind a firewall, then you can [run your own](https://docsearch.algolia.com/docs/run-your-own/) DocSearch crawler. For best results, you may want to use a config file based on the [Docusaurus 2 config](https://github.com/algolia/docsearch-configs/blob/master/configs/docusaurus-2.json).
+
### Connecting Algolia
To connect your docs with Algolia, add an `algolia` field in your `themeConfig`. **[Apply for DocSearch](https://docsearch.algolia.com/apply/)** to get your Algolia index and API key.
diff --git a/website/docs/static-assets.md b/website/docs/static-assets.md
index c3db7c43bb45..fb1d686c268d 100644
--- a/website/docs/static-assets.md
+++ b/website/docs/static-assets.md
@@ -3,28 +3,40 @@ id: static-assets
title: Static Assets
---
-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`.
+Every website needs assets: images, stylesheets, favicons etc. In such cases, you can create a directory named `static` at the root of your project.
-This means that if the site's `baseUrl` is `/`, an image in `/static/img/docusaurus_keytar.svg` is available at `/img/docusaurus_keytar.svg`.
+Every file you put into **that directory will be copied** into 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 will be copied to `build/sun.jpg`.
+
+This means that:
+
+- for site `baseUrl: '/'`, the image `/static/img/docusaurus.png` will be served at `/img/docusaurus.png`.
+- for site `baseUrl: '/subpath/'`, the image `/static/img/docusaurus.png` will be served at `/subpath/img/docusaurus.png`.
## Referencing your static asset
-You can reference assets from the `static` folder in your code. You could use hardcoded absolute paths, i.e. starting with a slash /, but remember to include the `baseUrl` if it is not `/`. However, this will break if you change your `baseUrl` in the config.
+You can reference assets from the `static` folder in your code using absolute paths, but this is not ideal because changing the site `baseUrl` will **break those link**s.
-A better way would be to use the `useBaseUrl` utility function which appends the `baseUrl` to paths for you.
+You can `import` / `require()` the static asset (recommended), or use the `useBaseUrl` utility function: both prepend the `baseUrl` to paths for you.
### JSX example
+```jsx title="MyComponent.js"
+import DocusaurusImageUrl from '@site/static/img/docusaurus.png';
+
+
;
+```
+
+```jsx title="MyComponent.js"
+.default})
+```
+
```jsx title="MyComponent.js"
import useBaseUrl from '@docusaurus/useBaseUrl';
-})
;
+})
;
```
-You can also import SVG images, which will be transformed into React components.
+You can also import SVG files: they will be transformed into React components.
```jsx title="MyComponent.js"
import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';
@@ -34,7 +46,13 @@ import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';
### Markdown example
-Thanks to MDX, you can also use `useBaseUrl` utility function in Markdown files! You'd have to use `![]()
` tags instead of the Markdown image syntax though. The syntax is exactly the same as in JSX.
+Markdown links and images referencing assets of the static folder will be converted to `require("@site/static/assetName.png")"`, and **the site baseUrl will be automatically prepended** for you.
+
+```md title="my-doc.md"
+
+```
+
+Thanks to MDX, you can also use `useBaseUrl` utility function in Markdown files! You'd have to use html tags like `![]()
` instead of the Markdown image syntax though. The syntax is exactly the same as in JSX.
```jsx title="my-doc.mdx"
---
@@ -47,19 +65,13 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
...
-
-```
-
-You could also just use Markdown image syntax, but you would have to manually maintain the image paths yourself and isn't recommended.
-
-```md title="my-doc.md"
-
+})
```
### Caveats
Keep in mind that:
-- By default, none of the files in `static` folder will be post-processed or minified.
-- Missing files references via hardcoded absolute paths will not be detected at compilation time, and will result in a 404 error.
+- By default, none of the files in `static` folder will be post-processed, hashed or minified.
+- Missing files referenced via hardcoded absolute paths will not be detected at compilation time, and will result in a 404 error.
- By default, GitHub Pages runs published files through [Jekyll](https://jekyllrb.com/). Since Jekyll will discard any files that begin with `_`, it is recommended that you disable Jekyll by adding an empty file named `.nojekyll` file to your `static` directory if you are using GitHub pages for hosting.
diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md
index 55af00613371..ced45921c8f8 100644
--- a/website/docs/styling-layout.md
+++ b/website/docs/styling-layout.md
@@ -59,6 +59,18 @@ Alternatively, use the following tool to generate the different shades for your
`
+
+A `` theme component is rendered at the very top of your Docusaurus site.
+
+It allows you to wrap your site with additional logic, by creating a file at `src/theme/Root.js`:
+
+```js title="website/src/theme/Root.js"
+import React from 'react';
+
+// Default implementation, that you can customize
+function Root({children}) {
+ return <>{children};
+}
+
+export default Root;
+```
+
+This component is applied above the router and the theme ``, and will **never unmount**.
+
+:::tip
+
+Use this component render React Context providers and global stateful logic.
+
+:::
## Swizzling theme components
diff --git a/website/docusaurus.config-blog-only.js b/website/docusaurus.config-blog-only.js
index 924a5a0fbf05..10372f54eac6 100644
--- a/website/docusaurus.config-blog-only.js
+++ b/website/docusaurus.config-blog-only.js
@@ -42,6 +42,11 @@ module.exports = {
],
themeConfig: {
image: 'img/docusaurus-soc.png',
+ algolia: {
+ apiKey: '47ecd3b21be71c5822571b9f59e52544',
+ indexName: 'docusaurus-2',
+ contextualSearch: true,
+ },
navbar: {
hideOnScroll: true,
title: 'Docusaurus',
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 528ff0aa421d..8dfa590321ac 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -41,7 +41,33 @@ const isBootstrapPreset = process.env.DOCUSAURUS_PRESET === 'bootstrap';
const isVersioningDisabled = !!process.env.DISABLE_VERSIONING;
-module.exports = {
+// Special deployment for staging locales until they get enough translations
+// https://app.netlify.com/sites/docusaurus-i18n-staging
+// https://docusaurus-i18n-staging.netlify.app/
+const isI18nStaging = process.env.I18N_STAGING === 'true';
+
+const LocaleConfigs = isI18nStaging
+ ? // Staging locales (https://docusaurus-i18n-staging.netlify.app/)
+ {
+ en: {
+ label: 'English',
+ },
+ 'zh-CN': {
+ label: '简体中文',
+ },
+ }
+ : // Production locales
+ {
+ en: {
+ label: 'English',
+ },
+ fr: {
+ label: 'Français',
+ },
+ };
+
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
+(module.exports = {
title: 'Docusaurus',
tagline: 'Build optimized websites quickly, focus on your content',
organizationName: 'facebook',
@@ -51,7 +77,8 @@ module.exports = {
url: 'https://v2.docusaurus.io',
i18n: {
defaultLocale: 'en',
- locales: ['en', 'fr'],
+ locales: Object.keys(LocaleConfigs),
+ localeConfigs: LocaleConfigs,
},
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
@@ -68,7 +95,13 @@ module.exports = {
{
id: 'community',
path: 'community',
- editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/',
+ editUrl: ({locale, versionDocsDirPath, docPath}) => {
+ if (locale !== 'en') {
+ return `https://crowdin.com/project/docusaurus-v2/${locale}`;
+ }
+ return `https://github.com/facebook/docusaurus/edit/master/website/${versionDocsDirPath}/${docPath}`;
+ },
+ editCurrentVersion: true,
routeBasePath: 'community',
sidebarPath: require.resolve('./sidebarsCommunity.js'),
showLastUpdateAuthor: true,
@@ -195,30 +228,39 @@ module.exports = {
// routeBasePath: '/',
path: 'docs',
sidebarPath: require.resolve('./sidebars.js'),
- editUrl:
- 'https://github.com/facebook/docusaurus/edit/master/website/',
+ editUrl: ({locale, versionDocsDirPath, docPath}) => {
+ if (locale !== 'en') {
+ return `https://crowdin.com/project/docusaurus-v2/${locale}`;
+ }
+ return `https://github.com/facebook/docusaurus/edit/master/website/${versionDocsDirPath}/${docPath}`;
+ },
+ editCurrentVersion: true,
showLastUpdateAuthor: true,
showLastUpdateTime: true,
remarkPlugins: [
[require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
],
disableVersioning: isVersioningDisabled,
- lastVersion: 'current',
+ lastVersion: isDev ? 'current' : undefined,
onlyIncludeVersions:
!isVersioningDisabled && (isDev || isDeployPreview)
? ['current', ...versions.slice(0, 2)]
: undefined,
versions: {
current: {
- label: `${getNextAlphaVersionName()} (unreleased)`,
+ label: `${getNextAlphaVersionName()} 🚧`,
},
},
},
blog: {
// routeBasePath: '/',
path: '../website-1.x/blog',
- editUrl:
- 'https://github.com/facebook/docusaurus/edit/master/website-1.x/',
+ editUrl: ({locale, blogDirPath, blogPath}) => {
+ if (locale !== 'en') {
+ return `https://crowdin.com/project/docusaurus-v2/${locale}`;
+ }
+ return `https://github.com/facebook/docusaurus/edit/master/website/${blogDirPath}/${blogPath}`;
+ },
postsPerPage: 3,
feedOptions: {
type: 'all',
@@ -303,6 +345,16 @@ module.exports = {
},
],
},
+ {
+ type: 'localeDropdown',
+ position: 'right',
+ dropdownItemsAfter: [
+ {
+ to: 'https://github.com/facebook/docusaurus/issues/3526',
+ label: 'Help Us Translate',
+ },
+ ],
+ },
{
href: 'https://github.com/facebook/docusaurus',
position: 'right',
@@ -388,6 +440,14 @@ module.exports = {
label: 'Terms',
href: 'https://opensource.facebook.com/legal/terms/',
},
+ {
+ label: 'Data Policy',
+ href: 'https://opensource.facebook.com/legal/data-policy/',
+ },
+ {
+ label: 'Cookie Policy',
+ href: 'https://opensource.facebook.com/legal/cookie-policy/',
+ },
],
},
],
@@ -399,4 +459,4 @@ module.exports = {
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
},
},
-};
+});
diff --git a/website/dogfooding/clientModuleExample.ts b/website/dogfooding/clientModuleExample.ts
index 83b5c253ba74..f04597e22621 100644
--- a/website/dogfooding/clientModuleExample.ts
+++ b/website/dogfooding/clientModuleExample.ts
@@ -8,9 +8,9 @@
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
export function onRouteUpdate({location}: {location: Location}) {
- console.log('onRouteUpdate', {location});
+ // console.log('onRouteUpdate', {location});
}
if (ExecutionEnvironment.canUseDOM) {
- console.log('client module example log');
+ // console.log('client module example log');
}
diff --git a/website/netlifyDeployPreview/index.html b/website/netlifyDeployPreview/index.html
index 76dbda78b8f5..8214b806a852 100644
--- a/website/netlifyDeployPreview/index.html
+++ b/website/netlifyDeployPreview/index.html
@@ -20,7 +20,7 @@
bootstrap: the regular site with the
- bootstrap theme (WIP)
+ bootstrap theme (WIP / disabled)
blog-only: the regular site in blog-only mode
diff --git a/website/package.json b/website/package.json
index 28cca83b3013..049aaf5fd722 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,6 +1,6 @@
{
"name": "docusaurus-2-website",
- "version": "2.0.0-alpha.69",
+ "version": "2.0.0-alpha.70",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
@@ -10,38 +10,38 @@
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
+ "write-translations": "docusaurus write-translations",
"start:baseUrl": "cross-env BASE_URL='/build/' yarn start",
"build:baseUrl": "cross-env BASE_URL='/build/' yarn build",
"start:bootstrap": "cross-env DOCUSAURUS_PRESET=bootstrap yarn start",
"build:bootstrap": "cross-env DOCUSAURUS_PRESET=bootstrap yarn build",
"start:blogOnly": "cross-env DOCUSAURUS_CONFIG='docusaurus.config-blog-only.js' yarn start",
"build:blogOnly": "cross-env DOCUSAURUS_CONFIG='docusaurus.config-blog-only.js' yarn build",
- "netlify:build:production": "yarn docusaurus write-translations && yarn netlify:crowdin:install && yarn netlify:crowdin:uploadSources && yarn netlify:crowdin:downloadTranslations && yarn build",
- "netlify:build:deployPreview": "yarn docusaurus write-translations --locale fr --messagePrefix '(fr) ' && yarn netlify:crowdin:install && yarn netlify:crowdin:downloadTranslationsFailSafe && yarn netlify:build:deployPreview:v1:all && yarn netlify:build:deployPreview:classic && yarn netlify:build:deployPreview:bootstrap && yarn netlify:build:deployPreview:blogOnly",
+ "netlify:build:production": "yarn docusaurus write-translations && yarn netlify:crowdin:uploadSources && yarn netlify:crowdin:downloadTranslations && yarn build",
+ "netlify:build:deployPreview": "yarn docusaurus write-translations --locale fr --messagePrefix '(fr) ' && yarn netlify:build:deployPreview:v1:all && yarn netlify:build:deployPreview:classic && yarn netlify:build:deployPreview:bootstrap && yarn netlify:build:deployPreview:blogOnly",
"netlify:build:deployPreview:classic": "cross-env BASE_URL='/classic/' yarn build --out-dir netlifyDeployPreview/classic",
- "netlify:build:deployPreview:bootstrap": "cross-env BASE_URL='/bootstrap/' DOCUSAURUS_PRESET=bootstrap DISABLE_VERSIONING=true yarn build --out-dir netlifyDeployPreview/bootstrap",
+ "netlify:build:deployPreview:bootstrap": "echo 'netlify:build:deployPreview:bootstrap temporarily disabled' || cross-env BASE_URL='/bootstrap/' DOCUSAURUS_PRESET=bootstrap DISABLE_VERSIONING=true yarn build --out-dir netlifyDeployPreview/bootstrap",
"netlify:build:deployPreview:blogOnly": "yarn build:blogOnly --out-dir netlifyDeployPreview/blog-only",
"netlify:build:deployPreview:v1:all": "yarn --cwd .. netlify:deployPreview:v1 && yarn --cwd .. netlify:deployPreview:v1-migrated",
- "netlify:crowdin": "echo 'Crowdin temporarily disabled'",
- "netlify:crowdin:install": "cd .. && java -version && curl https://hardcore-ride-8fbb5a.netlify.app/crowdin-cli.jar --output crowdin-cli.jar && java -jar crowdin-cli.jar --version && java -jar crowdin-cli.jar download --config ./crowdin-v2.yaml",
- "netlify:crowdin:downloadTranslations": "cd .. && java -jar crowdin-cli.jar download --config ./crowdin-v2.yaml",
- "netlify:crowdin:downloadTranslationsFailSafe": "yarn netlify:crowdin:downloadTranslations || echo 'Crowdin translation download failure (only internal PRs have access to the Crowdin env token)'",
- "netlify:crowdin:uploadSources": "cd .. && java -jar crowdin-cli.jar upload sources --config ./crowdin-v2.yaml",
+ "netlify:crowdin:downloadTranslations": "yarn --cwd .. crowdin:download:v2",
+ "netlify:crowdin:downloadTranslationsFailSafe": "yarn --cwd .. crowdin:download:v2 || echo 'Crowdin translation download failure (only internal PRs have access to the Crowdin env token)'",
+ "netlify:crowdin:uploadSources": "yarn --cwd .. crowdin:upload:v2",
"netlify:test": "yarn netlify:build:deployPreview && yarn netlify dev --debug"
},
"dependencies": {
- "@docusaurus/core": "2.0.0-alpha.69",
- "@docusaurus/plugin-client-redirects": "2.0.0-alpha.69",
- "@docusaurus/plugin-ideal-image": "2.0.0-alpha.69",
- "@docusaurus/plugin-pwa": "2.0.0-alpha.69",
- "@docusaurus/preset-classic": "2.0.0-alpha.69",
- "@docusaurus/remark-plugin-npm2yarn": "2.0.0-alpha.69",
- "@docusaurus/theme-live-codeblock": "2.0.0-alpha.69",
+ "@crowdin/cli": "^3.5.2",
+ "@docusaurus/core": "2.0.0-alpha.70",
+ "@docusaurus/plugin-client-redirects": "2.0.0-alpha.70",
+ "@docusaurus/plugin-ideal-image": "2.0.0-alpha.70",
+ "@docusaurus/plugin-pwa": "2.0.0-alpha.70",
+ "@docusaurus/preset-classic": "2.0.0-alpha.70",
+ "@docusaurus/remark-plugin-npm2yarn": "2.0.0-alpha.70",
+ "@docusaurus/theme-live-codeblock": "2.0.0-alpha.70",
"clsx": "^1.1.1",
- "color": "^3.1.2",
+ "color": "^3.1.3",
"npm-to-yarn": "^1.0.0-2",
- "react": "^16.8.4",
- "react-dom": "^16.8.4",
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1",
"workbox-routing": "^5.0.0",
"workbox-strategies": "^5.0.0"
},
@@ -58,7 +58,7 @@
]
},
"devDependencies": {
- "cross-env": "^7.0.2",
- "raw-loader": "^4.0.1"
+ "cross-env": "^7.0.3",
+ "raw-loader": "^4.0.2"
}
}
diff --git a/website/sidebars.js b/website/sidebars.js
index 94c5b87f1466..5d3c53828594 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -23,14 +23,45 @@ module.exports = {
label: 'Guides',
items: [
'guides/creating-pages',
- 'styling-layout',
- 'static-assets',
{
- Docs: ['docs-introduction', 'markdown-features', 'versioning'],
+ Docs: [
+ 'guides/docs/introduction',
+ 'guides/docs/create-doc',
+ 'guides/docs/sidebar',
+ 'guides/docs/versioning',
+ 'guides/docs/markdown-features',
+ 'guides/docs/multi-instance',
+ ],
},
'blog',
+ {
+ type: 'category',
+ label: 'Markdown Features',
+ items: [
+ 'guides/markdown-features/introduction',
+ 'guides/markdown-features/react',
+ 'guides/markdown-features/tabs',
+ 'guides/markdown-features/code-blocks',
+ 'guides/markdown-features/admonitions',
+ 'guides/markdown-features/inline-toc',
+ 'guides/markdown-features/assets',
+ 'guides/markdown-features/plugins',
+ ],
+ },
+ 'styling-layout',
+ 'static-assets',
'search',
'deployment',
+ {
+ type: 'category',
+ label: 'Internationalization',
+ items: [
+ 'i18n/introduction',
+ 'i18n/tutorial',
+ 'i18n/git',
+ 'i18n/crowdin',
+ ],
+ },
],
},
{
diff --git a/website/src/data/showcase/agilets.png b/website/src/data/showcase/agilets.png
new file mode 100644
index 000000000000..4ec1f9c73a45
Binary files /dev/null and b/website/src/data/showcase/agilets.png differ
diff --git a/website/src/data/showcase/aispeaker.png b/website/src/data/showcase/aispeaker.png
new file mode 100644
index 000000000000..56f5d83f2e7b
Binary files /dev/null and b/website/src/data/showcase/aispeaker.png differ
diff --git a/website/src/data/showcase/console-table.png b/website/src/data/showcase/console-table.png
new file mode 100644
index 000000000000..7e64254b700a
Binary files /dev/null and b/website/src/data/showcase/console-table.png differ
diff --git a/website/src/data/showcase/datagit.png b/website/src/data/showcase/datagit.png
new file mode 100644
index 000000000000..1ea1f1740ec4
Binary files /dev/null and b/website/src/data/showcase/datagit.png differ
diff --git a/website/src/data/showcase/eightshift-docs.png b/website/src/data/showcase/eightshift-docs.png
new file mode 100644
index 000000000000..36399f2e1109
Binary files /dev/null and b/website/src/data/showcase/eightshift-docs.png differ
diff --git a/website/src/data/showcase/flexit.png b/website/src/data/showcase/flexit.png
new file mode 100644
index 000000000000..c3bbe8db2459
Binary files /dev/null and b/website/src/data/showcase/flexit.png differ
diff --git a/website/src/data/showcase/foal.png b/website/src/data/showcase/foal.png
new file mode 100644
index 000000000000..8a9e1f499bbc
Binary files /dev/null and b/website/src/data/showcase/foal.png differ
diff --git a/website/src/data/showcase/hashnode.png b/website/src/data/showcase/hashnode.png
new file mode 100644
index 000000000000..186eb3bdeba8
Binary files /dev/null and b/website/src/data/showcase/hashnode.png differ
diff --git a/website/src/data/showcase/mikro-orm.png b/website/src/data/showcase/mikro-orm.png
new file mode 100644
index 000000000000..6014e9d02498
Binary files /dev/null and b/website/src/data/showcase/mikro-orm.png differ
diff --git a/website/src/data/showcase/nodify.png b/website/src/data/showcase/nodify.png
new file mode 100644
index 000000000000..85a154aaf0c5
Binary files /dev/null and b/website/src/data/showcase/nodify.png differ
diff --git a/website/src/data/showcase/power.png b/website/src/data/showcase/power.png
new file mode 100644
index 000000000000..e73020638c23
Binary files /dev/null and b/website/src/data/showcase/power.png differ
diff --git a/website/src/data/showcase/rematch.png b/website/src/data/showcase/rematch.png
new file mode 100644
index 000000000000..42ca9a35aa16
Binary files /dev/null and b/website/src/data/showcase/rematch.png differ
diff --git a/website/src/data/showcase/rooks.png b/website/src/data/showcase/rooks.png
new file mode 100644
index 000000000000..7f36b4fb0596
Binary files /dev/null and b/website/src/data/showcase/rooks.png differ
diff --git a/website/src/data/showcase/sciwp.png b/website/src/data/showcase/sciwp.png
new file mode 100644
index 000000000000..1d08644145ff
Binary files /dev/null and b/website/src/data/showcase/sciwp.png differ
diff --git a/website/src/data/showcase/webdriverio.png b/website/src/data/showcase/webdriverio.png
new file mode 100644
index 000000000000..eae3108a7a3e
Binary files /dev/null and b/website/src/data/showcase/webdriverio.png differ
diff --git a/website/src/data/users.js b/website/src/data/users.js
index 69f8e1fbfd04..224a51151ec6 100644
--- a/website/src/data/users.js
+++ b/website/src/data/users.js
@@ -5,8 +5,50 @@
* LICENSE file in the root directory of this source tree.
*/
+/*
+ * ADD YOUR SITE TO DOCUSAURUS SHOWCASE:
+ *
+ * Requirements for adding your site to our showcase:
+ * - It is a real site with real content and customizations (different enough from init templates)
+ * - It has a stable domain name (a random Netlify/Vercel domain is not allowed)
+ * - The code is publicly available
+ *
+ * Instructions:
+ * - Add your site in the json array below, in alphabetical order of title
+ * - Add a local image preview (decent screenshot of your Docusaurus site)
+ *
+ * The image must be added to the GitHub repository, and use `require("image")`
+ *
+ * Example PR: https://github.com/facebook/docusaurus/pull/3976
+ *
+ * If you edit this file through the Github interface, you can:
+ * - Submit first your users.js edit PR
+ * - This will create a branch on your Docusaurus fork (usually "patch-1")
+ * - Go to https://github.com//docusaurus/tree//website/src/data/showcase
+ * - Drag-and-drop an image here to add it to your existing PR
+ *
+ */
+
+// prettier-ignore
const users = [
- // Please add in alphabetical order of title.
+ {
+ title: 'AgileTs',
+ description: 'Global State and Logic Framework for reactive Applications',
+ preview: require('./showcase/agilets.png'),
+ website: 'https://agile-ts.org/',
+ source: 'https://github.com/agile-ts/documentation',
+ fbOpenSource: false,
+ pinned: false,
+ },
+ {
+ title: 'AI-Speaker',
+ description: 'Local, reliable, fast and private Audio and IoT gate.',
+ preview: require('./showcase/aispeaker.png'),
+ website: 'https://ai-speaker.com/',
+ source: 'https://github.com/sviete/AIS-WWW',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Algolia Docsearch',
description:
@@ -99,6 +141,34 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'Console Table',
+ description: 'Printing Pretty Tables on your console.',
+ preview: require('./showcase/console-table.png'),
+ website: 'https://console-table.netlify.app/',
+ source: 'https://github.com/ayonious/console-table-docu',
+ fbOpenSource: false,
+ pinned: false,
+ },
+ {
+ title: 'Datagit',
+ description:
+ 'A persian tutorial website strive to make quality education for everyone.',
+ preview: require('./showcase/datagit.png'),
+ website: 'https://datagit.ir/',
+ source: 'https://github.com/massoudmaboudi/datagit_v2.docusaurus',
+ fbOpenSource: false,
+ pinned: false,
+ },
+ {
+ title: 'Eightshift Docs',
+ description: 'All the tools you need to start building a modern WordPress project, using all the latest development tools.',
+ preview: require('./showcase/eightshift-docs.png'),
+ website: 'https://infinum.github.io/eightshift-docs/',
+ source: 'https://github.com/infinum/eightshift-docs',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Eta',
description: 'Faster embedded JS template engine in TypeScript',
@@ -108,6 +178,15 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'FlexIt Analytics',
+ description: 'Business Intelligence and Data Analytics platform',
+ preview: require('./showcase/flexit.png'),
+ website: 'https://learn.flexitanalytics.com/',
+ source: 'https://github.com/ataft/flexit-docs',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Flux',
description: 'Application architecture for building user interfaces',
@@ -117,6 +196,15 @@ const users = [
fbOpenSource: true,
pinned: true,
},
+ {
+ title: 'FoalTS',
+ description: 'Node.JS framework for building web applications',
+ preview: require('./showcase/foal.png'),
+ website: 'https://foalts.org/',
+ source: 'https://github.com/FoalTS/foal/tree/master/docs',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'GraphQL Code Generator',
description:
@@ -145,6 +233,15 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'Hashnode Support',
+ description: 'A help portal for Hashnode users',
+ preview: require('./showcase/hashnode.png'),
+ website: 'https://support.hashnode.com/',
+ source: 'https://github.com/Hashnode/support',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Hermes',
description: 'JavaScript engine optimized for React Native',
@@ -163,6 +260,15 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'MikroORM',
+ description: 'TypeScript ORM for Node.js based on Data Mapper, Unit of Work and Identity Map patterns.',
+ preview: require('./showcase/mikro-orm.png'),
+ website: 'https://mikro-orm.io',
+ source: 'https://github.com/mikro-orm/mikro-orm',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Motion Layout',
description:
@@ -191,6 +297,15 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'Nodify',
+ description: 'High-performance WPF node editor component designed for MVVM.',
+ preview: require('./showcase/nodify.png'),
+ website: 'https://miroiu.github.io/nodify/',
+ source: 'https://github.com/miroiu/nodify',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Oxidizer',
description: 'A Rust ORM based on tokio-postgres and refinery',
@@ -200,6 +315,15 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'Power\'s Wiki',
+ description: 'An example of personal wiki ',
+ preview: require('./showcase/power.png'),
+ website: 'https://wiki-power.com/',
+ source: 'https://github.com/linyuxuanlin/Wiki_Docusaurus',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'QA-Board',
description:
@@ -229,6 +353,24 @@ const users = [
fbOpenSource: true,
pinned: false,
},
+ {
+ title: 'Rematch',
+ description: 'Redux best practices without the boilerplate in less than 2kb',
+ preview: require('./showcase/rematch.png'),
+ website: 'https://rematchjs.org',
+ source: 'https://github.com/rematch/rematch',
+ fbOpenSource: false,
+ pinned: false,
+ },
+ {
+ title: 'Rooks',
+ description: 'Supercharge your components with this collection of React hooks.',
+ preview: require('./showcase/rooks.png'),
+ website: 'https://react-hooks.org/',
+ source: 'https://github.com/imbhargav5/rooks',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Runlet',
description: 'A cloud-based job manager that integrates your devices',
@@ -238,6 +380,15 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'SCI WP Framework',
+ description: 'A PHP framework to create MVC plugins for WordPress',
+ preview: require('./showcase/sciwp.png'),
+ website: 'https://sciwp.com/',
+ source: 'https://github.com/sciwp/sciwp-framework',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'SpotifyAPI-NET',
description: 'A Client for the Spotify Web API, written in C#/.NET',
@@ -331,6 +482,16 @@ const users = [
fbOpenSource: false,
pinned: false,
},
+ {
+ title: 'WebdriverIO',
+ description:
+ 'Next-gen browser and mobile automation test framework for Node.js',
+ preview: require('./showcase/webdriverio.png'),
+ website: 'https://webdriver.io/',
+ source: 'https://github.com/webdriverio/webdriverio',
+ fbOpenSource: false,
+ pinned: false,
+ },
{
title: 'Wisdom',
description: 'Session replay web analytics with open data SQL/S3 access.',
@@ -338,7 +499,7 @@ const users = [
website: 'https://developers.getwisdom.io/',
source: 'https://github.com/Wisdom/dev-docs',
fbOpenSource: false,
- pinned: true,
+ pinned: false,
},
];
diff --git a/website/src/pages/feedback/index.js b/website/src/pages/feedback/index.js
index 3a5cb678a60b..2f137f12f385 100644
--- a/website/src/pages/feedback/index.js
+++ b/website/src/pages/feedback/index.js
@@ -25,10 +25,7 @@ function Feedback() {
}, []);
return (
-
+
+
+```
+
```jsx title="MyComponent.js"
import useBaseUrl from '@docusaurus/useBaseUrl';
-;
+;
```
-You can also import SVG images, which will be transformed into React components.
+You can also import SVG files: they will be transformed into React components.
```jsx title="MyComponent.js"
import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';
@@ -34,7 +46,13 @@ import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';
### Markdown example
-Thanks to MDX, you can also use `useBaseUrl` utility function in Markdown files! You'd have to use `
-```
-
-You could also just use Markdown image syntax, but you would have to manually maintain the image paths yourself and isn't recommended.
-
-```md title="my-doc.md"
-
+
```
### Caveats
Keep in mind that:
-- By default, none of the files in `static` folder will be post-processed or minified.
-- Missing files references via hardcoded absolute paths will not be detected at compilation time, and will result in a 404 error.
+- By default, none of the files in `static` folder will be post-processed, hashed or minified.
+- Missing files referenced via hardcoded absolute paths will not be detected at compilation time, and will result in a 404 error.
- By default, GitHub Pages runs published files through [Jekyll](https://jekyllrb.com/). Since Jekyll will discard any files that begin with `_`, it is recommended that you disable Jekyll by adding an empty file named `.nojekyll` file to your `static` directory if you are using GitHub pages for hosting.
diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md
index 55af00613371..ced45921c8f8 100644
--- a/website/docs/styling-layout.md
+++ b/website/docs/styling-layout.md
@@ -59,6 +59,18 @@ Alternatively, use the following tool to generate the different shades for your
V2 deploy previews:
@@ -93,7 +90,7 @@ function Home() {
-
+
Get Started
+
+ Playground
+