chore: Update docusaurus (#4954)

streetsidesoftware · Nov 7, 2023 · 979fdd6 · 979fdd6
1 parent a5988b9
commit 979fdd6
Show file tree

Hide file tree

Showing 28 changed files with 1,390 additions and 2,027 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/.eslintrc.js b/website/.eslintrc.js
@@ -22,6 +22,7 @@ const config = {
         '**/*.map',
         '**/coverage/**',
         '**/dist/**',
+        '**/build/**',
         '**/node_modules/**',
         '**/.docusaurus/**',
     ],
@@ -39,12 +40,6 @@ const config = {
             plugins: ['@typescript-eslint'],
             rules: {
                 '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
-                'node/no-missing-import': [
-                    'error',
-                    {
-                        tryExtensions: ['.js', '.d.ts', '.ts', '.tsx'],
-                    },
-                ],
             },
         },
         {

diff --git a/website/blog/2019-05-28-first-blog-post.md b/website/blog/2019-05-28-first-blog-post.md
@@ -7,8 +7,8 @@ authors:
   url: https://github.com/wgao19
   image_url: https://github.com/wgao19.png
 tags: [hola, docusaurus]
-# cspell:locale en,lorem
 # cspell:ignore hola
+# cspell:dictionary lorem-ipsum
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/website/blog/2019-05-29-long-blog-post.md b/website/blog/2019-05-29-long-blog-post.md
@@ -3,8 +3,8 @@ slug: long-blog-post
 title: Long Blog Post
 authors: endi
 tags: [hello, docusaurus]
-# cspell:locale en,lorem
 # cspell:ignore endi
+# cspell:dictionary lorem-ipsum
 ---
 
 This is the summary of a very long blog post,

diff --git a/website/blog/2021-08-26-welcome/index.md b/website/blog/2021-08-26-welcome/index.md
@@ -3,7 +3,7 @@ slug: welcome
 title: Welcome
 authors: [slorber, yangshun]
 tags: [facebook, hello, docusaurus]
-# cspell:ignore plushie slorber yangshun
+# cspell:ignore slorber yangshun Plushie
 ---
 
 [Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).

diff --git a/website/blog/authors.yml b/website/blog/authors.yml
@@ -1,17 +1,18 @@
-endi: # cspell:ignore endi Endilie Yacop Sucipto
+endi:
   name: Endilie Yacop Sucipto
   title: Maintainer of Docusaurus
   url: https://github.com/endiliey
   image_url: https://github.com/endiliey.png
 
-yangshun: # cspell:ignore Yangshun
+yangshun:
   name: Yangshun Tay
   title: Front End Engineer @ Facebook
   url: https://github.com/yangshun
   image_url: https://github.com/yangshun.png
 
-slorber: # cspell:ignore slorber Sébastien Lorber
+slorber:
   name: Sébastien Lorber
   title: Docusaurus maintainer
   url: https://sebastienlorber.com
   image_url: https://github.com/slorber.png
+#cspell:ignore endi yangshun slorber Endilie Yacop Sucipto Sébastien Lorber
diff --git a/website/cspell.config.yaml b/website/cspell.config.yaml
@@ -0,0 +1,23 @@
+dictionaryDefinitions:
+  - name: workspace
+    path: ../cspell-dict.txt
+    description: Custom Workspace Dictionary
+    addWords: true
+    scope: workspace
+ignorePaths:
+  - "*.svg"
+  - /build
+  - cspell.json
+languageSettings:
+  - languageId: typescript,typescriptreact,json,css,yaml
+    words:
+      - clsx
+      - typecheck
+      - browserslist
+      - padding-horiz
+      - Infima
+enableFiletypes:
+  - mdx
+words:
+  - callouts
+  - jamstack
diff --git a/website/cspell.json b/website/cspell.json
diff --git a/website/docs/intro.md b/website/docs/intro.md
@@ -14,7 +14,7 @@ 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:
+- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
   - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
 
 ## Generate a new site

diff --git a/website/docs/tutorial-basics/congratulations.md b/website/docs/tutorial-basics/congratulations.md
@@ -14,7 +14,9 @@ Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://
 
 ## What's next?
 
-- Read the [official documentation](https://docusaurus.io/).
+- Read the [official documentation](https://docusaurus.io/)
+- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
+- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
 - Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
 - Add a [search bar](https://docusaurus.io/docs/search)
 - Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)

diff --git a/website/docs/tutorial-basics/create-a-blog-post.md b/website/docs/tutorial-basics/create-a-blog-post.md
@@ -1,6 +1,6 @@
 ---
 sidebar_position: 3
-# cspell:ignore Lorber Marcey Sébastien
+# cspell:ignore Marcey Sébastien Lorber
 ---
 
 # Create a Blog Post
@@ -32,4 +32,4 @@ Congratulations, you have made your first post!
 Feel free to play around and edit this post as much you like.
 ```
 
-A new blog post is now available at `http://localhost:3000/blog/greetings`.
+A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
diff --git a/website/docs/tutorial-basics/create-a-document.md b/website/docs/tutorial-basics/create-a-document.md
@@ -12,15 +12,15 @@ Documents are **groups of pages** connected through:
 
 ## Create your first Doc
 
-Create a markdown file at `docs/hello.md`:
+Create a Markdown file at `docs/hello.md`:
 
 ```md title="docs/hello.md"
 # Hello
 
 This is my **first Docusaurus document**!
 ```
 
-A new document is now available at `http://localhost:3000/docs/hello`.
+A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
 
 ## Configure the Sidebar
 
@@ -42,13 +42,15 @@ This is my **first Docusaurus document**!
 It is also possible to create your sidebar explicitly in `sidebars.js`:
 
 ```js title="sidebars.js"
-module.exports = {
+export default {
   tutorialSidebar: [
+    'intro',
+    // highlight-next-line
+    'hello',
     {
       type: 'category',
       label: 'Tutorial',
-      // highlight-next-line
-      items: ['hello'],
+      items: ['tutorial-basics/create-a-document'],
     },
   ],
 };

diff --git a/website/docs/tutorial-basics/create-a-page.md b/website/docs/tutorial-basics/create-a-page.md
@@ -6,9 +6,9 @@ sidebar_position: 1
 
 Add **Markdown or React** files to `src/pages` to create a **standalone page**:
 
-- `src/pages/index.js` -> `localhost:3000/`
-- `src/pages/foo.md` -> `localhost:3000/foo`
-- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar`
+- `src/pages/index.js` → `localhost:3000/`
+- `src/pages/foo.md` → `localhost:3000/foo`
+- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
 
 ## Create your first React Page
 
@@ -28,7 +28,7 @@ export default function MyReactPage() {
 }
 ```
 
-A new page is now available at `http://localhost:3000/my-react-page`.
+A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
 
 ## Create your first Markdown Page
 
@@ -40,4 +40,4 @@ Create a file at `src/pages/my-markdown-page.md`:
 This is a Markdown page
 ```
 
-A new page is now available at `http://localhost:3000/my-markdown-page`.
+A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
diff --git a/website/docs/tutorial-basics/deploy-your-site.md b/website/docs/tutorial-basics/deploy-your-site.md
@@ -26,6 +26,6 @@ Test your production build locally:
 npm run serve
 ```
 
-The `build` folder is now served at `http://localhost:3000/`.
+The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
 
 You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
diff --git a/website/docs/tutorial-basics/markdown-features.mdx b/website/docs/tutorial-basics/markdown-features.mdx
@@ -1,6 +1,5 @@
 ---
 sidebar_position: 4
-# cspell:ignore callouts
 ---
 
 # Markdown Features
@@ -52,7 +51,11 @@ You can use absolute paths to reference images in the static directory (`static/
 
 ![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).
+You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
+
+```md
+![Docusaurus logo](./img/docusaurus.png)
+```
 
 ## Code Blocks
 
@@ -68,7 +71,7 @@ Markdown code blocks are supported with Syntax highlighting.
 
 ```jsx title="src/components/HelloDocusaurus.js"
 function HelloDocusaurus() {
-    return <h1>Hello, Docusaurus!</h1>;
+  return <h1>Hello, Docusaurus!</h1>;
 }
 ```
 
@@ -126,21 +129,20 @@ This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
 This is <Highlight color="#1877F2">Facebook blue</Highlight> !
 ```
 
-export const Highlight = ({ children, color }) => (
-    <span
-        style={{
-            backgroundColor: color,
-            borderRadius: '20px',
-            color: '#fff',
-            padding: '10px',
-            cursor: 'pointer',
-        }}
-        onClick={() => {
-            alert(`You clicked the color ${color} with label ${children}`);
-        }}
-    >
-        {children}
-    </span>
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
+      backgroundColor: color,
+      borderRadius: '20px',
+      color: '#fff',
+      padding: '10px',
+      cursor: 'pointer',
+    }}
+    onClick={() => {
+      alert(`You clicked the color ${color} with label ${children}`);
+    }}>
+    {children}
+  </span>
 );
 
 This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

diff --git a/website/docs/tutorial-extras/manage-docs-versions.md b/website/docs/tutorial-extras/manage-docs-versions.md
@@ -28,7 +28,7 @@ To navigate seamlessly across versions, add a version dropdown.
 Modify the `docusaurus.config.js` file:
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   themeConfig: {
     navbar: {
       items: [

diff --git a/website/docs/tutorial-extras/translate-your-site.md b/website/docs/tutorial-extras/translate-your-site.md
@@ -1,6 +1,5 @@
 ---
 sidebar_position: 2
-# cspell:ignore mkdir
 ---
 
 # Translate your site
@@ -12,7 +11,7 @@ Let's translate `docs/intro.md` to French.
 Modify `docusaurus.config.js` to add support for the `fr` locale:
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'fr'],
@@ -40,11 +39,11 @@ Start your site on the French locale:
 npm run start -- --locale fr
 ```
 
-Your localized site is accessible at `http://localhost:3000/fr/` and the `Getting Started` page is translated.
+Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
 
 :::caution
 
-In development, you can only use one locale at a same time.
+In development, you can only use one locale at a time.
 
 :::
 
@@ -55,7 +54,7 @@ To navigate seamlessly across languages, add a locale dropdown.
 Modify the `docusaurus.config.js` file:
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   themeConfig: {
     navbar: {
       items: [