zudoku 0.18.5 → 0.18.7

package/lib/zudoku.openapi-worker.js

@@ -2,7 +2,7 @@ const o = () => {
   const r = new SharedWorker(
     new URL(
       /* @vite-ignore */
-      "./assets/worker-BHClFO3A.js",
+      "./assets/worker-CyxLedqF.js",
       import.meta.url
     ),
     { type: "module" }

package/lib/zudoku.plugin-markdown.js

@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-B2FpJ9KC.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-HjFSZJQk.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-markdown.js","sources":["../src/lib/plugins/markdown/resolver.ts","../src/lib/plugins/markdown/index.tsx"],"sourcesContent":["import fs from \"fs\";\nimport path from \"path\";\nimport {\n  ZudokuConfig,\n  ZudokuDocsConfig,\n} from \"../../../config/validators/validate.js\";\n\nconst DEFAULT_DOCS_FILES = \"/pages/**/*.{md,mdx}\";\n\n// TODO: This should be dynamic based on the glob selector\nconst SUPPORTED_EXTENSIONS = [\".md\", \".mdx\"];\n\n/**\n * Utilities for resolving markdown file paths and routes\n */\nexport class DocResolver {\n  constructor(private config: ZudokuConfig) {}\n\n  fileMap = new Map<string, string>();\n\n  /**\n   * Gets the default docs config from the zudoku config\n   */\n  getDocsConfigs() {\n    const docsConfigs: ZudokuDocsConfig[] = this.config.docs\n      ? Array.isArray(this.config.docs)\n        ? this.config.docs\n        : [this.config.docs]\n      : [{ files: DEFAULT_DOCS_FILES }];\n\n    return docsConfigs;\n  }\n\n  /**\n   * Resolves the first matching file system path for a given docId\n   * @param docId - The docId to resolve\n   * @returns\n   */\n  resolveFilePath(docId: string) {\n    const docsConfigs = this.getDocsConfigs();\n    let fsPath: string | undefined;\n\n    docsConfigs.forEach(({ files: fileGlob }) => {\n      if (fsPath) {\n        return;\n      }\n      const rootDir = DocResolver.getRootDir(fileGlob);\n      for (const ext of SUPPORTED_EXTENSIONS) {\n        if (fsPath) {\n          return;\n        }\n        const checkPath = path.join(rootDir, `${docId}${ext}`);\n        if (fs.existsSync(checkPath)) {\n          fsPath = checkPath;\n        }\n      }\n    });\n\n    return fsPath;\n  }\n\n  /**\n   * Gets the root directory from a files glob\n   */\n  private static getRootDir(filesGlob: string) {\n    let rootDir = filesGlob.split(\"**\")[0];\n    if (!rootDir) {\n      throw new Error(\"Invalid files glob. Must have '**' in the path.\");\n    }\n    rootDir = rootDir.replace(\"/**\", \"/\");\n    return rootDir;\n  }\n\n  /**\n   * Resolves the route path for a given file system path\n   * @param options - The options to resolve the route path\n   * @returns The string route path\n   */\n  static resolveRoutePath({\n    filesGlob,\n    fsPath,\n  }: {\n    filesGlob: string;\n    fsPath: string;\n  }) {\n    const rootDir = this.getRootDir(filesGlob);\n    const re = new RegExp(`^${rootDir}(.*).mdx?`);\n    const match = fsPath.match(re);\n    const routePath = match?.at(1);\n    return routePath;\n  }\n}\n","import type { Toc } from \"@stefanprobst/rehype-extract-toc\";\nimport type { MDXProps } from \"mdx/types.js\";\nimport { RouteObject } from \"react-router-dom\";\nimport { ZudokuDocsConfig } from \"../../../config/validators/validate.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { DocResolver } from \"./resolver.js\";\n\nexport interface MarkdownPluginOptions extends ZudokuDocsConfig {\n  fileImports: Record<string, () => Promise<MDXImport>>;\n}\nexport type MarkdownPluginDefaultOptions = Pick<\n  Frontmatter,\n  \"toc\" | \"disablePager\"\n>;\n\nexport type Frontmatter = {\n  title?: string;\n  description?: string;\n  category?: string;\n  toc?: boolean;\n  disablePager?: boolean;\n};\n\nexport type MDXImport = {\n  tableOfContents: Toc;\n  frontmatter: Frontmatter;\n  default: (props: MDXProps) => JSX.Element;\n};\n\nexport const markdownPlugin = (\n  options: MarkdownPluginOptions[],\n): ZudokuPlugin => ({\n  getRoutes: () => {\n    const routeMap = new Map<string, RouteObject>();\n    options.forEach(({ fileImports, files, defaultOptions }) =>\n      Object.entries(fileImports).flatMap(([file, importPromise]) => {\n        const routePath = DocResolver.resolveRoutePath({\n          filesGlob: files,\n          fsPath: file,\n        });\n\n        if (!routePath) return [];\n\n        if (routeMap.has(routePath)) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Duplicate route path found for ${routePath}. Skipping file at '${file}'.`,\n          );\n          return [];\n        }\n\n        const route: RouteObject = {\n          path: routePath,\n          lazy: async () => {\n            const { MdxPage } = await import(\"./MdxPage.js\");\n            const { default: Component, ...props } = await importPromise();\n            return {\n              element: (\n                <MdxPage\n                  file={file}\n                  mdxComponent={Component}\n                  {...props}\n                  defaultOptions={defaultOptions}\n                />\n              ),\n            };\n          },\n        };\n        routeMap.set(routePath, route);\n      }),\n    );\n    return [...routeMap.values()];\n  },\n});\n"],"names":["DEFAULT_DOCS_FILES","SUPPORTED_EXTENSIONS","DocResolver","config","__publicField","docId","docsConfigs","fsPath","fileGlob","rootDir","ext","checkPath","path","fs","filesGlob","re","match","markdownPlugin","options","routeMap","fileImports","files","defaultOptions","file","importPromise","routePath","route","MdxPage","Component","props","jsx"],"mappings":";;;;;AAOA,MAAMA,IAAqB,wBAGrBC,IAAuB,CAAC,OAAO,MAAM;AAKpC,MAAMC,EAAY;AAAA,EACvB,YAAoBC,GAAsB;AAE1C,IAAAC,EAAA,qCAAc;AAFM,SAAA,SAAAD;AAAA,EAAuB;AAAA;AAAA;AAAA;AAAA,EAO3C,iBAAiB;AAOR,WANiC,KAAK,OAAO,OAChD,MAAM,QAAQ,KAAK,OAAO,IAAI,IAC5B,KAAK,OAAO,OACZ,CAAC,KAAK,OAAO,IAAI,IACnB,CAAC,EAAE,OAAOH,EAAA,CAAoB;AAAA,EAGpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAgBK,GAAe;AACvB,UAAAC,IAAc,KAAK;AACrB,QAAAC;AAEJ,WAAAD,EAAY,QAAQ,CAAC,EAAE,OAAOE,QAAe;AAC3C,UAAID;AACF;AAEI,YAAAE,IAAUP,EAAY,WAAWM,CAAQ;AAC/C,iBAAWE,KAAOT,GAAsB;AACtC,YAAIM;AACF;AAEI,cAAAI,IAAYC,EAAK,KAAKH,GAAS,GAAGJ,CAAK,GAAGK,CAAG,EAAE;AACjD,QAAAG,EAAG,WAAWF,CAAS,MAChBJ,IAAAI;AAAA,MAEb;AAAA,IAAA,CACD,GAEMJ;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,OAAe,WAAWO,GAAmB;AAC3C,QAAIL,IAAUK,EAAU,MAAM,IAAI,EAAE,CAAC;AACrC,QAAI,CAACL;AACG,YAAA,IAAI,MAAM,iDAAiD;AAEzD,WAAAA,IAAAA,EAAQ,QAAQ,OAAO,GAAG,GAC7BA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,iBAAiB;AAAA,IACtB,WAAAK;AAAA,IACA,QAAAP;AAAA,EAAA,GAIC;AACK,UAAAE,IAAU,KAAK,WAAWK,CAAS,GACnCC,IAAK,IAAI,OAAO,IAAIN,CAAO,WAAW,GACtCO,IAAQT,EAAO,MAAMQ,CAAE;AAEtB,WADWC,KAAA,gBAAAA,EAAO,GAAG;AAAA,EAE9B;AACF;AC9Da,MAAAC,IAAiB,CAC5BC,OACkB;AAAA,EAClB,WAAW,MAAM;AACT,UAAAC,wBAAe;AACb,WAAAD,EAAA;AAAA,MAAQ,CAAC,EAAE,aAAAE,GAAa,OAAAC,GAAO,gBAAAC,QACrC,OAAO,QAAQF,CAAW,EAAE,QAAQ,CAAC,CAACG,GAAMC,CAAa,MAAM;AACvD,cAAAC,IAAYvB,EAAY,iBAAiB;AAAA,UAC7C,WAAWmB;AAAA,UACX,QAAQE;AAAA,QAAA,CACT;AAEG,YAAA,CAACE,EAAW,QAAO;AAEnB,YAAAN,EAAS,IAAIM,CAAS;AAEhB,yBAAA;AAAA,YACN,kCAAkCA,CAAS,uBAAuBF,CAAI;AAAA,UAAA,GAEjE;AAGT,cAAMG,IAAqB;AAAA,UACzB,MAAMD;AAAA,UACN,MAAM,YAAY;AAChB,kBAAM,EAAE,SAAAE,EAAA,IAAY,MAAM,OAAO,uBAAc,GACzC,EAAE,SAASC,GAAW,GAAGC,EAAM,IAAI,MAAML;AACxC,mBAAA;AAAA,cACL,SACEM,gBAAAA,EAAA;AAAA,gBAACH;AAAA,gBAAA;AAAA,kBACC,MAAAJ;AAAA,kBACA,cAAcK;AAAA,kBACb,GAAGC;AAAA,kBACJ,gBAAAP;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAGN;AAAA,QAAA;AAEO,QAAAH,EAAA,IAAIM,GAAWC,CAAK;AAAA,MAAA,CAC9B;AAAA,IAAA,GAEI,CAAC,GAAGP,EAAS,OAAA,CAAQ;AAAA,EAC9B;AACF;"}
+{"version":3,"file":"zudoku.plugin-markdown.js","sources":["../src/lib/plugins/markdown/resolver.ts","../src/lib/plugins/markdown/index.tsx"],"sourcesContent":["import fs from \"fs\";\nimport path from \"path\";\nimport {\n  ZudokuConfig,\n  ZudokuDocsConfig,\n} from \"../../../config/validators/validate.js\";\n\nconst DEFAULT_DOCS_FILES = \"/pages/**/*.{md,mdx}\";\n\n// TODO: This should be dynamic based on the glob selector\nconst SUPPORTED_EXTENSIONS = [\".md\", \".mdx\"];\n\n/**\n * Utilities for resolving markdown file paths and routes\n */\nexport class DocResolver {\n  constructor(private config: ZudokuConfig) {}\n\n  fileMap = new Map<string, string>();\n\n  /**\n   * Gets the default docs config from the zudoku config\n   */\n  getDocsConfigs() {\n    const docsConfigs: ZudokuDocsConfig[] = this.config.docs\n      ? Array.isArray(this.config.docs)\n        ? this.config.docs\n        : [this.config.docs]\n      : [{ files: DEFAULT_DOCS_FILES }];\n\n    return docsConfigs;\n  }\n\n  /**\n   * Resolves the first matching file system path for a given docId\n   * @param docId - The docId to resolve\n   * @returns\n   */\n  resolveFilePath(docId: string) {\n    const docsConfigs = this.getDocsConfigs();\n    let fsPath: string | undefined;\n\n    docsConfigs.forEach(({ files: fileGlob }) => {\n      if (fsPath) {\n        return;\n      }\n      const rootDir = DocResolver.getRootDir(fileGlob);\n      for (const ext of SUPPORTED_EXTENSIONS) {\n        if (fsPath) {\n          return;\n        }\n        const checkPath = path.join(rootDir, `${docId}${ext}`);\n        if (fs.existsSync(checkPath)) {\n          fsPath = checkPath;\n        }\n      }\n    });\n\n    return fsPath;\n  }\n\n  /**\n   * Gets the root directory from a files glob\n   */\n  private static getRootDir(filesGlob: string) {\n    let rootDir = filesGlob.split(\"**\")[0];\n    if (!rootDir) {\n      throw new Error(\"Invalid files glob. Must have '**' in the path.\");\n    }\n    rootDir = rootDir.replace(\"/**\", \"/\");\n    return rootDir;\n  }\n\n  /**\n   * Resolves the route path for a given file system path\n   * @param options - The options to resolve the route path\n   * @returns The string route path\n   */\n  static resolveRoutePath({\n    filesGlob,\n    fsPath,\n  }: {\n    filesGlob: string;\n    fsPath: string;\n  }) {\n    const rootDir = this.getRootDir(filesGlob);\n    const re = new RegExp(`^${rootDir}(.*).mdx?`);\n    const match = fsPath.match(re);\n    const routePath = match?.at(1);\n    return routePath;\n  }\n}\n","import type { Toc } from \"@stefanprobst/rehype-extract-toc\";\nimport type { MDXProps } from \"mdx/types.js\";\nimport { RouteObject } from \"react-router-dom\";\nimport { ZudokuDocsConfig } from \"../../../config/validators/validate.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { DocResolver } from \"./resolver.js\";\n\nexport interface MarkdownPluginOptions extends ZudokuDocsConfig {\n  fileImports: Record<string, () => Promise<MDXImport>>;\n}\nexport type MarkdownPluginDefaultOptions = Pick<\n  Frontmatter,\n  \"toc\" | \"disablePager\"\n>;\n\nexport type Frontmatter = {\n  title?: string;\n  description?: string;\n  category?: string;\n  toc?: boolean;\n  disablePager?: boolean;\n};\n\nexport type MDXImport = {\n  tableOfContents: Toc;\n  frontmatter: Frontmatter;\n  excerpt?: string;\n  default: (props: MDXProps) => JSX.Element;\n};\n\nexport const markdownPlugin = (\n  options: MarkdownPluginOptions[],\n): ZudokuPlugin => ({\n  getRoutes: () => {\n    const routeMap = new Map<string, RouteObject>();\n    options.forEach(({ fileImports, files, defaultOptions }) =>\n      Object.entries(fileImports).flatMap(([file, importPromise]) => {\n        const routePath = DocResolver.resolveRoutePath({\n          filesGlob: files,\n          fsPath: file,\n        });\n\n        if (!routePath) return [];\n\n        if (routeMap.has(routePath)) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Duplicate route path found for ${routePath}. Skipping file at '${file}'.`,\n          );\n          return [];\n        }\n\n        const route: RouteObject = {\n          path: routePath,\n          lazy: async () => {\n            const { MdxPage } = await import(\"./MdxPage.js\");\n            const { default: Component, ...props } = await importPromise();\n            return {\n              element: (\n                <MdxPage\n                  file={file}\n                  mdxComponent={Component}\n                  {...props}\n                  defaultOptions={defaultOptions}\n                />\n              ),\n            };\n          },\n        };\n        routeMap.set(routePath, route);\n      }),\n    );\n    return [...routeMap.values()];\n  },\n});\n"],"names":["DEFAULT_DOCS_FILES","SUPPORTED_EXTENSIONS","DocResolver","config","__publicField","docId","docsConfigs","fsPath","fileGlob","rootDir","ext","checkPath","path","fs","filesGlob","re","match","markdownPlugin","options","routeMap","fileImports","files","defaultOptions","file","importPromise","routePath","route","MdxPage","Component","props","jsx"],"mappings":";;;;;AAOA,MAAMA,IAAqB,wBAGrBC,IAAuB,CAAC,OAAO,MAAM;AAKpC,MAAMC,EAAY;AAAA,EACvB,YAAoBC,GAAsB;AAE1C,IAAAC,EAAA,qCAAc;AAFM,SAAA,SAAAD;AAAA,EAAuB;AAAA;AAAA;AAAA;AAAA,EAO3C,iBAAiB;AAOR,WANiC,KAAK,OAAO,OAChD,MAAM,QAAQ,KAAK,OAAO,IAAI,IAC5B,KAAK,OAAO,OACZ,CAAC,KAAK,OAAO,IAAI,IACnB,CAAC,EAAE,OAAOH,EAAA,CAAoB;AAAA,EAGpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAgBK,GAAe;AACvB,UAAAC,IAAc,KAAK;AACrB,QAAAC;AAEJ,WAAAD,EAAY,QAAQ,CAAC,EAAE,OAAOE,QAAe;AAC3C,UAAID;AACF;AAEI,YAAAE,IAAUP,EAAY,WAAWM,CAAQ;AAC/C,iBAAWE,KAAOT,GAAsB;AACtC,YAAIM;AACF;AAEI,cAAAI,IAAYC,EAAK,KAAKH,GAAS,GAAGJ,CAAK,GAAGK,CAAG,EAAE;AACjD,QAAAG,EAAG,WAAWF,CAAS,MAChBJ,IAAAI;AAAA,MAEb;AAAA,IAAA,CACD,GAEMJ;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,OAAe,WAAWO,GAAmB;AAC3C,QAAIL,IAAUK,EAAU,MAAM,IAAI,EAAE,CAAC;AACrC,QAAI,CAACL;AACG,YAAA,IAAI,MAAM,iDAAiD;AAEzD,WAAAA,IAAAA,EAAQ,QAAQ,OAAO,GAAG,GAC7BA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,iBAAiB;AAAA,IACtB,WAAAK;AAAA,IACA,QAAAP;AAAA,EAAA,GAIC;AACK,UAAAE,IAAU,KAAK,WAAWK,CAAS,GACnCC,IAAK,IAAI,OAAO,IAAIN,CAAO,WAAW,GACtCO,IAAQT,EAAO,MAAMQ,CAAE;AAEtB,WADWC,KAAA,gBAAAA,EAAO,GAAG;AAAA,EAE9B;AACF;AC7Da,MAAAC,IAAiB,CAC5BC,OACkB;AAAA,EAClB,WAAW,MAAM;AACT,UAAAC,wBAAe;AACb,WAAAD,EAAA;AAAA,MAAQ,CAAC,EAAE,aAAAE,GAAa,OAAAC,GAAO,gBAAAC,QACrC,OAAO,QAAQF,CAAW,EAAE,QAAQ,CAAC,CAACG,GAAMC,CAAa,MAAM;AACvD,cAAAC,IAAYvB,EAAY,iBAAiB;AAAA,UAC7C,WAAWmB;AAAA,UACX,QAAQE;AAAA,QAAA,CACT;AAEG,YAAA,CAACE,EAAW,QAAO;AAEnB,YAAAN,EAAS,IAAIM,CAAS;AAEhB,yBAAA;AAAA,YACN,kCAAkCA,CAAS,uBAAuBF,CAAI;AAAA,UAAA,GAEjE;AAGT,cAAMG,IAAqB;AAAA,UACzB,MAAMD;AAAA,UACN,MAAM,YAAY;AAChB,kBAAM,EAAE,SAAAE,EAAA,IAAY,MAAM,OAAO,uBAAc,GACzC,EAAE,SAASC,GAAW,GAAGC,EAAM,IAAI,MAAML;AACxC,mBAAA;AAAA,cACL,SACEM,gBAAAA,EAAA;AAAA,gBAACH;AAAA,gBAAA;AAAA,kBACC,MAAAJ;AAAA,kBACA,cAAcK;AAAA,kBACb,GAAGC;AAAA,kBACJ,gBAAAP;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAGN;AAAA,QAAA;AAEO,QAAAH,EAAA,IAAIM,GAAWC,CAAK;AAAA,MAAA,CAC9B;AAAA,IAAA,GAEI,CAAC,GAAGP,EAAS,OAAA,CAAQ;AAAA,EAC9B;AACF;"}

package/lib/zudoku.plugin-openapi.js

@@ -1,5 +1,5 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as a } from "./index-C7SaIME0.js";
+import { o as a } from "./index-NNCc1BSK.js";
 import "./utils-DcpDOncX.js";
 import "lucide-react";
 import "./hook-hEqe7fPB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.18.5",
+  "version": "0.18.7",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -149,7 +149,7 @@
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.4",
-    "@zudoku/config": "0.18.5",
+    "@zudoku/config": "0.18.7",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.4",
     "autoprefixer": "10.4.20",
@@ -166,6 +166,7 @@
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.7.0",
     "gray-matter": "4.0.3",
+    "hast-util-to-string": "3.0.1",
     "http-terminator": "3.2.0",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.1",
@@ -202,7 +203,7 @@
     "ulidx": "2.4.1",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
-    "vaul": "1.1.0",
+    "vaul": "1.1.1",
     "vfile": "6.0.3",
     "vite": "5.4.9",
     "yaml": "2.6.0",

package/src/app/entry.client.tsx

@@ -6,6 +6,7 @@ import {
 } from "react-router-dom";
 import config from "virtual:zudoku-config";
 import "virtual:zudoku-theme.css";
+import "vite/modulepreload-polyfill";
 import { Bootstrap } from "zudoku/components";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -64,3 +65,11 @@ async function hydrate(routes: RouteObject[]) {
 
   hydrateRoot(root, <Bootstrap hydrate router={router} />);
 }
+
+// This is a workaround to avoid version skewing
+// See https://vite.dev/guide/build.html#load-error-handling
+// TODO: Implement a more advanced solution if there are CDN urls or e.g. Vercel Skew Protection
+window.addEventListener("vite:preloadError", (e) => {
+  e.preventDefault();
+  window.location.reload();
+});

package/src/app/entry.server.tsx

@@ -10,6 +10,7 @@ import {
   createStaticRouter,
 } from "react-router-dom/server.js";
 import "virtual:zudoku-theme.css";
+import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
 import type { FileWritingResponse } from "../vite/prerender.js";

package/src/lib/components/Layout.tsx

@@ -1,6 +1,6 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { PanelLeftIcon } from "lucide-react";
-import { Suspense, useEffect, useRef, type ReactNode } from "react";
+import { Suspense, useEffect, useRef, useState, type ReactNode } from "react";
 import { Outlet, useLocation, useNavigation } from "react-router-dom";
 import { useSpinDelay } from "spin-delay";
 import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
@@ -49,6 +49,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     delay: 300,
     minDuration: 500,
   });
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
 
   return (
     <>
@@ -70,8 +71,12 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
           <LoadingFallback />
         ) : (
           <Suspense fallback={<LoadingFallback />}>
-            <Drawer direction="left">
-              <Sidebar />
+            <Drawer
+              direction="left"
+              open={isDrawerOpen}
+              onOpenChange={(open) => setDrawerOpen(open)}
+            >
+              <Sidebar onRequestClose={() => setDrawerOpen(false)} />
               <div
                 className={cn(
                   "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",

package/src/lib/components/MobileTopNavigation.tsx

@@ -30,27 +30,27 @@ export const MobileTopNavigation = () => {
         </DrawerTrigger>
       </div>
       <DrawerContent
-        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none overflow-auto"
+        className="lg:hidden h-[100dvh] right-0 left-auto w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <VisuallyHidden>
-          <DrawerTitle>Navigation</DrawerTitle>
-        </VisuallyHidden>
-        <div className="flex p-4">
-          <Search />
-        </div>
-        <ul className="flex flex-col items-center gap-4 p-4">
-          <li>
-            <ThemeSwitch />
-          </li>
-          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-            <li key={item.label}>
-              <button onClick={() => setDrawerOpen(false)}>
-                <TopNavItem {...item} />
-              </button>
+        <div className="p-6 overflow-y-auto overscroll-none">
+          <VisuallyHidden>
+            <DrawerTitle>Navigation</DrawerTitle>
+          </VisuallyHidden>
+          <Search className="flex p-4" />
+          <ul className="flex flex-col items-center gap-4 p-4">
+            <li>
+              <ThemeSwitch />
             </li>
-          ))}
-        </ul>
+            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
+              <li key={item.label}>
+                <button onClick={() => setDrawerOpen(false)}>
+                  <TopNavItem {...item} />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
       </DrawerContent>
     </Drawer>
   );

package/src/lib/components/Search.tsx

@@ -3,7 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from "react";
 import { isSearchPlugin } from "../core/plugins.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 
-export const Search = () => {
+export const Search = ({ className }: { className?: string }) => {
   const ctx = useZudoku();
   const [isOpen, setIsOpen] = useState(false);
 
@@ -35,7 +35,7 @@ export const Search = () => {
   }
 
   return (
-    <>
+    <div className={className}>
       <button
         type="button"
         onClick={() => setIsOpen(true)}
@@ -55,6 +55,6 @@ export const Search = () => {
           onClose,
         })}
       </Suspense>
-    </>
+    </div>
   );
 };

package/src/lib/components/navigation/Sidebar.tsx

@@ -7,7 +7,11 @@ import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
-export const Sidebar = () => {
+export const Sidebar = ({
+  onRequestClose,
+}: {
+  onRequestClose?: () => void;
+}) => {
   const navRef = useRef<HTMLDivElement | null>(null);
   const navigation = useCurrentNavigation();
 
@@ -24,15 +28,21 @@ export const Sidebar = () => {
         <Slotlet name="zudoku-after-navigation" />
       </SidebarWrapper>
       <DrawerContent
-        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none overflow-auto"
+        className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <VisuallyHidden>
-          <DrawerTitle>Sidebar</DrawerTitle>
-        </VisuallyHidden>
-        {navigation.sidebar.map((item) => (
-          <SidebarItem key={item.label} item={item} />
-        ))}
+        <div className="p-6 overflow-y-auto overscroll-none">
+          <VisuallyHidden>
+            <DrawerTitle>Sidebar</DrawerTitle>
+          </VisuallyHidden>
+          {navigation.sidebar.map((item) => (
+            <SidebarItem
+              key={item.label}
+              item={item}
+              onRequestClose={onRequestClose}
+            />
+          ))}
+        </div>
       </DrawerContent>
     </>
   );

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -11,9 +11,11 @@ import { useIsCategoryOpen } from "./utils.js";
 export const SidebarCategory = ({
   category,
   level,
+  onRequestClose,
 }: {
   category: SidebarItemCategory;
   level: number;
+  onRequestClose?: () => void;
 }) => {
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
@@ -126,6 +128,7 @@ export const SidebarCategory = ({
                 ("href" in item ? item.href : "") +
                 item.label
               }
+              onRequestClose={onRequestClose}
               level={level + 1}
               item={item}
             />

package/src/lib/components/navigation/SidebarItem.tsx

@@ -37,17 +37,24 @@ export const DATA_ANCHOR_ATTR = "data-anchor";
 export const SidebarItem = ({
   item,
   level = 0,
+  onRequestClose,
 }: {
   item: SidebarItemType;
-  basePath?: string;
   level?: number;
+  onRequestClose?: () => void;
 }) => {
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
-      return <SidebarCategory category={item} level={level} />;
+      return (
+        <SidebarCategory
+          category={item}
+          level={level}
+          onRequestClose={onRequestClose}
+        />
+      );
     case "doc":
       return (
         <NavLink
@@ -55,6 +62,7 @@ export const SidebarItem = ({
             navigationListItem({ isActive, isTopLevel: level === 0 })
           }
           to={joinPath(item.id)}
+          onClick={onRequestClose}
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
@@ -79,6 +87,7 @@ export const SidebarItem = ({
             isTopLevel: level === 0,
             className: item.badge?.placement !== "start" && "justify-between",
           })}
+          onClick={onRequestClose}
         >
           {item.badge ? (
             <>
@@ -115,6 +124,7 @@ export const SidebarItem = ({
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
+          onClick={onRequestClose}
         >
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}

package/src/lib/oas/graphql/index.ts

@@ -390,6 +390,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
       resolve: (root) => root.info.description,
       nullable: true,
     }),
+    summary: t.string({
+      resolve: (root) => root.info.summary,
+      nullable: true,
+    }),
     paths: t.field({
       type: [PathItem],
       resolve: (root) =>

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -42,6 +42,7 @@ export const MdxPage = ({
   frontmatter = {},
   defaultOptions,
   tableOfContents,
+  excerpt,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
     file: string;
@@ -85,6 +86,7 @@ export const MdxPage = ({
     <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
       <Helmet>
         <title>{pageTitle}</title>
+        {excerpt && <meta name="description" content={excerpt} />}
       </Helmet>
       <div
         className={cn(

package/src/lib/plugins/markdown/index.tsx

@@ -24,6 +24,7 @@ export type Frontmatter = {
 export type MDXImport = {
   tableOfContents: Toc;
   frontmatter: Frontmatter;
+  excerpt?: string;
   default: (props: MDXProps) => JSX.Element;
 };
 

package/src/lib/plugins/openapi/OperationList.tsx

@@ -1,5 +1,6 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
@@ -81,6 +82,7 @@ const AllOperationsQuery = graphql(/* GraphQL */ `
   query AllOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       description
+      summary
       title
       url
       version
@@ -96,19 +98,77 @@ const AllOperationsQuery = graphql(/* GraphQL */ `
   }
 `);
 
+/**
+ * @description Clean up a commonmark formatted description for use in the meta
+ * description.
+ */
+function cleanDescription(
+  description: string,
+  maxLength: number = 160,
+): string {
+  if (!description) {
+    return "";
+  }
+
+  // Replace Markdown links [text](url) with just "text"
+  description = description.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
+
+  // Remove Markdown image syntax: ![alt](url)
+  description = description.replace(/!\[.*?\]\(.*?\)/g, "");
+
+  // Remove other Markdown syntax (e.g., **bold**, _italic_, `code`)
+  description = description.replace(/[_*`~]/g, "");
+
+  // Remove headings (# Heading), blockquotes (> Quote), and horizontal rules (--- or ***)
+  description = description.replace(/^(?:>|\s*#+|-{3,}|\*{3,})/gm, "");
+
+  // Remove any remaining formatting characters
+  description = description.replace(/[|>{}[\]]/g, "");
+
+  // Collapse multiple spaces and trim the text
+  description = description.replace(/\s+/g, " ").trim();
+
+  // Limit to the specified maximum length
+  description = description.substring(0, maxLength);
+
+  // Escape for HTML safety
+  return description
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
 export const OperationList = () => {
   const { input, type } = useOasConfig();
   const query = useCreateQuery(AllOperationsQuery, { input, type });
   const result = useSuspenseQuery(query);
-
+  const title = result.data.schema.title;
+  const summary = result.data.schema.summary;
+  const description = result.data.schema.description;
+  // The summary property is preferable here as it is a short description of
+  // the API, whereas the description property is typically longer and supports
+  // commonmark formatting, making it ill-suited for use in the meta description
+  const metaDescription = summary
+    ? summary
+    : description
+      ? cleanDescription(description)
+      : undefined;
   return (
     <div className="pt-[--padding-content-top]">
+      <Helmet>
+        <title>{title}</title>
+        {metaDescription && (
+          <meta name="description" content={metaDescription} />
+        )}
+      </Helmet>
       <div
         className={cn(ProseClasses, "mb-16 max-w-full prose-img:max-w-prose")}
       >
         <CategoryHeading>Overview</CategoryHeading>
         <Heading level={1} id="description" registerSidebarAnchor>
-          {result.data.schema.title}
+          {title}
         </Heading>
         <Markdown content={result.data.schema.description ?? ""} />
       </div>

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -17,7 +17,7 @@ const documents = {
     types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
-  "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
+  "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
@@ -41,7 +41,7 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n",
+  source: "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").AllOperationsDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -136,6 +136,7 @@ export type Schema = {
   title: Scalars["String"]["output"];
   url: Scalars["String"]["output"];
   version: Scalars["String"]["output"];
+  summary?: Maybe<Scalars["String"]["output"]>;
 };
 
 export type SchemaOperationsArgs = {
@@ -261,6 +262,7 @@ export type AllOperationsQuery = {
   schema: {
     __typename?: "Schema";
     description?: string | null;
+    summary?: string | null;
     title: string;
     url: string;
     version: string;
@@ -419,6 +421,7 @@ export const AllOperationsDocument = new TypedDocumentString(`
     query AllOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
     description
+    summary
     title
     url
     version