@lukoweb/apitogo 0.1.24 → 0.1.37

package/src/app/main.tsx

@@ -10,6 +10,7 @@ import {
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
 import { configuredDocsPlugin } from "virtual:zudoku-docs-plugin";
+import { configuredModulesPlugins } from "virtual:zudoku-modules-plugin";
 import "virtual:zudoku-theme.css";
 import {
   configuredHeaderNavigation,
@@ -18,6 +19,10 @@ import {
 } from "virtual:zudoku-navigation";
 import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
 import type { ApitogoConfig } from "../config/config.js";
+import {
+  resolveModulesConfig,
+  getEffectiveRedirects,
+} from "../config/resolve-modules.js";
 import { BuildCheck } from "../lib/components/BuildCheck.js";
 import "./main.css";
 import { Meta } from "../lib/components/Meta.js";
@@ -77,6 +82,7 @@ export const convertApitogoConfigToOptions = (
       ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
+      ...configuredModulesPlugins,
       ...configuredApiCatalogPlugins,
       ...(config.plugins ?? []),
     ],
@@ -123,6 +129,7 @@ export const getRoutesByOptions = (
 };
 
 export const getRoutesByConfig = (config: ApitogoConfig): RouteObject[] => {
+  const resolvedModules = resolveModulesConfig(config);
   const options = convertApitogoConfigToOptions(config);
   const routes = getRoutesByOptions(
     options,
@@ -130,7 +137,7 @@ export const getRoutesByConfig = (config: ApitogoConfig): RouteObject[] => {
   );
 
   return [
-    ...createRedirectRoutes(config.redirects),
+    ...createRedirectRoutes(getEffectiveRedirects(config, resolvedModules)),
     {
       element: (
         <Apitogo {...options} env={import.meta.env}>

package/src/app/polyfills.ts

@@ -1,47 +1,47 @@
-if (typeof Object.groupBy === "undefined") {
-  Object.groupBy = <K extends PropertyKey, T>(
-    items: Iterable<T>,
-    keySelector: (item: T, index: number) => K,
-  ): Partial<Record<K, T[]>> => {
-    const result = {} as Record<K, T[]>;
-    let index = 0;
-
-    for (const item of items) {
-      const key = keySelector(item, index++);
-
-      result[key] ??= [];
-      result[key].push(item);
-    }
-    return result;
-  };
-}
-
-// Freeze --scrollbar-width when react-remove-scroll locks the body, preventing
-// the CSS calc(100vw - 100%) from recalculating to 0 and causing layout shift.
-if (typeof window !== "undefined") {
-  new MutationObserver(() => {
-    const locked = document.body.hasAttribute("data-scroll-locked");
-    const gap = locked
-      ? getComputedStyle(document.body).getPropertyValue(
-          "--removed-body-scroll-bar-size",
-        )
-      : "";
-
-    if (gap) {
-      document.documentElement.style.setProperty("--scrollbar-width", gap);
-    } else {
-      document.documentElement.style.removeProperty("--scrollbar-width");
-    }
-  }).observe(document.body, {
-    attributes: true,
-    attributeFilter: ["data-scroll-locked"],
-  });
-}
-
-if (typeof window !== "undefined" && !window.requestIdleCallback) {
-  window.requestIdleCallback = (cb: IdleRequestCallback) =>
-    Number(
-      setTimeout(() => cb({ didTimeout: false, timeRemaining: () => 50 }), 1),
-    );
-  window.cancelIdleCallback = (id: number) => clearTimeout(id);
-}
+if (typeof Object.groupBy === "undefined") {
+  Object.groupBy = <K extends PropertyKey, T>(
+    items: Iterable<T>,
+    keySelector: (item: T, index: number) => K,
+  ): Partial<Record<K, T[]>> => {
+    const result = {} as Record<K, T[]>;
+    let index = 0;
+
+    for (const item of items) {
+      const key = keySelector(item, index++);
+
+      result[key] ??= [];
+      result[key].push(item);
+    }
+    return result;
+  };
+}
+
+// Freeze --scrollbar-width when react-remove-scroll locks the body, preventing
+// the CSS calc(100vw - 100%) from recalculating to 0 and causing layout shift.
+if (typeof window !== "undefined") {
+  new MutationObserver(() => {
+    const locked = document.body.hasAttribute("data-scroll-locked");
+    const gap = locked
+      ? getComputedStyle(document.body).getPropertyValue(
+          "--removed-body-scroll-bar-size",
+        )
+      : "";
+
+    if (gap) {
+      document.documentElement.style.setProperty("--scrollbar-width", gap);
+    } else {
+      document.documentElement.style.removeProperty("--scrollbar-width");
+    }
+  }).observe(document.body, {
+    attributes: true,
+    attributeFilter: ["data-scroll-locked"],
+  });
+}
+
+if (typeof window !== "undefined" && !window.requestIdleCallback) {
+  window.requestIdleCallback = (cb: IdleRequestCallback) =>
+    Number(
+      setTimeout(() => cb({ didTimeout: false, timeRemaining: () => 50 }), 1),
+    );
+  window.cancelIdleCallback = (id: number) => clearTimeout(id);
+}

package/src/app/processRoutes.tsx

@@ -1,25 +1,51 @@
-import type { RouteObject } from "react-router";
-import { Layout } from "../lib/components/Layout.js";
-
-export const processRoutes = (
-  routes: RouteObject[],
-  layoutDisabled?: boolean,
-): RouteObject[] =>
-  routes.map((r) => {
-    const shouldWrapWithLayout = layoutDisabled
-      ? r.handle?.layout === "default"
-      : r.handle?.layout !== "none";
-
-    const route = r.children
-      ? {
-          ...r,
-          children: shouldWrapWithLayout
-            ? r.children
-            : processRoutes(r.children, true),
-        }
-      : r;
-
-    return shouldWrapWithLayout
-      ? { element: <Layout />, children: [route] }
-      : route;
-  });
+import type { RouteObject } from "react-router";
+import { LandingLayout } from "../lib/components/LandingLayout.js";
+import { Layout } from "../lib/components/Layout.js";
+
+type LayoutMode = "default" | "landing" | "none";
+
+const resolveLayoutComponent = (layout: LayoutMode | undefined) => {
+  if (layout === "landing") {
+    return LandingLayout;
+  }
+
+  return Layout;
+};
+
+const shouldWrapRoute = (
+  layout: LayoutMode | undefined,
+  layoutDisabled?: boolean,
+) => {
+  if (layout === "none") {
+    return false;
+  }
+
+  if (layoutDisabled) {
+    return layout === "default" || layout === "landing";
+  }
+
+  return true;
+};
+
+export const processRoutes = (
+  routes: RouteObject[],
+  layoutDisabled?: boolean,
+): RouteObject[] =>
+  routes.map((r) => {
+    const layout = r.handle?.layout as LayoutMode | undefined;
+    const wrapRoute = shouldWrapRoute(layout, layoutDisabled);
+    const LayoutComponent = wrapRoute ? resolveLayoutComponent(layout) : null;
+
+    const route = r.children
+      ? {
+          ...r,
+          children: LayoutComponent
+            ? r.children
+            : processRoutes(r.children, true),
+        }
+      : r;
+
+    return LayoutComponent
+      ? { element: <LayoutComponent />, children: [route] }
+      : route;
+  });

package/src/app/sentry.ts

@@ -1,24 +1,24 @@
-import * as Sentry from "@sentry/react";
-import { useEffect } from "react";
-import {
-  createRoutesFromChildren,
-  matchRoutes,
-  useLocation,
-  useNavigationType,
-} from "react-router";
-
-export const initSentry = ({ dsn }: { dsn: string }) => {
-  Sentry.init({
-    dsn,
-    integrations: [
-      Sentry.reactRouterV7BrowserTracingIntegration({
-        useEffect,
-        useLocation,
-        useNavigationType,
-        createRoutesFromChildren,
-        matchRoutes,
-      }),
-      Sentry.replayIntegration(),
-    ],
-  });
-};
+import * as Sentry from "@sentry/react";
+import { useEffect } from "react";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router";
+
+export const initSentry = ({ dsn }: { dsn: string }) => {
+  Sentry.init({
+    dsn,
+    integrations: [
+      Sentry.reactRouterV7BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+      Sentry.replayIntegration(),
+    ],
+  });
+};

package/src/app/standalone.html

@@ -1,23 +1,23 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="https://cdn.zudoku.dev/logos/favicon.svg"
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
-    />
-    <title>Zudoku</title>
-    <script type="module" crossorigin src="./main.js"></script>
-    <link rel="stylesheet" crossorigin href="./zudoku.css" />
-  </head>
-  <body>
-    <div
-      data-api-url="https://blue-sloth-main-afc3428.d2.zuplo.dev/schemas/rewiring-america"
-    ></div>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://cdn.zudoku.dev/logos/favicon.svg"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+    />
+    <title>Zudoku</title>
+    <script type="module" crossorigin src="./main.js"></script>
+    <link rel="stylesheet" crossorigin href="./zudoku.css" />
+  </head>
+  <body>
+    <div
+      data-api-url="https://blue-sloth-main-afc3428.d2.zuplo.dev/schemas/rewiring-america"
+    ></div>
+  </body>
+</html>

package/src/app/standalone.tsx

@@ -1,60 +1,60 @@
-import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router";
-import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
-import { Bootstrap } from "../lib/components/Bootstrap.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("div[data-api-url]");
-if (!root) {
-  throw new Error("No div found with attribute data-api-url");
-}
-
-const apiUrl = root.getAttribute("data-api-url");
-
-if (!apiUrl) {
-  throw new Error("No api url found");
-}
-
-const title = document.getElementsByTagName("title")[0]?.innerText;
-const logoUrl = root.getAttribute("data-logo-url");
-
-// IMPORTANT: This component must not contain tailwind classes
-// This directory is not processed by the tailwind plugin
-
-const config = {
-  site: {
-    logo: logoUrl
-      ? {
-          src: {
-            light: logoUrl,
-            dark: logoUrl,
-          },
-        }
-      : undefined,
-    title,
-  },
-  navigation: [
-    {
-      type: "link",
-      label: "API Reference",
-      to: "/",
-    },
-  ],
-  plugins: [
-    // Using the plugin directly because there's no config file to load in the virtual plugins
-    openApiPlugin({
-      type: "url",
-      input: apiUrl,
-      path: "/",
-    }),
-  ],
-} satisfies ZudokuConfig;
-
-const routes = getRoutesByConfig(config);
-const router = createBrowserRouter(routes, {
-  basename: window.location.pathname,
-});
-createRoot(root).render(<Bootstrap router={router} />);
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter } from "react-router";
+import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
+import { Bootstrap } from "../lib/components/Bootstrap.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("div[data-api-url]");
+if (!root) {
+  throw new Error("No div found with attribute data-api-url");
+}
+
+const apiUrl = root.getAttribute("data-api-url");
+
+if (!apiUrl) {
+  throw new Error("No api url found");
+}
+
+const title = document.getElementsByTagName("title")[0]?.innerText;
+const logoUrl = root.getAttribute("data-logo-url");
+
+// IMPORTANT: This component must not contain tailwind classes
+// This directory is not processed by the tailwind plugin
+
+const config = {
+  site: {
+    logo: logoUrl
+      ? {
+          src: {
+            light: logoUrl,
+            dark: logoUrl,
+          },
+        }
+      : undefined,
+    title,
+  },
+  navigation: [
+    {
+      type: "link",
+      label: "API Reference",
+      to: "/",
+    },
+  ],
+  plugins: [
+    // Using the plugin directly because there's no config file to load in the virtual plugins
+    openApiPlugin({
+      type: "url",
+      input: apiUrl,
+      path: "/",
+    }),
+  ],
+} satisfies ZudokuConfig;
+
+const routes = getRoutesByConfig(config);
+const router = createBrowserRouter(routes, {
+  basename: window.location.pathname,
+});
+createRoot(root).render(<Bootstrap router={router} />);

package/src/app/utils/createRedirectRoutes.ts

@@ -1,11 +1,11 @@
-import { redirect, type RouteObject } from "react-router";
-import type { ZudokuRedirect } from "../../config/validators/ZudokuConfig.js";
-import { joinUrl } from "../../lib/util/joinUrl.js";
-
-export const createRedirectRoutes = (
-  redirects?: ZudokuRedirect[],
-): RouteObject[] =>
-  (redirects ?? []).map((r) => ({
-    path: joinUrl(r.from),
-    loader: () => redirect(r.to, 301),
-  }));
+import { redirect, type RouteObject } from "react-router";
+import type { ZudokuRedirect } from "../../config/validators/ZudokuConfig.js";
+import { joinUrl } from "../../lib/util/joinUrl.js";
+
+export const createRedirectRoutes = (
+  redirects?: ZudokuRedirect[],
+): RouteObject[] =>
+  (redirects ?? []).map((r) => ({
+    path: joinUrl(r.from),
+    loader: () => redirect(r.to, 301),
+  }));

package/src/config/config.ts

@@ -15,6 +15,34 @@ export type ZudokuBuildConfig = BuildConfig;
 
 export type LoadedConfig = ConfigWithMeta;
 export type { ZudokuConfig as ApitogoConfig };
+export type {
+  ModulesConfig,
+  ResolvedModulesConfig,
+  ResolvedLandingContent,
+  ResolvedDashboardContent,
+  ResolvedProfileContent,
+  ResolvedPlansContent,
+  ResolvedLandingModule,
+  ResolvedUserPanelModule,
+  ResolvedDashboardModule,
+  ResolvedUserManagementModule,
+  ResolvedApiKeysModule,
+  ResolvedPlansModule,
+  DocsModuleConfig,
+  LandingModuleConfig,
+  LandingContentConfig,
+  LandingFeatureConfig,
+  LandingLinkConfig,
+  DashboardContentConfig,
+  ProfileContentConfig,
+  PlansContentConfig,
+  PlanTierConfig,
+  UserPanelModuleConfig,
+  DashboardModuleConfig,
+  UserManagementModuleConfig,
+  ApiKeysModuleConfig,
+  PlansModuleConfig,
+} from "./validators/ModulesSchema.js";
 
 export type ClerkAuthenticationConfig = Extract<
   AuthenticationConfig,
@@ -40,3 +68,7 @@ export type AzureB2CAuthenticationConfig = Extract<
   AuthenticationConfig,
   { type: "azureb2c" }
 >;
+export type DevPortalAuthenticationConfig = Extract<
+  AuthenticationConfig,
+  { type: "dev-portal" }
+>;

package/src/config/create-plugin.ts

@@ -1,71 +1,71 @@
-import {
-  isTransformConfigPlugin,
-  type ApitogoPlugin,
-} from "../lib/core/plugins.js";
-
-// Regex from stacktrace-parser for Node.js stack traces
-// https://github.com/errwischt/stacktrace-parser
-const NODE_STACK_REGEX =
-  /^\s*at (?:(?:\[object object\])?[^\\/]+(?: \[as \S+\])? )?\(?(.*?):(\d+)(?::(\d+))?\)?\s*$/i;
-
-const getCallerDir = () => {
-  const stack = new Error().stack;
-  if (!stack) return undefined;
-
-  // Stack frames: Error, getCallerDir, createPlugin, <caller>
-  const lines = stack.split("\n");
-  const callerLine = lines[3];
-  if (!callerLine) return undefined;
-
-  const match = callerLine.match(NODE_STACK_REGEX);
-  let filePath = match?.[1];
-  if (!filePath) return undefined;
-
-  if (filePath.startsWith("file://")) {
-    filePath = filePath.slice(7);
-  }
-
-  // Handle both forward and backslashes for cross-platform support
-  const lastSlash = Math.max(
-    filePath.lastIndexOf("/"),
-    filePath.lastIndexOf("\\"),
-  );
-  if (lastSlash === -1) return undefined;
-
-  return filePath.substring(0, lastSlash);
-};
-
-export const createPlugin = <TOptions extends unknown[]>(
-  factory: (...options: TOptions) => ApitogoPlugin,
-): ((...options: TOptions) => ApitogoPlugin) => {
-  const pluginDir = getCallerDir();
-
-  return (...options: TOptions) => {
-    const plugin = factory(...options);
-
-    if (!pluginDir) {
-      return plugin;
-    }
-
-    const originalTransformConfig = isTransformConfigPlugin(plugin)
-      ? plugin.transformConfig
-      : undefined;
-
-    return {
-      ...plugin,
-      transformConfig: async (context) => {
-        const result =
-          (await originalTransformConfig?.(context)) ?? context.config;
-
-        return {
-          ...result,
-          __pluginDirs: [
-            ...(context.config.__pluginDirs ?? []),
-            ...(result.__pluginDirs ?? []),
-            pluginDir,
-          ],
-        };
-      },
-    };
-  };
-};
+import {
+  isTransformConfigPlugin,
+  type ApitogoPlugin,
+} from "../lib/core/plugins.js";
+
+// Regex from stacktrace-parser for Node.js stack traces
+// https://github.com/errwischt/stacktrace-parser
+const NODE_STACK_REGEX =
+  /^\s*at (?:(?:\[object object\])?[^\\/]+(?: \[as \S+\])? )?\(?(.*?):(\d+)(?::(\d+))?\)?\s*$/i;
+
+const getCallerDir = () => {
+  const stack = new Error().stack;
+  if (!stack) return undefined;
+
+  // Stack frames: Error, getCallerDir, createPlugin, <caller>
+  const lines = stack.split("\n");
+  const callerLine = lines[3];
+  if (!callerLine) return undefined;
+
+  const match = callerLine.match(NODE_STACK_REGEX);
+  let filePath = match?.[1];
+  if (!filePath) return undefined;
+
+  if (filePath.startsWith("file://")) {
+    filePath = filePath.slice(7);
+  }
+
+  // Handle both forward and backslashes for cross-platform support
+  const lastSlash = Math.max(
+    filePath.lastIndexOf("/"),
+    filePath.lastIndexOf("\\"),
+  );
+  if (lastSlash === -1) return undefined;
+
+  return filePath.substring(0, lastSlash);
+};
+
+export const createPlugin = <TOptions extends unknown[]>(
+  factory: (...options: TOptions) => ApitogoPlugin,
+): ((...options: TOptions) => ApitogoPlugin) => {
+  const pluginDir = getCallerDir();
+
+  return (...options: TOptions) => {
+    const plugin = factory(...options);
+
+    if (!pluginDir) {
+      return plugin;
+    }
+
+    const originalTransformConfig = isTransformConfigPlugin(plugin)
+      ? plugin.transformConfig
+      : undefined;
+
+    return {
+      ...plugin,
+      transformConfig: async (context) => {
+        const result =
+          (await originalTransformConfig?.(context)) ?? context.config;
+
+        return {
+          ...result,
+          __pluginDirs: [
+            ...(context.config.__pluginDirs ?? []),
+            ...(result.__pluginDirs ?? []),
+            pluginDir,
+          ],
+        };
+      },
+    };
+  };
+};

package/src/config/file-exists.ts

@@ -1,6 +1,6 @@
-import { stat } from "node:fs/promises";
-
-export const fileExists = (path: string) =>
-  stat(path)
-    .then(() => true)
-    .catch(() => false);
+import { stat } from "node:fs/promises";
+
+export const fileExists = (path: string) =>
+  stat(path)
+    .then(() => true)
+    .catch(() => false);