docs: upgrade to docusaurus v3, playground improvements

ahochsteger · Nov 1, 2023 · 85c4494 · 85c4494
1 parent 6d3d0ac
commit 85c4494
Show file tree

Hide file tree

Showing 9 changed files with 4,535 additions and 2,672 deletions.
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -1,8 +1,8 @@
 # Dependencies
-/node_modules
+node_modules/
 
 # Production
-/build
+build/
 
 # Generated files
 .docusaurus

diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md
@@ -22,7 +22,7 @@ Follow these steps:
   ```
 4. Press "Look up" and select the desired release number as **version** (recommended for stability) or "HEAD (Development Mode)" (recommended for automatically staying up-to-date with the potential risk of broken updates).
    - See the [Gmail Processor Release Notes](https://github.com/ahochsteger/gmail-processor/releases) for their corresponding Google Apps Script library version.
-   - Or use this URL to verify the release version of a Google Apps Script Library: <https://script.google.com/macros/library/d/1Qvk0v7ggfW-TJ84dlYPlDzJG8y-Dif-j9kdA1aWv4wzxE_IOkeV2juLB/{libVersion}> (replace `{libVersion}` with the number from the drop-down in Google Apps Script).
+   - Or use this URL to verify the release version of a Google Apps Script Library: [https://script.google.com/macros/library/d/1Qvk0v7ggfW-TJ84dlYPlDzJG8y-Dif-j9kdA1aWv4wzxE_IOkeV2juLB/\{libVersion\}](https://script.google.com/macros/library/d/1Qvk0v7ggfW-TJ84dlYPlDzJG8y-Dif-j9kdA1aWv4wzxE_IOkeV2juLB/\{libVersion\}) (replace `{libVersion}` with the number from the drop-down in Google Apps Script).
 5. Set the **identifier** to `GmailProcessorLib` (any name will do, but we will use this identifier as a reference in all [examples](examples/index.md) and documentation)
 6. Replace the contents of the initially created file `Code.gs` with the following code, take the config from the [Getting Started Example](examples/gettingStarted.mdx) and save the changes:
   ```javascript

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -1,21 +1,13 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-
-const lightCodeTheme = require('prism-react-renderer/themes/vsLight');
-const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
+import { themes } from 'prism-react-renderer';
+const lightCodeTheme = themes.vsLight;
+const darkCodeTheme = themes.vsDark;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   themes: [
-    "docusaurus-json-schema-plugin",
-    [
-      "@easyops-cn/docusaurus-search-local",
-      /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
-      {
-        hashed: true,
-        language: ["en"],
-      },
-    ],
+    'docusaurus-json-schema-plugin'
   ],
   title: 'Gmail Processor',
   tagline: 'Process emails with ease',

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -15,23 +15,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@babel/plugin-proposal-decorators": "^7.23.0",
+    "@babel/plugin-proposal-decorators": "^7.23.2",
     "@babel/plugin-transform-class-properties": "^7.22.5",
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@easyops-cn/docusaurus-search-local": "^0.36.0",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "docusaurus-json-schema-plugin": "^1.6.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "@iconify/react": "^4.1.1",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "docusaurus-json-schema-plugin": "^1.7.0",
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-toastify": "^9.1.3"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.3",
-    "@tsconfig/docusaurus": "^1.0.7",
-    "typescript": "^4.9.5"
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "^3.0.0",
+    "typescript": "^5.2.2"
   },
   "browserslist": {
     "production": [
@@ -46,6 +46,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }
diff --git a/docs/src/components/ConfigToolbar.tsx b/docs/src/components/ConfigToolbar.tsx
@@ -1,4 +1,5 @@
-import React from "react"
+import { Icon } from '@iconify/react';
+import React from "react";
 
 type Params = {
   onConvert: () => void
@@ -33,29 +34,29 @@ const ConfigToolbar = ({ onConvert, onCopyConfig, onCopyCode, onPaste }: Params)
 
   return (
     <div style={styles.toolbar}>
-      <h1>Config JSON</h1>
+      <h2>Config Editor</h2>
       &nbsp;
       <div style={{ flex: 1 }} />
       <button
         style={styles.icon}
         onClick={onPaste}
         title="Paste config from clipboard"
-      >📋</button>
+      ><Icon icon="mdi:content-paste" /></button>
       <button
         style={styles.icon}
         onClick={onConvert}
         title="Convert config (Gmail2GDrive -> GmailProcessor)"
-      >🔄</button>
+      ><Icon icon="mdi:autorenew" /></button>
       <button
         style={styles.icon}
         onClick={onCopyConfig}
         title="Copy just the config to clipboard"
-      >🗐</button>
+      ><Icon icon="mdi:content-copy" /></button>
       <button
         style={styles.icon}
         onClick={onCopyCode}
-        title="Copy the full executable code to clipboard"
-      >🚀</button>
+        title="Copy as executable JavaScript code to clipboard"
+      ><Icon icon="fluent:code-js-16-filled" /></button>
     </div>
   )
 }

diff --git a/docs/src/components/PlaygroundInner.tsx b/docs/src/components/PlaygroundInner.tsx
@@ -1,29 +1,34 @@
-import BrowserOnly from "@docusaurus/BrowserOnly"
-import { useColorMode } from "@docusaurus/theme-common"
-import React from "react"
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { useColorMode } from "@docusaurus/theme-common";
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import React from "react";
 
-import JSONSchemaEditor from "@theme/JSONSchemaEditor"
+import JSONSchemaEditor from "@theme/JSONSchemaEditor";
 
-import { essentialConfig } from "../../../src/lib/config/Config"
-import ConfigSchemaV2 from "../../../src/lib/config/config-schema-v2.json"
-import { V1ToV2Converter } from "../../../src/lib/config/v1/V1ToV2Converter"
-import ConfigSchemaV1 from "../../../src/lib/config/v1/config-schema-v1.json"
+import { essentialConfig } from "../../../src/lib/config/Config";
+import ConfigSchemaV2 from "../../../src/lib/config/config-schema-v2.json";
+import { V1ToV2Converter } from "../../../src/lib/config/v1/V1ToV2Converter";
+import ConfigSchemaV1 from "../../../src/lib/config/v1/config-schema-v1.json";
 
-import JSONSchemaViewer from "@theme/JSONSchemaViewer"
+import JSONSchemaViewer from "@theme/JSONSchemaViewer";
 
 import {
   PlaygroundContextProvider,
   usePlaygroundContext,
-} from "@site/src/contexts/PlaygroundContext"
+} from "@site/src/contexts/PlaygroundContext";
 
 // Type I need for useRef
-import type { State as PlaygroundState } from "@site/src/contexts/PlaygroundContext"
+import type { State as PlaygroundState } from "@site/src/contexts/PlaygroundContext";
 
-import ConfigToolbar from "@site/src/components/ConfigToolbar"
-import SchemaToolbar from "@site/src/components/SchemaToolbar"
+import ConfigToolbar from "@site/src/components/ConfigToolbar";
 
-import { toast } from "react-toastify"
-import config from "../../../src/gas/examples/gettingStarted.json"
+import config from "@site/../src/gas/examples/gettingStarted.json";
+import { toast } from "react-toastify";
+
+import Actions from "@site/docs/reference/actions.md";
+import EnumTypes from "@site/docs/reference/enum-types.md";
+import Placeholder from "@site/docs/reference/placeholder.md";
 
 function PlaygroundInner(): JSX.Element {
   const {
@@ -60,9 +65,13 @@ function run() {
   }
 
   async function handleUpdateConfig(configString: string) {
-    const config = JSON.parse(configString)
-    const schema = config['rules'] ? ConfigSchemaV1 : ConfigSchemaV2
-    updateState({ fullSchema: schema, data: configString })
+    try {
+      const config = JSON.parse(configString)
+      const schema = config['rules'] ? ConfigSchemaV1 : ConfigSchemaV2
+      updateState({ fullSchema: schema, data: configString })
+    } catch {
+      // Ignore parsing errors
+    }
   }
 
   async function handleConvertConfig() {
@@ -91,7 +100,7 @@ function run() {
 
   return (
     <div style={{display:"flex"}}>
-      <div style={{ flex: "50%", height: "800px" }}>
+      <div style={{ flex: "50%" }}>
         <div style={{ boxSizing: "border-box", width: "100%" }}>
           <ConfigToolbar
             onConvert={handleConvertConfig}
@@ -106,22 +115,32 @@ function run() {
             editorDidMount={(editor) => {
               updateState({ editorRef: editor })
             }}
-            height={"70vh"}
+            height={"80vh"}
             key={JSON.stringify(fullSchema)}
           />
         </div>
       </div>
-      <div style={{ flex: "50%", height: "800px" }}>
-        <SchemaToolbar
-          onToggleSchema={handleToggleSchema}
-        />
+      <div style={{ flex: "50%", height: "85vh" }}>
         <div
-          style={{overflow: "auto", height: "800px"}}
+          style={{overflow: "auto", height: "100%"}}
         >
-          <JSONSchemaViewer
-            schema={fullSchema}
-            key={JSON.stringify(fullSchema)}
-          />
+          <Tabs>
+            <TabItem value="schema" label="Schema" default>
+              <JSONSchemaViewer
+                schema={fullSchema}
+                key={JSON.stringify(fullSchema)}
+              />
+            </TabItem>
+            <TabItem value="actions" label="Actions">
+              <Actions />
+            </TabItem>
+            <TabItem value="enum-types" label="Enum Types">
+              <EnumTypes />
+            </TabItem>
+            <TabItem value="placeholder" label="Placeholder">
+              <Placeholder />
+            </TabItem>
+          </Tabs>
         </div>
       </div>
     </div>

diff --git a/docs/src/components/SchemaToolbar.tsx b/docs/src/components/SchemaToolbar.tsx
diff --git a/docs/src/pages/playground.tsx b/docs/src/pages/playground.tsx
@@ -36,7 +36,7 @@ export default function Playground(): JSX.Element {
       description="Playground of docusaurus-json-schema-plugin"
     >
       <PlaygroundComponent />
-      <ToastContainer position={toast.POSITION.BOTTOM_RIGHT} autoClose={3000} />
+      <ToastContainer theme="dark" position={toast.POSITION.BOTTOM_RIGHT} autoClose={3000} />
     </Layout>
   )
 }