zudoku 0.12.1 → 0.13.0

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

@@ -1,5 +1,5 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as x, R as f } from "./SlotletProvider-D3UD5Go3.js";
+import { S as x, R as f } from "./SlotletProvider-BWwfPzgI.js";
 import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-CtVUl3eT.js";
 import { a as N, L as u, O as I } from "./index-BG0g4WW0.js";
 import { u as h, a as E, b as S } from "./ZudokuContext-cr-pTRY1.js";

package/lib/{zudoku.plugin-custom-page.js → zudoku.plugin-custom-pages.js}

@@ -8,6 +8,6 @@ const l = (s) => ({
   }))
 });
 export {
-  l as customPagePlugin
+  l as customPagesPlugin
 };
-//# sourceMappingURL=zudoku.plugin-custom-page.js.map
+//# sourceMappingURL=zudoku.plugin-custom-pages.js.map

package/lib/zudoku.plugin-custom-pages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zudoku.plugin-custom-pages.js","sources":["../src/lib/plugins/custom-pages/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { RouteObject } from \"react-router-dom\";\nimport { ProseClasses } from \"../../components/Markdown.js\";\nimport type { DevPortalPlugin, NavigationPlugin } from \"../../core/plugins.js\";\n\ntype CustomPagesConfig = Array<{\n  path: string;\n  element: ReactNode;\n}>;\n\nexport const customPagesPlugin = (\n  config: CustomPagesConfig,\n): DevPortalPlugin & NavigationPlugin => {\n  return {\n    getRoutes: (): RouteObject[] =>\n      config.map(({ path, element }) => ({\n        path,\n        // TODO: we should componentize prose pages\n        element: <div className={ProseClasses + \" max-w-full\"}>{element}</div>,\n      })),\n  };\n};\n"],"names":["customPagesPlugin","config","path","element","jsx","ProseClasses"],"mappings":";;AAUa,MAAAA,IAAoB,CAC/BC,OAEO;AAAA,EACL,WAAW,MACTA,EAAO,IAAI,CAAC,EAAE,MAAAC,GAAM,SAAAC,SAAe;AAAA,IACjC,MAAAD;AAAA;AAAA,IAEA,SAAUE,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAWC,IAAe,eAAgB,UAAQF,GAAA;AAAA,EAAA,EAChE;AAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -61,9 +61,9 @@
       "import": "./lib/zudoku.plugin-redirect.js",
       "types": "./dist/lib/plugins/redirect/index.d.ts"
     },
-    "./plugins/custom-page": {
-      "import": "./lib/zudoku.plugin-custom-page.js",
-      "types": "./dist/lib/plugins/custom-page/index.d.ts"
+    "./plugins/custom-pages": {
+      "import": "./lib/zudoku.plugin-custom-pages.js",
+      "types": "./dist/lib/plugins/custom-pages/index.d.ts"
     },
     "./plugins/search-inkeep": {
       "import": "./lib/zudoku.plugin-search-inkeep.js",

package/src/app/main.tsx

@@ -2,13 +2,13 @@ import { redirect, type RouteObject } from "react-router-dom";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
+import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import { DevPortal, Layout, RouterError } from "zudoku/components";
 import { isNavigationPlugin } from "zudoku/internal";
-import { customPagePlugin } from "zudoku/plugins/custom-page";
 import { inkeepSearchPlugin } from "zudoku/plugins/search-inkeep";
 import type { ZudokuConfig } from "../config/config.js";
 import { traverseSidebar } from "../lib/components/navigation/utils.js";
@@ -42,7 +42,7 @@ export const convertZudokuConfigToOptions = (
         },
       },
     },
-    slotlets: config.slotlets,
+    slotlets: config.UNSAFE_slotlets,
     metadata: {
       favicon: "https://cdn.zudoku.dev/logos/favicon.svg",
       title: "%s - Zudoku",
@@ -60,7 +60,7 @@ export const convertZudokuConfigToOptions = (
       ...configuredApiPlugins,
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
-      ...(config.customPages ? [customPagePlugin(config.customPages)] : []),
+      ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
       ...(configuredAuthProvider?.getAuthenticationPlugin
         ? [configuredAuthProvider.getAuthenticationPlugin()]
         : []),

package/src/lib/components/Banner.tsx

@@ -9,7 +9,7 @@ const COLOR_MAP = {
   tip: "bg-green-600",
   caution: "bg-orange-500",
   danger: "bg-rose-500",
-};
+} as const;
 
 export const Banner = () => {
   const { page } = useZudoku();
@@ -19,12 +19,22 @@ export const Banner = () => {
     return <style>{`:root { --banner-height: 0px; }`}</style>;
   }
 
+  const mappedColor =
+    page.banner.color && page.banner.color in COLOR_MAP
+      ? COLOR_MAP[page.banner.color as keyof typeof COLOR_MAP]
+      : !page.banner.color
+        ? "bg-primary"
+        : undefined;
+
+  const style = !mappedColor ? { backgroundColor: page.banner.color } : {};
+
   return (
     <div
       className={cn(
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
-        page.banner.color ? COLOR_MAP[page.banner.color] : "bg-primary",
+        mappedColor,
       )}
+      style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (

package/src/lib/components/Header.tsx

@@ -133,7 +133,9 @@ export const Header = memo(function HeaderInner() {
             </div>
           </div>
         </div>
+        <Slotlet name="top-navigation-before" />
         <TopNavigation />
+        <Slotlet name="top-navigation-after" />
       </div>
     </header>
   );

package/src/lib/components/Layout.tsx

@@ -49,6 +49,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       </Helmet>
       <Slotlet name="layout-before-head" />
       <Header />
+      <Slotlet name="layout-after-head" />
 
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
         <Suspense

package/src/lib/components/SlotletProvider.tsx

@@ -1,6 +1,15 @@
-import React, { type ReactElement, ReactNode, useContext } from "react";
+import React, {
+  type ComponentType,
+  type ReactElement,
+  ReactNode,
+  useContext,
+} from "react";
 import { isValidElementType } from "react-is";
-export type Slotlets = Record<string, ReactNode | ReactElement>;
+import { useLocation } from "react-router-dom";
+export type Slotlets = Record<
+  string,
+  ReactNode | ReactElement | ComponentType<SlotletComponentProps>
+>;
 
 const SlotletContext = React.createContext<Slotlets | undefined>({});
 
@@ -18,13 +27,20 @@ export const SlotletProvider = ({
   );
 };
 
+export type SlotletComponentProps = {
+  location: Location;
+};
+
 export const Slotlet = ({ name }: { name: string }) => {
   const context = useContext(SlotletContext);
   const componentOrElement = context?.[name];
+  const location = useLocation();
 
   if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement);
+    return React.createElement(componentOrElement, {
+      location,
+    });
   }
 
-  return componentOrElement;
+  return componentOrElement as ReactNode;
 };

package/src/lib/core/DevPortalContext.ts

@@ -51,7 +51,7 @@ type Page = Partial<{
   };
   banner?: {
     message: ReactNode;
-    color?: "note" | "tip" | "info" | "caution" | "danger";
+    color?: "note" | "tip" | "info" | "caution" | "danger" | (string & {});
     dismissible?: boolean;
   };
 }>;

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

@@ -58,9 +58,10 @@ export const createOperationSlug = (
   );
 };
 
-const cache = new LRUCache<string, Promise<OpenAPIDocument>>({
+const cache = new LRUCache<string, OpenAPIDocument>({
   ttl: 60 * 10 * 1000,
   ttlAutopurge: true,
+  fetchMethod: (_key, _oldValue, { context }) => validate(context as string),
 });
 
 const builder = new SchemaBuilder<{
@@ -429,16 +430,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
 
 const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
   const hash = hashit(input);
-
-  if (cache.has(hash)) {
-    return cache.get(hash)!;
-  }
-
-  const schema = validate(input);
-
-  cache.set(hash, schema);
-
-  return schema;
+  return await cache.forceFetch(hash, { context: input });
 };
 
 const SchemaSource = builder.enumType("SchemaType", {

package/src/lib/plugins/{custom-page → custom-pages}/index.tsx

@@ -3,13 +3,13 @@ import type { RouteObject } from "react-router-dom";
 import { ProseClasses } from "../../components/Markdown.js";
 import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
 
-type CustomPageConfig = Array<{
+type CustomPagesConfig = Array<{
   path: string;
   element: ReactNode;
 }>;
 
-export const customPagePlugin = (
-  config: CustomPageConfig,
+export const customPagesPlugin = (
+  config: CustomPagesConfig,
 ): DevPortalPlugin & NavigationPlugin => {
   return {
     getRoutes: (): RouteObject[] =>

package/dist/lib/plugins/custom-page/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/lib/plugins/custom-page/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAQ5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,MAAwB,EACY,EAAE;IACtC,OAAO;QACL,SAAS,EAAE,GAAkB,EAAE,CAC7B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;YACjC,IAAI;YACJ,2CAA2C;YAC3C,OAAO,EAAE,cAAK,SAAS,EAAE,YAAY,GAAG,aAAa,YAAG,OAAO,GAAO;SACvE,CAAC,CAAC;KACN,CAAC;AACJ,CAAC,CAAC"}

package/lib/zudoku.plugin-custom-page.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"zudoku.plugin-custom-page.js","sources":["../src/lib/plugins/custom-page/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { RouteObject } from \"react-router-dom\";\nimport { ProseClasses } from \"../../components/Markdown.js\";\nimport type { DevPortalPlugin, NavigationPlugin } from \"../../core/plugins.js\";\n\ntype CustomPageConfig = Array<{\n  path: string;\n  element: ReactNode;\n}>;\n\nexport const customPagePlugin = (\n  config: CustomPageConfig,\n): DevPortalPlugin & NavigationPlugin => {\n  return {\n    getRoutes: (): RouteObject[] =>\n      config.map(({ path, element }) => ({\n        path,\n        // TODO: we should componentize prose pages\n        element: <div className={ProseClasses + \" max-w-full\"}>{element}</div>,\n      })),\n  };\n};\n"],"names":["customPagePlugin","config","path","element","jsx","ProseClasses"],"mappings":";;AAUa,MAAAA,IAAmB,CAC9BC,OAEO;AAAA,EACL,WAAW,MACTA,EAAO,IAAI,CAAC,EAAE,MAAAC,GAAM,SAAAC,SAAe;AAAA,IACjC,MAAAD;AAAA;AAAA,IAEA,SAAUE,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAWC,IAAe,eAAgB,UAAQF,GAAA;AAAA,EAAA,EAChE;AAAA;"}