zudoku 0.3.0-dev.95 → 0.3.0-dev.96

package/lib/zudoku.plugin-markdown.js

@@ -6,7 +6,7 @@ const u = (t, e) => Object.entries(t).flatMap(([a, r]) => {
   return {
     path: s.at(-1) === "index" ? s.slice(0, -1).join("/") : o,
     lazy: async () => {
-      const { MdxPage: i } = await import("./MdxPage-3-PenZs2.js"), { default: p, ...c } = await r();
+      const { MdxPage: i } = await import("./MdxPage-oN3huD58.js"), { default: p, ...c } = await r();
       return {
         element: /* @__PURE__ */ m.jsx(
           i,

package/lib/zudoku.plugin-openapi.js

@@ -1,11 +1,11 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as l } from "./index-DGb_offs.js";
+import { o as l } from "./index-CtKkHGcd.js";
 import "./urql-DrBfkb92.js";
 import "./ZudokuContext-BIZ8zHbZ.js";
 import "zudoku/openapi-worker";
 import "./Combination-D-9IH0zy.js";
 import "./Markdown-B_Gax7at.js";
-import "./joinPath-VeNuJa7y.js";
+import "./joinPath-B7kNnUX4.js";
 import "./router-BiRCp01d.js";
 import "./index-7kcHaXD6.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.95",
+  "version": "0.3.0-dev.96",
   "type": "module",
   "files": [
     "dist",
@@ -185,7 +185,7 @@
   "scripts": {
     "build": "tsc --project tsconfig.json",
     "build:vite": "vite build && pnpm run hack:fix-worker-paths lib",
-    "build:standalone:vite": "vite build --config vite.standalone.config.ts",
+    "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
     "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
     "clean": "tsc --build --clean",

package/src/app/demo.tsx

@@ -1,46 +1,61 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-// Styles
-import "./main.css";
-
-// Logger
 import logger from "loglevel";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter } from "react-router-dom";
+import { Bootstrap } from "zudoku/components";
+import type { ZudokuConfig } from "../config/validators/validate.js";
+import { openApiPlugin } from "../lib/plugins/openapi/index.js";
 import "../lib/util/logInit.js";
+import "./main.css";
+import { getRoutesByConfig } from "./main.js";
 
-// Base React Component
-import { DevPortal } from "../lib/components/DevPortal.js";
+const apiUrl = new URL(window.location.href).searchParams.get("api-url");
 
-// Plugins
-import { openApiPlugin } from "../lib/plugins/openapi/index.js";
+if (!apiUrl) {
+  throw new Error(
+    "No API URL in query parameters. Please provide an API URL using the `api-url` query parameter.",
+  );
+}
 
-const apiUrl = new URL(window.location.href).searchParams.get("api-url");
 logger.info(`API URL: ${apiUrl}`);
 
+const root = document.getElementById("root");
+
+if (!root) {
+  throw new Error("No div found with id root");
+}
+
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <DevPortal
-      page={{
-        logo: {
-          src: {
-            light: "https://cdn.zudoku.dev/logos/icon.svg",
-            dark: "https://cdn.zudoku.dev/logos/icon.svg",
-          },
-        },
-        pageTitle: "Developer Portal",
-      }}
-      topNavigation={[
-        {
-          id: "demo",
-          label: "API Reference",
-        },
-      ]}
-      plugins={[
-        openApiPlugin({ type: "url", input: apiUrl!, navigationId: "demo" }),
-      ]}
-    />
-  </StrictMode>,
-);
+const config = {
+  page: {
+    logo: {
+      src: {
+        light: "https://cdn.zudoku.dev/logos/icon.svg",
+        dark: "https://cdn.zudoku.dev/logos/icon.svg",
+      },
+    },
+    pageTitle: "Developer Portal",
+  },
+  topNavigation: [
+    {
+      id: "/",
+      label: "API Reference",
+    },
+  ],
+  plugins: [
+    // Using the plugin directly because there's no config file to load in the virtual plugins
+    openApiPlugin({
+      type: "url",
+      input: apiUrl,
+      navigationId: "/",
+      inMemory: true,
+    }),
+  ],
+} satisfies ZudokuConfig;
+
+const routes = getRoutesByConfig(config);
+const router = createBrowserRouter(routes, {
+  basename: "/demo",
+});
+createRoot(root).render(<Bootstrap router={router} />);

package/src/app/main.tsx

@@ -49,6 +49,7 @@ export const convertZudokuConfigToOptions = (
       ...(configuredAuthProvider?.getAuthenticationPlugin
         ? [configuredAuthProvider.getAuthenticationPlugin()]
         : []),
+      ...(config.plugins ?? []),
     ],
   };
 };

package/src/app/standalone.tsx

@@ -1,20 +1,14 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-
-// Styles
-import "./main.css";
-
-// Logger
-import "../lib/util/logInit.js";
-
-// Base React Component
-import { DevPortal } from "../lib/components/DevPortal.js";
-
-// Plugins
+import { createBrowserRouter } from "react-router-dom";
+import { Bootstrap } from "zudoku/components";
+import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
+import "../lib/util/logInit.js";
+import "./main.css";
+import { getRoutesByConfig } from "./main.js";
 
-const root = document.querySelector("[data-api-url]");
-if (!root || root.tagName !== "DIV") {
+const root = document.querySelector("div[data-api-url]");
+if (!root) {
   throw new Error("No div found with attribute data-api-url");
 }
 
@@ -25,28 +19,35 @@ const logoUrl = root.getAttribute("data-logo-url");
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
-createRoot(root).render(
-  <StrictMode>
-    <DevPortal
-      page={{
-        logo: {
-          src: {
-            light: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
-            dark: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
-          },
-        },
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        pageTitle: pageTitle ?? "Developer Portal",
-      }}
-      topNavigation={[
-        {
-          id: "demo",
-          label: "API Reference",
-        },
-      ]}
-      plugins={[
-        openApiPlugin({ type: "url", input: apiUrl!, navigationId: "/" }),
-      ]}
-    />
-  </StrictMode>,
-);
+const config = {
+  page: {
+    logo: {
+      src: {
+        light: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
+        dark: logoUrl ?? "https://cdn.zudoku.dev/logos/icon.svg",
+      },
+    },
+    pageTitle: pageTitle ?? "Developer Portal",
+  },
+  topNavigation: [
+    {
+      id: "/",
+      label: "API Reference",
+    },
+  ],
+  plugins: [
+    // Using the plugin directly because there's no config file to load in the virtual plugins
+    openApiPlugin({
+      type: "url",
+      input: apiUrl!,
+      navigationId: "/",
+      inMemory: true,
+    }),
+  ],
+} satisfies ZudokuConfig;
+
+const routes = getRoutesByConfig(config);
+const router = createBrowserRouter(routes, {
+  basename: "/standalone",
+});
+createRoot(root).render(<Bootstrap router={router} />);

package/src/lib/components/Bootstrap.tsx

@@ -1,7 +1,8 @@
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
 import { StrictMode } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
+  type createStaticRouter,
   type StaticHandlerContext,
   StaticRouterProvider,
 } from "react-router-dom/server.js";
@@ -32,7 +33,7 @@ const BootstrapStatic = ({
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
-  router: ReturnType<typeof createBrowserRouter>;
+  router: ReturnType<typeof createStaticRouter>;
 }) => (
   <StrictMode>
     <HelmetProvider context={helmetContext}>

package/src/lib/components/Layout.tsx

@@ -31,6 +31,9 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
+      {import.meta.env.MODE === "standalone" && (
+        <style>{`:root { --top-nav-height: 0px; }`}</style>
+      )}
       <Helmet titleTemplate={meta?.title}>
         {meta?.description && (
           <meta name="description" content={meta.description} />

package/src/lib/util/joinPath.tsx

@@ -7,5 +7,5 @@ export const joinPath = (
     .join("/")
     .replace(/(^\/+|\/+$)/g, "");
 
-  return cleanPath ? `/${cleanPath}` : "";
+  return cleanPath ? `/${cleanPath}` : "/";
 };