feat(client): add support for mermaid-js

.changeset/flat-bikes-attack.md

@@ -0,0 +1,5 @@
+---
+"@guild-docs/client": minor
+---
+
+feat(client): add support for `mermaid-js`

examples/basic/docs/mermaid-support.mdx

@@ -0,0 +1,24 @@
+# Mermaid Support
+
+<Graph>
+
+graph TD;
+subgraph AA [Consumers]
+A[Mobile app];
+B[Web app];
+C[Node.js client];
+end
+subgraph BB [Services]
+E[REST API];
+F[GraphQL API];
+G[SOAP API];
+end
+Z[GraphQL API];
+A --> Z;
+B --> Z;
+C --> Z;
+Z --> E;
+Z --> F;
+Z --> G;
+
+</Graph>

package.json

@@ -1,6 +1,4 @@
 {
-  "name": "the-guild-docs",
-  "version": "1.0.0",
   "private": true,
   "homepage": "https://github.com/the-guild-org/the-guild-docs#readme",
   "bugs": {
@@ -37,35 +35,35 @@
     "@changesets/config": "1.7.0",
     "@changesets/read": "0.5.4",
     "@manypkg/get-packages": "1.1.3",
-    "@types/node": "^17.0.17",
-    "@types/react": "^17.0.39",
-    "@types/react-instantsearch-core": "^6.10.7",
-    "@types/react-instantsearch-dom": "^6.12.2",
-    "@types/react-paginate": "^7.1.1",
+    "@types/node": "16.11.7",
+    "@types/react": "17.0.42",
+    "@types/react-instantsearch-core": "6.10.7",
+    "@types/react-instantsearch-dom": "6.12.2",
+    "@types/react-paginate": "7.1.1",
     "@typescript-eslint/eslint-plugin": "5.12.1",
     "@typescript-eslint/parser": "5.12.1",
-    "bob-esbuild": "^3.2.4",
-    "bob-esbuild-cli": "^3.0.1",
-    "bob-tsm": "^0.4.6",
-    "chalk": "^5.0.0",
-    "concurrently": "^7.0.0",
-    "esbuild": "^0.14.23",
+    "bob-esbuild": "3.2.5",
+    "bob-esbuild-cli": "3.0.2",
+    "bob-tsm": "0.4.7",
+    "chalk": "5.0.0",
+    "concurrently": "7.0.0",
+    "esbuild": "0.14.27",
     "eslint": "8.9.0",
     "eslint-config-prettier": "8.4.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
-    "globby": "^13.1.1",
+    "globby": "13.1.1",
     "husky": "7.0.4",
-    "next": "^12.1.0",
-    "prettier": "^2.5.1",
-    "pretty-quick": "^3.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
+    "next": "12.1.0",
+    "prettier": "2.5.1",
+    "pretty-quick": "3.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "rimraf": "3.0.2",
     "semver": "7.3.5",
-    "typescript": "^4.5.5"
+    "typescript": "4.6.2"
   },
   "engines": {
     "pnpm": ">=6.23"

packages/client/package.json

@@ -32,7 +32,10 @@
     "react-sticky-box": "0.9.3",
     "remove-markdown": "^0.3.0",
     "use-immer": "^0.6.0",
-    "zustand": "^3.7.0"
+    "zustand": "^3.7.0",
+    "mdx-mermaid": "^1.2.2",
+    "mermaid": ">= 8.11.0 < 8.12.0",
+    "react-children-utilities": "2.7.0"
   },
   "devDependencies": {
     "@chakra-ui/icons": "^1.1.5",

packages/client/src/components.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-
 import { useTranslation } from 'next-i18next';
 import ImageImport from 'next/image.js';
 import NextLinkImport from 'next/link.js';
-import React, { ComponentType, ReactNode } from 'react';
-
+import React, { Children, ComponentType, ReactNode } from 'react';
+import { onlyText } from 'react-children-utilities';
+import { Mermaid } from 'mdx-mermaid/Mermaid';
 import {
   Box,
   BoxProps,
@@ -29,6 +29,7 @@ import {
   Tooltip,
   TooltipProps,
   UnorderedList,
+  useColorMode,
   useColorModeValue,
 } from '@chakra-ui/react';
 
@@ -285,6 +286,13 @@ export const originalComponents = {
   Button,
   Translated,
   Stack,
+  Graph: ({ children }: { children: ReactNode }) => {
+    const { colorMode } = useColorMode();
+    if (Children.toArray(children).length > 1) {
+      console.error('BEWARE: the mermaid content should not contain any empty line!');
+    }
+    return <Mermaid chart={onlyText(children)} config={{ theme: colorMode }} />;
+  },
   inlineCode: (props: CodeProps) => {
     const colorScheme = useColorModeValue('blackAlpha', undefined);