zudoku 0.39.2 → 0.39.4

package/lib/zudoku.plugin-api-catalog.js

@@ -1,9 +1,9 @@
-import { j as t } from "./jsx-runtime-CYK1ROHF.js";
+import { j as s } from "./jsx-runtime-CYK1ROHF.js";
 import { s as h } from "./index-LNp6rxyU.js";
 import { d as b, m as x } from "./chunk-HA7DTUK3-C4gP41vD.js";
 import { u as j, d as y, f as p } from "./hook-CqpVYDqN.js";
 import { H as v } from "./RouteGuard-CqZPoZYJ.js";
-import { L as N } from "./index-D6ktNq4i.js";
+import { L as N } from "./index-D48iOQvJ.js";
 import { H as S, M as w } from "./Markdown-aF5FdsNi.js";
 const H = ({
   items: r,
@@ -11,52 +11,45 @@ const H = ({
   label: d = "API Library",
   categoryLabel: a
 }) => {
-  const n = j(), i = b({ path: "/catalog/:category" }), s = i == null ? void 0 : i.params.category, l = y({
+  const n = j(), i = b({ path: "/catalog/:category" }), t = i == null ? void 0 : i.params.category, l = y({
     queryFn: () => o(r, { auth: n }),
     queryKey: ["catalogItems", n]
-  }), m = s ? { "data-pagefind-ignore": "all" } : {};
-  return /* @__PURE__ */ t.jsxs(
-    "section",
-    {
-      className: "pt-[--padding-content-top] pb-[--padding-content-bottom]",
-      ...m,
-      children: [
-        /* @__PURE__ */ t.jsx(v, { children: /* @__PURE__ */ t.jsxs("title", { children: [
-          a ? `${a} - ` : "",
-          d
-        ] }) }),
-        /* @__PURE__ */ t.jsxs("div", { className: "grid gap-4", children: [
-          /* @__PURE__ */ t.jsxs(S, { level: 2, children: [
-            d,
-            a && ` - ${a}`
-          ] }),
-          /* @__PURE__ */ t.jsx("div", { className: "grid grid-cols-2 gap-4", children: l.data.filter(
-            (e) => !s || e.categories.find(
-              (c) => c.tags.find((g) => u(c.label, g) === s)
+  }), m = t ? { "data-pagefind-ignore": "all" } : {};
+  return /* @__PURE__ */ s.jsxs("section", { className: "pt-[--padding-content-top]", ...m, children: [
+    /* @__PURE__ */ s.jsx(v, { children: /* @__PURE__ */ s.jsxs("title", { children: [
+      a ? `${a} - ` : "",
+      d
+    ] }) }),
+    /* @__PURE__ */ s.jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ s.jsxs(S, { level: 2, children: [
+        d,
+        a && ` - ${a}`
+      ] }),
+      /* @__PURE__ */ s.jsx("div", { className: "grid grid-cols-2 gap-4", children: l.data.filter(
+        (e) => !t || e.categories.find(
+          (c) => c.tags.find((u) => f(c.label, u) === t)
+        )
+      ).map((e) => /* @__PURE__ */ s.jsx(
+        N,
+        {
+          to: p(e.path),
+          className: "no-underline hover:!text-foreground",
+          children: /* @__PURE__ */ s.jsxs("div", { className: "border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal", children: [
+            /* @__PURE__ */ s.jsx("span", { className: "font-semibold", children: e.label }),
+            /* @__PURE__ */ s.jsx(
+              w,
+              {
+                className: "text-sm whitespace-pre-wrap mb-6 line-clamp-2",
+                content: e.description
+              }
             )
-          ).map((e) => /* @__PURE__ */ t.jsx(
-            N,
-            {
-              to: p(e.path),
-              className: "no-underline hover:!text-foreground",
-              children: /* @__PURE__ */ t.jsxs("div", { className: "border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal", children: [
-                /* @__PURE__ */ t.jsx("span", { className: "font-semibold", children: e.label }),
-                /* @__PURE__ */ t.jsx(
-                  w,
-                  {
-                    className: "text-sm whitespace-pre-wrap mb-6 line-clamp-2",
-                    content: e.description
-                  }
-                )
-              ] })
-            },
-            e.path
-          )) })
-        ] })
-      ]
-    }
-  );
-}, u = (r, o) => h(`${r}-${o}`), A = ({
+          ] })
+        },
+        e.path
+      )) })
+    ] })
+  ] });
+}, f = (r, o) => h(`${r}-${o}`), A = ({
   navigationId: r,
   items: o,
   label: d,
@@ -65,16 +58,16 @@ const H = ({
 }) => {
   const i = Object.fromEntries(
     a.flatMap(
-      (s) => [void 0, ...s.tags].map((l) => [
-        p(r, l ? u(s.label, l) : void 0),
+      (t) => [void 0, ...t.tags].map((l) => [
+        p(r, l ? f(t.label, l) : void 0),
         l
       ])
     )
   );
   return {
-    getSidebar: async (s) => {
+    getSidebar: async (t) => {
       if (!Object.keys(i).some(
-        (e) => x(e, s)
+        (e) => x(e, t)
       ))
         return [];
       const m = a.map((e) => ({
@@ -83,12 +76,12 @@ const H = ({
         collapsible: !1,
         items: e.tags.map((c) => ({
           type: "doc",
-          id: p(r, u(e.label, c)),
+          id: p(r, f(e.label, c)),
           label: c,
           badge: {
             label: String(
               o.filter(
-                (g) => g.categories.find((f) => f.tags.includes(c))
+                (u) => u.categories.find((g) => g.tags.includes(c))
               ).length
             ),
             color: "outline"
@@ -102,9 +95,9 @@ const H = ({
         badge: { label: String(o.length), color: "outline" }
       }), m;
     },
-    getRoutes: () => Object.entries(i).map(([s, l]) => ({
-      path: s,
-      element: /* @__PURE__ */ t.jsx(
+    getRoutes: () => Object.entries(i).map(([t, l]) => ({
+      path: t,
+      element: /* @__PURE__ */ s.jsx(
         H,
         {
           label: d,
@@ -119,6 +112,6 @@ const H = ({
 };
 export {
   A as apiCatalogPlugin,
-  u as getKey
+  f as getKey
 };
 //# sourceMappingURL=zudoku.plugin-api-catalog.js.map

package/lib/zudoku.plugin-api-catalog.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-api-catalog.js","sources":["../src/lib/plugins/api-catalog/Catalog.tsx","../src/lib/plugins/api-catalog/index.tsx"],"sourcesContent":["import { useSuspenseQuery } from \"@tanstack/react-query\";\nimport { Helmet } from \"@zudoku/react-helmet-async\";\nimport { useMatch } from \"react-router\";\nimport { Link } from \"zudoku/components\";\nimport { useAuthState } from \"../../authentication/state.js\";\nimport { Heading } from \"../../components/Heading.js\";\nimport { Markdown } from \"../../components/Markdown.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { type ApiCatalogPluginOptions, getKey } from \"./index.js\";\n\nexport const Catalog = ({\n  items,\n  filterCatalogItems = (items) => items,\n  label = \"API Library\",\n  categoryLabel,\n}: Omit<ApiCatalogPluginOptions, \"navigationId\"> & {\n  categoryLabel?: string;\n}) => {\n  const auth = useAuthState();\n  const match = useMatch({ path: \"/catalog/:category\" });\n  const activeCategory = match?.params.category;\n\n  const catalogItems = useSuspenseQuery({\n    queryFn: () => filterCatalogItems(items, { auth }),\n    queryKey: [\"catalogItems\", auth],\n  });\n\n  // Only index the overview page, ignore the rest\n  const dataSet = activeCategory ? { \"data-pagefind-ignore\": \"all\" } : {};\n\n  return (\n    <section\n      className=\"pt-[--padding-content-top] pb-[--padding-content-bottom]\"\n      {...dataSet}\n    >\n      <Helmet>\n        <title>\n          {categoryLabel ? `${categoryLabel} - ` : \"\"}\n          {label}\n        </title>\n      </Helmet>\n      <div className=\"grid gap-4\">\n        <Heading level={2}>\n          {label}\n          {categoryLabel && ` - ${categoryLabel}`}\n        </Heading>\n\n        <div className=\"grid grid-cols-2 gap-4\">\n          {catalogItems.data\n            .filter(\n              (api) =>\n                !activeCategory ||\n                api.categories.find((c) =>\n                  c.tags.find((t) => getKey(c.label, t) === activeCategory),\n                ),\n            )\n            .map((api) => (\n              <Link\n                to={joinUrl(api.path)}\n                className=\"no-underline hover:!text-foreground\"\n                key={api.path}\n              >\n                <div className=\"border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal\">\n                  <span className=\"font-semibold\">{api.label}</span>\n                  <Markdown\n                    className=\"text-sm whitespace-pre-wrap mb-6 line-clamp-2\"\n                    content={api.description}\n                  />\n                </div>\n              </Link>\n            ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n","import slugify from \"@sindresorhus/slugify\";\nimport { matchPath } from \"react-router\";\nimport type { SidebarItem } from \"../../../config/validators/SidebarSchema.js\";\nimport type { AuthState } from \"../../authentication/state.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { Catalog } from \"./Catalog.js\";\n\nexport const getKey = (category: string, tag: string) =>\n  slugify(`${category}-${tag}`);\n\nexport type ApiCatalogItem = {\n  path: string;\n  label: string;\n  description: string;\n  categories: CatalogCategory[];\n};\n\nexport type CatalogCategory = {\n  label: string;\n  tags: string[];\n};\n\nexport type ApiCatalogPluginOptions = {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n};\n\nexport type CatalogContext<ProviderData = unknown> = {\n  auth: AuthState<ProviderData>;\n};\n\nexport type filterCatalogItems<ProviderData = unknown> = (\n  items: ApiCatalogItem[],\n  { auth }: CatalogContext<ProviderData>,\n) => ApiCatalogItem[];\n\nexport const apiCatalogPlugin = ({\n  navigationId,\n  items,\n  label,\n  categories = [],\n  filterCatalogItems,\n}: {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n}): ZudokuPlugin => {\n  const paths = Object.fromEntries(\n    categories.flatMap((category) =>\n      [undefined, ...category.tags].map((tag) => [\n        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),\n        tag,\n      ]),\n    ),\n  );\n\n  return {\n    getSidebar: async (currentPath) => {\n      const matches = Object.keys(paths).some((path) =>\n        matchPath(path, currentPath),\n      );\n\n      if (!matches) {\n        return [];\n      }\n\n      const sidebar: SidebarItem[] = categories.map((category) => ({\n        type: \"category\" as const,\n        label: category.label,\n        collapsible: false,\n        items: category.tags.map((tag) => ({\n          type: \"doc\" as const,\n          id: joinUrl(navigationId, getKey(category.label, tag)),\n          label: tag,\n          badge: {\n            label: String(\n              items.filter((api) =>\n                api.categories.find((c) => c.tags.includes(tag)),\n              ).length,\n            ),\n            color: \"outline\" as const,\n          },\n        })),\n      }));\n\n      sidebar.unshift({\n        type: \"doc\" as const,\n        id: joinUrl(navigationId),\n        label: \"Overview\",\n        badge: { label: String(items.length), color: \"outline\" as const },\n      });\n\n      return sidebar;\n    },\n    getRoutes: () =>\n      Object.entries(paths).map(([path, tag]) => ({\n        path,\n        element: (\n          <Catalog\n            label={label}\n            categoryLabel={tag}\n            items={items}\n            filterCatalogItems={filterCatalogItems}\n            categories={categories}\n          />\n        ),\n      })),\n  };\n};\n"],"names":["Catalog","items","filterCatalogItems","label","categoryLabel","auth","useAuthState","match","useMatch","activeCategory","catalogItems","useSuspenseQuery","dataSet","jsxs","jsx","Helmet","Heading","api","t","getKey","Link","joinUrl","Markdown","category","tag","slugify","apiCatalogPlugin","navigationId","categories","paths","currentPath","path","matchPath","sidebar","c"],"mappings":"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"}
+{"version":3,"file":"zudoku.plugin-api-catalog.js","sources":["../src/lib/plugins/api-catalog/Catalog.tsx","../src/lib/plugins/api-catalog/index.tsx"],"sourcesContent":["import { useSuspenseQuery } from \"@tanstack/react-query\";\nimport { Helmet } from \"@zudoku/react-helmet-async\";\nimport { useMatch } from \"react-router\";\nimport { Link } from \"zudoku/components\";\nimport { useAuthState } from \"../../authentication/state.js\";\nimport { Heading } from \"../../components/Heading.js\";\nimport { Markdown } from \"../../components/Markdown.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { type ApiCatalogPluginOptions, getKey } from \"./index.js\";\n\nexport const Catalog = ({\n  items,\n  filterCatalogItems = (items) => items,\n  label = \"API Library\",\n  categoryLabel,\n}: Omit<ApiCatalogPluginOptions, \"navigationId\"> & {\n  categoryLabel?: string;\n}) => {\n  const auth = useAuthState();\n  const match = useMatch({ path: \"/catalog/:category\" });\n  const activeCategory = match?.params.category;\n\n  const catalogItems = useSuspenseQuery({\n    queryFn: () => filterCatalogItems(items, { auth }),\n    queryKey: [\"catalogItems\", auth],\n  });\n\n  // Only index the overview page, ignore the rest\n  const dataSet = activeCategory ? { \"data-pagefind-ignore\": \"all\" } : {};\n\n  return (\n    <section className=\"pt-[--padding-content-top]\" {...dataSet}>\n      <Helmet>\n        <title>\n          {categoryLabel ? `${categoryLabel} - ` : \"\"}\n          {label}\n        </title>\n      </Helmet>\n      <div className=\"grid gap-4\">\n        <Heading level={2}>\n          {label}\n          {categoryLabel && ` - ${categoryLabel}`}\n        </Heading>\n\n        <div className=\"grid grid-cols-2 gap-4\">\n          {catalogItems.data\n            .filter(\n              (api) =>\n                !activeCategory ||\n                api.categories.find((c) =>\n                  c.tags.find((t) => getKey(c.label, t) === activeCategory),\n                ),\n            )\n            .map((api) => (\n              <Link\n                to={joinUrl(api.path)}\n                className=\"no-underline hover:!text-foreground\"\n                key={api.path}\n              >\n                <div className=\"border h-full rounded-lg p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal\">\n                  <span className=\"font-semibold\">{api.label}</span>\n                  <Markdown\n                    className=\"text-sm whitespace-pre-wrap mb-6 line-clamp-2\"\n                    content={api.description}\n                  />\n                </div>\n              </Link>\n            ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n","import slugify from \"@sindresorhus/slugify\";\nimport { matchPath } from \"react-router\";\nimport type { SidebarItem } from \"../../../config/validators/SidebarSchema.js\";\nimport type { AuthState } from \"../../authentication/state.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { joinUrl } from \"../../util/joinUrl.js\";\nimport { Catalog } from \"./Catalog.js\";\n\nexport const getKey = (category: string, tag: string) =>\n  slugify(`${category}-${tag}`);\n\nexport type ApiCatalogItem = {\n  path: string;\n  label: string;\n  description: string;\n  categories: CatalogCategory[];\n};\n\nexport type CatalogCategory = {\n  label: string;\n  tags: string[];\n};\n\nexport type ApiCatalogPluginOptions = {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n};\n\nexport type CatalogContext<ProviderData = unknown> = {\n  auth: AuthState<ProviderData>;\n};\n\nexport type filterCatalogItems<ProviderData = unknown> = (\n  items: ApiCatalogItem[],\n  { auth }: CatalogContext<ProviderData>,\n) => ApiCatalogItem[];\n\nexport const apiCatalogPlugin = ({\n  navigationId,\n  items,\n  label,\n  categories = [],\n  filterCatalogItems,\n}: {\n  navigationId: string;\n  label: string;\n  categories?: CatalogCategory[];\n  items: ApiCatalogItem[];\n  filterCatalogItems?: filterCatalogItems;\n}): ZudokuPlugin => {\n  const paths = Object.fromEntries(\n    categories.flatMap((category) =>\n      [undefined, ...category.tags].map((tag) => [\n        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),\n        tag,\n      ]),\n    ),\n  );\n\n  return {\n    getSidebar: async (currentPath) => {\n      const matches = Object.keys(paths).some((path) =>\n        matchPath(path, currentPath),\n      );\n\n      if (!matches) {\n        return [];\n      }\n\n      const sidebar: SidebarItem[] = categories.map((category) => ({\n        type: \"category\" as const,\n        label: category.label,\n        collapsible: false,\n        items: category.tags.map((tag) => ({\n          type: \"doc\" as const,\n          id: joinUrl(navigationId, getKey(category.label, tag)),\n          label: tag,\n          badge: {\n            label: String(\n              items.filter((api) =>\n                api.categories.find((c) => c.tags.includes(tag)),\n              ).length,\n            ),\n            color: \"outline\" as const,\n          },\n        })),\n      }));\n\n      sidebar.unshift({\n        type: \"doc\" as const,\n        id: joinUrl(navigationId),\n        label: \"Overview\",\n        badge: { label: String(items.length), color: \"outline\" as const },\n      });\n\n      return sidebar;\n    },\n    getRoutes: () =>\n      Object.entries(paths).map(([path, tag]) => ({\n        path,\n        element: (\n          <Catalog\n            label={label}\n            categoryLabel={tag}\n            items={items}\n            filterCatalogItems={filterCatalogItems}\n            categories={categories}\n          />\n        ),\n      })),\n  };\n};\n"],"names":["Catalog","items","filterCatalogItems","label","categoryLabel","auth","useAuthState","match","useMatch","activeCategory","catalogItems","useSuspenseQuery","dataSet","jsxs","jsx","Helmet","Heading","api","t","getKey","Link","joinUrl","Markdown","category","tag","slugify","apiCatalogPlugin","navigationId","categories","paths","currentPath","path","matchPath","sidebar","c"],"mappings":"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"}

package/lib/zudoku.plugin-markdown.js

@@ -53,7 +53,7 @@ const P = (e) => ({
         const u = {
           path: r,
           lazy: async () => {
-            const { MdxPage: p } = await import("./MdxPage-JscVnWM8.js"), { default: f, ...l } = await i();
+            const { MdxPage: p } = await import("./MdxPage-Vw_dc9Yz.js"), { default: f, ...l } = await i();
             return {
               element: /* @__PURE__ */ d.jsx(
                 p,

package/lib/zudoku.plugin-openapi.js

@@ -3,7 +3,7 @@ import "lucide-react";
 import "./chunk-HA7DTUK3-C4gP41vD.js";
 import "./hook-CqpVYDqN.js";
 import "./ui/Button.js";
-import { U as a, o as e } from "./index-DsdAaiwx.js";
+import { U as a, o as e } from "./index-C1OzjGUK.js";
 export {
   a as UNTAGGED_PATH,
   e as openApiPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.39.2",
+  "version": "0.39.4",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -177,7 +177,7 @@
     "dotenv": "16.4.7",
     "embla-carousel-react": "8.5.2",
     "esm-loader-css": "^1.0.3",
-    "estree-util-value-to-estree": "3.3.2",
+    "estree-util-value-to-estree": "3.3.3",
     "express": "4.21.2",
     "fast-equals": "5.2.2",
     "glob": "11.0.1",
@@ -259,7 +259,7 @@
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.0.5",
-    "happy-dom": "17.1.1",
+    "happy-dom": "17.4.4",
     "mdast-util-mdx": "3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",

package/src/lib/components/Footer.tsx

@@ -0,0 +1,136 @@
+import { ExternalLink as ExternalLinkIcon } from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
+import type { FooterSocialIcons } from "../../config/validators/common.js";
+import { cn } from "../util/cn.js";
+import { AnchorLink } from "./AnchorLink.js";
+import { useZudoku } from "./index.js";
+import { Slotlet } from "./SlotletProvider.js";
+
+const SocialIcon = ({
+  icon,
+}: {
+  icon: (typeof FooterSocialIcons)[number] | ReactNode;
+}) => {
+  if (typeof icon === "string") {
+    return (
+      <img
+        src={`https://cdn.simpleicons.org/${icon}/000000/ffffff`}
+        className="size-5"
+        alt={icon}
+      />
+    );
+  }
+  return icon;
+};
+
+const isExternalUrl = (href: string) => /^https?:/.test(href);
+
+export const Footer = () => {
+  const { page } = useZudoku();
+  const footer = page?.footer;
+
+  if (!footer) return null;
+
+  return (
+    <footer className="border-t bg-background">
+      <div className="mx-auto max-w-screen-2xl px-4 lg:px-8 py-8 pt-20">
+        <div
+          className={cn("flex flex-row gap-8", {
+            "justify-center": !footer.position || footer.position === "center",
+            "justify-start": footer.position === "start",
+            "justify-end": footer.position === "end",
+          })}
+        >
+          <Slotlet name="footer-before" />
+          {footer.columns && (
+            <div
+              className="w-full md:max-w-screen-md grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
+              style={{ "--columns": footer.columns.length } as CSSProperties}
+            >
+              {footer.columns.map((column) => (
+                <div
+                  className={cn({
+                    "justify-self-center":
+                      !column.position || column.position === "center",
+                    "justify-self-start": column.position === "start",
+                    "justify-self-end": column.position === "end",
+                  })}
+                  key={column.title}
+                >
+                  <span className="text-sm font-semibold">{column.title}</span>
+                  <ul className="mt-4 space-y-2">
+                    {column.links.map((link) => {
+                      const className =
+                        "flex flex-row gap-1 items-center text-sm text-muted-foreground hover:text-accent-foreground";
+
+                      return (
+                        <li key={link.href}>
+                          {isExternalUrl(link.href) ? (
+                            <a
+                              href={link.href}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className={className}
+                            >
+                              <span>{link.label}</span>
+                              <ExternalLinkIcon size={12} />
+                            </a>
+                          ) : (
+                            <AnchorLink to={link.href} className={className}>
+                              <span>{link.label}</span>
+                            </AnchorLink>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+          <Slotlet name="footer-after" />
+        </div>
+        <div
+          className={cn(
+            "flex items-center justify-between",
+            footer.columns && "border-t mt-8 pt-8",
+          )}
+        >
+          {footer.logo && (
+            <>
+              <img
+                src={footer.logo.src.light}
+                alt={footer.logo.alt}
+                className="w-8 dark:hidden"
+                style={{ width: footer.logo.width }}
+              />
+              <img
+                src={footer.logo.src.dark}
+                alt={footer.logo.alt}
+                className="w-8 hidden dark:block"
+                style={{ width: footer.logo.width }}
+              />
+            </>
+          )}
+          {footer.copyright && (
+            <p className="text-sm text-muted-foreground">{footer.copyright}</p>
+          )}
+          <div className="flex items-center gap-2">
+            {footer.social?.map((social) => (
+              <a
+                key={social.href}
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-auto gap-2 flex text-muted-foreground hover:text-accent-foreground"
+              >
+                <SocialIcon icon={social.icon} />
+                {social.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

package/src/lib/components/Layout.tsx

@@ -5,6 +5,7 @@ import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
 import { Main } from "./Main.js";
 import { Slotlet } from "./SlotletProvider.js";
@@ -58,6 +59,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
           <Main>{children ?? <Outlet />}</Main>
         </Suspense>
       </div>
+      <Footer />
     </>
   );
 };

package/src/lib/components/Pagination.tsx

@@ -6,9 +6,11 @@ import { Button } from "./index.js";
 export const Pagination = ({
   prev,
   next,
+  className,
 }: {
   prev: { to: string; label: string } | undefined;
   next: { to: string; label: string } | undefined;
+  className?: string;
 }) => {
   const linkClass =
     "group transition-all p-5 space-x-1 transition-all hover:text-foreground";
@@ -16,8 +18,9 @@ export const Pagination = ({
   return (
     <div
       className={cn(
-        "flex my-8 -mx-4 text-muted-foreground font-semibold",
+        "flex -mx-4 text-muted-foreground font-semibold",
         prev ? "justify-between" : "justify-end",
+        className,
       )}
     >
       {prev && (

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

@@ -1,9 +1,6 @@
-import { useEffect, useRef } from "react";
-
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
-import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
@@ -14,40 +11,31 @@ export const Sidebar = ({
 }: {
   onRequestClose?: () => void;
   sidebar: SidebarItemType[];
-}) => {
-  const navRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const active = navRef.current?.querySelector('[aria-current="page"]');
-    scrollIntoViewIfNeeded(active ?? null);
-  }, []);
-
-  return (
-    <>
-      <SidebarWrapper ref={navRef}>
-        <Slotlet name="zudoku-before-navigation" />
+}) => (
+  <>
+    <SidebarWrapper>
+      <Slotlet name="zudoku-before-navigation" />
+      {sidebar.map((item) => (
+        <SidebarItem key={item.label} item={item} />
+      ))}
+      <Slotlet name="zudoku-after-navigation" />
+    </SidebarWrapper>
+    <DrawerContent
+      className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
+      aria-describedby={undefined}
+    >
+      <div className="p-4 overflow-y-auto overscroll-none">
+        <VisuallyHidden>
+          <DrawerTitle>Sidebar</DrawerTitle>
+        </VisuallyHidden>
         {sidebar.map((item) => (
-          <SidebarItem key={item.label} item={item} />
+          <SidebarItem
+            key={item.label}
+            item={item}
+            onRequestClose={onRequestClose}
+          />
         ))}
-        <Slotlet name="zudoku-after-navigation" />
-      </SidebarWrapper>
-      <DrawerContent
-        className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
-        aria-describedby={undefined}
-      >
-        <div className="p-4 overflow-y-auto overscroll-none">
-          <VisuallyHidden>
-            <DrawerTitle>Sidebar</DrawerTitle>
-          </VisuallyHidden>
-          {sidebar.map((item) => (
-            <SidebarItem
-              key={item.label}
-              item={item}
-              onRequestClose={onRequestClose}
-            />
-          ))}
-        </div>
-      </DrawerContent>
-    </>
-  );
-};
+      </div>
+    </DrawerContent>
+  </>
+);

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

@@ -1,30 +1,37 @@
-import { type PropsWithChildren, type Ref } from "react";
+import { useEffect, useRef, type PropsWithChildren } from "react";
 import { cn } from "../../util/cn.js";
+import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
 import { useZudoku } from "../context/ZudokuContext.js";
 import { PoweredByZudoku } from "./PoweredByZudoku.js";
 
 export const SidebarWrapper = ({
   children,
   className,
-  ref,
 }: PropsWithChildren<{
   className?: string;
-  ref?: Ref<HTMLDivElement>;
 }>) => {
   const { options } = useZudoku();
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const active = navRef.current?.querySelector('[aria-current="page"]');
+    scrollIntoViewIfNeeded(active ?? null);
+  }, []);
 
   return (
     <div className="grid sticky top-[--header-height] lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r">
       <nav
+        ref={navRef}
         className={cn(
           "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
-          "-mx-[--padding-nav-item] pb-6 pt-[--padding-content-top] scroll-pt-2 gap-1",
+          "-mx-[--padding-nav-item] pb-3 pt-[--padding-content-top] scroll-pt-2 gap-1",
+          // Revert the padding/margin on the first child
+          "-mt-2.5",
           className,
         )}
         style={{
           maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
         }}
-        ref={ref}
       >
         {children}
       </nav>

package/src/lib/core/ZudokuContext.ts

@@ -2,7 +2,11 @@ import type { QueryClient } from "@tanstack/react-query";
 import { createNanoEvents } from "nanoevents";
 import type { ReactNode } from "react";
 import type { Location } from "react-router";
-import type { TopNavigationItem } from "../../config/validators/common.js";
+import type { z } from "zod";
+import type {
+  FooterSchema,
+  TopNavigationItem,
+} from "../../config/validators/common.js";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
 import type { AuthenticationProvider } from "../authentication/authentication.js";
 import { type AuthState, useAuthState } from "../authentication/state.js";
@@ -59,7 +63,7 @@ type Page = Partial<{
       light: string;
       dark: string;
     };
-    width?: string;
+    width?: string | number;
     alt?: string;
   };
   banner?: {
@@ -67,6 +71,7 @@ type Page = Partial<{
     color?: "note" | "tip" | "info" | "caution" | "danger" | (string & {});
     dismissible?: boolean;
   };
+  footer?: z.infer<typeof FooterSchema>;
 }>;
 
 export type ZudokuContextOptions = {

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -29,10 +29,7 @@ export const Catalog = ({
   const dataSet = activeCategory ? { "data-pagefind-ignore": "all" } : {};
 
   return (
-    <section
-      className="pt-[--padding-content-top] pb-[--padding-content-bottom]"
-      {...dataSet}
-    >
+    <section className="pt-[--padding-content-top]" {...dataSet}>
       <Helmet>
         <title>
           {categoryLabel ? `${categoryLabel} - ` : ""}

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

@@ -96,7 +96,7 @@ export const MdxPage = ({
       <div
         className={cn(
           ProseClasses,
-          "max-w-full xl:w-full xl:max-w-3xl flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
+          "max-w-full xl:w-full xl:max-w-3xl flex-1 flex-shrink pt-[--padding-content-top]",
         )}
       >
         {(category || title) && (
@@ -114,10 +114,11 @@ export const MdxPage = ({
         />
         {!hidePager && (
           <>
-            <hr />
+            <hr className="my-10" />
             <Pagination
               prev={prev ? { to: prev.id, label: prev.label } : undefined}
               next={next ? { to: next.id, label: next.label } : undefined}
+              className="mb-4"
             />
           </>
         )}

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

@@ -308,13 +308,15 @@ export const OperationList = ({
       {/* px, -mx is so that `content-visibility` doesn't cut off overflown heading anchor links '#' */}
       <div className="px-6 mt-6 -mx-6 [content-visibility:auto]">
         {operations.map((fragment) => (
-          <OperationListItem
-            serverUrl={selectedServer}
-            key={fragment.slug}
-            operationFragment={fragment}
-          />
+          <div key={fragment.slug}>
+            <OperationListItem
+              serverUrl={selectedServer}
+              operationFragment={fragment}
+            />
+            <hr className="my-10" />
+          </div>
         ))}
-        <Pagination {...paginationProps} />
+        <Pagination className="mb-4" {...paginationProps} />
       </div>
     </div>
   );

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

@@ -35,7 +35,7 @@ export const OperationListItem = ({
   const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
 
   return (
-    <div className="border-b-2 mb-16 pb-16">
+    <div>
       {operation.deprecated && (
         <Badge variant="muted" className="text-xs mb-4">
           deprecated
@@ -52,7 +52,7 @@ export const OperationListItem = ({
           level={2}
           id={operation.slug}
           registerSidebarAnchor
-          className="break-all"
+          className="break-all col-span-full"
         >
           {operation.summary}
         </Heading>