chore(v2): upgrade example projects (#4399)

examples/bootstrap/docs/doc1.md

@@ -43,9 +43,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 1. Another item
-   - Unordered sub-list.
+
+- Unordered sub-list.
+
 1. Actual numbers don't matter, just that it's a number
-   1. Ordered sub-list
+1. Ordered sub-list
 1. And another item.
 
 - Unordered list can use asterisks
@@ -88,9 +90,9 @@ Reference-style: ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
 
-Images from any folder can be used by providing path to file. Path should be relative to markdown file.
+Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
 
-![img](../static/img/logo.svg)
+![img](/img/logo.svg)
 
 ---
 

examples/bootstrap/docs/interactiveDoc.mdx

@@ -5,13 +5,23 @@ title: Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 
-export const Highlight = ({children, color}) => ( <span style={{
+The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
+
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
       backgroundColor: color,
       borderRadius: '2px',
       color: '#fff',
       padding: '0.2rem',
-    }}>{children}</span> );
+    }}
+    onClick={() => alert('Highlight pressed!')}>
+    {children}
+  </span>
+);
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
+  Facebook blue
+</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!

examples/bootstrap/package.json

@@ -8,16 +8,19 @@
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
     "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.70",
+    "@docusaurus/core": "2.0.0-alpha.71",
-    "@docusaurus/preset-bootstrap": "2.0.0-alpha.70",
+    "@docusaurus/preset-bootstrap": "2.0.0-alpha.71",
     "@mdx-js/react": "^1.5.8",
     "classnames": "^2.2.6",
-    "react": "^16.8.4",
+    "react": "^17.0.1",
-    "react-dom": "^16.8.4"
+    "react-dom": "^17.0.1"
   },
   "browserslist": {
     "production": [

examples/bootstrap/src/pages/index.js

@@ -55,7 +55,7 @@ function Feature({imageUrl, title, description}) {
   );
 }
 
-function Home() {
+export default function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
 
@@ -86,5 +86,3 @@ function Home() {
     </Layout>
   );
 }
-
-export default Home;

examples/bootstrap/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

examples/classic/docs/doc1.md

@@ -88,9 +88,9 @@ Reference-style: ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
 
-Images from any folder can be used by providing path to file. Path should be relative to markdown file.
+Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
 
-![img](../static/img/logo.svg)
+![img](/img/logo.svg)
 
 ---
 

examples/classic/docs/interactiveDoc.mdx

@@ -5,13 +5,23 @@ title: Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 
-export const Highlight = ({children, color}) => ( <span style={{
+The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
+
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
       backgroundColor: color,
       borderRadius: '2px',
       color: '#fff',
       padding: '0.2rem',
-    }}>{children}</span> );
+    }}
+    onClick={() => alert('Highlight pressed!')}>
+    {children}
+  </span>
+);
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
+  Facebook blue
+</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!

examples/classic/package.json

@@ -8,17 +8,19 @@
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
-    "serve": "docusaurus serve",
     "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.70",
+    "@docusaurus/core": "2.0.0-alpha.71",
-    "@docusaurus/preset-classic": "2.0.0-alpha.70",
+    "@docusaurus/preset-classic": "2.0.0-alpha.71",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
-    "react": "^16.8.4",
+    "react": "^17.0.1",
-    "react-dom": "^16.8.4"
+    "react-dom": "^17.0.1"
   },
   "browserslist": {
     "production": [
@@ -33,4 +35,4 @@
     ]
   },
   "description": "Docusaurus example project"
-}
+}

examples/classic/src/pages/index.js

@@ -54,7 +54,7 @@ function Feature({imageUrl, title, description}) {
   );
 }
 
-function Home() {
+export default function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
   return (
@@ -93,5 +93,3 @@ function Home() {
     </Layout>
   );
 }
-
-export default Home;

examples/classic/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

examples/facebook/docs/doc1.md

@@ -43,9 +43,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 1. Another item
-   - Unordered sub-list.
+
+- Unordered sub-list.
+
 1. Actual numbers don't matter, just that it's a number
-   1. Ordered sub-list
+1. Ordered sub-list
 1. And another item.
 
 - Unordered list can use asterisks
@@ -88,9 +90,9 @@ Reference-style: ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
 
-Images from any folder can be used by providing path to file. Path should be relative to markdown file.
+Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
 
-![img](../static/img/logo.svg)
+![img](/img/logo.svg)
 
 ---
 

examples/facebook/docs/interactiveDoc.mdx

@@ -5,13 +5,23 @@ title: Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 
-export const Highlight = ({children, color}) => ( <span style={{
+The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
+
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
       backgroundColor: color,
       borderRadius: '2px',
       color: '#fff',
       padding: '0.2rem',
-    }}>{children}</span> );
+    }}
+    onClick={() => alert('Highlight pressed!')}>
+    {children}
+  </span>
+);
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
+  Facebook blue
+</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!

examples/facebook/docusaurus.config.js

@@ -99,6 +99,14 @@ module.exports = {
               label: 'Terms',
               href: 'https://opensource.facebook.com/legal/terms/',
             },
+            {
+              label: 'Data Policy',
+              href: 'https://opensource.facebook.com/legal/data-policy/',
+            },
+            {
+              label: 'Cookie Policy',
+              href: 'https://opensource.facebook.com/legal/cookie-policy/',
+            },
           ],
         },
       ],

examples/facebook/package.json

@@ -8,21 +8,23 @@
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
-    "serve": "docusaurus serve",
     "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
     "ci": "yarn lint && yarn prettier:diff",
     "lint": "eslint --cache \"**/*.js\" && stylelint \"**/*.css\"",
-    "prettier": "prettier --config .prettierrc --write \"**/*.{js,md}\"",
+    "prettier": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
-    "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.{js,md}\"",
+    "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
     "dev": "docusaurus start"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.70",
+    "@docusaurus/core": "2.0.0-alpha.71",
-    "@docusaurus/preset-classic": "2.0.0-alpha.70",
+    "@docusaurus/preset-classic": "2.0.0-alpha.71",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
-    "react": "^16.8.4",
+    "react": "^17.0.1",
-    "react-dom": "^16.8.4"
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",
@@ -50,4 +52,4 @@
     ]
   },
   "description": "Docusaurus example project (facebook template)"
-}
+}

examples/facebook/src/pages/index.js

@@ -63,7 +63,7 @@ function Feature({imageUrl, title, description}) {
   );
 }
 
-function Home() {
+export default function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
   return (
@@ -107,5 +107,3 @@ function Home() {
     </Layout>
   );
 }
-
-export default Home;

examples/facebook/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.