chore: update examples for beta 20 (#7350)

examples/classic-typescript/docs/tutorial-basics/_category_.json

@@ -1,4 +1,8 @@
 {
   "label": "Tutorial - Basics",
-  "position": 2
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
 }

examples/classic-typescript/docs/tutorial-basics/markdown-features.mdx

@@ -43,7 +43,7 @@ Let's see how to [Create a page](./create-a-page.md).
 
 Regular Markdown images are supported.
 
-Add an image at `static/img/docusaurus.png` and display it in Markdown:
+You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
 
 ```md
 ![Docusaurus logo](/img/docusaurus.png)
@@ -51,6 +51,8 @@ Add an image at `static/img/docusaurus.png` and display it in Markdown:
 
 ![Docusaurus logo](/img/docusaurus.png)
 
+You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
+
 ## Code Blocks
 
 Markdown code blocks are supported with Syntax highlighting.

examples/classic-typescript/docs/tutorial-extras/_category_.json

@@ -1,4 +1,7 @@
 {
   "label": "Tutorial - Extras",
-  "position": 3
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
 }

examples/classic-typescript/docs/tutorial-extras/manage-docs-versions.md

@@ -45,7 +45,7 @@ module.exports = {
 
 The docs version dropdown appears in your navbar:
 
-![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png)
+![Docs Version Dropdown](./img/docsVersionDropdown.png)
 
 ## Update an existing version
 

examples/classic-typescript/docs/tutorial-extras/translate-your-site.md

@@ -71,7 +71,7 @@ module.exports = {
 
 The locale dropdown now appears in your navbar:
 
-![Locale Dropdown](/img/tutorial/localeDropdown.png)
+![Locale Dropdown](./img/localeDropdown.png)
 
 ## Build your localized site
 

examples/classic-typescript/docusaurus.config.js

@@ -13,9 +13,20 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
 
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
   presets: [
     [
       'classic',
@@ -24,11 +35,14 @@ const config = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
-          editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },

examples/classic-typescript/package.json

@@ -16,8 +16,8 @@
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.18",
-    "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.20",
+    "@docusaurus/preset-classic": "2.0.0-beta.20",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.3.1",
@@ -25,9 +25,9 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.18",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.20",
     "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.4"
   },
   "browserslist": {
     "production": [

examples/classic-typescript/src/css/custom.css

@@ -14,6 +14,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -25,15 +26,5 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

examples/classic/docs/tutorial-basics/_category_.json

@@ -1,4 +1,8 @@
 {
   "label": "Tutorial - Basics",
-  "position": 2
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
 }

examples/classic/docs/tutorial-basics/markdown-features.mdx

@@ -43,7 +43,7 @@ Let's see how to [Create a page](./create-a-page.md).
 
 Regular Markdown images are supported.
 
-Add an image at `static/img/docusaurus.png` and display it in Markdown:
+You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
 
 ```md
 ![Docusaurus logo](/img/docusaurus.png)
@@ -51,6 +51,8 @@ Add an image at `static/img/docusaurus.png` and display it in Markdown:
 
 ![Docusaurus logo](/img/docusaurus.png)
 
+You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
+
 ## Code Blocks
 
 Markdown code blocks are supported with Syntax highlighting.

examples/classic/docs/tutorial-extras/_category_.json

@@ -1,4 +1,7 @@
 {
   "label": "Tutorial - Extras",
-  "position": 3
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
 }

examples/classic/docs/tutorial-extras/manage-docs-versions.md

@@ -45,7 +45,7 @@ module.exports = {
 
 The docs version dropdown appears in your navbar:
 
-![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png)
+![Docs Version Dropdown](./img/docsVersionDropdown.png)
 
 ## Update an existing version
 

examples/classic/docs/tutorial-extras/translate-your-site.md

@@ -71,7 +71,7 @@ module.exports = {
 
 The locale dropdown now appears in your navbar:
 
-![Locale Dropdown](/img/tutorial/localeDropdown.png)
+![Locale Dropdown](./img/localeDropdown.png)
 
 ## Build your localized site
 

examples/classic/docusaurus.config.js

@@ -13,9 +13,20 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
 
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
   presets: [
     [
       'classic',
@@ -24,11 +35,14 @@ const config = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
-          editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },

examples/classic/package.json

@@ -15,14 +15,17 @@
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.18",
-    "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.20",
+    "@docusaurus/preset-classic": "2.0.0-beta.20",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.20"
+  },
   "browserslist": {
     "production": [
       ">0.5%",

examples/classic/src/css/custom.css

@@ -14,6 +14,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -25,15 +26,5 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

examples/facebook/docs/tutorial-basics/_category_.json

@@ -1,4 +1,8 @@
 {
   "label": "Tutorial - Basics",
-  "position": 2
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
 }

examples/facebook/docs/tutorial-basics/markdown-features.mdx

@@ -43,7 +43,7 @@ Let's see how to [Create a page](./create-a-page.md).
 
 Regular Markdown images are supported.
 
-Add an image at `static/img/docusaurus.png` and display it in Markdown:
+You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
 
 ```md
 ![Docusaurus logo](/img/docusaurus.png)
@@ -51,6 +51,8 @@ Add an image at `static/img/docusaurus.png` and display it in Markdown:
 
 ![Docusaurus logo](/img/docusaurus.png)
 
+You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
+
 ## Code Blocks
 
 Markdown code blocks are supported with Syntax highlighting.

examples/facebook/docs/tutorial-extras/_category_.json

@@ -1,4 +1,7 @@
 {
   "label": "Tutorial - Extras",
-  "position": 3
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
 }

examples/facebook/docs/tutorial-extras/manage-docs-versions.md

@@ -45,7 +45,7 @@ module.exports = {
 
 The docs version dropdown appears in your navbar:
 
-![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png)
+![Docs Version Dropdown](./img/docsVersionDropdown.png)
 
 ## Update an existing version
 

examples/facebook/docs/tutorial-extras/translate-your-site.md

@@ -71,7 +71,7 @@ module.exports = {
 
 The locale dropdown now appears in your navbar:
 
-![Locale Dropdown](/img/tutorial/localeDropdown.png)
+![Locale Dropdown](./img/localeDropdown.png)
 
 ## Build your localized site
 

examples/facebook/docusaurus.config.js

@@ -18,6 +18,9 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
 
@@ -29,12 +32,14 @@ const config = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },

examples/facebook/package.json

@@ -19,8 +19,8 @@
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.18",
-    "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.20",
+    "@docusaurus/preset-classic": "2.0.0-beta.20",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "react": "^17.0.2",
@@ -28,16 +28,16 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
-    "eslint": "^8.11.0",
+    "eslint": "^8.14.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.6.0",
-    "stylelint": "^14.6.0"
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "prettier": "^2.6.2",
+    "stylelint": "^14.8.1"
   },
   "browserslist": {
     "production": [

examples/facebook/src/css/custom.css

@@ -35,10 +35,3 @@
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
 }
-
-.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);
-}