zudoku 0.0.0-ff3bc72 → 0.0.0-zuplo-api-keys.534c6f8

package/src/app/main.css

@@ -1,79 +1,85 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
+/* @vite-plugin-inject font */
+@import "./defaultTheme.css" layer(theme);
+@import "tailwindcss" source("..");
+
+/* @vite-plugin-inject main */
+
+@plugin "@tailwindcss/typography";
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
-    format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
-    format("woff2");
+@utility prose {
+  a {
+    @apply font-normal underline-offset-4 hover:text-primary;
+  }
+  blockquote {
+    @apply not-italic text-neutral-500/75 dark:text-neutral-400;
+    /* Disable adding quote marks to block-quotes: https://github.com/tailwindlabs/tailwindcss-typography/issues/66 */
+    p {
+      &:first-of-type::before,
+      &:last-of-type::after {
+        content: none;
+      }
+    }
+  }
+  hr {
+    @apply border-border;
+  }
+  code::before {
+    content: none;
+  }
+  code::after {
+    content: none;
+  }
 }
 
 @layer base {
@@ -85,17 +91,22 @@
       var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.72");
-    --padding-content-top: theme("spacing.12");
-    --padding-content-bottom: theme("spacing.12");
-    --padding-nav-item: theme("spacing[2.5]");
+    --side-nav-width: --spacing(72);
+    --padding-content-top: --spacing(6);
+    --padding-content-bottom: --spacing(12);
+    --padding-nav-item: --spacing(2.5);
     --sidecar-grid-cols: 1fr minmax(200px, 260px);
     --scrollbar-width: calc(100vw - 100%);
   }
 
   html {
     /* This is to prevent layout jumping when the scrollbar appears/disappears */
-    @apply -mr-[--scrollbar-width] scroll-pt-[--scroll-padding];
+    @apply -me-(--scrollbar-width) scroll-pt-(--scroll-padding);
+    --dark: -1;
+  }
+
+  html.dark {
+    --dark: 1;
   }
 
   html,
@@ -103,9 +114,14 @@
     @apply h-full overscroll-none;
   }
 
+  details summary {
+    @apply cursor-pointer;
+  }
+
   #root {
-    @apply min-h-screen w-full;
+    @apply min-h-screen w-full grid grid-rows-[auto_1fr];
   }
+
   * {
     @apply border-border;
   }
@@ -117,16 +133,26 @@
       "calt" 1;
   }
 
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  .bg-primary::selection,
+  .bg-primary ::selection {
+    background: var(--color-background);
+    color: var(--color-foreground);
+  }
+
   .dark {
     color-scheme: dark;
   }
 
-  .prose.prose {
-    @apply prose-a:underline-offset-4 hover:prose-a:text-primary;
-    @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
-    @apply prose-headings:prose-code:mx-2;
-    @apply prose-code:before:content-none prose-code:after:content-none;
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 
+  .prose.prose {
     ul.contains-task-list {
       @apply list-none px-0;
       li {
@@ -135,14 +161,58 @@
     }
   }
 
+  .shiki {
+    counter-reset: line;
+    @apply leading-normal;
+  }
+  .code-block .shiki {
+    @apply grid;
+  }
+
+  .shiki,
+  .shiki span {
+    color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style) !important;
+    font-weight: var(--shiki-light-font-weight) !important;
+    text-decoration: var(--shiki-light-text-decoration) !important;
+  }
+
+  html.dark .shiki,
+  html.dark .shiki span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+
+  .line-numbers .shiki .line::before {
+    counter-increment: line;
+    content: counter(line);
+    @apply tabular-nums inline-flex items-baseline justify-end me-4 w-3 text-muted-foreground/25;
+  }
+
+  .shiki.not-inline .line {
+    @apply inline-flex items-baseline -mx-4 px-4 w-[calc(100%+2rem)];
+    --highlighted-bg: hsl(
+      from hsl(var(--muted)) h s calc(l + 4 * var(--dark)) / 50%
+    );
+  }
+  .shiki .line.highlighted {
+    @apply bg-(--highlighted-bg);
+  }
+
+  .shiki .highlighted-word {
+    @apply bg-(--highlighted-bg) px-0.5 rounded;
+    box-shadow: 0 0 0 4px var(--highlighted-bg);
+  }
+
   select {
-    @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-none;
+    @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-hidden;
   }
 
   .CollapsibleContent {
     --easing: cubic-bezier(0.4, 0, 0.2, 1);
     --slide-offset: -0.75rem;
-    @apply overflow-hidden;
   }
   .CollapsibleContent[data-state="open"] {
     animation: slideDown 300ms var(--easing);
@@ -184,7 +254,7 @@
   }
 
   .scrollbar:hover {
-    scrollbar-color: hsla(var(--border)) transparent;
+    scrollbar-color: var(--scrollbar-color, hsla(var(--border))) transparent;
   }
 
   .scrollbar::-webkit-scrollbar {
@@ -218,7 +288,8 @@
 
     --R: calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);
     height: calc(2 * var(--R));
-    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
+    --_g:
+      #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
     mask:
       radial-gradient(
           var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)),
@@ -233,50 +304,50 @@
         50% calc(50% + var(--s) / 2 + var(--b) / 2) / calc(4 * var(--s))
         calc(var(--s) + var(--b)) repeat-x;
   }
+}
 
-  /* Theme */
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: var(--primary);
-    --radius: 0.5rem;
+@layer utilities {
+  .stepper > ol {
+    --bullet-size: 1.75rem;
+    --line-spacing: 0.25rem;
+    @apply flex flex-col list-none p-0 m-0;
+    counter-reset: step-counter;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: var(--primary);
+  .stepper > ol > li {
+    @apply relative ps-12 pb-6 my-0;
+    counter-increment: step-counter;
+  }
+
+  .stepper > ol > li:last-child {
+    @apply pb-0;
+  }
+
+  /* Bullet with number */
+  .stepper > ol > li::before {
+    @apply absolute start-0 flex items-center justify-center size-(--bullet-size);
+    @apply bg-muted/80 border border-border text-muted-foreground text-[calc(var(--bullet-size)/2)] font-semibold rounded-full;
+    content: counter(step-counter);
+  }
+
+  /* Vertical line */
+  .stepper > ol > li::after {
+    @apply absolute content-[''] w-[2px] bg-border -translate-x-1/2;
+    inset-inline-start: calc(var(--bullet-size) / 2);
+    top: calc(var(--bullet-size) + var(--line-spacing));
+    height: calc(100% - var(--bullet-size) - (2 * var(--line-spacing)));
+  }
+
+  /*
+    This can't be as `rtl:*` variant above, because it breaks the CSS minification. See:
+    https://github.com/tailwindlabs/tailwindcss/issues/16582
+  */
+  [dir="rtl"] .stepper > ol > li::after {
+    @apply translate-x-1/2;
+  }
+
+  .stepper > ol > li > :first-child {
+    @apply mt-0 pt-0;
+    transform: translateY(calc((var(--bullet-size) - 1lh) / 2));
   }
 }

package/src/app/main.tsx

@@ -1,48 +1,48 @@
-import { redirect, type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
-import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
+import {
+  configuredApiCatalogPlugins,
+  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 { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
+import { registerShiki } from "virtual:zudoku-shiki-register";
 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 {
+  BuildCheck,
+  Layout,
+  RouteGuard,
+  RouterError,
+  StatusPage,
+  Zudoku,
+} from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
-import { traverseSidebar } from "../lib/components/navigation/utils.js";
-import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
-import { joinPath } from "../lib/util/joinPath.js";
+import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
+import { isNavigationPlugin } from "../lib/core/plugins.js";
+import { highlighter } from "../lib/shiki.js";
+import { ZuploEnv } from "./env.js";
+
+await registerShiki(highlighter);
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
 ): ZudokuContextOptions => {
-  const fallbackLogoLight =
-    config.page?.logoUrl ??
-    "https://cdn.zudoku.dev/logos/zudoku-logo-full-light.svg";
-  const fallbackLogoDark =
-    config.page?.logoUrl ??
-    "https://cdn.zudoku.dev/logos/zudoku-logo-full-dark.svg";
-
-  const isUsingFallback =
-    !config.page?.logoUrl &&
-    !config.page?.logo?.src?.light &&
-    !config.page?.logo?.src?.dark;
-
   return {
+    basePath: config.basePath,
+    canonicalUrlOrigin: config.canonicalUrlOrigin,
+    protectedRoutes: config.protectedRoutes,
     page: {
       ...config.page,
-      logo: {
-        ...(isUsingFallback ? { width: "130px" } : {}),
-        ...config.page?.logo,
-        src: {
-          light: config.page?.logo?.src?.light ?? fallbackLogoLight,
-          dark: config.page?.logo?.src?.dark ?? fallbackLogoDark,
-        },
-      },
+      showPoweredBy:
+        ZuploEnv.buildConfig?.entitlements.devPortalZuploBranding ??
+        config.page?.showPoweredBy,
+      logo: config.page?.logo,
     },
-    slotlets: config.slotlets,
+    slots: config.slots,
     metadata: {
       favicon: "https://cdn.zudoku.dev/logos/favicon.svg",
       title: "%s - Zudoku",
@@ -51,71 +51,81 @@ export const convertZudokuConfigToOptions = (
     sidebars: configuredSidebar,
     topNavigation: config.topNavigation,
     mdx: config.mdx,
-    authentication: configuredAuthProvider,
     plugins: [
-      ...(config.search?.type === "inkeep"
-        ? [inkeepSearchPlugin(config.search)]
-        : []),
+      ...(configuredAuthProvider ? [configuredAuthProvider] : []),
       ...configuredDocsPlugins,
       ...configuredApiPlugins,
+      ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
-      ...(config.customPages ? [customPagePlugin(config.customPages)] : []),
-      ...(configuredAuthProvider?.getAuthenticationPlugin
-        ? [configuredAuthProvider.getAuthenticationPlugin()]
-        : []),
+      ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
+      ...configuredApiCatalogPlugins,
       ...(config.plugins ?? []),
     ],
+    syntaxHighlighting: {
+      highlighter,
+      themes: config.syntaxHighlighting?.themes,
+    },
   };
 };
 
-export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
-  const options = convertZudokuConfigToOptions(config);
-
+export const getRoutesByOptions = (
+  options: ZudokuContextOptions,
+  enableStatusPages = false,
+) => {
   const allPlugins = [
-    ...(options.plugins ? options.plugins : []),
-    ...(options.authentication?.getAuthenticationPlugin
-      ? [options.authentication.getAuthenticationPlugin()]
-      : []),
+    ...(options.plugins ?? []),
+    ...(options.authentication ? [options.authentication] : []),
   ];
 
-  const topNavRedirects =
-    options.topNavigation?.flatMap((topNavItem) => {
-      if (!options.sidebars?.[topNavItem.id]) return [];
-
-      const first =
-        topNavItem.default ??
-        traverseSidebar(options.sidebars[topNavItem.id], (item) => {
-          if (item.type === "doc") return joinPath(topNavItem.id, item.id);
-        });
-
-      if (!first) return [];
-
-      return {
-        path: topNavItem.id,
-        loader: () => redirect(joinPath(first)),
-      } satisfies RouteObject;
-    }) ?? [];
-
   const routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
-    .concat(topNavRedirects)
-    .concat({
-      path: "*",
-      loader: () => {
-        throw new Response("Not Found", { status: 404 });
+    .concat(
+      enableStatusPages
+        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
+            (statusCode) => ({
+              path: `/.static/${statusCode}`,
+              element: <StatusPage statusCode={statusCode} />,
+            }),
+          )
+        : [],
+    )
+    .concat([
+      {
+        path: "*",
+        loader: () => {
+          throw new Response("Not Found", { status: 404 });
+        },
       },
-    });
+    ]);
+
+  return routes;
+};
+
+export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
+  const options = convertZudokuConfigToOptions(config);
+  const routes = getRoutesByOptions(
+    options,
+    import.meta.env.IS_ZUPLO || config.enableStatusPages,
+  );
 
   return [
     {
       element: (
-        <DevPortal {...options}>
+        <Zudoku {...options}>
+          <BuildCheck
+            buildId={
+              import.meta.env.IS_ZUPLO && import.meta.env.ZUPLO_BUILD_ID
+                ? import.meta.env.ZUPLO_BUILD_ID
+                : undefined
+            }
+          />
           <Layout />
-        </DevPortal>
+        </Zudoku>
       ),
       children: [
         {
+          element: <RouteGuard />,
           errorElement: <RouterError />,
           children: routes,
         },

package/src/app/sentry.ts

@@ -0,0 +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.reactRouterV6BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+      Sentry.replayIntegration(),
+    ],
+  });
+};

package/src/app/standalone.tsx

@@ -1,9 +1,8 @@
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
-import { themeToggle } from "../lib/themeToggle.js";
 import "../lib/util/logInit.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -13,10 +12,8 @@ if (!root) {
   throw new Error("No div found with attribute data-api-url");
 }
 
-themeToggle();
-
 const apiUrl = root.getAttribute("data-api-url");
-const pageTitle = document.getElementsByTagName("title")[0].innerText;
+const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
 // IMPORTANT: This component must not contain tailwind classes
@@ -46,7 +43,6 @@ const config = {
       type: "url",
       input: apiUrl!,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

package/src/lib/MissingIcon.tsx

@@ -0,0 +1,22 @@
+import { CircleDashed, LucideProps } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/Tooltip.js";
+
+export const MissingIcon = (props: LucideProps) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="text-red-500">
+          <CircleDashed {...props} />
+        </TooltipTrigger>
+        <TooltipContent>
+          Icon not found, see: https://lucide.dev/icons/
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};