feat: support mermaid

Author: cabljac

__tests__/example.spec.ts

@@ -1,26 +1,25 @@
 // example.spec.ts
 import { test, expect } from '@playwright/test';
-import {default as domains} from '../domains.json';
+import { default as domains } from '../domains.json';
 
 const stagingUrl = 'https://staging-docs-page-website-euw1-dzpolnxswq-ew.a.run.app';
 
 // skip these as these are not working (user error)
-const skipList  = ['dokumentacja.otwartaturystyka.pl']
+const skipList = ['dokumentacja.otwartaturystyka.pl'];
 
 domains.forEach(domain => {
-    if (!skipList.includes(domain[0])) {
+  if (!skipList.includes(domain[0])) {
     test(`${domain[0]}`, async ({ page }) => {
+      const response = await page.goto(`https://${domain[0]}`);
 
-        const response = await page.goto(`https://${domain[0]}`);
+      expect(response).toBeDefined();
+      expect(response!.status()).toBe(200);
 
-        expect(response).toBeDefined();
-        expect(response!.status()).toBe(200);
+      const screenshotName = `${domain[1]}-original.png`;
+      await expect(page).toHaveScreenshot(screenshotName);
 
-        const screenshotName = `${domain[1]}-original.png`;
-        await expect(page).toHaveScreenshot(`${domain[1]}-original.png`);
-
-        await page.goto(`${stagingUrl}/${domain[1]}`)
-        await expect(page).toHaveScreenshot(`${domain[1]}-original.png`);
+      await page.goto(`${stagingUrl}/${domain[1]}`);
+      await expect(page).toHaveScreenshot(screenshotName);
     });
-}
-})
+  }
+});

api/package.json

@@ -28,6 +28,7 @@
     "js-yaml": "^4.1.0",
     "lodash.get": "^4.4.2",
     "mdx-bundler": "^9.0.1",
+    "mermaid": "^9.1.7",
     "morgan": "^1.10.0",
     "node-fetch": "^3.2.6",
     "probot": "^12.2.4",

api/src/bundler/getPlugins.ts

@@ -12,6 +12,7 @@ import remarkComment from 'remark-comment';
 
 function getPlugins(config: OutputConfig) {
   //
+
   const remarkPlugins = config?.experimentalCodehike
     ? [remarkGfm, remarkComment, [remarkCodeHike, { theme, lineNumbers: true }]]
     : [remarkGfm, remarkComment];

api/src/bundler/plugins/rehype-code-blocks.ts

@@ -4,15 +4,14 @@ import { visit } from 'unist-util-visit';
 import { Node } from 'hast-util-heading-rank';
 import { toString } from 'mdast-util-to-string';
 import * as shiki from 'shiki';
-
 let highlighter: shiki.Highlighter;
 
 /**
  * Matches any `pre code` elements and extracts the raw code and titles from the code block and assigns to the parent.
  * @returns
  */
 export default function rehypeCodeBlocks(): (ast: Node) => void {
-  function visitor(node: any, _i: number, parent: any) {
+  function visitor(node: any, i: number, parent: any) {
     if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
       return;
     }
@@ -21,6 +20,21 @@ export default function rehypeCodeBlocks(): (ast: Node) => void {
 
     const raw = toString(node);
 
+    if (language === 'mermaid') {
+      Object.assign(parent, {
+        type: 'mdxJsxFlowElement',
+        name: 'Mermaid',
+        attributes: [
+          {
+            type: 'mdxJsxAttribute',
+            name: 'chart',
+            value: node.children[0].value,
+          },
+        ],
+      });
+      return;
+    }
+
     // If the user provides the `console` language, we add the 'shell' language and remove $ from the raw code, for copying purposes.
     if (language === 'console') {
       const removedDollarSymbol = raw.replace(/^(^ *)\$/g, '');

playwright.config.ts

@@ -19,7 +19,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000
+    timeout: 5000,
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -49,7 +49,7 @@ const config: PlaywrightTestConfig = {
       use: {
         ...devices['Desktop Chrome'],
       },
-    }
+    },
 
     /* Test against mobile viewports. */
     // {

website/app/components/mdx/index.tsx

@@ -9,6 +9,7 @@ import { Pre } from './Pre';
 import { Tabs, TabItem } from './Tabs';
 import { Vimeo } from './Vimeo';
 import { Tweet } from './Tweet';
+import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
 
 function Anchor(
   props: DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
@@ -72,4 +73,9 @@ export default {
   TabItem,
   Tweet,
   Vimeo,
+  Mermaid: ({ chart }: { chart: string }) => {
+    console.log('here', chart);
+
+    return <Mermaid chart={chart} />;
+  },
 };

website/app/entry.client.tsx

@@ -24,4 +24,4 @@ hydrateRoot(
   <BrowserRouter>
     <RemixBrowser />
   </BrowserRouter>,
-);
+);

website/package.json

@@ -36,6 +36,8 @@
     "detect-browser": "^5.3.0",
     "express": "^4.18.1",
     "lodash.get": "^4.4.2",
+    "mdx-mermaid": "^v1.3.0",
+    "mermaid": "^9.1.7",
     "morgan": "^1.10.0",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",