diff --git a/website/community/resources.md b/website/community/resources.md index 4812621e1aae..b688e1452e4e 100644 --- a/website/community/resources.md +++ b/website/community/resources.md @@ -18,16 +18,6 @@ A curated list of interesting Docusaurus community projects. See the showcase. -## Official plugins - -- [@docusaurus/plugin-content-blog](/docs/using-plugins#docusaurusplugin-content-blog) -- [@docusaurus/plugin-content-docs](/docs/using-plugins#docusaurusplugin-content-docs) -- [@docusaurus/plugin-content-pages](/docs/using-plugins#docusaurusplugin-content-pages) -- [@docusaurus/plugin-google-analytics](/docs/using-plugins#docusaurusplugin-google-analytics) -- [@docusaurus/plugin-google-gtag](/docs/using-plugins#docusaurusplugin-google-gtag) -- [@docusaurus/plugin-sitemap](/docs/using-plugins#docusaurusplugin-sitemap) -- [@docusaurus/plugin-ideal-image](/docs/using-plugins#docusaurusplugin-ideal-image) - ## Community plugins - [docusaurus-plugin-lunr](https://github.com/daldridge/docusaurus-plugin-lunr) - Docusaurus v2 plugin to create a local search index for use with Lunr.js diff --git a/website/docs/api/plugins/overview.md b/website/docs/api/plugins/overview.md new file mode 100644 index 000000000000..b9ddd805b5e7 --- /dev/null +++ b/website/docs/api/plugins/overview.md @@ -0,0 +1,28 @@ +--- +id: plugins-overview +title: 'Docusaurus plugins' +sidebar_label: Plugins overview +slug: '/api/plugins' +--- + +We provide official Docusaurus plugins. + +## Content plugins + +These plugins are responsible to load your site's content, and create pages for your theme to render. + +- [@docusaurus/plugin-content-docs](./plugin-content-docs.md) +- [@docusaurus/plugin-content-blog](./plugin-content-blog.md) +- [@docusaurus/plugin-content-pages](./plugin-content-pages.md) + +## Behavior plugins + +These plugins will add a useful behavior to your Docusaurus site. + +- [@docusaurus/plugin-debug](./plugin-debug.md) +- [@docusaurus/plugin-sitemap](./plugin-sitemap.md) +- [@docusaurus/plugin-pwa](./plugin-pwa.md) +- [@docusaurus/plugin-client-redirects](./plugin-client-redirects.md) +- [@docusaurus/plugin-ideal-image](./plugin-ideal-image.md) +- [@docusaurus/plugin-google-analytics](./plugin-google-analytics.md) +- [@docusaurus/plugin-google-gtag](./plugin-google-gtag.md) diff --git a/website/docs/api/plugins/plugin-client-redirects.md b/website/docs/api/plugins/plugin-client-redirects.md new file mode 100644 index 000000000000..513ef09ba8a1 --- /dev/null +++ b/website/docs/api/plugins/plugin-client-redirects.md @@ -0,0 +1,129 @@ +--- +id: plugin-client-redirects +title: '📦 plugin-client-redirects' +slug: '/api/plugins/@docusaurus/plugin-client-redirects' +--- + +Docusaurus Plugin to generate **client-side redirects**. + +This plugin will write additional HTML pages to your static site, that redirects the user to your existing Docusaurus pages with JavaScript. + +:::note + +This plugin only create redirects for the production build. + +::: + +:::caution + +It is better to use server-side redirects whenever possible. + +Before using this plugin, you should look if your hosting provider doesn't offer this feature. + +::: + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-client-redirects +``` + +## Configuration + +Main usecase: you have `/myDocusaurusPage`, and you want to redirect to this page from `/myDocusaurusPage.html`: + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-client-redirects', + { + fromExtensions: ['html'], + }, + ], + ], +}; +``` + +Second usecase: you have `/myDocusaurusPage.html`, and you want to redirect to this page from `/myDocusaurusPage`. + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-client-redirects', + { + toExtensions: ['html'], + }, + ], + ], +}; +``` + +For custom redirect logic, provide your own `createRedirects` function. + +Let's imagine you change the url of an existing page, you might want to make sure the old url still works: + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-client-redirects', + { + redirects: [ + { + to: '/docs/newDocPath', // string + from: ['/docs/oldDocPathFrom2019', '/docs/legacyDocPathFrom2016'], // string | string[] + }, + ], + }, + ], + ], +}; +``` + +It's possible to use a function to create the redirects for each existing path: + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-client-redirects', + { + createRedirects: function (existingPath) { + if (existingPath === '/docs/newDocPath') { + return ['/docs/oldDocPathFrom2019', '/docs/legacyDocPathFrom2016']; // string | string[] + } + }, + }, + ], + ], +}; +``` + +Finally, it's possible to use all options at the same time: + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-client-redirects', + { + fromExtensions: ['html', 'htm'], + toExtensions: ['exe', 'zip'], + redirects: [ + { + to: '/docs/newDocPath', + from: '/docs/oldDocPath', + }, + ], + createRedirects: function (existingPath) { + if (existingPath === '/docs/newDocPath2') { + return ['/docs/oldDocPath2']; + } + }, + }, + ], + ], +}; +``` diff --git a/website/docs/api/plugins/plugin-content-blog.md b/website/docs/api/plugins/plugin-content-blog.md new file mode 100644 index 000000000000..2c6d2b347425 --- /dev/null +++ b/website/docs/api/plugins/plugin-content-blog.md @@ -0,0 +1,107 @@ +--- +id: plugin-content-blog +title: '📦 plugin-content-blog' +slug: '/api/plugins/@docusaurus/plugin-content-blog' +--- + +Provides the [Blog](blog.md) feature and is the default blog plugin for Docusaurus. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-content-blog +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. + +::: + +## Configuration + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-content-blog', + { + /** + * Path to data on filesystem relative to site dir. + */ + path: 'blog', + /** + * URL for editing a blog post. + * Example: 'https://github.com/facebook/docusaurus/edit/master/website/blog/' + */ + editUrl: + 'https://github.com/facebook/docusaurus/edit/master/website/blog/', + /** + * Blog page title for better SEO + */ + blogTitle: 'Blog title', + /** + * Blog page meta description for better SEO + */ + blogDescription: 'Blog', + /** + * Number of blog post elements to show in the blog sidebar + * 'ALL' to show all blog posts + * 0 to disable + */ + blogSidebarCount: 5, + /** + * Title of the blog sidebar + */ + blogSidebarTitle: 'All our posts', + /** + * URL route for the blog section of your site. + * *DO NOT* include a trailing slash. + */ + routeBasePath: 'blog', + include: ['*.md', '*.mdx'], + postsPerPage: 10, + /** + * Theme components used by the blog pages. + */ + blogListComponent: '@theme/BlogListPage', + blogPostComponent: '@theme/BlogPostPage', + blogTagsListComponent: '@theme/BlogTagsListPage', + blogTagsPostsComponent: '@theme/BlogTagsPostsPage', + /** + * Remark and Rehype plugins passed to MDX. + */ + remarkPlugins: [ + /* require('remark-math') */ + ], + rehypePlugins: [], + /** + * Custom Remark and Rehype plugins passed to MDX before + * the default Docusaurus Remark and Rehype plugins. + */ + beforeDefaultRemarkPlugins: [], + beforeDefaultRehypePlugins: [], + /** + * Truncate marker, can be a regex or string. + */ + truncateMarker: //, + /** + * Show estimated reading time for the blog post. + */ + showReadingTime: true, + /** + * Blog feed. + * If feedOptions is undefined, no rss feed will be generated. + */ + feedOptions: { + type: '', // required. 'rss' | 'feed' | 'all' + title: '', // default to siteConfig.title + description: '', // default to `${siteConfig.title} Blog` + copyright: '', + language: undefined, // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes + }, + }, + ], + ], +}; +``` diff --git a/website/docs/api/plugins/plugin-content-docs.md b/website/docs/api/plugins/plugin-content-docs.md new file mode 100644 index 000000000000..7ecc423fe77e --- /dev/null +++ b/website/docs/api/plugins/plugin-content-docs.md @@ -0,0 +1,122 @@ +--- +id: plugin-content-docs +title: '📦 plugin-content-docs' +slug: '/api/plugins/@docusaurus/plugin-content-docs' +--- + +Provides the [Docs](markdown-features.mdx) functionality and is the default docs plugin for Docusaurus. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-content-docs +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. + +::: + +## Configuration + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-content-docs', + { + /** + * Path to data on filesystem relative to site dir. + */ + path: 'docs', + /** + * URL for editing a doc in the website repo. + * Example: 'https://github.com/facebook/docusaurus/edit/master/website/' + */ + editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/', + /** + * URL route for the docs section of your site. + * *DO NOT* include a trailing slash. + */ + routeBasePath: 'docs', + include: ['**/*.md', '**/*.mdx'], // Extensions to include. + /** + * Path to sidebar configuration for showing a list of markdown pages. + * Warning: will change + */ + sidebarPath: '', + /** + * Theme components used by the docs pages + */ + docLayoutComponent: '@theme/DocPage', + docItemComponent: '@theme/DocItem', + /** + * Remark and Rehype plugins passed to MDX + */ + remarkPlugins: [ + /* require('remark-math') */ + ], + rehypePlugins: [], + /** + * Custom Remark and Rehype plugins passed to MDX before + * the default Docusaurus Remark and Rehype plugins. + */ + beforeDefaultRemarkPlugins: [], + beforeDefaultRehypePlugins: [], + /** + * Whether to display the author who last updated the doc. + */ + showLastUpdateAuthor: false, + /** + * Whether to display the last date the doc was updated. + */ + showLastUpdateTime: false, + /** + * By default, versioning is enabled on versioned sites. + * This is a way to explicitly disable the versioning feature. + */ + disableVersioning: false, + /** + * Skip the next release docs when versioning is enabled. + * This will not generate HTML files in the production build for documents + * in `/docs/next` directory, only versioned docs. + */ + excludeNextVersionDocs: false, + /** + * The last version is the one we navigate to in priority on versioned sites + * It is the one displayed by default in docs navbar items + * By default, the last version is the first one to appear in versions.json + * By default, the last version is at the "root" (docs have path=/docs/myDoc) + * Note: it is possible to configure the path and label of the last version + * Tip: using lastVersion: 'current' make sense in many cases + */ + lastVersion: undefined, + /** + * The docusaurus versioning defaults don't make sense for all projects + * This gives the ability customize the label and path of each version + * You may not like that default versin + */ + versions: { + /* + Example configuration: + current: { + label: 'Android SDK v2.0.0 (WIP)', + path: 'android-2.0.0', + }, + '1.0.0': { + label: 'Android SDK v1.0.0', + path: 'android-1.0.0', + }, + */ + }, + /** + * Sometimes you only want to include a subset of all available versions. + * Tip: limit to 2 or 3 versions to improve startup and build time in dev and deploy previews + */ + onlyIncludeVersions: undefined, // ex: ["current", "1.0.0", "2.0.0"] + }, + ], + ], +}; +``` diff --git a/website/docs/api/plugins/plugin-content-pages.md b/website/docs/api/plugins/plugin-content-pages.md new file mode 100644 index 000000000000..2e07f42f19b8 --- /dev/null +++ b/website/docs/api/plugins/plugin-content-pages.md @@ -0,0 +1,68 @@ +--- +id: plugin-content-pages +title: '📦 plugin-content-pages' +slug: '/api/plugins/@docusaurus/plugin-content-pages' +--- + +The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides [creating pages](guides/creating-pages.md) functionality. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-content-pages +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. + +::: + +## Configuration + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-content-pages', + { + /** + * Path to data on filesystem + * relative to site dir + * components in this directory will be automatically converted to pages + */ + path: 'src/pages', + /** + * URL route for the page section of your site + * do not include trailing slash + */ + routeBasePath: '', + include: ['**/*.{js,jsx,ts,tsx,md,mdx}'], + /** + * No Route will be created for matching files + */ + exclude: [ + '**/_*.{js,jsx,ts,tsx,md,mdx}', + '**/*.test.{js,ts}', + '**/__tests__/**', + ], + /** + * Theme component used by markdown pages. + */ + mdxPageComponent: '@theme/MDXPage', + /** + * Remark and Rehype plugins passed to MDX + */ + remarkPlugins: [], + rehypePlugins: [], + /** + * Custom Remark and Rehype plugins passed to MDX before + * the default Docusaurus Remark and Rehype plugins. + */ + beforeDefaultRemarkPlugins: [], + beforeDefaultRehypePlugins: [], + }, + ], + ], +}; +``` diff --git a/website/docs/api/plugins/plugin-debug.md b/website/docs/api/plugins/plugin-debug.md new file mode 100644 index 000000000000..ff1e19457787 --- /dev/null +++ b/website/docs/api/plugins/plugin-debug.md @@ -0,0 +1,39 @@ +--- +id: plugin-debug +title: '📦 plugin-debug' +slug: '/api/plugins/@docusaurus/plugin-debug' +--- + +The debug plugin will display useful debug information at [http://localhost:3000/\_\_docusaurus/debug](http://localhost:3000/__docusaurus/debug). + +It is mostly useful for plugin authors, that will be able to inspect more easily the content of the `.docusaurus` folder (like the creates routes), but also be able to inspect data structures that are never written to disk, like the plugin data loaded through the `contentLoaded` lifecycle. + +:::note + +If you report a bug, we will probably ask you to have this plugin turned on in the production, so that we can inspect your deployment config more easily. + +If you don't have any sensitive information, you can keep it on in production [like we do](http://v2.docusaurus.io/__docusaurus/debug). + +::: + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-debug +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. + +By default, it's enabled in dev, and disabled in prod, to avoid exposing potentially sensitive information. + +::: + +## Configuration + +```js title="docusaurus.config.js" +module.exports = { + plugins: ['@docusaurus/plugin-debug'], +}; +``` diff --git a/website/docs/api/plugins/plugin-google-analytics.md b/website/docs/api/plugins/plugin-google-analytics.md new file mode 100644 index 000000000000..3f026ffa965c --- /dev/null +++ b/website/docs/api/plugins/plugin-google-analytics.md @@ -0,0 +1,34 @@ +--- +id: plugin-google-analytics +title: '📦 plugin-google-analytics' +slug: '/api/plugins/@docusaurus/plugin-google-analytics' +--- + +The default [Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/) plugin. It is a JavaScript library for measuring how users interact with your website. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-google-analytics +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. + +::: + +## Configuration + +```js title="docusaurus.config.js" +module.exports = { + plugins: ['@docusaurus/plugin-google-analytics'], + themeConfig: { + googleAnalytics: { + trackingID: 'UA-141789564-1', + // Optional fields. + anonymizeIP: true, // Should IPs be anonymized? + }, + }, +}; +``` diff --git a/website/docs/api/plugins/plugin-google-gtag.md b/website/docs/api/plugins/plugin-google-gtag.md new file mode 100644 index 000000000000..f9af53c3e638 --- /dev/null +++ b/website/docs/api/plugins/plugin-google-gtag.md @@ -0,0 +1,34 @@ +--- +id: plugin-google-gtag +title: '📦 plugin-google-gtag' +slug: '/api/plugins/@docusaurus/plugin-google-gtag' +--- + +The default [Global Site Tag (gtag.js)](https://developers.google.com/analytics/devguides/collection/gtagjs/) plugin. It is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform. This section describes how to configure a Docusaurus site to enable global site tag for Google Analytics. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-google-gtag +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. + +::: + +## Configuration + +```js title="docusaurus.config.js" +module.exports = { + plugins: ['@docusaurus/plugin-google-gtag'], + themeConfig: { + gtag: { + trackingID: 'UA-141789564-1', + // Optional fields. + anonymizeIP: true, // Should IPs be anonymized? + }, + }, +}; +``` diff --git a/website/docs/api/plugins/plugin-ideal-image.md b/website/docs/api/plugins/plugin-ideal-image.md new file mode 100644 index 000000000000..93e69e5f351a --- /dev/null +++ b/website/docs/api/plugins/plugin-ideal-image.md @@ -0,0 +1,52 @@ +--- +id: plugin-ideal-image +title: '📦 plugin-ideal-image' +slug: '/api/plugins/@docusaurus/plugin-ideal-image' +--- + +Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder) **in the production builds**. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-ideal-image +``` + +## Configuration + +Modify your `docusaurus.config.js` + +```diff +module.exports = { + ... ++ plugins: ['@docusaurus/plugin-ideal-image'], + ... +} +``` + +## Usage + +This plugin supports the PNG, GIF and JPG formats only. + +```jsx +import Image from '@theme/IdealImage'; +import thumbnail from './path/to/img.png'; + +// your React code + + +// or + +``` + +## Options + +| Option | Type | Default | Description | +| --- | --- | --- | --- | +| `name` | `string` | `ideal-img/[name].[hash:hex:7].[width].[ext]` | Filename template for output files. | +| `sizes` | `array` | _original size_ | Specify all widths you want to use. If a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). | +| `size` | `integer` | _original size_ | Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up) | +| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. | +| `max` | `integer` | | See `min` above | +| `steps` | `integer` | `4` | Configure the number of images generated between `min` and `max` (inclusive) | +| `quality` | `integer` | `85` | JPEG compression quality | diff --git a/website/docs/api/plugins/plugin-pwa.md b/website/docs/api/plugins/plugin-pwa.md new file mode 100644 index 000000000000..9e97df5b0c0b --- /dev/null +++ b/website/docs/api/plugins/plugin-pwa.md @@ -0,0 +1,280 @@ +--- +id: plugin-pwa +title: '📦 plugin-pwa' +slug: '/api/plugins/@docusaurus/plugin-pwa' +--- + +Docusaurus Plugin to add PWA support using [Workbox](https://developers.google.com/web/tools/workbox). This plugin generates a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers) in production build only, and allows you to create fully PWA-compliant documentation site with offline and installation support. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-pwa +``` + +## Configuration + +Create a [PWA manifest](https://web.dev/add-manifest/) at `./static/manifest.json`. + +Modify `docusaurus.config.js` with a minimal PWA config, like: + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-pwa', + { + debug: true, + offlineModeActivationStrategies: ['appInstalled', 'queryString'], + pwaHead: [ + { + tagName: 'link', + rel: 'icon', + href: '/img/docusaurus.png', + }, + { + tagName: 'link', + rel: 'manifest', + href: '/manifest.json', // your PWA manifest + }, + { + tagName: 'meta', + name: 'theme-color', + content: 'rgb(37, 194, 160)', + }, + ], + }, + ], + ], +}; +``` + +## Progressive Web App + +Having a service worker installed is not enough to make your application a PWA. You'll need to at least include a [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and have the correct tags in `` ([Options > pwaHead](#pwahead)). + +After deployment, you can use [Lighthouse](https://developers.google.com/web/tools/lighthouse) to run an audit on your site. + +For a more exhaustive list of what it takes for your site to be a PWA, refer to the [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) + +## App installation support + +If your browser supports it, you should be able to install a Docusaurus site as an app. + +![pwa_install.gif](/img/pwa_install.gif) + +## Offline mode (precaching) + +We enable users to browse a Docusaurus site offline, by using service-worker precaching. + +> ### [What is Precaching?](https://developers.google.com/web/tools/workbox/modules/workbox-precaching) +> +> One feature of service workers is the ability to save a set of files to the cache when the service worker is installing. This is often referred to as "precaching", since you are caching content ahead of the service worker being used. +> +> The main reason for doing this is that it gives developers control over the cache, meaning they can determine when and how long a file is cached as well as serve it to the browser without going to the network, meaning it can be used to create web apps that work offline. +> +> Workbox takes a lot of the heavy lifting out of precaching by simplifying the API and ensuring assets are downloaded efficiently. + +By default, offline mode is enabled when the site is installed as an app. See the `offlineModeActivationStrategies` option for details. + +After the site has been precached, the service worker will serve cached responses for later visits. When a new build is deployed along with a new service worker, the new one will begin installing and eventually move to a waiting state. During this waiting state, a reload popup will show and ask the user to reload the page for new content. Until the user either clears the application cache or clicks the `reload` button on the popup, the service worker will continue serving the old content. + +:::caution + +Offline mode / precaching requires downloading all the static assets of the site ahead of time, and can consume unnecessary bandwidth. It may not be a good idea to activate it for all kind of sites. + +::: + +## Options + +### `debug` + +- Type: `boolean` +- Default: `false` + +Turn debug mode on: + +- Workbox logs +- Additional Docusaurus logs +- Unoptimized SW file output +- Source maps + +### `offlineModeActivationStrategies` + +- Type: `Array<'appInstalled' | 'mobile' | 'saveData'| 'queryString' | 'always'>` +- Default: `['appInstalled','queryString']` + +Strategies used to turn the offline mode on: + +- `appInstalled`: activates for users having installed the site as an app +- `queryString`: activates if queryString contains `offlineMode=true` (convenient for PWA debugging) +- `mobile`: activates for mobile users (width <= 940px) +- `saveData`: activates for users with `navigator.connection.saveData === true` +- `always`: activates for all users + +:::caution + +Use this carefully: some users may not like to be forced to use the offline mode. + +::: + +### `injectManifestConfig` + +[Workbox options](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest) to pass to `workbox.injectManifest()`. This gives you control over which assets will be precached, and be available offline. + +- Type: `InjectManifestOptions` +- Default: `{}` + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-pwa', + { + injectManifestConfig: { + manifestTransforms: [ + //... + ], + modifyURLPrefix: { + //... + }, + // We already add regular static assets (html, images...) to be available offline + // You can add more files according to your needs + globPatterns: ['**/*.{pdf,docx,xlsx}'], + // ... + }, + }, + ], + ], +}; +``` + +### `reloadPopup` + +- Type: `string | false` +- Default: `'@theme/PwaReloadPopup'` + +Module path to reload popup component. This popup is rendered when a new service worker is waiting to be installed, and we suggest a reload to the user. + +Passing `false` will disable the popup, but this is not recommended: users won't have a way to get up-to-date content. + +A custom component can be used, as long as it accepts `onReload` as a prop. The `onReload` callback should be called when the `reload` button is clicked. This will tell the service worker to install the waiting service worker and reload the page. + +```ts +interface PwaReloadPopupProps { + onReload: () => void; +} +``` + +The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://facebookincubator.github.io/infima/docs/components/alert). + +![pwa_reload.gif](/img/pwa_reload.gif) + +### `pwaHead` + +- Type: `Array<{ tagName: string } & Record>` +- Default: `[]` + +Array of objects containing `tagName` and key-value pairs for attributes to inject into the `` tag. Technically you can inject any head tag through this, but it's ideally used for tags to make your site PWA compliant. Here's a list of tag to make your app fully compliant: + +```js +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-pwa', + { + pwaHead: [ + { + tagName: 'link', + rel: 'icon', + href: '/img/docusaurus.png', + }, + { + tagName: 'link', + rel: 'manifest', + href: '/manifest.json', + }, + { + tagName: 'meta', + name: 'theme-color', + content: 'rgb(37, 194, 160)', + }, + { + tagName: 'meta', + name: 'apple-mobile-web-app-capable', + content: 'yes', + }, + { + tagName: 'meta', + name: 'apple-mobile-web-app-status-bar-style', + content: '#000', + }, + { + tagName: 'link', + rel: 'apple-touch-icon', + href: '/img/docusaurus.png', + }, + { + tagName: 'link', + rel: 'mask-icon', + href: '/img/docusaurus.svg', + color: 'rgb(37, 194, 160)', + }, + { + tagName: 'meta', + name: 'msapplication-TileImage', + content: '/img/docusaurus.png', + }, + { + tagName: 'meta', + name: 'msapplication-TileColor', + content: '#000', + }, + ], + }, + ], + ], +}; +``` + +### `swCustom` + +- Type: `string | undefined` +- Default: `undefined` + +Useful for additional Workbox rules. You can do whatever a service worker can do here, and use the full power of workbox libraries. The code is transpiled, so you can use modern ES6+ syntax here. + +For example, to cache files from external routes: + +```js +import {registerRoute} from 'workbox-routing'; +import {StaleWhileRevalidate} from 'workbox-strategies'; + +// default fn export receiving some useful params +export default function swCustom(params) { + const { + debug, // :boolean + offlineMode, // :boolean + } = params; + + // Cache responses from external resources + registerRoute((context) => { + return [ + /graph\.facebook\.com\/.*\/picture/, + /netlify\.com\/img/, + /avatars1\.githubusercontent/, + ].some((regex) => context.url.href.match(regex)); + }, new StaleWhileRevalidate()); +} +``` + +The module should have a `default` function export, and receives some params. + +### `swRegister` + +- Type: `string | false` +- Default: `'docusaurus-plugin-pwa/src/registerSW.js'` + +Adds an entry before the Docusaurus app so that registration can happen before the app runs. The default `registerSW.js` file is enough for simple registration. + +Passing `false` will disable registration entirely. diff --git a/website/docs/api/plugins/plugin-sitemap.md b/website/docs/api/plugins/plugin-sitemap.md new file mode 100644 index 000000000000..180c398a4737 --- /dev/null +++ b/website/docs/api/plugins/plugin-sitemap.md @@ -0,0 +1,37 @@ +--- +id: plugin-sitemap +title: '📦 plugin-sitemap' +slug: '/api/plugins/@docusaurus/plugin-sitemap' +--- + +This plugin creates sitemap for your site so that search engine crawlers can crawl your site more accurately. + +## Installation + +```bash npm2yarn +npm install --save @docusaurus/plugin-sitemap +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. + +::: + +## Configuration + +```js title="docusaurus.config.js" +module.exports = { + plugins: [ + [ + '@docusaurus/plugin-sitemap', + { + cacheTime: 600 * 1000, // 600 sec - cache purge period + changefreq: 'weekly', + priority: 0.5, + trailingSlash: false, + }, + ], + ], +}; +``` diff --git a/website/docs/api/themes/overview.md b/website/docs/api/themes/overview.md new file mode 100644 index 000000000000..d5b4518e7d6c --- /dev/null +++ b/website/docs/api/themes/overview.md @@ -0,0 +1,32 @@ +--- +id: themes-overview +title: 'Docusaurus themes' +sidebar_label: Themes overview +slug: '/api/themes' +--- + +We provide official Docusaurus themes. + +## Main themes + +The main themes implement the user interface for the [docs](../plugins/plugin-content-docs.md), [blog](../plugins/plugin-content-blog.md) and [pages](../plugins/plugin-content-pages.md) plugins. + +- [@docusaurus/theme-classic](./theme-classic.md) +- [@docusaurus/theme-bootstrap](./theme-bootstrap.md) 🚧 + +:::caution + +The goal is to have all themes share the exact same features, user-experience and configuration. + +Only the UI design and underlying styling framework should change, and you should be able to change theme easily. + +We are not there yet: only the classic theme is production ready. + +::: + +## Enhancement themes + +These themes will enhance the existing main themes with additional user-interface related features. + +- [@docusaurus/theme-live-codeblock](./theme-live-codeblock.md) +- [@docusaurus/theme-search-algolia](./theme-search-algolia.md) diff --git a/website/docs/api/themes/theme-bootstrap.md b/website/docs/api/themes/theme-bootstrap.md new file mode 100644 index 000000000000..2c2dc05a6206 --- /dev/null +++ b/website/docs/api/themes/theme-bootstrap.md @@ -0,0 +1,25 @@ +--- +id: theme-bootstrap +title: '📦 theme-bootstrap' +slug: '/api/themes/@docusaurus/theme-bootstrap' +--- + +:::danger + +The bootstrap theme is a work in progress, and is not production ready. + +::: + +🚧 The bootstrap theme for Docusaurus. + +You can refer to the [theme configuration page](theme-configuration.md) for more details on the configuration. + +```bash npm2yarn +npm install --save @docusaurus/theme-bootstrap +``` + +:::tip + +If you have installed `@docusaurus/preset-bootstrap`, you don't need to install it as a dependency. + +::: diff --git a/website/docs/api/themes/theme-classic.md b/website/docs/api/themes/theme-classic.md new file mode 100644 index 000000000000..3b5a3a764cba --- /dev/null +++ b/website/docs/api/themes/theme-classic.md @@ -0,0 +1,19 @@ +--- +id: theme-classic +title: '📦 theme-classic' +slug: '/api/themes/@docusaurus/theme-classic' +--- + +The classic theme for Docusaurus. + +You can refer to the [theme configuration page](theme-configuration.md) for more details on the configuration. + +```bash npm2yarn +npm install --save @docusaurus/theme-classic +``` + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. + +::: diff --git a/website/docs/theme-classic.md b/website/docs/api/themes/theme-configuration.md similarity index 84% rename from website/docs/theme-classic.md rename to website/docs/api/themes/theme-configuration.md index 64e93462b41c..369a974d5d80 100644 --- a/website/docs/theme-classic.md +++ b/website/docs/api/themes/theme-configuration.md @@ -1,13 +1,10 @@ --- -id: theme-classic -title: '@docusaurus/theme-classic' +id: theme-configuration +title: 'Theme configuration' +slug: '/api/themes/configuration' --- -:::caution - -This section is a work in progress. - -::: +This configuration applies to all [main themes](./overview.md). ## Common @@ -421,3 +418,76 @@ module.exports = { }, }; ``` + +## Footer + +You can add logo and a copyright to the footer via `themeConfig.footer`. Logo can be placed in [static folder](static-assets.md). Logo URL works in the same way of the navbar logo. + +```js {5-15} title="docusaurus.config.js" + // ... + footer: { + logo: { + alt: 'Facebook Open Source Logo', + src: 'img/oss_logo.png', + href: 'https://opensource.facebook.com', + }, + copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, + } +``` + +## Footer Links + +You can add links to the navbar via `themeConfig.footer.links`: + +```js {5-15} title="docusaurus.config.js" +module.exports = { + // ... + footer: { + links: [ + { + // Label of the section of these links + title: 'Docs', + items: [ + { + // Label of the link + label: 'Style Guide', + // Client-side routing, used for navigating within the website. + // The baseUrl will be automatically prepended to this value. + to: 'docs/', + }, + { + label: 'Second Doc', + to: 'docs/doc2/', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Stack Overflow', + // A full-page navigation, used for navigating outside of the website. + href: 'https://stackoverflow.com/questions/tagged/docusaurus', + }, + { + label: 'Discord', + href: 'https://discordapp.com/invite/docusaurus', + }, + { + label: 'Twitter', + href: 'https://twitter.com/docusaurus', + }, + { + //Renders the html pass-through instead of a simple link + html: ` + + Deploys by Netlify + + `, + }, + ], + }, + ], + }, +}; +``` diff --git a/website/docs/api/themes/theme-live-codeblock.md b/website/docs/api/themes/theme-live-codeblock.md new file mode 100644 index 000000000000..2f24c0ea3813 --- /dev/null +++ b/website/docs/api/themes/theme-live-codeblock.md @@ -0,0 +1,11 @@ +--- +id: theme-live-codeblock +title: '📦 theme-live-codeblock' +slug: '/api/themes/@docusaurus/theme-live-codeblock' +--- + +This theme provides a `@theme/CodeBlock` component that is powered by react-live. You can read more on [interactive code editor](markdown-features.mdx#interactive-code-editor) documentation. + +```bash npm2yarn +npm install --save @docusaurus/theme-live-codeblock +``` diff --git a/website/docs/api/themes/theme-search-algolia.md b/website/docs/api/themes/theme-search-algolia.md new file mode 100644 index 000000000000..753d8ca66e6f --- /dev/null +++ b/website/docs/api/themes/theme-search-algolia.md @@ -0,0 +1,19 @@ +--- +id: theme-search-algolia +title: '📦 theme-search-algolia' +slug: '/api/themes/@docusaurus/theme-search-algolia' +--- + +This theme provides a `@theme/SearchBar` component that integrates with Algolia DocSearch easily. Combined with `@docusaurus/theme-classic`, it provides a very easy search integration. You can read more on [search](../../search.md) documentation. + +```bash npm2yarn +npm install --save @docusaurus/theme-search-algolia +``` + +This theme also adds search page available at `/search` (as swizzleable `SearchPage` component) path with OpenSearch support. + +:::tip + +If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. + +::: diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index b00842f60326..8cd59e9a11ee 100644 --- a/website/docs/markdown-features.mdx +++ b/website/docs/markdown-features.mdx @@ -144,7 +144,7 @@ Docusaurus has built-in support for [MDX](https://mdxjs.com/), which allows you **Note 1:** While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are treated slightly differently. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax. Let's rename the previous file to `greeting.mdx`. -**Note 2:** 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](guides/migrating-from-v1-to-v2.md#convert-style-attributes-to-style-objects-in-mdx). +**Note 2:** 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). Try this block here: diff --git a/website/docs/migration/migration-automated.md b/website/docs/migration/migration-automated.md new file mode 100644 index 000000000000..7c1f8de1196b --- /dev/null +++ b/website/docs/migration/migration-automated.md @@ -0,0 +1,75 @@ +--- +id: migration-automated +title: Automated migration +slug: /migration/automated +--- + +The migration CLI automatically migrates your v1 website to a v2 website. + +:::info + +Manual work is still required after using the migration CLI, as we can't automate a full migration + +::: + +The migration CLI migrates: + +- Site configurations (from `siteConfig.js` to `docusaurus.config.js`) +- `package.json` +- `sidebars.json` +- `/docs` +- `/blog` +- `/static` +- `versioned_sidebar.json` and `/versioned_docs` if your site uses versioning + +To use the migration CLI, follow these steps: + +1. Before using the migration CLI, ensure that `/docs`, `/blog`, `/static`, `sidebars.json`, `siteConfig.js`, `package.json` follow the [structure](#) shown at the start of this page. + +2. To migrate your v1 website, run the migration CLI with the appropriate filesystem paths: + +```bash +# migration command format +npx @docusaurus/migrate migrate + +# example +npx @docusaurus/migrate migrate ./v1-website ./v2-website +``` + +3. To view your new website locally, go into your v2 website's directory and start your development server. + +```bash +cd ./v2-website +yarn install +yarn start +``` + +:::danger + +The migration CLI updates existing files. Be sure to have commited them first! + +::: + +#### Options + +You can add option flags to the migration CLI to automatically migrate Markdown content and pages to v2. It is likely that you will still need to make some manual changes to achieve your desired result. + +| Name | Description | +| -------- | ------------------------------------------------------ | +| `--mdx` | Add this flag to convert Markdown to MDX automatically | +| `--page` | Add this flag to migrate pages automatically | + +```bash +# example using options +npx docusaurus-migrate migrate --mdx --page ./v1-website ./v2-website +``` + +:::danger + +The migration of pages and MDX is still a work in progress. + +We recommend you to try to run the pages without these options, commit, and then try to run the migration again with the `--page` and `--mdx` options. + +This way, you'd be able to easily inspect and fix the diff. + +::: diff --git a/website/docs/guides/migrating-from-v1-to-v2.md b/website/docs/migration/migration-manual.md similarity index 69% rename from website/docs/guides/migrating-from-v1-to-v2.md rename to website/docs/migration/migration-manual.md index 141cca9eb7c8..7a4390bfca76 100644 --- a/website/docs/guides/migrating-from-v1-to-v2.md +++ b/website/docs/migration/migration-manual.md @@ -1,55 +1,10 @@ --- -id: migrating-from-v1-to-v2 -title: Migrating from v1 to v2 -slug: /migrating-from-v1-to-v2 +id: migration-manual +title: Manual migration +slug: /migration/manual --- -import ColorGenerator from '@site/src/components/ColorGenerator'; - -:::caution - -For v1 translated sites, the migration doc is not available yet. - -::: - -This doc guides you through migrating an existing Docusaurus 1 site to Docusaurus 2. - -Your Docusaurus 1 site should have the following structure: - -```sh -├── docs -└── website - ├── blog - ├── core - │ └── Footer.js - ├── package.json - ├── pages - ├── sidebars.json - ├── siteConfig.js - └── static -``` - -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 -``` - -:::tip - -You can use the [migration command](#migration-command) to take care of some of the migration chores. - -::: +This manual migration process should be run after the [automated migration prcess](./migration-automated.md), to complete the missing parts, or debug issues in the migration CLI output. ## Project setup @@ -647,251 +602,8 @@ cd website yarn start ``` -## Migration command - -The migration command automatically migrates your v1 website to a v2 website. - -The migration command migrates: - -- Site configurations (from `siteConfig.js` to `docusaurus.config.js`) -- `package.json` -- `sidebars.json` -- `/docs` -- `/blog` -- `/static` -- `versioned_sidebar.json` and `/versioned_docs` if your site uses versioning - -:::info - -Manual tweaking is still required after using the migration command. You still need to migrate your [footer](#footer), [pages](#pages) and [content](#content). - -::: - -To use the migration command, follow these steps: - -1. Before using the migration command, ensure that `/docs`, `/blog`, `/static`, `sidebars.json`, `siteConfig.js`, `package.json` follow the [structure](#) shown at the start of this page. - -2. To migrate your v1 website, run the migration command with the appropriate filesystem paths: +You can also try to build the site for production: ```bash -# migration command format -npx @docusaurus/migrate migrate - -# example -npx @docusaurus/migrate migrate ./v1-website ./v2-website +yarn build ``` - -3. To view your new website locally, go into your v2 website's directory and start your development server. - -```bash -cd ./v2-website -yarn install -yarn start -``` - -#### Options - -You can add option flags to the migration command to automatically migrate Markdown content and pages to v2. It is likely that you will still need to make some manual changes to achieve your desired result. - -| Name | Description | -| -------- | ------------------------------------------------------ | -| `--mdx` | Add this flag to convert Markdown to MDX automatically | -| `--page` | Add this flag to migrate pages automatically | - -```bash -# example using options -npx docusaurus-migrate migrate --mdx --page ./v1-website ./v2-website -``` - -:::danger - -The migration of pages and MDX is still a work in progress. - -We recommend you to try to run the pages without these options, commit, and then try to run the migration again with the `--page` and `--mdx` options. - -This way, you'd be able to easily inspect and fix the diff. - -::: - -## Example migration PRs - -You might want to refer to our migration PRs for [Create React App](https://github.com/facebook/create-react-app/pull/7785) and [Flux](https://github.com/facebook/flux/pull/471) as examples of how a migration for a basic Docusaurus v1 site can be done. - -## Support - -For any questions, you can ask in the [`#docusaurus-1-to-2-migration` Discord channel](https://discordapp.com/invite/kYaNd6V). Feel free to tag [@yangshun](https://github.com/yangshun) in any migration PRs if you would like us to have a look. - ---- - -## Versioned Site - -Read up https://v2.docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#versioning first for problems in v1's approach. - -### Migrate your `versioned_docs` front matter - -Unlike v1, The markdown header for each versioned doc is no longer altered by using `version-${version}-${original_id}` as the value for the actual id field. See scenario below for better explanation. - -For example, if you have a `docs/hello.md`. - -```md ---- -id: hello -title: Hello, World ! ---- - -Hi, Endilie here :) -``` - -When you cut a new version 1.0.0, in Docusaurus v1, `website/versioned_docs/version-1.0.0/hello.md` looks like this: - -```md ---- -id: version-1.0.0-hello -title: Hello, World ! -original_id: hello ---- - -Hi, Endilie here :) -``` - -In comparison, Docusaurus 2 `website/versioned_docs/version-1.0.0/hello.md` looks like this (exactly same as original) - -```md ---- -id: hello -title: Hello, World ! ---- - -Hi, Endilie here :) -``` - -Since we're going for snapshot and allow people to move (and edit) docs easily inside version. The `id` frontmatter is no longer altered and will remain the same. Internally, it is set as `version-${version}/${id}`. - -Essentially, here are the necessary changes in each versioned_docs file: - -```diff {2-3,5} ---- -- id: version-1.0.0-hello -+ id: hello -title: Hello, World ! -- original_id: hello ---- -Hi, Endilie here :) -``` - -### Migrate your `versioned_sidebars` - -- Refer to `versioned_docs` id as `version-${version}/${id}` (v2) instead of `version-${version}-${original_id}` (v1). - -Because in v1 there is a good chance someone created a new file with front matter id `"version-${version}-${id}"` that can conflict with `versioned_docs` id. - -For example, Docusaurus 1 can't differentiate `docs/xxx.md` - -```md ---- -id: version-1.0.0-hello ---- - -Another content -``` - -vs `website/versioned_docs/version-1.0.0/hello.md` - -```md ---- -id: version-1.0.0-hello -title: Hello, World ! -original_id: hello ---- - -Hi, Endilie here :) -``` - -Since we don't allow `/` in v1 & v2 for frontmatter, conflicts are less likely to occur. - -So v1 users need to migrate their versioned_sidebars file - -Example `versioned_sidebars/version-1.0.0-sidebars.json`: - -```diff {2-3,5-6,9-10} title="versioned_sidebars/version-1.0.0-sidebars.json" -{ -+ "version-1.0.0/docs": { -- "version-1.0.0-docs": { - "Test": [ -+ "version-1.0.0/foo/bar", -- "version-1.0.0-foo/bar", - ], - "Guides": [ -+ "version-1.0.0/hello", -- "version-1.0.0-hello" - ] - } -} -``` - -### Populate your `versioned_sidebars` and `versioned_docs` - -In v2, we use snapshot approach for documentation versioning. **Every versioned docs does not depends on other version**. It is possible to have `foo.md` in `version-1.0.0` but it doesn't exist in `version-1.2.0`. This is not possible in previous version due to Docusaurus v1 fallback functionality (https://docusaurus.io/docs/en/versioning#fallback-functionality). - -For example, if your `versions.json` looks like this in v1 - -```json title="versions.json" -["1.1.0", "1.0.0"] -``` - -Docusaurus v1 creates versioned docs **if and only if the doc content is different**. Your docs structure might look like this if the only doc changed from v1.0.0 to v1.1.0 is `hello.md`. - -```shell -website -├── versioned_docs -│ ├── version-1.1.0 -│ │ └── hello.md -│ └── version-1.0.0 -│ ├── foo -│ │ └── bar.md -│ └── hello.md -├── versioned_sidebars -│ └── version-1.0.0-sidebars.json -``` - -In v2, you have to populate the missing `versioned_docs` and `versioned_sidebars` (with the right frontmatter and id reference too). - -```shell {3-5,12} -website -├── versioned_docs -│ ├── version-1.1.0 -│ │ ├── foo -│ │ │ └── bar.md -│ │ └── hello.md -│ └── version-1.0.0 -│ ├── foo -│ │ └── bar.md -│ └── hello.md -├── versioned_sidebars -│ ├── version-1.1.0-sidebars.json -│ └── version-1.0.0-sidebars.json -``` - -### Convert style attributes to style objects in MDX - -Docusaurus 2 uses JSX for doc files. If you have any style attributes in your Docusaurus 1 docs, convert them to style objects, like this: - -```diff ---- -id: demo -title: Demo ---- - -## Section - -hello world - -- pre style="background: black">zzz -+ pre style={{background: 'black'}}>zzz -``` - -## Translated Site - -We don't provide yet a migration path for v1 translated sites. - -v2 i18n support is a [work in progress](https://github.com/facebook/docusaurus/pull/3325), and will be added before the end of 2020 with a migration guide to help you migrate from v1 + Crowdin to v2 + Crowdin. diff --git a/website/docs/migration/migration-overview.md b/website/docs/migration/migration-overview.md new file mode 100644 index 000000000000..7e96ec37fb99 --- /dev/null +++ b/website/docs/migration/migration-overview.md @@ -0,0 +1,93 @@ +--- +id: migration-overview +title: Migration overview +slug: /migration +--- + +:::caution + +For v1 translated sites, the migration doc is not available yet. + +::: + +This doc guides you through migrating an existing Docusaurus 1 site to Docusaurus 2. + +We try to make this as easy as possible, and provide a migration cli. + +## Docusaurus 1 structure + +Your Docusaurus 1 site should have the following structure: + +```sh +├── docs +└── website + ├── blog + ├── core + │ └── Footer.js + ├── package.json + ├── pages + ├── sidebars.json + ├── siteConfig.js + └── static +``` + +## Docusaurus 2 structure + +After the migration, your Docusaurus 2 site should look like: + +```sh +website +├── blog +├── docs +├── src +│ ├── components +│ ├── css +│ └── pages +├── static +├── package.json +├── sidebars.json +├── docusaurus.config.js +``` + +## Migration process + +There are multiple things to migrate to obtain a fully functional Docusaurus 2 website: + +- packages +- cli commands +- site configuration +- markdown files +- sidebars file +- pages, components and CSS +- versioned docs +- i18n support 🚧 + +## Automated migration process + +The [migration cli](./migration-automated.md) will handle many things of the migration for you. + +However, some parts can't easily be automated, and you will have to fallback to the manual process. + +:::note + +We recommend running the migration cli, and complete the missing parts thanks to the manual migration process. + +::: + +## Manual migration process + +Some parts of the migration can't be automated (particularly the pages), and you will have to migrate them manually. + +The [manual migration guide](./migration-manual.md) will give you all the manual steps. + +## Support + +For any questions, you can ask in the [`#docusaurus-1-to-2-migration` Discord channel](https://discordapp.com/invite/kYaNd6V). + +Feel free to tag [@slorber](https://github.com/slorber) in any migration PRs if you would like us to have a look. + +We also have volunteers willing to [help you migrate your v1 site](https://github.com/facebook/docusaurus/issues/1834). + +## Example migration PRs + +You might want to refer to our migration PRs for [Create React App](https://github.com/facebook/create-react-app/pull/7785) and [Flux](https://github.com/facebook/flux/pull/471) as examples of how a migration for a basic Docusaurus v1 site can be done. diff --git a/website/docs/migration/migration-translated-sites.md b/website/docs/migration/migration-translated-sites.md new file mode 100644 index 000000000000..ae5482171eb9 --- /dev/null +++ b/website/docs/migration/migration-translated-sites.md @@ -0,0 +1,13 @@ +--- +id: migration-translated-sites +title: Translated sites +slug: /migration/translated-sites +--- + +:::warning + +We don't provide yet a migration path for v1 translated sites. + +v2 i18n support is a [work in progress](https://github.com/facebook/docusaurus/pull/3325), and will be added before the end of 2020 with a migration guide to help you migrate from v1 + Crowdin to v2 + Crowdin. + +::: diff --git a/website/docs/migration/migration-versioned-sites.md b/website/docs/migration/migration-versioned-sites.md new file mode 100644 index 000000000000..732ce1213ad4 --- /dev/null +++ b/website/docs/migration/migration-versioned-sites.md @@ -0,0 +1,176 @@ +--- +id: migration-versioned-sites +title: Versioned sites +slug: /migration/versioned-sites +--- + +Read up https://v2.docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#versioning first for problems in v1's approach. + +:::note + +The versioned docs should normally be migrated correctly by the [migration CLI](./migration-automated.md) + +::: + +## Migrate your `versioned_docs` front matter + +Unlike v1, The markdown header for each versioned doc is no longer altered by using `version-${version}-${original_id}` as the value for the actual id field. See scenario below for better explanation. + +For example, if you have a `docs/hello.md`. + +```md +--- +id: hello +title: Hello, World ! +--- + +Hi, Endilie here :) +``` + +When you cut a new version 1.0.0, in Docusaurus v1, `website/versioned_docs/version-1.0.0/hello.md` looks like this: + +```md +--- +id: version-1.0.0-hello +title: Hello, World ! +original_id: hello +--- + +Hi, Endilie here :) +``` + +In comparison, Docusaurus 2 `website/versioned_docs/version-1.0.0/hello.md` looks like this (exactly same as original) + +```md +--- +id: hello +title: Hello, World ! +--- + +Hi, Endilie here :) +``` + +Since we're going for snapshot and allow people to move (and edit) docs easily inside version. The `id` frontmatter is no longer altered and will remain the same. Internally, it is set as `version-${version}/${id}`. + +Essentially, here are the necessary changes in each versioned_docs file: + +```diff {2-3,5} +--- +- id: version-1.0.0-hello ++ id: hello +title: Hello, World ! +- original_id: hello +--- +Hi, Endilie here :) +``` + +## Migrate your `versioned_sidebars` + +- Refer to `versioned_docs` id as `version-${version}/${id}` (v2) instead of `version-${version}-${original_id}` (v1). + +Because in v1 there is a good chance someone created a new file with front matter id `"version-${version}-${id}"` that can conflict with `versioned_docs` id. + +For example, Docusaurus 1 can't differentiate `docs/xxx.md` + +```md +--- +id: version-1.0.0-hello +--- + +Another content +``` + +vs `website/versioned_docs/version-1.0.0/hello.md` + +```md +--- +id: version-1.0.0-hello +title: Hello, World ! +original_id: hello +--- + +Hi, Endilie here :) +``` + +Since we don't allow `/` in v1 & v2 for frontmatter, conflicts are less likely to occur. + +So v1 users need to migrate their versioned_sidebars file + +Example `versioned_sidebars/version-1.0.0-sidebars.json`: + +```diff {2-3,5-6,9-10} title="versioned_sidebars/version-1.0.0-sidebars.json" +{ ++ "version-1.0.0/docs": { +- "version-1.0.0-docs": { + "Test": [ ++ "version-1.0.0/foo/bar", +- "version-1.0.0-foo/bar", + ], + "Guides": [ ++ "version-1.0.0/hello", +- "version-1.0.0-hello" + ] + } +} +``` + +## Populate your `versioned_sidebars` and `versioned_docs` + +In v2, we use snapshot approach for documentation versioning. **Every versioned docs does not depends on other version**. It is possible to have `foo.md` in `version-1.0.0` but it doesn't exist in `version-1.2.0`. This is not possible in previous version due to Docusaurus v1 fallback functionality (https://docusaurus.io/docs/en/versioning#fallback-functionality). + +For example, if your `versions.json` looks like this in v1 + +```json title="versions.json" +["1.1.0", "1.0.0"] +``` + +Docusaurus v1 creates versioned docs **if and only if the doc content is different**. Your docs structure might look like this if the only doc changed from v1.0.0 to v1.1.0 is `hello.md`. + +```shell +website +├── versioned_docs +│ ├── version-1.1.0 +│ │ └── hello.md +│ └── version-1.0.0 +│ ├── foo +│ │ └── bar.md +│ └── hello.md +├── versioned_sidebars +│ └── version-1.0.0-sidebars.json +``` + +In v2, you have to populate the missing `versioned_docs` and `versioned_sidebars` (with the right frontmatter and id reference too). + +```shell {3-5,12} +website +├── versioned_docs +│ ├── version-1.1.0 +│ │ ├── foo +│ │ │ └── bar.md +│ │ └── hello.md +│ └── version-1.0.0 +│ ├── foo +│ │ └── bar.md +│ └── hello.md +├── versioned_sidebars +│ ├── version-1.1.0-sidebars.json +│ └── version-1.0.0-sidebars.json +``` + +## Convert style attributes to style objects in MDX + +Docusaurus 2 uses JSX for doc files. If you have any style attributes in your Docusaurus 1 docs, convert them to style objects, like this: + +```diff +--- +id: demo +title: Demo +--- + +## Section + +hello world + +- pre style="background: black">zzz ++ pre style={{background: 'black'}}>zzz +``` diff --git a/website/docs/theme-bootstrap.md b/website/docs/theme-bootstrap.md deleted file mode 100644 index c5abde38f948..000000000000 --- a/website/docs/theme-bootstrap.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: theme-bootstrap -title: '@docusaurus/theme-bootstrap' ---- - -:::caution - -This section is a work in progress. - -::: - -## Hooks - -### `useLogo` - -React hook to access the logo asset. - -Usage example: - -```jsx -import React from 'react'; -// highlight-next-line -import useLogo from '@theme/hooks/useLogo'; - -const Example = () => { - // highlight-next-line - const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); - - return ( - - {logoImageUrl != null && ( - {logoAlt} - )} - - ) -}; -``` - -## Navbar - -### Navbar title & logo - -You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab. - -```js {5-11} title="docusaurus.config.js" -module.exports = { - // ... - themeConfig: { - navbar: { - title: 'Site Title', - logo: { - alt: 'Site Logo', - src: 'img/logo.svg', - href: 'https://v2.docusaurus.io/', // Default to `siteConfig.baseUrl`. - target: '_self', // By default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one). - }, - }, - // ... - }, -}; -``` - -### Navbar links - -You can add links to the navbar via `themeConfig.navbar.links`: - -```js {5-15} title="docusaurus.config.js" -module.exports = { - // ... - themeConfig: { - navbar: { - links: [ - { - // Client-side routing, used for navigating within the website. - // The baseUrl will be automatically prepended to this value. - to: 'docs/introduction', - // A full-page navigation, used for navigating outside of the website. - // You should only use either `to` or `href`. - href: 'https://www.facebook.com', - // Prepends the baseUrl to href values. - prependBaseUrlToHref: true, - // The string to be shown. - label: 'Introduction', - // Left or right side of the navbar. - position: 'left', // or 'right' - // To apply the active class styling on all - // routes starting with this path. - // This usually isn't necessary - activeBasePath: 'docs', - // Alternative to activeBasePath if required. - activeBaseRegex: 'docs/(next|v8)', - // Custom CSS class (for styling any item). - className: '', - }, - // ... other links - ], - }, - // ... - }, -}; -``` - -React Router should automatically apply active link styling to links, but you can use `activeBasePath` in edge cases. For cases in which a link should be active on several different paths (such as when you have multiple doc folders under the same sidebar), you can use `activeBaseRegex`. `activeBaseRegex` is a more flexible alternative to `activeBasePath` and takes precedence over it -- Docusaurus parses it into a regular expression that is tested against the current URL. - -Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes. - - -## Footer - -You can add logo and a copyright to the footer via `themeConfig.footer`. Logo can be placed in [static folder](static-assets.md). Logo URL works in the same way of the navbar logo. - -```js {5-15} title="docusaurus.config.js" - // ... - footer: { - logo: { - alt: 'Facebook Open Source Logo', - src: 'img/oss_logo.png', - href: 'https://opensource.facebook.com', - }, - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, - } -``` - -## Footer Links -You can add links to the navbar via `themeConfig.footer.links`: - - -```js {5-15} title="docusaurus.config.js" -module.exports = { - // ... - footer: { - links: [ - { - // Label of the section of these links - title: 'Docs', - items: [ - { - // Label of the link - label: 'Style Guide', - // Client-side routing, used for navigating within the website. - // The baseUrl will be automatically prepended to this value. - to: 'docs/', - }, - { - label: 'Second Doc', - to: 'docs/doc2/', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - // A full-page navigation, used for navigating outside of the website. - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'Twitter', - href: 'https://twitter.com/docusaurus', - }, - { - //Renders the html pass-through instead of a simple link - html: ` - - Deploys by Netlify - - `, - }, - ], - }, - ], - }, -}; -``` diff --git a/website/docs/using-plugins.md b/website/docs/using-plugins.md index b3c2d7e19085..b9bbccff0c30 100644 --- a/website/docs/using-plugins.md +++ b/website/docs/using-plugins.md @@ -5,6 +5,10 @@ title: Plugins Plugins are the building blocks of features in a Docusaurus 2 site. Each plugin handles its own individual feature. Plugins may work and be distributed as part of bundle via [presets](presets.md). +## Available plugins + +We maintain a [list of official plugins](./api/plugins/overview.md), but the community has also created some [unofficial plugins](/community/resources#community-plugins). + ## Installing a plugin A plugin is usually a npm package, so you install them like other npm packages using npm. @@ -163,861 +167,3 @@ interface LoadContext { #### Return value The returned object value should implement the [lifecycle APIs](lifecycle-apis.md). - -## Official plugins - -Find the list of official Docusaurus plugins [here](https://github.com/facebook/docusaurus/tree/master/packages). - -### `@docusaurus/plugin-content-blog` - -Provides the [Blog](blog.md) feature and is the default blog plugin for Docusaurus. - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-content-blog -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. - -::: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-content-blog', - { - /** - * Path to data on filesystem relative to site dir. - */ - path: 'blog', - /** - * URL for editing a blog post. - * Example: 'https://github.com/facebook/docusaurus/edit/master/website/blog/' - */ - editUrl: - 'https://github.com/facebook/docusaurus/edit/master/website/blog/', - /** - * Blog page title for better SEO - */ - blogTitle: 'Blog title', - /** - * Blog page meta description for better SEO - */ - blogDescription: 'Blog', - /** - * Number of blog post elements to show in the blog sidebar - * 'ALL' to show all blog posts - * 0 to disable - */ - blogSidebarCount: 5, - /** - * Title of the blog sidebar - */ - blogSidebarTitle: 'All our posts', - /** - * URL route for the blog section of your site. - * *DO NOT* include a trailing slash. - */ - routeBasePath: 'blog', - include: ['*.md', '*.mdx'], - postsPerPage: 10, - /** - * Theme components used by the blog pages. - */ - blogListComponent: '@theme/BlogListPage', - blogPostComponent: '@theme/BlogPostPage', - blogTagsListComponent: '@theme/BlogTagsListPage', - blogTagsPostsComponent: '@theme/BlogTagsPostsPage', - /** - * Remark and Rehype plugins passed to MDX. - */ - remarkPlugins: [ - /* require('remark-math') */ - ], - rehypePlugins: [], - /** - * Custom Remark and Rehype plugins passed to MDX before - * the default Docusaurus Remark and Rehype plugins. - */ - beforeDefaultRemarkPlugins: [], - beforeDefaultRehypePlugins: [], - /** - * Truncate marker, can be a regex or string. - */ - truncateMarker: //, - /** - * Show estimated reading time for the blog post. - */ - showReadingTime: true, - /** - * Blog feed. - * If feedOptions is undefined, no rss feed will be generated. - */ - feedOptions: { - type: '', // required. 'rss' | 'feed' | 'all' - title: '', // default to siteConfig.title - description: '', // default to `${siteConfig.title} Blog` - copyright: '', - language: undefined, // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes - }, - }, - ], - ], -}; -``` - -### `@docusaurus/plugin-content-docs` - -Provides the [Docs](markdown-features.mdx) functionality and is the default docs plugin for Docusaurus. - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-content-docs -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. - -::: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-content-docs', - { - /** - * Path to data on filesystem relative to site dir. - */ - path: 'docs', - /** - * URL for editing a doc in the website repo. - * Example: 'https://github.com/facebook/docusaurus/edit/master/website/' - */ - editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/', - /** - * URL route for the docs section of your site. - * *DO NOT* include a trailing slash. - */ - routeBasePath: 'docs', - include: ['**/*.md', '**/*.mdx'], // Extensions to include. - /** - * Path to sidebar configuration for showing a list of markdown pages. - * Warning: will change - */ - sidebarPath: '', - /** - * Theme components used by the docs pages - */ - docLayoutComponent: '@theme/DocPage', - docItemComponent: '@theme/DocItem', - /** - * Remark and Rehype plugins passed to MDX - */ - remarkPlugins: [ - /* require('remark-math') */ - ], - rehypePlugins: [], - /** - * Custom Remark and Rehype plugins passed to MDX before - * the default Docusaurus Remark and Rehype plugins. - */ - beforeDefaultRemarkPlugins: [], - beforeDefaultRehypePlugins: [], - /** - * Whether to display the author who last updated the doc. - */ - showLastUpdateAuthor: false, - /** - * Whether to display the last date the doc was updated. - */ - showLastUpdateTime: false, - /** - * By default, versioning is enabled on versioned sites. - * This is a way to explicitly disable the versioning feature. - */ - disableVersioning: false, - /** - * Skip the next release docs when versioning is enabled. - * This will not generate HTML files in the production build for documents - * in `/docs/next` directory, only versioned docs. - */ - excludeNextVersionDocs: false, - /** - * The last version is the one we navigate to in priority on versioned sites - * It is the one displayed by default in docs navbar items - * By default, the last version is the first one to appear in versions.json - * By default, the last version is at the "root" (docs have path=/docs/myDoc) - * Note: it is possible to configure the path and label of the last version - * Tip: using lastVersion: 'current' make sense in many cases - */ - lastVersion: undefined, - /** - * The docusaurus versioning defaults don't make sense for all projects - * This gives the ability customize the label and path of each version - * You may not like that default versin - */ - versions: { - /* - Example configuration: - current: { - label: 'Android SDK v2.0.0 (WIP)', - path: 'android-2.0.0', - }, - '1.0.0': { - label: 'Android SDK v1.0.0', - path: 'android-1.0.0', - }, - */ - }, - /** - * Sometimes you only want to include a subset of all available versions. - * Tip: limit to 2 or 3 versions to improve startup and build time in dev and deploy previews - */ - onlyIncludeVersions: undefined, // ex: ["current", "1.0.0", "2.0.0"] - }, - ], - ], -}; -``` - -### `@docusaurus/plugin-content-pages` - -The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides [creating pages](guides/creating-pages.md) functionality. - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-content-pages -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. - -::: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-content-pages', - { - /** - * Path to data on filesystem - * relative to site dir - * components in this directory will be automatically converted to pages - */ - path: 'src/pages', - /** - * URL route for the page section of your site - * do not include trailing slash - */ - routeBasePath: '', - include: ['**/*.{js,jsx,ts,tsx,md,mdx}'], - /** - * No Route will be created for matching files - */ - exclude: [ - '**/_*.{js,jsx,ts,tsx,md,mdx}', - '**/*.test.{js,ts}', - '**/__tests__/**', - ], - /** - * Theme component used by markdown pages. - */ - mdxPageComponent: '@theme/MDXPage', - /** - * Remark and Rehype plugins passed to MDX - */ - remarkPlugins: [], - rehypePlugins: [], - /** - * Custom Remark and Rehype plugins passed to MDX before - * the default Docusaurus Remark and Rehype plugins. - */ - beforeDefaultRemarkPlugins: [], - beforeDefaultRehypePlugins: [], - }, - ], - ], -}; -``` - -### `@docusaurus/plugin-google-analytics` - -The default [Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/) plugin. It is a JavaScript library for measuring how users interact with your website. - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-google-analytics -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. - -::: - -**Configuration** - -```js title="docusaurus.config.js" -module.exports = { - plugins: ['@docusaurus/plugin-google-analytics'], - themeConfig: { - googleAnalytics: { - trackingID: 'UA-141789564-1', - // Optional fields. - anonymizeIP: true, // Should IPs be anonymized? - }, - }, -}; -``` - -### `@docusaurus/plugin-google-gtag` - -The default [Global Site Tag (gtag.js)](https://developers.google.com/analytics/devguides/collection/gtagjs/) plugin. It is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform. This section describes how to configure a Docusaurus site to enable global site tag for Google Analytics. - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-google-gtag -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. - -::: - -**Configuration** - -```js title="docusaurus.config.js" -module.exports = { - plugins: ['@docusaurus/plugin-google-gtag'], - themeConfig: { - gtag: { - trackingID: 'UA-141789564-1', - // Optional fields. - anonymizeIP: true, // Should IPs be anonymized? - }, - }, -}; -``` - -### `@docusaurus/plugin-sitemap` - -This plugin creates sitemap for your site so that search engine crawlers can crawl your site more accurately. - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-sitemap -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. - -::: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-sitemap', - { - cacheTime: 600 * 1000, // 600 sec - cache purge period - changefreq: 'weekly', - priority: 0.5, - trailingSlash: false, - }, - ], - ], -}; -``` - -### `@docusaurus/plugin-ideal-image` - -Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder) **in the production builds**. - -```bash npm2yarn -npm install --save @docusaurus/plugin-ideal-image -``` - -Modify your `docusaurus.config.js` - -```diff -module.exports = { - ... -+ plugins: ['@docusaurus/plugin-ideal-image'], - ... -} -``` - -#### Usage - -This plugin supports the PNG, GIF and JPG formats only. - -```jsx -import Image from '@theme/IdealImage'; -import thumbnail from './path/to/img.png'; - -// your React code - - -// or - -``` - -#### Options - -| Option | Type | Default | Description | -| --- | --- | --- | --- | -| `name` | `string` | `ideal-img/[name].[hash:hex:7].[width].[ext]` | Filename template for output files. | -| `sizes` | `array` | _original size_ | Specify all widths you want to use. If a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). | -| `size` | `integer` | _original size_ | Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up) | -| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. | -| `max` | `integer` | | See `min` above | -| `steps` | `integer` | `4` | Configure the number of images generated between `min` and `max` (inclusive) | -| `quality` | `integer` | `85` | JPEG compression quality | - -### `@docusaurus/plugin-client-redirects` - -Docusaurus Plugin to generate **client-side redirects**. - -This plugin will write additional HTML pages to your static site, that redirects the user to your existing Docusaurus pages with JavaScript. - -:::note - -This plugin only create redirects for the production build. - -::: - -:::caution - -It is better to use server-side redirects whenever possible. - -Before using this plugin, you should look if your hosting provider doesn't offer this feature. - -::: - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-client-redirects -``` - -**Configuration** - -Main usecase: you have `/myDocusaurusPage`, and you want to redirect to this page from `/myDocusaurusPage.html`: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-client-redirects', - { - fromExtensions: ['html'], - }, - ], - ], -}; -``` - -Second usecase: you have `/myDocusaurusPage.html`, and you want to redirect to this page from `/myDocusaurusPage`. - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-client-redirects', - { - toExtensions: ['html'], - }, - ], - ], -}; -``` - -For custom redirect logic, provide your own `createRedirects` function. - -Let's imagine you change the url of an existing page, you might want to make sure the old url still works: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-client-redirects', - { - redirects: [ - { - to: '/docs/newDocPath', // string - from: ['/docs/oldDocPathFrom2019', '/docs/legacyDocPathFrom2016'], // string | string[] - }, - ], - }, - ], - ], -}; -``` - -It's possible to use a function to create the redirects for each existing path: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-client-redirects', - { - createRedirects: function (existingPath) { - if (existingPath === '/docs/newDocPath') { - return ['/docs/oldDocPathFrom2019', '/docs/legacyDocPathFrom2016']; // string | string[] - } - }, - }, - ], - ], -}; -``` - -Finally, it's possible to use all options at the same time: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-client-redirects', - { - fromExtensions: ['html', 'htm'], - toExtensions: ['exe', 'zip'], - redirects: [ - { - to: '/docs/newDocPath', - from: '/docs/oldDocPath', - }, - ], - createRedirects: function (existingPath) { - if (existingPath === '/docs/newDocPath2') { - return ['/docs/oldDocPath2']; - } - }, - }, - ], - ], -}; -``` - -### `@docusaurus/plugin-pwa` - -Docusaurus Plugin to add PWA support using [Workbox](https://developers.google.com/web/tools/workbox). This plugin generates a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers) in production build only, and allows you to create fully PWA-compliant documentation site with offline and installation support. - -```bash npm2yarn -npm install --save @docusaurus/plugin-pwa -``` - -Create a [PWA manifest](https://web.dev/add-manifest/) at `./static/manifest.json`. - -Modify `docusaurus.config.js` with a minimal PWA config, like: - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-pwa', - { - debug: true, - offlineModeActivationStrategies: ['appInstalled', 'queryString'], - pwaHead: [ - { - tagName: 'link', - rel: 'icon', - href: '/img/docusaurus.png', - }, - { - tagName: 'link', - rel: 'manifest', - href: '/manifest.json', // your PWA manifest - }, - { - tagName: 'meta', - name: 'theme-color', - content: 'rgb(37, 194, 160)', - }, - ], - }, - ], - ], -}; -``` - -#### Progressive Web App - -Having a service worker installed is not enough to make your application a PWA. You'll need to at least include a [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and have the correct tags in `` ([Options > pwaHead](#pwahead)). - -After deployment, you can use [Lighthouse](https://developers.google.com/web/tools/lighthouse) to run an audit on your site. - -For a more exhaustive list of what it takes for your site to be a PWA, refer to the [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) - -#### App installation support - -If your browser supports it, you should be able to install a Docusaurus site as an app. - -![pwa_install.gif](/img/pwa_install.gif) - -#### Offline mode (precaching) - -We enable users to browse a Docusaurus site offline, by using service-worker precaching. - -> ### [What is Precaching?](https://developers.google.com/web/tools/workbox/modules/workbox-precaching) -> -> One feature of service workers is the ability to save a set of files to the cache when the service worker is installing. This is often referred to as "precaching", since you are caching content ahead of the service worker being used. -> -> The main reason for doing this is that it gives developers control over the cache, meaning they can determine when and how long a file is cached as well as serve it to the browser without going to the network, meaning it can be used to create web apps that work offline. -> -> Workbox takes a lot of the heavy lifting out of precaching by simplifying the API and ensuring assets are downloaded efficiently. - -By default, offline mode is enabled when the site is installed as an app. See the `offlineModeActivationStrategies` option for details. - -After the site has been precached, the service worker will serve cached responses for later visits. When a new build is deployed along with a new service worker, the new one will begin installing and eventually move to a waiting state. During this waiting state, a reload popup will show and ask the user to reload the page for new content. Until the user either clears the application cache or clicks the `reload` button on the popup, the service worker will continue serving the old content. - -:::caution - -Offline mode / precaching requires downloading all the static assets of the site ahead of time, and can consume unnecessary bandwidth. It may not be a good idea to activate it for all kind of sites. - -::: - -##### Options - -##### `debug` - -- Type: `boolean` -- Default: `false` - -Turn debug mode on: - -- Workbox logs -- Additional Docusaurus logs -- Unoptimized SW file output -- Source maps - -##### `offlineModeActivationStrategies` - -- Type: `Array<'appInstalled' | 'mobile' | 'saveData'| 'queryString' | 'always'>` -- Default: `['appInstalled','queryString']` - -Strategies used to turn the offline mode on: - -- `appInstalled`: activates for users having installed the site as an app -- `queryString`: activates if queryString contains `offlineMode=true` (convenient for PWA debugging) -- `mobile`: activates for mobile users (width <= 940px) -- `saveData`: activates for users with `navigator.connection.saveData === true` -- `always`: activates for all users - -:::caution - -Use this carefully: some users may not like to be forced to use the offline mode. - -::: - -##### `injectManifestConfig` - -[Workbox options](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest) to pass to `workbox.injectManifest()`. This gives you control over which assets will be precached, and be available offline. - -- Type: `InjectManifestOptions` -- Default: `{}` - -```js title="docusaurus.config.js" -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-pwa', - { - injectManifestConfig: { - manifestTransforms: [ - //... - ], - modifyURLPrefix: { - //... - }, - // We already add regular static assets (html, images...) to be available offline - // You can add more files according to your needs - globPatterns: ['**/*.{pdf,docx,xlsx}'], - // ... - }, - }, - ], - ], -}; -``` - -##### `reloadPopup` - -- Type: `string | false` -- Default: `'@theme/PwaReloadPopup'` - -Module path to reload popup component. This popup is rendered when a new service worker is waiting to be installed, and we suggest a reload to the user. - -Passing `false` will disable the popup, but this is not recommended: users won't have a way to get up-to-date content. - -A custom component can be used, as long as it accepts `onReload` as a prop. The `onReload` callback should be called when the `reload` button is clicked. This will tell the service worker to install the waiting service worker and reload the page. - -```ts -interface PwaReloadPopupProps { - onReload: () => void; -} -``` - -The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://facebookincubator.github.io/infima/docs/components/alert). - -![pwa_reload.gif](/img/pwa_reload.gif) - -##### `pwaHead` - -- Type: `Array<{ tagName: string } & Record>` -- Default: `[]` - -Array of objects containing `tagName` and key-value pairs for attributes to inject into the `` tag. Technically you can inject any head tag through this, but it's ideally used for tags to make your site PWA compliant. Here's a list of tag to make your app fully compliant: - -```js -module.exports = { - plugins: [ - [ - '@docusaurus/plugin-pwa', - { - pwaHead: [ - { - tagName: 'link', - rel: 'icon', - href: '/img/docusaurus.png', - }, - { - tagName: 'link', - rel: 'manifest', - href: '/manifest.json', - }, - { - tagName: 'meta', - name: 'theme-color', - content: 'rgb(37, 194, 160)', - }, - { - tagName: 'meta', - name: 'apple-mobile-web-app-capable', - content: 'yes', - }, - { - tagName: 'meta', - name: 'apple-mobile-web-app-status-bar-style', - content: '#000', - }, - { - tagName: 'link', - rel: 'apple-touch-icon', - href: '/img/docusaurus.png', - }, - { - tagName: 'link', - rel: 'mask-icon', - href: '/img/docusaurus.svg', - color: 'rgb(37, 194, 160)', - }, - { - tagName: 'meta', - name: 'msapplication-TileImage', - content: '/img/docusaurus.png', - }, - { - tagName: 'meta', - name: 'msapplication-TileColor', - content: '#000', - }, - ], - }, - ], - ], -}; -``` - -##### `swCustom` - -- Type: `string | undefined` -- Default: `undefined` - -Useful for additional Workbox rules. You can do whatever a service worker can do here, and use the full power of workbox libraries. The code is transpiled, so you can use modern ES6+ syntax here. - -For example, to cache files from external routes: - -```js -import {registerRoute} from 'workbox-routing'; -import {StaleWhileRevalidate} from 'workbox-strategies'; - -// default fn export receiving some useful params -export default function swCustom(params) { - const { - debug, // :boolean - offlineMode, // :boolean - } = params; - - // Cache responses from external resources - registerRoute((context) => { - return [ - /graph\.facebook\.com\/.*\/picture/, - /netlify\.com\/img/, - /avatars1\.githubusercontent/, - ].some((regex) => context.url.href.match(regex)); - }, new StaleWhileRevalidate()); -} -``` - -The module should have a `default` function export, and receives some params. - -##### `swRegister` - -- Type: `string | false` -- Default: `'docusaurus-plugin-pwa/src/registerSW.js'` - -Adds an entry before the Docusaurus app so that registration can happen before the app runs. The default `registerSW.js` file is enough for simple registration. - -Passing `false` will disable registration entirely. - -### `@docusaurus/plugin-debug` - -The debug plugin will display useful debug information at [http://localhost:3000/\_\_docusaurus/debug](http://localhost:3000/__docusaurus/debug). - -It is mostly useful for plugin authors, that will be able to inspect more easily the content of the `.docusaurus` folder (like the creates routes), but also be able to inspect data structures that are never written to disk, like the plugin data loaded through the `contentLoaded` lifecycle. - -:::note - -If you report a bug, we will probably ask you to have this plugin turned on in the production, so that we can inspect your deployment config more easily. - -If you don't have any sensitive information, you can keep it on in production [like we do](http://v2.docusaurus.io/__docusaurus/debug). - -::: - -**Installation** - -```bash npm2yarn -npm install --save @docusaurus/plugin-debug -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below. - -By default, it's enabled in dev, and disabled in prod, to avoid exposing potentially sensitive information. - -::: - -```js title="docusaurus.config.js" -module.exports = { - plugins: ['@docusaurus/plugin-debug'], -}; -``` diff --git a/website/docs/using-themes.md b/website/docs/using-themes.md index 8f388dd8ad54..1ef3d0dc0e4e 100644 --- a/website/docs/using-themes.md +++ b/website/docs/using-themes.md @@ -5,6 +5,10 @@ title: Themes Like plugins, themes are designed to add functionality to your Docusaurus site. As a good rule of thumb, themes are mostly focused on client-side, where plugins are more focused on server-side functionalities. Themes are also designed to be replace-able with other themes. +## Available themes + +We maintain a [list of official themes](./api/themes/overview.md). + ## Using themes To use themes, specify the themes in your `docusaurus.config.js`. You may use multiple themes: @@ -153,66 +157,6 @@ Unless you want publish to npm a "theme enhancer" (like `docusaurus-theme-live-c ::: -## Official themes by Docusaurus - -### `@docusaurus/theme-classic` - -The classic theme for Docusaurus. You can refer to [classic theme configuration](theme-classic.md) for more details on the configuration. - -```bash npm2yarn -npm install --save @docusaurus/theme-classic -``` - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. - -::: - -### `@docusaurus/theme-bootstrap` - -The bootstrap theme for Docusaurus. You can refer to [bootstrap theme configuration](theme-bootstrap.md) for more details on the configuration. - -```bash npm2yarn -npm install --save @docusaurus/theme-bootstrap -``` - -:::tip - -If you have installed `@docusaurus/preset-bootstrap`, you don't need to install it as a dependency. - -::: - -:::caution - -This theme is a work in progress. - -::: - -### `@docusaurus/theme-search-algolia` - -This theme provides a `@theme/SearchBar` component that integrates with Algolia DocSearch easily. Combined with `@docusaurus/theme-classic`, it provides a very easy search integration. You can read more on [search](search.md) documentation. - -```bash npm2yarn -npm install --save @docusaurus/theme-search-algolia -``` - -This theme also adds search page available at `/search` (as swizzleable `SearchPage` component) path with OpenSearch support. - -:::tip - -If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. - -::: - -### `@docusaurus/theme-live-codeblock` - -This theme provides a `@theme/CodeBlock` component that is powered by react-live. You can read more on [interactive code editor](markdown-features.mdx#interactive-code-editor) documentation. - -```bash npm2yarn -npm install --save @docusaurus/theme-live-codeblock -``` - ## Themes design While themes share the exact same lifecycle methods with plugins, their implementations can look very different from those of plugins based on themes' designed objectives. diff --git a/website/docs/versioning.md b/website/docs/versioning.md index 1d382d47eee2..4c67a3298dbe 100644 --- a/website/docs/versioning.md +++ b/website/docs/versioning.md @@ -165,7 +165,7 @@ Docusaurus defaults work great for the first usecase. The docs in `./docs` will be served at `/docs/1.0.0` instead of `/docs/next`, and `1.0.0` will become the default version we link to in the navbar dropdown, and you will only need to maintain a single `./docs` folder. -See [docs plugin configuration](using-plugins#docusaurusplugin-content-docs) for more details. +See [docs plugin configuration](./api/plugins/plugin-content-docs.md) for more details. ### Version your documentation only when needed diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 9057382e932c..528ff0aa421d 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -54,7 +54,7 @@ module.exports = { locales: ['en', 'fr'], }, onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'throw', + onBrokenMarkdownLinks: 'warn', favicon: 'img/docusaurus.ico', customFields: { description: @@ -327,7 +327,7 @@ module.exports = { }, { label: 'Migration from v1 to v2', - to: 'docs/migrating-from-v1-to-v2', + to: 'docs/migration', }, ], }, diff --git a/website/sidebars.js b/website/sidebars.js index 2866dcae1de8..94c5b87f1466 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -31,7 +31,6 @@ module.exports = { 'blog', 'search', 'deployment', - 'guides/migrating-from-v1-to-v2', ], }, { @@ -39,12 +38,51 @@ module.exports = { label: 'Advanced Guides', items: ['using-plugins', 'using-themes', 'presets'], }, + { + type: 'category', + label: 'Migrating from v1 to v2', + items: [ + 'migration/migration-overview', + 'migration/migration-automated', + 'migration/migration-manual', + 'migration/migration-versioned-sites', + 'migration/migration-translated-sites', + ], + }, ], api: [ 'cli', 'docusaurus-core', 'api/docusaurus.config.js', 'lifecycle-apis', - 'theme-classic', + { + type: 'category', + label: 'Plugins', + items: [ + 'api/plugins/plugins-overview', + 'api/plugins/plugin-content-docs', + 'api/plugins/plugin-content-blog', + 'api/plugins/plugin-content-pages', + 'api/plugins/plugin-client-redirects', + 'api/plugins/plugin-debug', + 'api/plugins/plugin-google-analytics', + 'api/plugins/plugin-google-gtag', + 'api/plugins/plugin-ideal-image', + 'api/plugins/plugin-pwa', + 'api/plugins/plugin-sitemap', + ], + }, + { + type: 'category', + label: 'Themes', + items: [ + 'api/themes/themes-overview', + 'api/themes/theme-configuration', + 'api/themes/theme-classic', + 'api/themes/theme-bootstrap', + 'api/themes/theme-live-codeblock', + 'api/themes/theme-search-algolia', + ], + }, ], }; diff --git a/website/src/pages/index.js b/website/src/pages/index.js index caff57016732..fef1bb41a2e8 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -129,7 +129,7 @@ function Home() {
Coming from v1? Check out our{' '} - + v1 to v2 migration guide .