diff --git a/api/package.json b/api/package.json
index 82c3d252..c50f53cf 100644
--- a/api/package.json
+++ b/api/package.json
@@ -22,7 +22,9 @@
     "esbuild": "^0.14.47",
     "express": "^4.18.1",
     "express-basic-auth": "^1.2.1",
+    "hast-util-from-html": "^1.0.0",
     "hast-util-parse-selector": "^3.1.0",
+    "headless-mermaid": "^1.3.0",
     "http-status": "^1.5.2",
     "is-badge": "^2.1.0",
     "js-yaml": "^4.1.0",
diff --git a/api/src/bundler/bundler.ts b/api/src/bundler/bundler.ts
index 7aae9b4e..39ccbdef 100644
--- a/api/src/bundler/bundler.ts
+++ b/api/src/bundler/bundler.ts
@@ -70,6 +70,7 @@ export async function bundle(
   return {
     code,
     frontmatter,
+    //@ts-ignore
     errors,
     headings: output.headings,
   };
diff --git a/api/src/bundler/plugins/rehype-code-blocks.ts b/api/src/bundler/plugins/rehype-code-blocks.ts
index 69120452..2f1e88a3 100644
--- a/api/src/bundler/plugins/rehype-code-blocks.ts
+++ b/api/src/bundler/plugins/rehype-code-blocks.ts
@@ -4,39 +4,73 @@ 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;
-
+//@ts-ignore
+import mermaid from 'headless-mermaid';
+//@ts-ignore
+import { fromHtml } from 'hast-util-from-html';
 /**
  * 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) {
-    if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
-      return;
-    }
 
-    const language = getLanguage(node);
-    const raw = toString(node);
+  return async (ast: Node): Promise<null> => {
 
-    // Raw value of the `code` block - used for copy/paste
-    parent.properties['raw'] = raw;
-    parent.properties['html'] = highlighter.codeToHtml(raw, language);
+    const promises: any[] = [];
 
-    // Get any metadata from the code block
-    const meta = (node.data?.meta as string) ?? '';
+    async function visitor(node: any, i: number, parent: any) {
+      if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
+        return;
+      }
 
-    const title = extractTitle(meta);
-    if (title) parent.properties['title'] = title;
-  }
+      const language = getLanguage(node);
+
+      const raw = toString(node);
+
+      if (language === 'mermaid') {
+
+        const value = node.children[0].value;
+
+
+        promises.push(mermaid.execute(value).then((svgResult: string) => {
+          //@ts-ignore
+          console.log(fromHtml(svgResult).children[0].children[1].children)
+          //@ts-ignore
+          const svgNode = fromHtml(svgResult).children[0].children[1].children[0];
+
+          Object.assign(parent, svgNode);
+        }))
+
+        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) ?? '';
+
+      const title = extractTitle(meta);
+      if (title) parent.properties['title'] = title;
+    }
 
-  return async (ast: Node): Promise<void> => {
     highlighter = await shiki.getHighlighter({
       theme: 'github-dark',
     });
     // @ts-ignore
     visit(ast, 'element', visitor);
+
+    await Promise.all(promises);
+    return null;
   };
 }
 
@@ -76,4 +110,4 @@ function getLanguage(node: any): string | undefined {
       return value.slice(9);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 69bbe249..06a524e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -561,9 +561,9 @@
       }
     },
     "node_modules/@astrojs/compiler": {
-      "version": "0.30.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.30.1.tgz",
-      "integrity": "sha512-sH3hvGA9JR5eE2bHG3sr5QjaJl5ER9EmmZzSwBHkMPoBj0XU7XzQjSGoyCbIML6sSaelJEPnfsr9NsypvKOecg=="
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.0.tgz",
+      "integrity": "sha512-V8/Re/wXgXTZzpfWs4KZBLU5dRhnO6kSd4e3vObGuj+HFGHjaD11wws1zvaC9cXLQyQsM5CSrGagFGYlRZKvVQ=="
     },
     "node_modules/@astrojs/language-server": {
       "version": "0.28.3",
@@ -635,15 +635,24 @@
       }
     },
     "node_modules/@astrojs/node": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-3.1.0.tgz",
-      "integrity": "sha512-teKbDU3u1BIhh3pIVtLsBF/Hxr6NioInfnVFLlPp9afFFlVhakO3N+nR8fPkXrpNXGP3AxQmk+ROI4YHvhIIFw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-3.1.1.tgz",
+      "integrity": "sha512-EWfsvCtOGvN1ugpxhiW4sr0xD8xUGltFOcU/ysOHdVpP6WXWQUTZbYbqDo+fgYhYHksLIcBLxg8vLi+gBQMA1Q==",
+      "dev": true,
       "dependencies": {
         "@astrojs/webapi": "^1.1.1",
         "send": "^0.18.0"
       },
       "peerDependencies": {
-        "astro": "^1.6.10"
+        "astro": "^1.6.15"
+      }
+    },
+    "node_modules/@astrojs/prefetch": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/prefetch/-/prefetch-0.1.1.tgz",
+      "integrity": "sha512-+XZcjivPHTo9thQshDWKnnORHJ1dE6odIzhmKHac2ptwla092eohkiJw7Y31+PYmuJkc3Jp+3AawuCvfqCnQ2Q==",
+      "dependencies": {
+        "throttles": "^1.0.1"
       }
     },
     "node_modules/@astrojs/prism": {
@@ -708,9 +717,9 @@
       }
     },
     "node_modules/@astrojs/vercel": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@astrojs/vercel/-/vercel-2.3.5.tgz",
-      "integrity": "sha512-kjbIKsbaHX41llEV2Qzj9/R8SfYjy/gNG6CdVATuQM1GGBayEvJYn7pU75YalrvLTrqfMKywS+oFPW9fwJl8yA==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@astrojs/vercel/-/vercel-2.3.6.tgz",
+      "integrity": "sha512-OAfu1d6pgzhKIi48rAKemfhNO6s8ZF/38zSRqGZwl9HnY5qfacccqWmoVeUJ9lSqB/rljxA5Xzh3s+jMqyd9mA==",
       "dev": true,
       "dependencies": {
         "@astrojs/webapi": "^1.1.1",
@@ -5216,6 +5225,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/request-ip": {
+      "version": "0.0.37",
+      "resolved": "https://registry.npmjs.org/@types/request-ip/-/request-ip-0.0.37.tgz",
+      "integrity": "sha512-uw6/i3rQnpznxD7LtLaeuZytLhKZK6bRoTS6XVJlwxIOoOpEBU7bgKoVXDNtOg4Xl6riUKHa9bjMVrL6ESqYlQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -6587,11 +6605,11 @@
       }
     },
     "node_modules/astro": {
-      "version": "1.6.14",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-1.6.14.tgz",
-      "integrity": "sha512-8ljrWPKEU5Hrrbupan48ba4gLWPY14Aqiv4u0U92wSl3wtsqPJUWWlHGGkXcgS/9dx8aiLkUm4RzCPFVnP7V2w==",
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-1.6.15.tgz",
+      "integrity": "sha512-FT60PalffV0bCNxqEHadRzb+Rd3g3lYxV3fR9+bZ2CRlbSfC3UdoaLDh5wC6gJiz91caH1R0XiYaV0WT2Zg91g==",
       "dependencies": {
-        "@astrojs/compiler": "^0.30.0",
+        "@astrojs/compiler": "^0.31.0",
         "@astrojs/language-server": "^0.28.3",
         "@astrojs/markdown-remark": "^1.1.3",
         "@astrojs/telemetry": "^1.0.1",
@@ -6623,7 +6641,7 @@
         "html-escaper": "^3.0.3",
         "import-meta-resolve": "^2.1.0",
         "kleur": "^4.1.4",
-        "magic-string": "^0.25.9",
+        "magic-string": "^0.27.0",
         "mime": "^3.0.0",
         "ora": "^6.1.0",
         "path-browserify": "^1.0.1",
@@ -6660,10 +6678,21 @@
         "npm": ">=6.14.0"
       }
     },
+    "node_modules/astro/node_modules/magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/astro/node_modules/semver": {
-      "version": "7.3.7",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -11182,27 +11211,27 @@
       }
     },
     "node_modules/hast-to-hyperscript/node_modules/comma-separated-tokens": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz",
-      "integrity": "sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/hast-to-hyperscript/node_modules/property-information": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
-      "integrity": "sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
+      "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/hast-to-hyperscript/node_modules/space-separated-tokens": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz",
-      "integrity": "sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -11317,9 +11346,9 @@
       }
     },
     "node_modules/hast-util-raw/node_modules/zwitch": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.2.tgz",
-      "integrity": "sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -11376,9 +11405,9 @@
       }
     },
     "node_modules/hast-util-to-html/node_modules/comma-separated-tokens": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz",
-      "integrity": "sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -11394,18 +11423,18 @@
       }
     },
     "node_modules/hast-util-to-html/node_modules/property-information": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
-      "integrity": "sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
+      "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/hast-util-to-html/node_modules/space-separated-tokens": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz",
-      "integrity": "sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -11429,18 +11458,18 @@
       }
     },
     "node_modules/hast-util-to-parse5/node_modules/property-information": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
-      "integrity": "sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
+      "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/hast-util-to-parse5/node_modules/zwitch": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.2.tgz",
-      "integrity": "sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -13840,6 +13869,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/medium-zoom": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.0.8.tgz",
+      "integrity": "sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -17345,6 +17379,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/request-ip": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/request-ip/-/request-ip-3.3.0.tgz",
+      "integrity": "sha512-cA6Xh6e0fDBBBwH77SLJaJPBmD3nWVAcF9/XAcsrIHdjhFzFiB5aNQFytdjCGPezU3ROwrR11IddKAM08vohxA=="
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -19086,6 +19125,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttles": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttles/-/throttles-1.0.1.tgz",
+      "integrity": "sha512-fab7Xg+zELr9KOv4fkaBoe/b3L0GMGLd0IBSCn16GoE/Qx6/OfCr1eGNyEcDU2pUA79qQfZ8kPQWlRuok4YwTw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -20965,9 +21012,9 @@
       "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ=="
     },
     "node_modules/vscode-uri": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.6.tgz",
-      "integrity": "sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ=="
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.7.tgz",
+      "integrity": "sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA=="
     },
     "node_modules/wcwidth": {
       "version": "1.0.1",
@@ -22393,28 +22440,32 @@
       "name": "@example/minimal",
       "version": "0.0.1",
       "dependencies": {
-        "@astrojs/node": "^3.1.0",
+        "@astrojs/prefetch": "^0.1.1",
         "@astrojs/tailwind": "^2.1.3",
         "@docsearch/js": "^3.3.0",
         "@docsearch/react": "^3.3.0",
         "@vercel/og": "^0.0.21",
-        "astro": "^1.6.14",
+        "astro": "^1.6.15",
         "classnames": "^2.3.2",
         "color": "^4.2.3",
         "cookie": "^0.5.0",
         "lodash.get": "^4.4.2",
         "mdx-bundler": "^9.0.1",
+        "medium-zoom": "^1.0.8",
         "nanostores": "^0.7.1",
         "querystring": "^0.2.1",
+        "request-ip": "^3.3.0",
         "tailwindcss": "^3.2.4",
         "zod": "^3.19.1"
       },
       "devDependencies": {
+        "@astrojs/node": "^3.1.1",
         "@astrojs/react": "^1.2.2",
-        "@astrojs/vercel": "^2.3.5",
+        "@astrojs/vercel": "^2.3.6",
         "@tailwindcss/typography": "^0.5.8",
         "@types/classnames": "^2.3.1",
         "@types/color": "^3.0.3",
+        "@types/request-ip": "^0.0.37",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "typescript": "^4.9.4"
@@ -22594,9 +22645,9 @@
       }
     },
     "@astrojs/compiler": {
-      "version": "0.30.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.30.1.tgz",
-      "integrity": "sha512-sH3hvGA9JR5eE2bHG3sr5QjaJl5ER9EmmZzSwBHkMPoBj0XU7XzQjSGoyCbIML6sSaelJEPnfsr9NsypvKOecg=="
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.31.0.tgz",
+      "integrity": "sha512-V8/Re/wXgXTZzpfWs4KZBLU5dRhnO6kSd4e3vObGuj+HFGHjaD11wws1zvaC9cXLQyQsM5CSrGagFGYlRZKvVQ=="
     },
     "@astrojs/language-server": {
       "version": "0.28.3",
@@ -22665,14 +22716,23 @@
       }
     },
     "@astrojs/node": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-3.1.0.tgz",
-      "integrity": "sha512-teKbDU3u1BIhh3pIVtLsBF/Hxr6NioInfnVFLlPp9afFFlVhakO3N+nR8fPkXrpNXGP3AxQmk+ROI4YHvhIIFw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-3.1.1.tgz",
+      "integrity": "sha512-EWfsvCtOGvN1ugpxhiW4sr0xD8xUGltFOcU/ysOHdVpP6WXWQUTZbYbqDo+fgYhYHksLIcBLxg8vLi+gBQMA1Q==",
+      "dev": true,
       "requires": {
         "@astrojs/webapi": "^1.1.1",
         "send": "^0.18.0"
       }
     },
+    "@astrojs/prefetch": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/prefetch/-/prefetch-0.1.1.tgz",
+      "integrity": "sha512-+XZcjivPHTo9thQshDWKnnORHJ1dE6odIzhmKHac2ptwla092eohkiJw7Y31+PYmuJkc3Jp+3AawuCvfqCnQ2Q==",
+      "requires": {
+        "throttles": "^1.0.1"
+      }
+    },
     "@astrojs/prism": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-1.0.2.tgz",
@@ -22717,9 +22777,9 @@
       }
     },
     "@astrojs/vercel": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@astrojs/vercel/-/vercel-2.3.5.tgz",
-      "integrity": "sha512-kjbIKsbaHX41llEV2Qzj9/R8SfYjy/gNG6CdVATuQM1GGBayEvJYn7pU75YalrvLTrqfMKywS+oFPW9fwJl8yA==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@astrojs/vercel/-/vercel-2.3.6.tgz",
+      "integrity": "sha512-OAfu1d6pgzhKIi48rAKemfhNO6s8ZF/38zSRqGZwl9HnY5qfacccqWmoVeUJ9lSqB/rljxA5Xzh3s+jMqyd9mA==",
       "dev": true,
       "requires": {
         "@astrojs/webapi": "^1.1.1",
@@ -24574,26 +24634,30 @@
     "@example/minimal": {
       "version": "file:website-v3",
       "requires": {
-        "@astrojs/node": "^3.1.0",
+        "@astrojs/node": "^3.1.1",
+        "@astrojs/prefetch": "^0.1.1",
         "@astrojs/react": "^1.2.2",
         "@astrojs/tailwind": "^2.1.3",
-        "@astrojs/vercel": "*",
+        "@astrojs/vercel": "^2.3.6",
         "@docsearch/js": "^3.3.0",
         "@docsearch/react": "^3.3.0",
         "@tailwindcss/typography": "^0.5.8",
         "@types/classnames": "^2.3.1",
         "@types/color": "^3.0.3",
+        "@types/request-ip": "*",
         "@vercel/og": "^0.0.21",
-        "astro": "^1.6.14",
+        "astro": "^1.6.15",
         "classnames": "^2.3.2",
         "color": "^4.2.3",
         "cookie": "^0.5.0",
         "lodash.get": "^4.4.2",
         "mdx-bundler": "^9.0.1",
+        "medium-zoom": "^1.0.8",
         "nanostores": "^0.7.1",
         "querystring": "^0.2.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "request-ip": "^3.3.0",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.9.4",
         "zod": "^3.19.1"
@@ -26496,6 +26560,15 @@
         "@types/react": "*"
       }
     },
+    "@types/request-ip": {
+      "version": "0.0.37",
+      "resolved": "https://registry.npmjs.org/@types/request-ip/-/request-ip-0.0.37.tgz",
+      "integrity": "sha512-uw6/i3rQnpznxD7LtLaeuZytLhKZK6bRoTS6XVJlwxIOoOpEBU7bgKoVXDNtOg4Xl6riUKHa9bjMVrL6ESqYlQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -27416,11 +27489,11 @@
       "integrity": "sha512-sRpyiNrx2dEYIMmUXprS8nlpRg2Drs8m9ElX9vVEXaCB4XEAJhKfs7IcX0IwShjuOAjLR6wzIrgoptz1n19i1A=="
     },
     "astro": {
-      "version": "1.6.14",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-1.6.14.tgz",
-      "integrity": "sha512-8ljrWPKEU5Hrrbupan48ba4gLWPY14Aqiv4u0U92wSl3wtsqPJUWWlHGGkXcgS/9dx8aiLkUm4RzCPFVnP7V2w==",
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-1.6.15.tgz",
+      "integrity": "sha512-FT60PalffV0bCNxqEHadRzb+Rd3g3lYxV3fR9+bZ2CRlbSfC3UdoaLDh5wC6gJiz91caH1R0XiYaV0WT2Zg91g==",
       "requires": {
-        "@astrojs/compiler": "^0.30.0",
+        "@astrojs/compiler": "^0.31.0",
         "@astrojs/language-server": "^0.28.3",
         "@astrojs/markdown-remark": "^1.1.3",
         "@astrojs/telemetry": "^1.0.1",
@@ -27452,7 +27525,7 @@
         "html-escaper": "^3.0.3",
         "import-meta-resolve": "^2.1.0",
         "kleur": "^4.1.4",
-        "magic-string": "^0.25.9",
+        "magic-string": "^0.27.0",
         "mime": "^3.0.0",
         "ora": "^6.1.0",
         "path-browserify": "^1.0.1",
@@ -27482,10 +27555,18 @@
         "zod": "^3.17.3"
       },
       "dependencies": {
+        "magic-string": {
+          "version": "0.27.0",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+          "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+          "requires": {
+            "@jridgewell/sourcemap-codec": "^1.4.13"
+          }
+        },
         "semver": {
-          "version": "7.3.7",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "version": "7.3.8",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+          "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -31005,19 +31086,19 @@
       },
       "dependencies": {
         "comma-separated-tokens": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz",
-          "integrity": "sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg=="
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+          "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="
         },
         "property-information": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
-          "integrity": "sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w=="
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
+          "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg=="
         },
         "space-separated-tokens": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz",
-          "integrity": "sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw=="
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+          "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="
         }
       }
     },
@@ -31100,9 +31181,9 @@
           }
         },
         "zwitch": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.2.tgz",
-          "integrity": "sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA=="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+          "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="
         }
       }
     },
@@ -31147,9 +31228,9 @@
       },
       "dependencies": {
         "comma-separated-tokens": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz",
-          "integrity": "sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg=="
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+          "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="
         },
         "hast-util-whitespace": {
           "version": "2.0.0",
@@ -31157,14 +31238,14 @@
           "integrity": "sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg=="
         },
         "property-information": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
-          "integrity": "sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w=="
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
+          "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg=="
         },
         "space-separated-tokens": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz",
-          "integrity": "sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw=="
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+          "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="
         }
       }
     },
@@ -31182,14 +31263,14 @@
       },
       "dependencies": {
         "property-information": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz",
-          "integrity": "sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w=="
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
+          "integrity": "sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg=="
         },
         "zwitch": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.2.tgz",
-          "integrity": "sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA=="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+          "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="
         }
       }
     },
@@ -32936,6 +33017,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
+    "medium-zoom": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.0.8.tgz",
+      "integrity": "sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -35390,6 +35476,11 @@
       "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
       "dev": true
     },
+    "request-ip": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/request-ip/-/request-ip-3.3.0.tgz",
+      "integrity": "sha512-cA6Xh6e0fDBBBwH77SLJaJPBmD3nWVAcF9/XAcsrIHdjhFzFiB5aNQFytdjCGPezU3ROwrR11IddKAM08vohxA=="
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -36779,6 +36870,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "throttles": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttles/-/throttles-1.0.1.tgz",
+      "integrity": "sha512-fab7Xg+zELr9KOv4fkaBoe/b3L0GMGLd0IBSCn16GoE/Qx6/OfCr1eGNyEcDU2pUA79qQfZ8kPQWlRuok4YwTw=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -37951,9 +38047,9 @@
       "integrity": "sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ=="
     },
     "vscode-uri": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.6.tgz",
-      "integrity": "sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ=="
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.7.tgz",
+      "integrity": "sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA=="
     },
     "wcwidth": {
       "version": "1.0.1",
diff --git a/website-v3/package.json b/website-v3/package.json
index 0ddcb734..9cb02ec7 100644
--- a/website-v3/package.json
+++ b/website-v3/package.json
@@ -11,8 +11,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/tailwind": "^2.1.3",
     "@astrojs/prefetch": "^0.1.1",
+    "@astrojs/tailwind": "^2.1.3",
     "@docsearch/js": "^3.3.0",
     "@docsearch/react": "^3.3.0",
     "@vercel/og": "^0.0.21",
@@ -22,8 +22,10 @@
     "cookie": "^0.5.0",
     "lodash.get": "^4.4.2",
     "mdx-bundler": "^9.0.1",
+    "medium-zoom": "^1.0.8",
     "nanostores": "^0.7.1",
     "querystring": "^0.2.1",
+    "request-ip": "^3.3.0",
     "tailwindcss": "^3.2.4",
     "zod": "^3.19.1"
   },
@@ -34,6 +36,7 @@
     "@tailwindcss/typography": "^0.5.8",
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
+    "@types/request-ip": "^0.0.37",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.9.4"
diff --git a/website-v3/src/components/Markdown.tsx b/website-v3/src/components/Markdown.tsx
index 50210284..fc433001 100644
--- a/website-v3/src/components/Markdown.tsx
+++ b/website-v3/src/components/Markdown.tsx
@@ -2,11 +2,16 @@ import { getMDXComponent } from 'mdx-bundler/client/index.js';
 import context from 'src/context';
 
 import Link from './Link';
+import CodeBlock, { CodeBlockProps } from './mdx/CodeBlock';
 import Image from './mdx/Image';
 import YouTube from './mdx/YouTube';
 import Vimeo from './mdx/Vimeo';
 import Table from './mdx/Table';
 import Heading from './mdx/Heading';
+import Tweet from './mdx/Tweet';
+import Zapp from './mdx/Zapp';
+import * as callouts from './mdx/callouts';
+import Tabs, { TabItem } from './mdx/Tabs';
 
 const Markdown: React.FC = () => {
   const code = context.get().code;
@@ -19,6 +24,7 @@ const Markdown: React.FC = () => {
           a: props => <Link {...props} href={props.href || '/'} />,
           img: props => <Image {...props} />,
           table: props => <Table {...props} />,
+          pre: props => <CodeBlock {...(props as CodeBlockProps)} />,
           code: props => <code {...props} className="before:content-[''] after:content-['']" />,
           h1: props => <Heading {...props} type="h1" />,
           h2: props => <Heading {...props} type="h2" />,
@@ -26,13 +32,18 @@ const Markdown: React.FC = () => {
           h4: props => <Heading {...props} type="h4" />,
           h5: props => <Heading {...props} type="h5" />,
           h6: props => <Heading {...props} type="h6" />,
+          Info: props => <callouts.Info>{props.children}</callouts.Info>,
+          Warning: props => <callouts.Warning>{props.children}</callouts.Warning>,
+          Error: props => <callouts.Error>{props.children}</callouts.Error>,
+          Success: props => <callouts.Success>{props.children}</callouts.Success>,
           Heading,
-          Tweet: props => <div>TODO</div>,
-          Tabs: props => <div>TODO</div>,
-          TabItem: props => <div>TODO</div>,
+          Tweet: props => <Tweet {...props} />,
+          Tabs: props => <Tabs {...props} />,
+          TabItem: props => <TabItem {...props} />,
           Image,
           YouTube,
           Vimeo,
+          Zapp,
         }}
       />
     </main>
diff --git a/website-v3/src/components/Scripts.astro b/website-v3/src/components/Scripts.astro
index c601bc21..4e96a8fc 100644
--- a/website-v3/src/components/Scripts.astro
+++ b/website-v3/src/components/Scripts.astro
@@ -1,9 +1,156 @@
 ---
 import context from 'src/context';
 
-const { domain, config } = context.get();
+const ctx = context.get();
+const { config, domain } = ctx;
 ---
 
+<script is:inline define:vars={{ ctx }}>
+  // Load the context into the window, so we can access it from other scripts
+  // without losing access to Astros script hoisting.
+  window.docs_page = { ...ctx };
+</script>
+
+<script>
+  /**
+   * This script looks for any buttons with the `data-copy` attribute, and adds
+   * an event listener to copy the value of the `data-copy-value` attribute to.
+   */
+
+  const copy = document.querySelectorAll('[data-copy]');
+
+  for (const button of copy) {
+    button.addEventListener('click', () => {
+      button.innerHTML = 'Copied';
+      navigator.clipboard.writeText(button.getAttribute('data-copy-value') || '');
+
+      setTimeout(() => {
+        button.innerHTML = 'Copy';
+      }, 1500);
+    });
+  }
+</script>
+
+<script>
+  /**
+   * This script is used to load the Twitter library, and apply it to any tweets
+   * with the `data-tweet="true"` attribute.
+   */
+  declare global {
+    interface Window {
+      twttr: {
+        widgets: {
+          createTweet: (tweetId: string, el: HTMLElement, options?: any) => Promise<void>;
+        };
+      };
+    }
+  }
+
+  import type { Context } from 'src/context';
+  const { theme } = (window as any).docs_page as Context;
+
+  const tweets = document.querySelectorAll('div[data-tweet]');
+
+  if (tweets.length) {
+    const script = document.createElement('script');
+    script.src = 'https://platform.twitter.com/widgets.js';
+
+    script.onload = () => {
+      for (const tweet of tweets) {
+        const id = tweet.getAttribute('data-tweet-id')!;
+        window.twttr.widgets.createTweet(id, tweet as HTMLElement, {
+          dnt: true,
+          cards: tweet.getAttribute('data-tweet-cards') === 'true' ? '' : 'hidden',
+          conversation: tweet.getAttribute('data-tweet-conversation') === 'true' ? '' : 'hidden',
+          theme:
+            theme ||
+            (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'),
+        });
+      }
+    };
+
+    document.head.appendChild(script);
+  }
+</script>
+
+<script>
+  /**
+   * This script is used to load the Medium Zoom library, and apply it to any images
+   * with the `data-zoom="true"` attribute.
+   */
+
+  // Only download the library if we need it.
+  if (document.querySelectorAll('main img[data-zoom="true"]').length) {
+    const zoom = (await import('medium-zoom')).default;
+    zoom('main img[data-zoom="true"]', {
+      container: document.body,
+      // Theme is applied via CSS in Styles.astro
+      background: 'transparent',
+    });
+  }
+</script>
+
+<script>
+  /**
+   * This script is used to identify any tab groups on the page, and add event
+   * when a tab button is clicked. It also syncs the state of the tabs with a
+   * group ID across the page, and onto a cookie via the server.
+   */
+
+  import type { Context } from 'src/context';
+  const { owner, repository, domain } = (window as any).docs_page as Context;
+
+  const tabs = document.querySelectorAll('div[data-tab-group]');
+
+  const getButtons = (el: Element) => el.querySelectorAll('button[data-tab-group-button]');
+  const getPanes = (el: Element) => el.querySelectorAll('div[data-tab-group-pane]');
+
+  const setButtonState = (button: Element, id: string) => {
+    const active = (button.getAttribute('data-tab-group-button-id') === id).toString();
+    button.setAttribute('aria-selected', active);
+  };
+
+  const setPaneState = (pane: Element, id: string) => {
+    if (pane.getAttribute('data-tab-group-pane-id') === id) {
+      pane.classList.remove('hidden');
+    } else {
+      pane.classList.add('hidden');
+    }
+  };
+
+  for (const tab of tabs) {
+    const groupId = tab.getAttribute('data-tab-group-id');
+    const groups = groupId ? document.querySelectorAll(`div[data-tab-group-id="${groupId}"]`) : [];
+
+    const buttons = getButtons(tab);
+    const panes = getPanes(tab);
+
+    for (const button of buttons) {
+      const buttonId = button.getAttribute('data-tab-group-button-id')!;
+
+      button.addEventListener('click', () => {
+        if (groupId) {
+          fetch('/api/tabs-sync', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ owner, repository, domain, groupId, buttonId }),
+          });
+        }
+
+        for (const button of buttons) setButtonState(button, buttonId);
+        for (const pane of panes) setPaneState(pane, buttonId);
+
+        for (const group of groups) {
+          const buttons = getButtons(group);
+          const panes = getPanes(group);
+
+          for (const button of buttons) setButtonState(button, buttonId);
+          for (const pane of panes) setPaneState(pane, buttonId);
+        }
+      });
+    }
+  }
+</script>
 {
   config.googleAnalytics && (
     <script async src={`https://www.googletagmanager.com/gtag/js?id=${config.googleAnalytics}`} />
@@ -42,4 +189,4 @@ const { domain, config } = context.get();
   config.plausibleAnalytics && domain && (
     <script slot="head" defer data-domain={domain} src="https://plausible.io/js/plausible.js" />
   )
-}
\ No newline at end of file
+}
diff --git a/website-v3/src/components/Search.astro b/website-v3/src/components/Search.astro
index d688986f..195ada83 100644
--- a/website-v3/src/components/Search.astro
+++ b/website-v3/src/components/Search.astro
@@ -1,18 +1,8 @@
 ---
 import { MagnifyingGlassIcon } from './icons';
-
-type Props = {
-  appId: string;
-  apiKey: string;
-  indexName: string;
-};
-
-const { appId, apiKey, indexName } = Astro.props;
-
-// TODO: improve styling
 ---
 
-<div data-docsearch data-appId={appId} data-apiKey={apiKey} data-indexName={indexName}></div>
+<div data-docsearch></div>
 <button
   data-docsearch-override
   class="w-full bg-gradient-to-b from-gray-100 to-gray-100 dark:from-zinc-800/80 dark:to-zinc-800/40 flex items-center rounded px-4 py-2 border dark:border-zinc-800 hover:border-zinc-700/30 dark:hover:border-zinc-700/50 gap-2 text-sm text-gray-500 dark:text-white/70 dark:hover:text-white/90 transition"
@@ -24,23 +14,24 @@ const { appId, apiKey, indexName } = Astro.props;
 <style is:global></style>
 <script>
   import docsearch from '@docsearch/js';
-
-  const element = document.querySelector('div[data-docsearch]') as HTMLDivElement;
-  const override = document.querySelector('button[data-docsearch-override]') as HTMLButtonElement;
-
-  docsearch({
-    container: element,
-    appId: element.dataset.appid!,
-    indexName: element.dataset.indexname!,
-    apiKey: element.dataset.apikey!,
-  });
-
-  // Once triggered, get the native docsearch button
-  const button = element.querySelector('button.DocSearch') as HTMLButtonElement;
-
-  // Hide it
-  button.style.display = 'none';
-
-  // Then attach our own button to the native one
-  override.addEventListener('click', () => button.click());
+  import type { Context } from 'src/context';
+
+  const { config } = (window as any).docs_page as Context;
+
+  if (config.docsearch) {
+    const element = document.querySelector('div[data-docsearch]') as HTMLDivElement;
+    const override = document.querySelector('button[data-docsearch-override]') as HTMLButtonElement;
+    
+    docsearch({
+      container: element,
+      ...config.docsearch,
+    });
+
+    // Once triggered, get the native docsearch button and hide it.
+    const button = element.querySelector('button.DocSearch') as HTMLButtonElement;
+    button.style.display = 'none';
+
+    // Then attach our own button to the native one
+    override.addEventListener('click', () => button.click());
+  }
 </script>
diff --git a/website-v3/src/components/Styles.astro b/website-v3/src/components/Styles.astro
new file mode 100644
index 00000000..44efd502
--- /dev/null
+++ b/website-v3/src/components/Styles.astro
@@ -0,0 +1,14 @@
+<style is:global>
+  body.medium-zoom--opened .medium-zoom-overlay {
+    z-index: 999;
+    background-color: rgba(255, 255, 255, 0.95) !important;
+  }
+
+  html[data-theme='dark'] body.medium-zoom--opened .medium-zoom-overlay {
+    background-color: rgba(24, 24, 28, 0.95) !important;
+  }
+
+  body.medium-zoom--opened .medium-zoom-image--opened {
+    z-index: 9999;
+  }
+</style>
diff --git a/website-v3/src/components/ThemeToggle.astro b/website-v3/src/components/ThemeToggle.astro
index fb3c8a41..db89c1d7 100644
--- a/website-v3/src/components/ThemeToggle.astro
+++ b/website-v3/src/components/ThemeToggle.astro
@@ -1,21 +1,20 @@
 ---
-import context from 'src/context';
 import { MoonIcon, SunIcon } from './icons';
-
-const { owner, repository, domain } = context.get();
 ---
 
 <button data-theme-toggle class="relative w-6 h-6">
   <span data-theme-type="dark" class="hidden"><MoonIcon /></span>
   <span data-theme-type="light" class="hidden"><SunIcon /></span>
 </button>
-<script is:inline define:vars={{ owner, repository, domain }}>
+<script>
+  import type { Context } from 'src/context';
+  const { owner, repository, domain } = (window as any).docs_page as Context;
   const html = document.documentElement;
   const isDark = () => html.getAttribute('data-theme') === 'dark';
 
-  const toggle = document.querySelector('button[data-theme-toggle]');
-  const light = toggle.querySelector('span[data-theme-type="light"]');
-  const dark = toggle.querySelector('span[data-theme-type="dark"]');
+  const toggle = document.querySelector('button[data-theme-toggle]')!;
+  const light = toggle.querySelector('span[data-theme-type="light"]') as HTMLSpanElement;
+  const dark = toggle.querySelector('span[data-theme-type="dark"]') as HTMLSpanElement;
 
   function toggleElements() {
     if (isDark()) {
diff --git a/website-v3/src/components/icons.tsx b/website-v3/src/components/icons.tsx
index 73c5ef3a..6cd9271a 100644
--- a/website-v3/src/components/icons.tsx
+++ b/website-v3/src/components/icons.tsx
@@ -45,3 +45,49 @@ export const MoonIcon = () => (
     />
   </svg>
 );
+
+export const PencilIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+    />
+  </svg>
+);
+
+export const InformationalCircleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const ExclaimationTriangleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const CheckCircleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
diff --git a/website-v3/src/components/mdx/CodeBlock.tsx b/website-v3/src/components/mdx/CodeBlock.tsx
new file mode 100644
index 00000000..aa7c586b
--- /dev/null
+++ b/website-v3/src/components/mdx/CodeBlock.tsx
@@ -0,0 +1,21 @@
+export interface CodeBlockProps extends React.HTMLProps<HTMLPreElement> {
+  raw: string;
+  html: string;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = props => {
+  return (
+    <div className="group relative">
+      <button
+        data-copy
+        data-copy-value={props.raw}
+        className="absolute top-2 right-2 rounded bg-black px-3 py-1 font-mono text-xs opacity-0 transition hover:bg-black/50 group-hover:opacity-100 data-[copied=true]:[&>span]:hidden"
+      >
+        Copy
+      </button>
+      <div dangerouslySetInnerHTML={{ __html: props.html }}></div>
+    </div>
+  );
+};
+
+export default CodeBlock;
diff --git a/website-v3/src/components/mdx/Image.tsx b/website-v3/src/components/mdx/Image.tsx
index 4c3d08ae..2acea8e8 100644
--- a/website-v3/src/components/mdx/Image.tsx
+++ b/website-v3/src/components/mdx/Image.tsx
@@ -1,18 +1,23 @@
+import context from 'src/context';
 import { getImagePath } from 'src/utils';
 
 interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  // TODO: zoom
   zoom?: boolean;
+  caption?: string;
 }
 
 const Image: React.FC<ImageProps> = props => {
+  const { config } = context.get();
   const src = getImagePath(props.src ?? '');
   const { width, height, ...other } = props;
 
+  const zoom = Boolean(props.zoom) || config.zoomImages;
+
   return (
     <figure>
       <img
         {...other}
+        data-zoom={`${zoom}`}
         src={src}
         loading="lazy"
         className="mx-auto"
@@ -21,6 +26,7 @@ const Image: React.FC<ImageProps> = props => {
           height: height ? parseInt(height.toString()) : 'inherit',
         }}
       />
+      {!!props.caption && <figcaption className="text-center">{props.caption}</figcaption>}
     </figure>
   );
 };
diff --git a/website-v3/src/components/mdx/Tabs.tsx b/website-v3/src/components/mdx/Tabs.tsx
new file mode 100644
index 00000000..3e085c26
--- /dev/null
+++ b/website-v3/src/components/mdx/Tabs.tsx
@@ -0,0 +1,84 @@
+import React, { isValidElement, PropsWithChildren } from 'react';
+import cx from 'classnames';
+import context from 'src/context';
+
+type TabsProps = {
+  groupId?: string;
+  defaultValue?: string;
+  values: {
+    label: string;
+    value: string;
+  }[];
+  children: React.ReactElement;
+};
+
+const Tabs: React.FC<TabsProps> = props => {
+  const ctx = context.get();
+  const { children, values, groupId, defaultValue } = props;
+
+  if (values.length === 0) {
+    return <div />;
+  }
+
+  const tabs = React.Children.map(children, child => {
+    if (isValidElement(child)) {
+      const el = child as React.ReactElement;
+      if (values.find(({ value }) => value === el.props.value)) {
+        return child;
+      }
+    }
+
+    return null;
+  }).filter(Boolean);
+
+  // Get the server rendered active state.
+  let active = ctx.tabs[groupId ?? ''] || defaultValue || values[0].value;
+
+  // Sanity check the active state (e.g. incase it's old or invalid)
+  if (!values.find(({ value }) => value === active)) {
+    active = values[0].value;
+  }
+
+  return (
+    <div data-tab-group data-tab-group-id={groupId}>
+      <div className="flex items-center gap-6 border-b-2 dark:border-slate-600/80">
+        {props.values.map(value => (
+          <button
+            key={value.value}
+            data-tab-group-button
+            data-tab-group-button-id={value.value}
+            aria-selected={value.value === active}
+            className={
+              'aria-selected:border-docs-theme relative top-[2px] whitespace-nowrap border-b-2 border-transparent py-2 font-semibold tracking-wide opacity-75 transition hover:opacity-100 aria-selected:opacity-100'
+            }
+          >
+            {value.label}
+          </button>
+        ))}
+      </div>
+      <div className="my-3">
+        {tabs.map((tab: React.ReactElement, index) => {
+          return (
+            <div
+              data-tab-group-pane
+              data-tab-group-pane-id={values[index].value}
+              key={tab.props.value}
+              data-tab={tab.props.value}
+              className={cx({
+                hidden: tab.props.value !== active,
+              })}
+            >
+              {tab}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const TabItem: React.FC<PropsWithChildren> = props => {
+  return <>{props.children}</>;
+};
+
+export default Tabs;
diff --git a/website-v3/src/components/mdx/Tweet.tsx b/website-v3/src/components/mdx/Tweet.tsx
new file mode 100644
index 00000000..28ea1edb
--- /dev/null
+++ b/website-v3/src/components/mdx/Tweet.tsx
@@ -0,0 +1,27 @@
+type TweetProps = {
+  id: string;
+  // String is legacy, boolean is new.
+  cards: string | boolean;
+  conversation: string | boolean;
+};
+
+const Tweet: React.FC<TweetProps> = props => {
+  if (!props.id) {
+    return <div />;
+  }
+
+  const cards = props.cards ? props.cards : false;
+  const conversation = props.conversation ? props.conversation : true;
+
+  return (
+    <div
+      className="my-6 mx-auto [&>div]:mx-auto [&>div]:overflow-hidden [&>div]:rounded-[14px] [&>div]:border-[1px] [&>div]:border-solid [&>div]:border-gray-200 [&>div]:shadow [&>div]:hover:shadow-lg [&>div]:dark:border-zinc-800"
+      data-tweet
+      data-tweet-id={props.id}
+      data-tweet-cards={cards === 'hidden' ? 'false' : `${cards}`}
+      data-tweet-conversation={conversation === 'none' ? 'false' : `${conversation}`}
+    />
+  );
+};
+
+export default Tweet;
diff --git a/website-v3/src/components/mdx/Zapp.tsx b/website-v3/src/components/mdx/Zapp.tsx
new file mode 100644
index 00000000..e318541d
--- /dev/null
+++ b/website-v3/src/components/mdx/Zapp.tsx
@@ -0,0 +1,30 @@
+type ZappProps = {
+  id: string;
+  lazy?: boolean;
+  theme?: 'light' | 'dark';
+};
+
+const Zapp: React.FC<ZappProps> = props => {
+  if (!props.id) {
+    return <div />;
+  }
+
+  const lazy = props.lazy === undefined ? false : props.lazy;
+  const theme = props.theme || 'dark';
+
+  return (
+    <div className="my-6">
+      <iframe
+        src={`http://zapp.run/embed/${props.id}?theme=${theme}&lazy=${lazy}`}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 0,
+          overflow: 'hidden',
+        }}
+      />
+    </div>
+  );
+};
+
+export default Zapp;
diff --git a/website-v3/src/components/mdx/callouts.tsx b/website-v3/src/components/mdx/callouts.tsx
new file mode 100644
index 00000000..afa527d5
--- /dev/null
+++ b/website-v3/src/components/mdx/callouts.tsx
@@ -0,0 +1,87 @@
+import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import cx from 'classnames';
+import {
+  CheckCircleIcon,
+  ExclaimationTriangleIcon,
+  InformationalCircleIcon,
+} from '@components/icons';
+
+type Props = {
+  icon: ReactElement;
+  children: ReactNode | undefined;
+  className: string;
+};
+
+const Callout: React.FC<Props> = props => {
+  return (
+    <div
+      className={cx(
+        'bg:bg-slate-600 mb-3 flex items-center gap-2 overflow-hidden px-5 py-4',
+        props.className,
+      )}
+    >
+      <span className="h-6 w-6">{props.icon}</span>
+      <span>{props.children}</span>
+    </div>
+  );
+};
+
+export const Info: React.FC<PropsWithChildren> = props => {
+  return (
+    <Callout
+      icon={
+        <span>
+          <InformationalCircleIcon />
+        </span>
+      }
+      className=""
+    >
+      {props.children}
+    </Callout>
+  );
+};
+
+export const Warning: React.FC<PropsWithChildren> = props => {
+  return (
+    <Callout
+      icon={
+        <span>
+          <ExclaimationTriangleIcon />
+        </span>
+      }
+      className=""
+    >
+      {props.children}
+    </Callout>
+  );
+};
+
+export const Error: React.FC<PropsWithChildren> = props => {
+  return (
+    <Callout
+      icon={
+        <span>
+          <ExclaimationTriangleIcon />
+        </span>
+      }
+      className=""
+    >
+      {props.children}
+    </Callout>
+  );
+};
+
+export const Success: React.FC<PropsWithChildren> = props => {
+  return (
+    <Callout
+      icon={
+        <span>
+          <CheckCircleIcon />
+        </span>
+      }
+      className=""
+    >
+      {props.children}
+    </Callout>
+  );
+};
diff --git a/website-v3/src/context.ts b/website-v3/src/context.ts
index b76b6ea7..7c43790f 100644
--- a/website-v3/src/context.ts
+++ b/website-v3/src/context.ts
@@ -10,6 +10,8 @@ export type Context = {
   ref: string | undefined;
   // The relative path of the page (e.g. /getting-started)
   relativePath: string;
+  // The path to the page on github
+  githubPath: string;
   // The docs.json config file
   config: BundleConfig;
   // Frontmatter of the current page
@@ -24,6 +26,10 @@ export type Context = {
   baseBranch: GetBundleResponseSuccess['baseBranch'];
   // The source of the page contents
   source: GetBundleResponseSuccess['source'];
+  // The theme of the site
+  theme: 'light' | 'dark' | undefined;
+  // Any syncronized tabs (via groupId).
+  tabs: Record<string, string>;
 };
 
 const store = map<Context>();
diff --git a/website-v3/src/layouts/Footer.astro b/website-v3/src/layouts/Footer.astro
new file mode 100644
index 00000000..e4225a90
--- /dev/null
+++ b/website-v3/src/layouts/Footer.astro
@@ -0,0 +1,29 @@
+---
+import context from 'src/context';
+import { PencilIcon } from '@components/icons';
+
+const { githubPath } = context.get();
+---
+
+<footer class="border-t dark:border-slate-800/80 py-12 mt-12 text-sm flex items-center">
+  <div>
+    <a
+      class="opacity-75 hover:opacity-100 transition"
+      href="https://docs.page"
+      target="_blank"
+      rel="noopener"
+    >
+      Powered by docs.page
+    </a>
+  </div>
+  <div class="flex-1 flex justify-end">
+    <a
+      class="opacity-75 hover:opacity-100 transition inline-flex items-center gap-1"
+      href={githubPath}
+      target="_blank"
+    >
+      <span class="w-4 h-4"><PencilIcon /></span>
+      <span>Edit this page</span>
+    </a>
+  </div>
+</footer>
diff --git a/website-v3/src/layouts/Header.astro b/website-v3/src/layouts/Header.astro
index 2802fb3e..976d9f46 100644
--- a/website-v3/src/layouts/Header.astro
+++ b/website-v3/src/layouts/Header.astro
@@ -23,13 +23,22 @@ const logoDark = getImagePath(config.logoDark);
               <img
                 alt="Logo"
                 class:list={['inline-block h-[30px]', { 'dark:hidden': !!logoDark }]}
+                src={getImagePath(logoLight)}
+              />
+            )
+          }
+          {
+            !!logoDark && (
+              <img
+                alt="Logo"
+                class="hidden h-[30px] dark:inline-block"
+                src={getImagePath(logoDark)}
               />
             )
           }
-          {!!logoDark && <img alt="Logo" class="hidden h-[30px] dark:inline-block" />}
           {
             !logoLight && !logoDark && (
-              <span class="text-2xl font-bold">{config.name || `${owner}/${repository}`}</span>
+              <span class="text-xl font-bold">{config.name || `${owner}/${repository}`}</span>
             )
           }
         </Link>
@@ -39,7 +48,7 @@ const logoDark = getImagePath(config.logoDark);
           'lg:w-64 xl:w-80': !!config.docsearch,
         }}
       >
-        {!!config.docsearch && <Search {...config.docsearch} />}
+        {!!config.docsearch && <Search />}
       </div>
       <div class="flex-1 flex items-center justify-end">
         <ThemeToggle />
diff --git a/website-v3/src/layouts/Root.astro b/website-v3/src/layouts/Root.astro
index 28399528..1216a06f 100644
--- a/website-v3/src/layouts/Root.astro
+++ b/website-v3/src/layouts/Root.astro
@@ -1,4 +1,6 @@
 ---
+import context from 'src/context';
+
 export interface Props {
   // Sets the <title> tag of the page
   title?: string;
@@ -9,14 +11,10 @@ export interface Props {
 }
 
 const { title = '', description = '', image = '', author = '' } = Astro.props;
-const theme = Astro.cookies.get('theme').value;
+const { theme } = context.get();
 ---
 
-<html
-  class:list={{
-    dark: !!theme && theme === 'dark',
-  }}
->
+<html data-theme={!!theme && theme === 'dark' ? 'dark' : ''}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/website-v3/src/layouts/Sidebar.astro b/website-v3/src/layouts/Sidebar.astro
index 06ca9897..1cd9bb7f 100644
--- a/website-v3/src/layouts/Sidebar.astro
+++ b/website-v3/src/layouts/Sidebar.astro
@@ -28,7 +28,7 @@ const sidebar = context.get().config.sidebar || [];
         return (
           <li class="my-8">
             <h5 class="mb-3 block font-semibold tracking-wide">{title}</h5>
-            <ul class="space-y-2 border-l border-slate-700">
+            <ul class="space-y-2 border-l dark:border-slate-700">
               {urlOrChildren.map(([title, url]) => (
                 <li>
                   <Link
diff --git a/website-v3/src/pages/[owner]/[repository]/[...path].astro b/website-v3/src/pages/[owner]/[repository]/[...path].astro
index 1c68feda..7468a278 100644
--- a/website-v3/src/pages/[owner]/[repository]/[...path].astro
+++ b/website-v3/src/pages/[owner]/[repository]/[...path].astro
@@ -1,11 +1,13 @@
 ---
 import Root from '@layouts/Root.astro';
 import Header from '@layouts/Header.astro';
+import Footer from '@layouts/Footer.astro';
 import Sidebar from '@layouts/Sidebar.astro';
 import Navigation from '@layouts/Navigation.astro';
 
 import Meta from '@components/Meta.astro';
 import Scripts from '@components/Scripts.astro';
+import Styles from '@components/Styles.astro';
 import Links from '@components/Links.astro';
 import Markdown from '@components/Markdown';
 
@@ -15,100 +17,136 @@ import type { GetBundleResponse } from 'src/bundle';
 import { isExternalLink, replaceMoustacheVariables, ensureLeadingSlash } from 'src/utils';
 import Theme from '@components/Theme.astro';
 import domains from '../../../../../domains.json';
+import { trackPageRequest } from 'src/plausible';
 
+let status: GetBundleResponse['status'] = 404;
 let { owner, repository, path } = Astro.params;
 let ref: string | undefined;
 
-// TODO keep URL but show 404 page
-if (!owner || !repository) {
-  return Astro.redirect('/404');
-}
+if (owner && repository) {
+  // Check if the repo includes a ref (invertase/foo~bar)
+  if (repository.includes('~')) {
+    [repository, ref] = repository.split('~');
+  }
 
-// Check if the repo includes a ref (invertase/foo~bar)
-if (repository.includes('~')) {
-  [repository, ref] = repository.split('~');
-}
+  let bundle: GetBundleResponse['bundle'];
 
-let status: GetBundleResponse['status'];
-let bundle: GetBundleResponse['bundle'];
-
-try {
-  const response = await getBundle({
-    owner,
-    repository,
-    ref,
-    path,
-  });
-
-  status = response.status;
-  bundle = response.bundle;
-} catch (e) {
-  console.error(e);
-}
+  try {
+    const response = await getBundle({
+      owner,
+      repository,
+      ref,
+      path,
+    });
 
-// Set the status code for the request
-Astro.response.status = status!;
+    status = response.status;
+    bundle = response.bundle;
+  } catch (e) {
+    console.error(e);
+  }
 
-if ('statusCode' in bundle!) {
-  // TODO handle 404
-  return Astro.redirect('/404');
-}
+  // Set the status code for the request
+  Astro.response.status = status!;
+
+  if ('statusCode' in bundle!) {
+    Astro.response.status = bundle!.statusCode;
+  } else {
+    // Handle a frontmatter redirect
+    const redirect = bundle!.frontmatter.redirect;
+    if (redirect && isExternalLink(redirect)) {
+      return Astro.redirect(redirect);
+    } else if (redirect) {
+      return Astro.redirect(`/${owner}/${repository}${redirect}`);
+    }
+
+    // Track the page request
+    await trackPageRequest(Astro.request);
 
-// Handle a frontmatter redirect
-const redirect = bundle!.frontmatter.redirect;
-if (redirect && isExternalLink(redirect)) {
-  return Astro.redirect(redirect);
-} else if (redirect) {
-  return Astro.redirect(`/${owner}/${repository}${redirect}`);
+    // Set the cache headers - see https://vercel.com/docs/concepts/edge-network/caching
+    Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate=59');
+
+    // Set the theme color
+    const theme = Astro.cookies.get('theme').value;
+
+    // Get any syncronized tabs
+    let tabs = {};
+    try {
+      tabs = Astro.cookies.get('tabs').json();
+    } catch {
+      // noop
+    }
+
+    const config = bundle!.config;
+    const source = bundle!.source;
+    const domain = domains.find(([, repository]) => repository === `${owner}/${repository}`)?.at(0);
+
+    // Set the context store.
+    context.set({
+      owner,
+      repository,
+      relativePath: ensureLeadingSlash(path || '/'),
+      githubPath: `https://github.com/${owner}/${repository}/edit/${
+        source.type === 'branch' && source.ref !== 'HEAD' ? source.ref : bundle!.baseBranch
+      }/docs/${path || 'index'}.mdx`,
+      ref,
+      config,
+      frontmatter: bundle!.frontmatter,
+      code: replaceMoustacheVariables(config.variables ?? {}, bundle!.code),
+      headings: bundle!.headings,
+      domain,
+      baseBranch: bundle!.baseBranch,
+      source,
+      theme: theme ? (theme === 'dark' ? 'dark' : 'light') : undefined,
+      tabs,
+    });
+  }
 }
 
-// Set the theme color
-const config = bundle!.config;
-const domain = domains.find(([, repository]) => repository === `${owner}/${repository}`)?.at(0);
-
-// Set the context store.
-context.set({
-  owner,
-  repository,
-  relativePath: ensureLeadingSlash(path || '/'),
-  ref,
-  config,
-  frontmatter: bundle!.frontmatter,
-  code: replaceMoustacheVariables(config.variables ?? {}, bundle!.code),
-  headings: bundle!.headings,
-  domain,
-  baseBranch: bundle!.baseBranch,
-  source: bundle!.source,
-});
+let state: 'success' | 'error' | 'not-found';
+switch (status) {
+  case 200:
+    state = 'success';
+    break;
+  case 404:
+    state = 'not-found';
+    break;
+  default:
+    state = 'error';
+    break;
+}
 
 // TODO: Handle status codes
 ---
 
-<Root>
-  <Meta slot="head" />
-  <Theme slot="head" fallback="#00bcd4" />
-  <Scripts slot="head" />
-  <Links slot="head" />
-  <Header />
-  <section class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
-    <div
-      class="hidden lg:block fixed z-20 top-16 bottom-0 left-[max(0px,calc(50%-46rem))] right-auto w-[19.5rem] pb-10 px-8 overflow-y-auto"
-    >
-      <Sidebar />
-    </div>
-    <div class="lg:pl-[20rem]">
-      <div class="flex flex-row pt-9 gap-12 items-stretch">
-        <div
-          class="relative flex-grow mx-auto xl:-ml-12 overflow-auto xl:pr-1 xl:pl-12 max-w-3xl xl:max-w-[47rem] text-slate-500 dark:text-slate-400"
-        >
-          <Markdown />
+{state === 'not-found' && <div>404</div>}
+{state === 'error' && <div>500</div>}
+{
+  state === 'success' && (
+    <Root>
+      <Meta slot="head" />
+      <Theme slot="head" fallback="#00bcd4" />
+      <Scripts slot="head" />
+      <Styles slot="head" />
+      <Links slot="head" />
+      <Header />
+      <section class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
+        <div class="fixed top-16 bottom-0 left-[max(0px,calc(50%-46rem))] right-auto z-20 hidden w-[19.5rem] overflow-y-auto px-8 pb-10 lg:block">
+          <Sidebar />
         </div>
-        <div class="hidden xl:flex flex-none z-10 pl-10 w-[19rem]">
-          <nav class="fixed text-sm leading-6 w-[16.5rem] h-[calc(100%-8rem)] overflow-y-auto">
-            <Navigation />
-          </nav>
+        <div class="lg:pl-[20rem]">
+          <div class="flex flex-row items-stretch gap-12 pt-9">
+            <div class="relative mx-auto max-w-3xl flex-grow overflow-auto text-slate-500 dark:text-slate-400 xl:-ml-12 xl:max-w-[47rem] xl:pr-1 xl:pl-12">
+              <Markdown />
+              <Footer />
+            </div>
+            <div class="z-10 hidden w-[17rem] flex-none pl-10 xl:flex">
+              <nav class="fixed h-[calc(100%-8rem)] w-[16.5rem] overflow-y-auto text-sm leading-6">
+                <Navigation />
+              </nav>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  </section>
-</Root>
+      </section>
+    </Root>
+  )
+}
diff --git a/website-v3/src/pages/api/tabs-sync.ts b/website-v3/src/pages/api/tabs-sync.ts
new file mode 100644
index 00000000..53c11739
--- /dev/null
+++ b/website-v3/src/pages/api/tabs-sync.ts
@@ -0,0 +1,51 @@
+import type { APIRoute } from 'astro';
+import { z } from 'zod';
+import cookie from 'cookie';
+
+const $Request = z.object({
+  owner: z.string(),
+  repository: z.string(),
+  domain: z.string().optional(),
+  groupId: z.string(),
+  buttonId: z.string(),
+});
+
+function safeJsonParse(value: string) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return {};
+  }
+}
+
+export const post: APIRoute = async function ({ request }) {
+  try {
+    const { owner, repository, domain, groupId, buttonId } = $Request.parse(await request.json());
+    const { tabs } = cookie.parse(request.headers.get('cookie') ?? '');
+
+    // Set an expiry for 10 years
+    const expires = new Date();
+    expires.setFullYear(expires.getFullYear() + 10);
+
+    const existing = safeJsonParse(tabs ?? `{}`);
+    existing[groupId] = buttonId;
+
+    return new Response(null, {
+      status: 200,
+      headers: new Headers({
+        'Set-Cookie': cookie.serialize('tabs', JSON.stringify(existing), {
+          expires: expires,
+          // If its a domain, set the cookie to the root path, otherwise set it to the owner/repository
+          path: domain ? '/' : `/${owner}/${repository}`,
+          // The cookie needs to be sent to the server to merge.
+          httpOnly: false,
+        }),
+      }),
+    });
+  } catch (e) {
+    console.error(e);
+    return new Response(null, {
+      status: 400,
+    });
+  }
+};
diff --git a/website-v3/src/pages/index.astro b/website-v3/src/pages/index.astro
index d394ffbc..cd37aef1 100644
--- a/website-v3/src/pages/index.astro
+++ b/website-v3/src/pages/index.astro
@@ -1,8 +1,9 @@
 ---
-import Root from "@layouts/Root.astro";
-import Homepage from "@layouts/homepage/index.astro";
-
+import Root from '@layouts/Root.astro';
+import Homepage from '@layouts/homepage/index.astro';
 ---
+
 <Root>
-	<Homepage />
+  <script slot="head" defer data-domain="docs.page" src="https://plausible.io/js/script.js"></script>
+  <Homepage />
 </Root>
diff --git a/website-v3/src/plausible.ts b/website-v3/src/plausible.ts
new file mode 100644
index 00000000..418d8416
--- /dev/null
+++ b/website-v3/src/plausible.ts
@@ -0,0 +1,22 @@
+import { getClientIp } from 'request-ip';
+
+export async function trackPageRequest(request: Request): Promise<void> {
+  try {
+    await fetch(`https://plausible.io/api/event`, {
+      method: 'POST',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        'User-Agent': request.headers.get('User-Agent') || '',
+        // @ts-expect-error - request-ip types use none-generic Request
+        'X-Forwarded-For': getClientIp(request) ?? '',
+      }),
+      body: JSON.stringify({
+        name: 'pageview',
+        url: request.url,
+        domain: 'docs.page',
+      }),
+    });
+  } catch (e) {
+    console.error('Failed to track page request', e);
+  }
+}