-
-);
-```
-
-### `to`: string
-
-The target location to navigate to. Example: `/docs/introduction`.
-
-```jsx
-
-```
-
-### `activeClassName`: string
-
-The class to give the `` when it is active. The default given class is `active`. This will be joined with the `className` prop.
-
-```jsx {1}
-
- FAQs
-
-```
-
-## `useDocusaurusContext`
-
-React Hooks to access Docusaurus Context. Context contains `siteConfig` object from [docusaurus.config.js](docusaurus.config.js.md).
-
-```ts
-interface DocusaurusContext {
- siteConfig?: DocusaurusConfig;
-}
-```
-
-Usage example:
-
-```jsx {2,5}
-import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-
-const Test = () => {
- const context = useDocusaurusContext();
- const {siteConfig = {}} = context;
- const {title} = siteConfig;
-
- return - Check out my blog! -
-- {/* Note that external links still use `a` tags. */} - Follow me on Twitter! -
-{title}
; -}; -``` - -## `useBaseUrl` - -React Hook to automatically append `baseUrl` to a string automatically. This is particularly useful if you don't want to hardcode your baseUrl. - -Example usage: - -```jsx {3,11} -import React, {useEffect} from 'react'; -import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; - -function Help() { - return ( -
-
- );
-}
-```
-
-## `Redirect`
-
-Rendering a `Browse the docs
-- Learn more about Docusaurus using the{' '} - official documentation -
-})
-
-Docusaurus 1 used to be a pure documentation site generator. In Docusaurus 2, we rebuilt it from the ground up, allowing for more customizability but preserved the best parts of Docusaurus 1 - easy to get started, versioned docs (_coming soon_), and i18n (_coming soon_).
-
-Beyond that, Docusaurus 2 is a **performant static site generator** and can be used to create most content-driven websites (e.g. Documentation, Blogs, Product Landing and Marketing Pages, etc) extremely fast.
-
-While our main focus will still be helping you get your documentations right and well, the shared nature of building this static site generator makes it possible for you to build your whole website interface one-stop.
-
-## Features
-
-Docusaurus is built with high attention to your experience building your site and maintaining it with your collaborators and contributors.
-
-- ⚛️ **Built with 💚 and React**
- - Extend and customize with React
- - Gain full control of your site's browsing experience by `swizzling` in your own components
-- 🔌 **Pluggable**
- - Bootstrap your site with a basic template, then pick and plug functionalities built by us and our community.
- - Open source your plugins to share with your fellow documentarians, because sharing is caring.
-- ✂️ **Developer experience**
- - Multiple bootstrapping templates to get your site up and running, start writing your docs right now
- - Universal configuration entry point to make it more maintainable by contributors
- - Hot reloading with lightning fast incremental build on changes
- - Route-based code and data splitting
- - Publish to GitHub Pages, Netlify, and other deployment services with ease
-
-Our shared goal — to help your users find what they need fast, and understand your products better. With the experience of Docusaurus 1, we share with you our best practices to help you build your doc site right and well.
-
-- 🎯 **SEO friendly**
- - HTML files are statically generated for every possible path
- - page-specific SEO to help your users land on your official docs directly relating their problems at hand
-- 📝 **Powered by MDX**
- - Write interactive components via JSX and React embedded in markdown
- - Share your code in live editors to get your users love your products on the spot
-- 🔍 **Search** Your full site is searchable
-- 🌍 **i18n** (_coming soon_)
-- 💾 **Versioning** (_coming soon_)
-
-Docusaurus 2 is born to be compassionately accessible to all your users, and lightning fast.
-
-- ⚡️ **Lightning fast** Docusaurus 2 follows [The PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) that makes sure your content loads blazing fast
-- 🦖 **Accessible** Attention to accessibility, making your site equally accessible to all users
-
-## Comparison with other tools
-
-Across all static site generators, Docusaurus has a unique focus on doc sites and has out-of-the-box structure you need.
-
-We've also studied other main static site generators and would like to share our insights on the comparison, hopefully to help you navigate through the prismatic choices out there.
-
-### Gatsby
-
-Gatsby is packed with a lot of features, has a rich ecosystem of plugins and is capable of doing everything that Docusaurus does. Naturally, that comes at a cost of a higher learning curve. Gatsby does many things well and is suitable for building many types of websites. On the other hand, Docusaurus tries to do one thing super well - be the best tool for writing and publishing content.
-
-GraphQL is also pretty core to Gatsby, although you don't necessarily need GraphQL to build a Gatsby site. In most cases when building static websites, you won't need the flexibility that GraphQL provides.
-
-Many aspects of Docusaurus 2 were inspired by the best things about Gatsby and it's a great alternative.
-
-### GitBook
-
-Gitbook has very clean slate design and has been used by many open source projects. With its focus shifting towards a commercial product rather than an open-source tool, many of its requirements no longer fit the needs as an open source project's doc site. As a result, many have to turn to other products. You may read about Redux's switch to Docusaurus [here](https://github.com/reduxjs/redux/issues/3161).
-
-Currently, Gitbook is only free for open-source and non-profit teams. Docusaurus is free for everyone.
-
-### Jekyll
-
-Jekyll is one of the most mature static site generators around and has been a great tool to use — in fact, before Docusaurus, most of Facebook's Open Source websites are/were built on Jekyll! It is extremely simple to get started. We want to bring a similar developer experience as building a static site with Jekyll.
-
-In comparison with statically generated HTML and interactivity based on `` tags, Docusaurus sites are React apps. With tooling of our current ecosystem, we hope to set new standards on doc sites performance, asset build pipeline and optimizations, and ease to setup.
-
-### VuePress
-
-VuePress has many similarities with Docusaurus - both focus heavily on content-centric website and provides tailored documentation features out of the box. However, VuePress is powered by Vue, while Docusaurus is powered by React. If you wanted a Vue-based solution, VuePress would be a decent choice.
-
-
-
-## Staying informed
-
-- [GitHub](https://github.com/facebook/docusaurus)
-- [Twitter](https://twitter.com/docusaurus)
-- [Blog](/blog)
-
-## Something missing?
-
-If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please [file an issue](https://github.com/facebook/docusaurus) for us, or send a tweet mentioning the [@docusaurus](https://twitter.com/docusaurus) Twitter account.
-
-For new feature requests, you can create a post on our [Canny board](/feedback), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!
diff --git a/website/versioned_docs/version-2.0.0-alpha.36/lifecycle-apis.md b/website/versioned_docs/version-2.0.0-alpha.36/lifecycle-apis.md
deleted file mode 100644
index 1d79627574..0000000000
--- a/website/versioned_docs/version-2.0.0-alpha.36/lifecycle-apis.md
+++ /dev/null
@@ -1,279 +0,0 @@
----
-id: lifecycle-apis
-title: Lifecycle APIs
----
-
-> :warning: _This section is a work in progress._
-
-Lifecycle APIs are shared by Themes and Plugins.
-
-## getPathsToWatch()
-
-Specifies the paths to watch for plugins and themes. The paths are watched by the dev server so that the plugin lifecycles are reloaded when contents in the watched paths change. Note that the plugins and themes modules are initially called with `context` and `options` from Node, which you may use to find the necessary directory information about the site.
-
-```js
-const contentPath = path.resolve(context.siteDir, options.path);
-
-getPathsToWatch() {
- const {include = []} = options;
- const globPattern = include.map(pattern => `${contentPath}/${pattern}`);
- return [...globPattern];
-}
-```
-
-## async loadContent()
-
-Plugins should use this lifecycle to fetch from data sources (filesystem, remote API, headless CMS, etc).
-
-## async contentLoaded({content, actions})
-
-Plugins should use the data loaded in `loadContent` and construct the pages/routes that consume the loaded data.
-
-### `content`
-
-`contentLoaded` will be called _after_ `loadContent` is done, the return value of `loadContent()` will be passed to `contentLoaded` as `content`.
-
-### `actions`
-
-`actions` contain two functions:
-
-- `addRoute(config: RouteConfig): void`
-- `createData(name: string, data: Object): PromiseHello from Docusaurus
- -Are you ready to create the documentation site for your open source project? - -Headers
- -will show up on the table of contents on the upper right - -So that your users will know what this page is all about without scrolling down or even without reading too much. - -Only h2 and h3 will be in the toc
- -The headers are well-spaced so that the hierarchy is clear. - -- lists will help you -- present the key points -- that you want your users to remember - - and you may nest them - - multiple times - -- -You can also import your own components defined in other files or third-party components installed via npm! Check out the [MDX docs](https://mdxjs.com/) to see what other fancy stuff you can do with MDX. - -### Referencing other documents - -If you want to reference another document file, you should use the name of the document you want to reference. Docusaurus will convert the file path to be the final website path (and remove the `.md`). - -For example, if you are in `doc2.md` and you want to reference `doc1.md` and `folder/doc3.md`: - -```md -I am referencing a [document](doc1.md). Reference to another [document in a folder](folder/doc3.md) -``` - -One benefit of this approach is that the links to external files will still work if you are viewing the file on GitHub. - -### Syntax highlighting - -Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out [this reference](https://github.com/mdx-js/specification) for specifications of MDX. - - ```jsx - console.log('Every repo must come with a mascot.'); - ``` - - - -Use the matching language meta string for your code block, and Docusaurus will pick up syntax highlighting automatically, powered by [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer). - -```jsx -console.log('Every repo must come with a mascot.'); -``` - -By default, the Prism [syntax highlighting theme](https://github.com/FormidableLabs/prism-react-renderer#theming) we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js). You can change this to another theme by passing `theme` field in `prism` as `themeConfig` in your docusaurus.config.js. - -For example, if you prefer to use the `dracula` highlighting theme: - -```js {4} -// docusaurus.config.js -module.exports = { - themeConfig: { - prism: { - theme: require('prism-react-renderer/themes/dracula'), - }, - }, -}; -``` - -By default, Docusaurus comes with this subset of [commonly used languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js). - -To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages), install the `prismjs` npm package, then swizzle the `CodeBlock` component and add the desired language(s) there. - -For example, if you want to add highlighting for the `powershell` language: - -```js -// src/theme/CodeBlock/index.js -import Prism from 'prism-react-renderer/prism'; -(typeof global !== 'undefined' ? global : window).Prism = Prism; -require('prismjs/components/prism-powershell'); -``` - -### Line highlighting - -You can bring emphasis to certain lines of code by specifying line ranges after the language meta string (leave a space after the language). - - ```jsx {3} - function HighlightSomeText(highlight) { - if (highlight) { - return 'This text is highlighted!'; - } - - return 'Nothing highlighted'; - } - ``` - -```jsx {3} -function HighlightSomeText(highlight) { - if (highlight) { - return 'This text is highlighted!'; - } - - return 'Nothing highlighted'; -} -``` - -To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class to the highlighted lines. You will need to define your own styling for this CSS, possibly in your `src/css/custom.css` with a custom background color which is dependent on your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme will have to tweak the color accordingly. - -```css -/* /src/css/custom.css */ -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} -``` - -To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the `parse-number-range` library and you can find [more syntax](<(https://www.npmjs.com/package/parse-numeric-range)>) on their project details. - - ```jsx {1,4-6,11} - import React from 'react'; - - function MyComponent(props) { - if (props.isBar) { - return
Bar
;
- }
-
- return Foo
;
- }
-
- export default MyComponent;
- ```
-
-```jsx {1,4-6,11}
-import React from 'react';
-
-function MyComponent(props) {
- if (props.isBar) {
- return Bar
;
- }
-
- return Foo
;
-}
-
-export default MyComponent;
-```
-
-### Interactive code editor
-
-(Powered by [React Live](https://github.com/FormidableLabs/react-live))
-
-You can create an interactive coding editor with the `@docusaurus/theme-live-codeblock` plugin.
-
-First, add the plugin to your package.
-
-```bash
-npm i @docusaurus/theme-live-codeblock
-```
-
-You will also need to add the plugin to your `docusaurus.config.js`.
-
-```js {3}
-module.exports = {
- ...
- themes: ['@docusaurus/theme-live-codeblock'],
- ...
-}
-```
-
-To use the plugin, create a code block with `live` attached to the language meta string.
-
- ```jsx live
- function Clock(props) {
- const [date, setDate] = useState(new Date());
- useEffect(() => {
- var timerID = setInterval(() => tick(), 1000);
-
- return function cleanup() {
- clearInterval(timerID);
- };
- });
-
- function tick() {
- setDate(new Date());
- }
-
- return (
-
-
- );
- }
- ```
-
-The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live.
-
-```jsx live
-function Clock(props) {
- const [date, setDate] = useState(new Date());
- useEffect(() => {
- var timerID = setInterval(() => tick(), 1000);
-
- return function cleanup() {
- clearInterval(timerID);
- };
- });
-
- function tick() {
- setDate(new Date());
- }
-
- return (
- It is {date.toLocaleTimeString()}.
-
-
- );
-}
-```
-
-### Multi-language support code blocks
-
-With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching between them using a tabs component.
-
-Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a generic Tabs component in the classic theme so that you can use it for other non-code scenarios as well.
-
-The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block is **intentional**. This is a current limitation of MDX, you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.
-
- import Tabs from '@theme/Tabs';
- import TabItem from '@theme/TabItem';
-
- It is {date.toLocaleTimeString()}.
-` which are valid in HTML would have to be explicitly closed now ( `
`). All tags in MDX documents have to be valid JSX. - -### Language-specific Code Tabs - -Refer to the [multi-language support code blocks](markdown-features.mdx#multi-language-support-code-blocks) section. - -## Update blog - -The Docusaurus frontmatter fields for the blog have been changed from camelCase to snake_case to be consistent with the docs. - -The fields `authorFBID` and `authorTwitter` have been deprecated. They are only used for generating the profile image of the author which can be done via the `author_image_url` field. - -## Update `.gitignore` - -The `.gitignore` in your `website` should contain: - -``` -# dependencies -/node_modules - -# production -/build - -# generated files -.docusaurus -.cache-loader - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* -``` - -## Test your site - -After migration, your folder structure should look like this: - -```sh -my-project -├── docs -└── website - ├── blog - ├── src - │ ├── css - │ │ └── custom.css - │ └── pages - │ └── index.js - ├── package.json - ├── sidebars.json - ├── .gitignore - ├── docusaurus.config.js - └── static -``` - -Start the development server and fix any errors - -```bash -cd website -yarn start -``` - -## Update references to the `build` directory - -In Docusaurus 1, all the build artifacts are located within `website/build/
})
;
-```
-
-### Markdown example
-
-Thanks to MDX, you can also use `useBaseUrl` utility function in Markdown files! You'd have to use `;
-```
-
-You could also just use Markdown image syntax, but you would have to manually maintain the image paths yourself and isn't recommended.
-
-```md
-// my-doc.md
-
-
-```
-
-### Caveats
-
-Keep in mind that:
-
-- By default, none of the files in `static` folder will be post-processed or minified.
-- Missing files references via hardcoded absolute paths will not be detected at compilation time, and will result in a 404 error.
diff --git a/website/versioned_docs/version-2.0.0-alpha.36/styling-layout.md b/website/versioned_docs/version-2.0.0-alpha.36/styling-layout.md
deleted file mode 100644
index 92262cc4a3..0000000000
--- a/website/versioned_docs/version-2.0.0-alpha.36/styling-layout.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-id: styling-layout
-title: Styling and Layout
-description: A Docusaurus site is a pre-rendered single-page React application. You can style it the way you style React apps.
----
-
-## Traditional CSS
-
-If you're using `@docusaurus/preset-classic`, you can create your own CSS files (e.g. `/src/css/custom.css`) and import them globally by passing it as an option into the preset.
-
-```js {8-10}
-// docusaurus.config.js
-module.exports = {
- // ...
- presets: [
- [
- '@docusaurus/preset-classic',
- {
- theme: {
- customCss: require.resolve('./src/css/custom.css'),
- },
- },
- ],
- ],
-};
-```
-
-Any CSS you write within that file will be available globally and can be referenced directly using string literals. This is the most traditional approach to writing CSS and is fine for small websites that do not have much customization.
-
-## Styling your site with Infima
-
-`@docusaurus/preset-classic` uses [Infima](https://facebookincubator.github.io/infima/) as the underlying styling framework. Infima provides flexible layout and common UI components styling suitable for content-centric websites (blogs, documentation, landing pages). For more details, check out the [Infima website](https://facebookincubator.github.io/infima/).
-
-When you `init` your Docusaurus 2 project, the website will be generated with basic Infima stylesheets and default styling. You may customize the styling by editing the `src/css/custom.css` file.
-
-```css
-/**
- * /src/css/custom.css
- * You can override the default Infima variables here.
- * Note: this is not a complete list of --ifm- variables.
- */
-:root {
- --ifm-color-primary: #25c2a0;
- --ifm-color-primary-dark: rgb(33, 175, 144);
- --ifm-color-primary-darker: rgb(31, 165, 136);
- --ifm-color-primary-darkest: rgb(26, 136, 112);
- --ifm-color-primary-light: rgb(70, 203, 174);
- --ifm-color-primary-lighter: rgb(102, 212, 189);
- --ifm-color-primary-lightest: rgb(146, 224, 208);
-}
-```
-
-Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.colorbox.io/) to find the different shades of colors for your chosen primary color. In future, we will provide an easier way to generate the different shades of colors.
-
-
-
-## Styling approaches
-
-A Docusaurus site is a single-page React application. You can style it the way you style React apps.
-
-There are a few approaches/frameworks which will work, depending on your preferences and the type of website you are trying to build. Websites that are highly interactive and behave more like web apps will benefit from a more modern styling approaches that co-locate styles with the components. Component styling can also be particularly useful when you wish to customize or swizzle a component.
-
-### Global styles
-
-This is the most traditional way of styling that most developers (including non-front end developers) would be familiar with.
-
-Assuming you are using `@docusaurus/preset-classic` and `/src/css/custom.css` was passed in to the preset config, styles inside that file would be available globally.
-
-```css
-/* /src/css/custom.css */
-.purple-text {
- color: rebeccapurple;
-}
-```
-
-```jsx
-function MyComponent() {
- return (
- Hello!
-{`${title} · ${tagline}`}
;
-};
-```
-
-> If you just want to use those fields on the client side, you could create your own JS files and import them as ES6 modules, there is no need to put them in `docusaurus.config.js`.
diff --git a/website/versioned_docs/version-2.0.0-alpha.37/creating-pages.md b/website/versioned_docs/version-2.0.0-alpha.37/creating-pages.md
deleted file mode 100644
index 20f16f46b7..0000000000
--- a/website/versioned_docs/version-2.0.0-alpha.37/creating-pages.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-id: creating-pages
-title: Creating Pages
----
-
-In this section, we will learn about creating ad-hoc pages in Docusaurus using React. This is most useful for creating one-off standalone pages like a showcase page, playground page or support page.
-
-## Adding a new page
-
-
-
-In the `/src/pages/` directory, create a file called `hello.js` with the following contents:
-
-```jsx
-import React from 'react';
-import Layout from '@theme/Layout';
-
-function Hello() {
- return (
-
-
-
- Edit pages/hello.js and save to reload.
-