chore: update examples for beta.15 (#6486)

examples/classic-typescript/.stackblitzrc

@@ -1,4 +1,4 @@
 {
   "installDependencies": true,
   "startCommand": "npm start"
-}
+}

examples/classic-typescript/docs/intro.md

@@ -12,24 +12,36 @@ Get started by **creating a new site**.
 
 Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
 
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
 ## Generate a new site
 
-Generate a new Docusaurus site using the **classic template**:
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
 
 ```bash
 npm init docusaurus@latest my-website classic
 ```
 
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
 ## Start your site
 
 Run the development server:
 
 ```bash
 cd my-website
-
+npm run start
-npx docusaurus start
 ```
 
-Your site starts at `http://localhost:3000`.
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
 
-Open `docs/intro.md` and edit some lines: the site **reloads automatically** and displays your changes.
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

examples/classic-typescript/package.json

@@ -16,8 +16,8 @@
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
+    "@docusaurus/core": "2.0.0-beta.15",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/preset-classic": "2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.2.1",
@@ -25,7 +25,7 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.15",
     "@tsconfig/docusaurus": "^1.0.4",
     "typescript": "^4.5.2"
   },
@@ -42,4 +42,4 @@
     ]
   },
   "description": "Docusaurus example project (classic-typescript template)"
-}
+}

examples/classic-typescript/sandbox.config.json

@@ -7,4 +7,4 @@
   "container": {
     "node": "14"
   }
-}
+}

examples/classic-typescript/src/components/HomepageFeatures/index.tsx

@@ -1,7 +1,6 @@
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
 import clsx from 'clsx';
-import styles from './HomepageFeatures.module.css';
+import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
@@ -12,7 +11,7 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    image: '/img/undraw_docusaurus_mountain.svg',
+    image: require('@site/src/static/img/undraw_docusaurus_mountain.svg'),
     description: (
       <>
         Docusaurus was designed from the ground up to be easily installed and
@@ -22,7 +21,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Focus on What Matters',
-    image: '/img/undraw_docusaurus_tree.svg',
+    image: require('@site/src/static/img/undraw_docusaurus_tree.svg'),
     description: (
       <>
         Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
@@ -32,7 +31,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Powered by React',
-    image: '/img/undraw_docusaurus_react.svg',
+    image: require('@site/src/static/img/undraw_docusaurus_react.svg'),
     description: (
       <>
         Extend or customize your website layout by reusing React. Docusaurus can
@@ -46,11 +45,7 @@ function Feature({title, image, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <img
+        <img className={styles.featureSvg} alt={title} src={image} />
-          className={styles.featureSvg}
-          alt={title}
-          src={useBaseUrl(image)}
-        />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

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

@@ -6,16 +6,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --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;

examples/classic-typescript/src/pages/index.tsx

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
-import HomepageFeatures from '../components/HomepageFeatures';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();

examples/classic/.stackblitzrc

@@ -1,4 +1,4 @@
 {
   "installDependencies": true,
   "startCommand": "npm start"
-}
+}

examples/classic/docs/intro.md

@@ -12,24 +12,36 @@ Get started by **creating a new site**.
 
 Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
 
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
 ## Generate a new site
 
-Generate a new Docusaurus site using the **classic template**:
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
 
 ```bash
 npm init docusaurus@latest my-website classic
 ```
 
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
 ## Start your site
 
 Run the development server:
 
 ```bash
 cd my-website
-
+npm run start
-npx docusaurus start
 ```
 
-Your site starts at `http://localhost:3000`.
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
 
-Open `docs/intro.md` and edit some lines: the site **reloads automatically** and displays your changes.
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

examples/classic/package.json

@@ -15,8 +15,8 @@
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
+    "@docusaurus/core": "2.0.0-beta.15",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/preset-classic": "2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.2.1",
@@ -36,4 +36,4 @@
     ]
   },
   "description": "Docusaurus example project"
-}
+}

examples/classic/sandbox.config.json

@@ -7,4 +7,4 @@
   "container": {
     "node": "14"
   }
-}
+}

examples/classic/src/components/HomepageFeatures/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import clsx from 'clsx';
-import styles from './HomepageFeatures.module.css';
+import styles from './styles.module.css';
 
 const FeatureList = [
   {
     title: 'Easy to Use',
-    Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
         Docusaurus was designed from the ground up to be easily installed and
@@ -15,7 +15,7 @@ const FeatureList = [
   },
   {
     title: 'Focus on What Matters',
-    Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
+    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
         Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
@@ -25,7 +25,7 @@ const FeatureList = [
   },
   {
     title: 'Powered by React',
-    Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
+    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
         Extend or customize your website layout by reusing React. Docusaurus can

examples/classic/src/css/custom.css

@@ -6,16 +6,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --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;

examples/classic/src/pages/index.js

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
-import HomepageFeatures from '../components/HomepageFeatures';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();

examples/facebook/.stackblitzrc

@@ -1,4 +1,4 @@
 {
   "installDependencies": true,
   "startCommand": "npm start"
-}
+}

examples/facebook/docs/intro.md

@@ -12,24 +12,36 @@ Get started by **creating a new site**.
 
 Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
 
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
 ## Generate a new site
 
-Generate a new Docusaurus site using the **classic template**:
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
 
 ```bash
 npm init docusaurus@latest my-website classic
 ```
 
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
 ## Start your site
 
 Run the development server:
 
 ```bash
 cd my-website
-
+npm run start
-npx docusaurus start
 ```
 
-Your site starts at `http://localhost:3000`.
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
 
-Open `docs/intro.md` and edit some lines: the site **reloads automatically** and displays your changes.
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

examples/facebook/package.json

@@ -19,8 +19,8 @@
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
+    "@docusaurus/core": "2.0.0-beta.15",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/preset-classic": "2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "react": "^17.0.1",

examples/facebook/sandbox.config.json

@@ -7,4 +7,4 @@
   "container": {
     "node": "14"
   }
-}
+}

examples/facebook/src/css/custom.css

@@ -15,16 +15,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgb(72, 77, 91);
   display: block;