zudoku 0.0.0-e4d0ea8 → 0.0.0-e5559fc

package/src/app/main.tsx

@@ -1,46 +1,48 @@
-import { 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 { inkeepSearchPlugin } from "zudoku/plugins/search-inkeep";
+import {
+  BuildCheck,
+  Layout,
+  RouteGuard,
+  RouterError,
+  StatusPage,
+  Zudoku,
+} from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
-import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.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.UNSAFE_slotlets,
+    slots: config.slots,
     metadata: {
       favicon: "https://cdn.zudoku.dev/logos/favicon.svg",
       title: "%s - Zudoku",
@@ -49,57 +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] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
-      ...(configuredAuthProvider?.getAuthenticationPlugin
-        ? [configuredAuthProvider.getAuthenticationPlugin()]
-        : []),
+      ...configuredApiCatalogPlugins,
       ...(config.plugins ?? []),
     ],
+    syntaxHighlighting: {
+      highlighter,
+      themes: config.syntaxHighlighting?.themes,
+    },
   };
 };
 
-export const getRoutesByOptions = (options: ZudokuContextOptions) => {
+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 routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
-    .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);
+  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,8 +12,6 @@ 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 logoUrl = root.getAttribute("data-logo-url");
@@ -46,7 +43,6 @@ const config = {
       type: "url",
       input: apiUrl!,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

package/src/app/tailwind.ts

@@ -1,68 +1,103 @@
 import typographyPlugin from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme.js";
+import type { LoadedConfig } from "../config/config.js";
 
 const content = [
   "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
   "./node_modules/zudoku/dist/**/*.{js,ts,jsx,tsx,md,mdx}",
 ];
 
-const config: Omit<Config, "content"> = {
-  darkMode: "selector",
-  content,
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: [
-          ["Geist", ...defaultTheme.fontFamily.sans],
-          { fontFeatureSettings: '"rlig" 1, "calt" 0' },
-        ],
-      },
-      typography: () => ({
-        DEFAULT: {
-          css: {
-            blockquote: { quotes: "none" },
+const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
+  const sans = zudokuConfig?.theme?.fonts?.sans
+    ? ([
+        zudokuConfig.theme.fonts.sans.fontFamily,
+        ...defaultTheme.fontFamily.sans,
+      ] as const)
+    : ([
+        ["Geist", ...defaultTheme.fontFamily.sans],
+        { fontFeatureSettings: '"rlig" 1, "calt" 0' },
+      ] as const);
+
+  const mono = zudokuConfig?.theme?.fonts?.mono
+    ? zudokuConfig.theme.fonts.mono.fontFamily
+    : defaultTheme.fontFamily.mono;
+
+  return {
+    darkMode: "selector",
+    content,
+    theme: {
+      extend: {
+        keyframes: {
+          "bounce-x-start": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(-25%)" },
+          },
+          "bounce-x-end": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(25%)" },
           },
         },
-      }),
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+        animation: {
+          "bounce-x-start": "bounce-x-start 1s infinite",
+          "bounce-x-end": "bounce-x-end 1s infinite",
         },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+        fontFamily: {
+          sans,
+          mono,
         },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+        typography: () => ({
+          DEFAULT: {
+            css: {
+              blockquote: { quotes: "none" },
+            },
+          },
+        }),
+        colors: {
+          border: "hsl(var(--border))",
+          input: "hsl(var(--input))",
+          ring: "hsl(var(--ring))",
+          background: "hsl(var(--background))",
+          foreground: "hsl(var(--foreground))",
+          primary: {
+            DEFAULT: "hsl(var(--primary))",
+            foreground: "hsl(var(--primary-foreground))",
+          },
+          secondary: {
+            DEFAULT: "hsl(var(--secondary))",
+            foreground: "hsl(var(--secondary-foreground))",
+          },
+          destructive: {
+            DEFAULT: "hsl(var(--destructive))",
+            foreground: "hsl(var(--destructive-foreground))",
+          },
+          muted: {
+            DEFAULT: "hsl(var(--muted))",
+            foreground: "hsl(var(--muted-foreground))",
+          },
+          accent: {
+            DEFAULT: "hsl(var(--accent))",
+            foreground: "hsl(var(--accent-foreground))",
+          },
+          popover: {
+            DEFAULT: "hsl(var(--popover))",
+            foreground: "hsl(var(--popover-foreground))",
+          },
+          card: {
+            DEFAULT: "hsl(var(--card))",
+            foreground: "hsl(var(--card-foreground))",
+          },
         },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+        borderRadius: {
+          xl: "calc(var(--radius) + 4px)",
+          lg: `var(--radius)`,
+          md: `calc(var(--radius) - 2px)`,
+          sm: "calc(var(--radius) - 4px)",
         },
       },
     },
-  },
-  plugins: [typographyPlugin],
+    plugins: [typographyPlugin],
+  };
 };
 
 export default config;

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>
+  );
+};

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,4 +1,5 @@
-import {
+import { LogOutIcon } from "lucide-react";
+import type {
   CommonPlugin,
   NavigationPlugin,
   ProfileMenuPlugin,
@@ -9,7 +10,7 @@ import { SignUp } from "./components/SignUp.js";
 
 type PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;
 
-export class AuthenticationPlugin implements PluginInterface {
+export class CoreAuthenticationPlugin implements PluginInterface {
   getRoutes() {
     return [
       {
@@ -32,7 +33,9 @@ export class AuthenticationPlugin implements PluginInterface {
       {
         label: "Logout",
         path: "/signout",
-      },
+        category: "bottom",
+        icon: LogOutIcon,
+      } as const,
     ];
   }
 }

package/src/lib/authentication/authentication.ts

@@ -1,14 +1,13 @@
-import { DevPortalPlugin } from "../core/plugins.js";
-
-export interface AuthenticationProvider {
+export interface AuthenticationPlugin {
   signUp(options?: { redirectTo?: string }): Promise<void>;
   signIn(options?: { redirectTo?: string }): Promise<void>;
   signOut(): Promise<void>;
+  // @deprecated use signRequest instead
   getAccessToken(): Promise<string>;
-  pageLoad?(): void;
-  getAuthenticationPlugin?(): DevPortalPlugin;
+  onPageLoad?(): void;
+  signRequest(request: Request): Promise<Request>;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {
-  (config: TConfig): AuthenticationProvider;
+  (config: TConfig): AuthenticationPlugin;
 }

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,59 +1,38 @@
-import logger from "loglevel";
-import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { DeveloperHint } from "../../components/DeveloperHint.js";
-import { ErrorPage } from "../../components/ErrorPage.js";
-import { Spinner } from "../../components/Spinner.js";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Navigate } from "react-router";
+import { useZudoku } from "zudoku/components";
+import { ZudokuError } from "../../util/invariant.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { normalizeRedirectUrl } from "../../util/url.js";
 
 export function CallbackHandler({
   handleCallback,
 }: {
   handleCallback: () => Promise<string>;
 }) {
-  const [error, setError] = useState<Error | null>(null);
-  const navigate = useNavigate();
-  // Deal with double mount in dev mode which will break
-  // the OAuth flow because you can only use the code once
-  const didInitialize = useRef(false);
+  const { options } = useZudoku();
+  const executeCallback = useSuspenseQuery({
+    retry: false,
+    queryKey: ["oauth-callback"],
+    queryFn: async () => {
+      try {
+        return joinUrl(
+          normalizeRedirectUrl(
+            await handleCallback(),
+            window.location.origin,
+            options.basePath,
+          ),
+        );
+      } catch (error) {
+        throw new ZudokuError("Could not validate user", {
+          cause: error,
+          title: "Authentication Error",
+          developerHint:
+            "Check the configuration of your authorization provider and ensure all settings such as the callback URL are configured correctly.",
+        });
+      }
+    },
+  });
 
-  useEffect(() => {
-    if (didInitialize.current) {
-      return;
-    }
-    didInitialize.current = true;
-    handleCallback()
-      .then((redirect) => {
-        navigate(redirect);
-      })
-      .catch((err) => {
-        logger.error(err);
-        setError(err);
-      });
-  }, [navigate, handleCallback]);
-
-  if (error) {
-    return (
-      <ErrorPage
-        category="Error"
-        title="Authentication Error"
-        message={
-          <>
-            <DeveloperHint className="mb-4">
-              Check the configuration of your authorization provider and ensure
-              all settings such as the callback URL are configured correctly.
-            </DeveloperHint>
-            An error occurred while authorizing the user.
-            <SyntaxHighlight code={error.toString()} language="plain" />
-          </>
-        }
-      />
-    );
-  }
-
-  return (
-    <div className="grid h-full place-items-center">
-      <Spinner />
-    </div>
-  );
+  return <Navigate to={executeCallback.data} />;
 }

package/src/lib/authentication/components/SignIn.tsx

@@ -1,5 +1,13 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {
@@ -11,5 +19,30 @@ export const SignIn = () => {
     });
   }, [context.authentication, search]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign in</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign-in process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Login
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };

package/src/lib/authentication/components/SignOut.tsx

@@ -1,13 +1,14 @@
 import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignOut = () => {
   const context = useZudoku();
   const navigate = useNavigate();
+
   useEffect(() => {
     void context.authentication?.signOut().then(() => navigate("/"));
-  }, [navigate, context.authentication]);
+  }, []);
 
   return null;
 };

package/src/lib/authentication/components/SignUp.tsx

@@ -1,11 +1,45 @@
 import { useEffect } from "react";
+import { Button, Link } from "zudoku/components";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignUp = () => {
   const context = useZudoku();
+
   useEffect(() => {
     void (context.authentication?.signUp() ?? context.authentication?.signIn());
   }, [context.authentication]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign up</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign up process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Register
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };