Add mermaid-mdx and basic sitewide config.

Author: tjholm

docs/apis.mdx

@@ -6,6 +6,16 @@ description: 'Building HTTP APIs with Nitric'
 
 Nitric has built-in support for web apps and HTTP API development. The `api` resource allows you to create APIs in your applications, including routing, middleware and request handlers.
 
+## Architecture
+
+```mermaid
+graph LR;
+    classDef default line-height:1.2;
+
+    A[Api]-->B[Service A];
+    A-->C[Service B];
+```
+
 ## Creating APIs
 
 Nitric allows you define named APIs, each with their own routes, middleware, handlers and security.

package.json

@@ -62,6 +62,8 @@
     "lucide-react": "^0.445.0",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.1",
+    "mdx-mermaid": "^2.0.3",
+    "mermaid": "^11.4.1",
     "next": "^14.2.15",
     "next-contentlayer2": "^0.5.1",
     "next-themes": "^0.3.0",

src/components/mdx.tsx

@@ -108,4 +108,6 @@ export { Tabs, TabItem } from '@/components/tabs/Tabs'
 
 export { CodeTabs } from '@/components/code/CodeTabs'
 
+export { Mermaid } from 'mdx-mermaid/Mermaid'
+
 // see if we need to remove these

src/mdx/remark.mjs

@@ -1,4 +1,25 @@
 import { mdxAnnotations } from 'mdx-annotations'
 import remarkGfm from 'remark-gfm'
+import mdxMermaid from 'mdx-mermaid'
 
-export const remarkPlugins = [mdxAnnotations.remark, remarkGfm]
+export const remarkPlugins = [
+  mdxAnnotations.remark,
+  remarkGfm,
+  [
+    mdxMermaid,
+    {
+      output: 'svg',
+      mermaid: {
+        theme: 'base',
+        themeVariables: {
+          primaryColor: '#ff0000',
+          secondaryColor: '#00ff00',
+          tertiaryColor: '#0000ff',
+          textColor: '#000000',
+          fontSize: '14px',
+          fontFamily: 'Fira Code, monospace',
+        },
+      },
+    },
+  ],
+]