From c7996481f23cd7e43a8265638ae94d938eb5598b Mon Sep 17 00:00:00 2001
From: Moritz Eckert <m1gh7ym0@gmail.com>
Date: Tue, 5 Sep 2023 11:24:20 +0200
Subject: [PATCH] docs: switch to native mermaid support (#2306)

---
 docs/docusaurus.config.js | 60 +++++++++++++++++++++------------------
 docs/package.json         | 11 ++++---
 2 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 554173f6d..a6f32b700 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -6,8 +6,6 @@ const darkCodeTheme = require('prism-react-renderer').themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 async function createConfig() {
-  const mdxMermaid = await import('mdx-mermaid')
-
   return {
     title: 'Constellation',
     tagline: 'Constellation: The world\'s most secure Kubernetes',
@@ -37,38 +35,18 @@ async function createConfig() {
       locales: ['en'],
     },
 
+    // mermaid
+    markdown: {
+      mermaid: true,
+    },
+    themes: ['@docusaurus/theme-mermaid'],
+
     presets: [
       [
         'classic',
         /** @type {import('@docusaurus/preset-classic').Options} */
         ({
           docs: {
-            remarkPlugins: [[mdxMermaid.default, {
-              mermaid: {
-                theme: 'base',
-                themeVariables: {
-                  // general
-                  'fontFamily': '"Open Sans", sans-serif',
-                  'primaryColor': '#90FF99', // edgeless green
-                  'primaryTextColor': '#000000',
-                  'secondaryColor': '#A5A5A5', // edgeless grey
-                  'secondaryTextColor': '#000000',
-                  'tertiaryColor': '#E7E6E6', // edgeless light grey
-                  'tertiaryTextColor': '#000000',
-                  // flowchart
-                  'clusterBorder': '#A5A5A5',
-                  'clusterBkg': '#ffffff',
-                  'edgeLabelBackground': '#ffffff',
-                  // sequence diagram
-                  'activationBorderColor': '#000000',
-                  'actorBorder': '#A5A5A5',
-                  'actorFontFamily': '"Open Sans", sans-serif', // not released by mermaid yet
-                  'noteBkgColor': '#8B04DD', // edgeless purple
-                  'noteTextColor': '#ffffff',
-                },
-                startOnLoad: true
-              }
-            }]],
             sidebarPath: require.resolve('./sidebars.js'),
             // sidebarPath: 'sidebars.js',
             // Please change this to your repo.
@@ -216,6 +194,32 @@ async function createConfig() {
           darkTheme: darkCodeTheme,
           additionalLanguages: ['shell-session'],
         },
+        mermaid: {
+          theme: { light: 'base', dark: 'base' },
+          options: {
+            themeVariables: {
+              // general
+              fontFamily: '"Open Sans", sans-serif',
+              primaryColor: '#90FF99', // edgeless green
+              primaryTextColor: '#000000',
+              secondaryColor: '#A5A5A5', // edgeless grey
+              secondaryTextColor: '#000000',
+              tertiaryColor: '#E7E6E6', // edgeless light grey
+              tertiaryTextColor: '#000000',
+              // flowchart
+              clusterBorder: '#A5A5A5',
+              clusterBkg: '#ffffff',
+              edgeLabelBackground: '#ffffff',
+              // sequence diagram
+              activationBorderColor: '#000000',
+              actorBorder: '#A5A5A5',
+              actorFontFamily: '"Open Sans", sans-serif', // not released by mermaid yet
+              noteBkgColor: '#8B04DD', // edgeless purple
+              noteTextColor: '#ffffff',
+            },
+            startOnLoad: true,
+          },
+        },
       }),
 
     plugins: [
diff --git a/docs/package.json b/docs/package.json
index b263bc909..1e4020dd4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,17 +14,16 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@cmfcmf/docusaurus-search-local": "^1.0.0",
+    "@cmfcmf/docusaurus-search-local": "^1.1.0",
     "@docusaurus/core": "^2.2.0",
     "@docusaurus/module-type-aliases": "^2.2.0",
     "@docusaurus/plugin-google-gtag": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.2.0",
+    "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/theme-mermaid": "^2.4.1",
     "@mdx-js/react": "^1.6.22",
-    "asciinema-player": "^3.0.1",
+    "asciinema-player": "^3.5.0",
     "clsx": "^1.2.1",
-    "mdx-mermaid": "^1.3.2",
-    "mermaid": "^10.0.0",
-    "prism-react-renderer": "^2.0.0",
+    "prism-react-renderer": "^2.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },