Restore mermaid flowchart support (#324)

* mdx-mermaid -> @docusaurs/themes-mermaid (no deps) * yarn add @docusaurus/[email protected] * yarn remove mdx-mermaid * rm unnecessary comments in docusaurus.config.js * fix long lines
farm-ng · Aug 7, 2024 · c518695 · c518695
1 parent e532056
commit c518695
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 629 deletions.
diff --git a/website/docs/dashboard/control_states.mdx → website/docs/dashboard/control_states.md b/website/docs/dashboard/control_states.mdx → website/docs/dashboard/control_states.md
@@ -5,7 +5,6 @@ title: Amiga Control States
 
 ## Amiga control states
 
-
 ### State transition flowchart
 
 ```mermaid
@@ -33,8 +32,8 @@ title: Amiga Control States
 
 ```
 
-
 ### State descriptions
+
 - **Boot**
   - Amiga is starting up
 - **Manual Ready**
@@ -59,7 +58,6 @@ title: Amiga Control States
     - Etc.
   - E-stop condition must be cleared before transition to Manual Ready state
 
-
 ### Transition descriptions
 
 - **Warm up**
@@ -89,8 +87,10 @@ title: Amiga Control States
   - Press the `[AUTO CONTROL]` button
   - The `AUTO READY` state will illuminate, if state transition is permitted
 - **AmigaRpdo1**
-  - Transition between Auto ready and auto active state (both directions) is requested over CAN with an AmigaRpdo1 message
-  - The `AUTO READY` or `AUTO ACTIVE` state will illuminate, corresponding to the state the Amiga is in
+  - Transition between Auto ready and auto active state (both directions) is requested over CAN
+    with an AmigaRpdo1 message
+  - The `AUTO READY` or `AUTO ACTIVE` state will illuminate,
+    corresponding to the state the Amiga is in
   - Transitions
     - `Auto Ready <--> Auto Active`
 - **E-stop condition**

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -6,7 +6,6 @@ const lightTheme = themes.github;
 const darkTheme = themes.dracula;
 
 async function createConfig() {
-	const mdxMermaid = await import('mdx-mermaid')
 	/** @type {import('@docusaurus/types').Config} */
 	return {
 		title: 'Farm-ng Developers',
@@ -18,9 +17,8 @@ async function createConfig() {
 		favicon: 'img/farm-ng_favicon.png',
 
 		// GitHub pages deployment config.
-		// If you aren't using GitHub pages, you don't need these.
-		organizationName: 'farm-ng', // Usually your GitHub org/user name.
-		projectName: 'amiga-dev-kit', // Usually your repo name.
+		organizationName: 'farm-ng',
+		projectName: 'amiga-dev-kit',
 
 		// Even if you don't use internalization, you can use this field to set useful
 		// metadata like html lang. For example, if your site is Chinese, you may want
@@ -30,26 +28,25 @@ async function createConfig() {
 			locales: ['en'],
 		},
 
+    // Enable mermaid
+    markdown: {
+      mermaid: true,
+    },
+    themes: ['@docusaurus/theme-mermaid'],
+
 		presets: [
 			[
 				'classic',
 				/** @type {import('@docusaurus/preset-classic').Options} */
 				({
 					docs: {
-						remarkPlugins: [mdxMermaid.default],
 						sidebarPath: require.resolve('./sidebars.js'),
-						// Please change this to your repo.
-						// Remove this to remove the "edit this page" links.
 						editUrl:
-							//'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
 							'https://github.com/farm-ng/amiga-dev-kit/tree/main/website/',
 					},
 					blog: {
 						showReadingTime: true,
-						// Please change this to your repo.
-						// Remove this to remove the "edit this page" links.
 						editUrl:
-							//'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
 							'https://github.com/farm-ng/amiga-dev-kit/tree/main/website/',
 					},
 					theme: {
@@ -105,18 +102,6 @@ async function createConfig() {
 							docId: 'examples/examples-index',
 							position: 'left',
 						},
-
-						//   {
-						//     label: 'Contribute',
-						//     type: 'doc',
-						//     docId: 'contribute/contribute-website',
-						//     position: 'left',
-						//   },
-						//   {
-						//     to: '/blog',
-						//     label: 'Blog',
-						//     position: 'left'
-						//   },
 						{
 							to: 'https://discourse.farm-ng.com/',
 							label: 'Discourse',
@@ -172,14 +157,6 @@ async function createConfig() {
 									label: 'Discourse',
 									position: 'left',
 								},
-								//{
-								//  label: 'Stack Overflow',
-								//  href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-								//},
-								// {
-								//   label: 'Twitter',
-								//   href: 'https://twitter.com/docusaurus',
-								// },
 							],
 						}, {
 							title: 'Farm-ng',
@@ -197,14 +174,6 @@ async function createConfig() {
 									label: 'farm-ng-amiga-ros-bridge',
 									href: 'https://github.com/farm-ng/amiga-ros-bridge-v1',
 								},
-								//{
-								//  label: 'Stack Overflow',
-								//  href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-								//},
-								// {
-								//   label: 'Twitter',
-								//   href: 'https://twitter.com/docusaurus',
-								// },
 							],
 						},
 						{

diff --git a/website/package.json b/website/package.json
@@ -16,9 +16,9 @@
   "dependencies": {
     "@docusaurus/core": "3.0.0",
     "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/theme-mermaid": "3.0.0",
     "@mdx-js/react": "3.0.0",
     "clsx": "^1.2.1",
-    "mdx-mermaid": "^2.0.0",
     "mermaid": "^9.1.7",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",