feat: support mermaid

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Install dependencies
+      run: yarn
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -39,3 +39,6 @@ tailwind.css*
 
 # Tests
 website/tests/screenshots/*
+/test-results/
+/playwright-report/
+/playwright/.cache/

__tests__/example.spec.ts

@@ -0,0 +1,25 @@
+// example.spec.ts
+import { test, expect } from '@playwright/test';
+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'];
+
+domains.forEach(domain => {
+  if (!skipList.includes(domain[0])) {
+    test(`${domain[0]}`, async ({ page }) => {
+      const response = await page.goto(`https://${domain[0]}`);
+
+      expect(response).toBeDefined();
+      expect(response!.status()).toBe(200);
+
+      const screenshotName = `${domain[1]}-original.png`;
+      await expect(page).toHaveScreenshot(screenshotName);
+
+      await page.goto(`${stagingUrl}/${domain[1]}`);
+      await expect(page).toHaveScreenshot(screenshotName);
+    });
+  }
+});

api/package.json

@@ -7,7 +7,7 @@
   "author": "<[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@code-hike/mdx": "^0.7.2",
+    "@code-hike/mdx": "^0.7.4",
     "@ltd/j-toml": "^1.30.0",
     "@octokit/graphql": "^5.0.0",
     "@types/cors": "^2.8.12",
@@ -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];
@@ -23,6 +24,7 @@ function getPlugins(config: OutputConfig) {
   if (config?.experimentalMath) {
     //@ts-ignore
     remarkPlugins.push(remarkMath);
+    //@ts-ignore
     rehypePlugins.push(rehypeKatex);
   }
   return { remarkPlugins, rehypePlugins };

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

@@ -4,25 +4,47 @@ 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;
     }
 
     const language = getLanguage(node);
+
     const raw = toString(node);
 
-    // Raw value of the `code` block - used for copy/paste
-    parent.properties['raw'] = raw;
-    parent.properties['html'] = highlighter.codeToHtml(raw, language);
+    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, '');
+
+      parent.properties['raw'] = removedDollarSymbol;
+      parent.properties['html'] = highlighter.codeToHtml(raw, { lang: 'shell' });
+    } else {
+      parent.properties['raw'] = raw;
+      parent.properties['html'] = highlighter.codeToHtml(raw, { lang: language });
+    }
 
     // Get any metadata from the code block
     const meta = (node.data?.meta as string) ?? '';

api/src/utils/bundle.ts

@@ -115,6 +115,7 @@ export class Bundle {
       throw new BundleError(404, "Couldn't find file", 'FILE_NOT_FOUND');
     }
     this.markdown = githubContents.md;
+    this.path = githubContents.path;
     this.contentFetched = true;
   }
 

api/src/utils/config.ts

@@ -155,9 +155,9 @@ export function formatConfigLocales(configFiles: Configs, path: string): OutputC
   ) {
     // TODO: edge cases of bad configs, e.g what if locales is not an array?
 
-    const defaulLocale = config.locales[0];
+    const defaultLocale = config.locales[0];
 
-    const currentLocale = path.split('/')[0] || defaulLocale;
+    const currentLocale = path.split('/')[0] || defaultLocale;
 
     const sidebar = (getValue(config, 'sidebar') as Record<string, unknown>)[currentLocale];
 

domains.json

@@ -7,10 +7,6 @@
 		"melos.invertase.dev",
 		"invertase/melos"
 	],
-	[
-		"melos.invertase.io",
-		"invertase/melos"
-	],
 	[
 		"extensions.invertase.dev",
 		"invertase/firebase-extensions"
@@ -20,7 +16,7 @@
 		"invertase/react-query-firebase"
 	],
 	[
-		"docs.flexcolorscheme.com",
+  		"docs.flexcolorscheme.com",
 		"rydmike/flex_color_scheme_docs"
 	],
 	[

package.json

@@ -19,6 +19,7 @@
     "typescript": "^4.5.4"
   },
   "devDependencies": {
+    "@playwright/test": "^1.27.1",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
     "concurrently": "^7.0.0",

packages/server/package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@types/node-fetch": "^2.6.2",
+    "@types/pino-std-serializers": "^4.0.0",
     "esbuild": "^0.14.47",
     "typescript": "^4.5.4"
   },