zudoku 0.45.1 → 0.46.1

package/src/app/main.css

@@ -1,102 +1,107 @@
-@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 {
   :root {
     --top-header-height: 65px;
     --top-nav-height: 50px;
-    --banner-height: 40px;
+    --banner-height: 35px;
     --header-height: calc(
-      var(--top-header-height) + var(--top-nav-height) + var(--banner-height) -
-        /* borders */ 2px
+      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.6");
-    --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 -me-[--scrollbar-width] scroll-pt-[--scroll-padding];
+    @apply -me-(--scrollbar-width) scroll-pt-(--scroll-padding);
     --dark: -1;
   }
 
@@ -129,26 +134,25 @@
   }
 
   ::selection {
-    @apply bg-primary/100 text-primary-foreground;
+    @apply bg-primary text-primary-foreground;
   }
 
   .bg-primary::selection,
   .bg-primary ::selection {
-    background: theme(colors.background);
-    color: theme(colors.foreground);
+    background: var(--color-background);
+    color: var(--color-foreground);
   }
 
   .dark {
     color-scheme: dark;
   }
 
-  .prose.prose {
-    @apply prose-a:underline-offset-4 prose-a:font-normal hover:prose-a:text-primary;
-    @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
-    @apply prose-code:before:content-none prose-code:after:content-none prose-code:font-normal;
-    @apply prose-headings:prose-code:mx-2 prose-li:my-0.5;
-    @apply prose-hr:border-border;
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 
+  .prose.prose {
     ul.contains-task-list {
       @apply list-none px-0;
       li {
@@ -162,7 +166,8 @@
     @apply leading-normal;
   }
   .code-block .shiki {
-    @apply grid;
+    @apply grid grid-rows-1;
+    grid-auto-rows: 1lh;
   }
 
   .shiki,
@@ -173,8 +178,8 @@
     text-decoration: var(--shiki-light-text-decoration) !important;
   }
 
-  html.dark .shiki,
-  html.dark .shiki span {
+  .dark .shiki,
+  .dark .shiki span {
     color: var(--shiki-dark);
     font-style: var(--shiki-dark-font-style) !important;
     font-weight: var(--shiki-dark-font-weight) !important;
@@ -188,22 +193,22 @@
   }
 
   .shiki.not-inline .line {
-    @apply inline-flex items-baseline -mx-4 px-4 w-[calc(100%+2rem)];
+    @apply block -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];
+    @apply bg-(--highlighted-bg);
   }
 
   .shiki .highlighted-word {
-    @apply bg-[--highlighted-bg] px-0.5 rounded;
+    @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 {
@@ -300,65 +305,9 @@
         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: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 95%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.75rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
 }
 
-@layer components {
+@layer utilities {
   .stepper > ol {
     --bullet-size: 1.75rem;
     --line-spacing: 0.25rem;
@@ -377,19 +326,27 @@
 
   /* Bullet with number */
   .stepper > ol > li::before {
-    @apply absolute start-0 flex items-center justify-center size-[--bullet-size];
+    @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 rtl:translate-x-1/2;
+    @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

@@ -31,18 +31,6 @@ 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,
@@ -52,16 +40,9 @@ export const convertZudokuConfigToOptions = (
       showPoweredBy:
         ZuploEnv.buildConfig?.entitlements.devPortalZuploBranding ??
         config.page?.showPoweredBy,
-      logo: {
-        ...(isUsingFallback ? { width: "130px" } : {}),
-        ...config.page?.logo,
-        src: {
-          light: config.page?.logo?.src?.light ?? fallbackLogoLight,
-          dark: config.page?.logo?.src?.dark ?? fallbackLogoDark,
-        },
-      },
+      logo: config.page?.logo,
     },
-    slotlets: config.UNSAFE_slotlets,
+    slots: config.slots,
     metadata: {
       favicon: "https://cdn.zudoku.dev/logos/favicon.svg",
       title: "%s - Zudoku",
@@ -70,8 +51,8 @@ export const convertZudokuConfigToOptions = (
     sidebars: configuredSidebar,
     topNavigation: config.topNavigation,
     mdx: config.mdx,
-    authentication: configuredAuthProvider,
     plugins: [
+      ...(configuredAuthProvider ? [configuredAuthProvider] : []),
       ...configuredDocsPlugins,
       ...configuredApiPlugins,
       ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
@@ -79,9 +60,6 @@ export const convertZudokuConfigToOptions = (
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
       ...configuredApiCatalogPlugins,
-      ...(configuredAuthProvider?.getAuthenticationPlugin
-        ? [configuredAuthProvider.getAuthenticationPlugin()]
-        : []),
       ...(config.plugins ?? []),
     ],
     syntaxHighlighting: {
@@ -97,9 +75,7 @@ export const getRoutesByOptions = (
 ) => {
   const allPlugins = [
     ...(options.plugins ?? []),
-    ...(options.authentication?.getAuthenticationPlugin
-      ? [options.authentication.getAuthenticationPlugin()]
-      : []),
+    ...(options.authentication ? [options.authentication] : []),
   ];
 
   const routes = allPlugins

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,8 +1,8 @@
 import { LogOutIcon } from "lucide-react";
 import {
-  CommonPlugin,
-  NavigationPlugin,
-  ProfileMenuPlugin,
+  type CommonPlugin,
+  type NavigationPlugin,
+  type ProfileMenuPlugin,
 } from "../core/plugins.js";
 import { SignIn } from "./components/SignIn.js";
 import { SignOut } from "./components/SignOut.js";
@@ -10,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 [
       {
@@ -28,6 +28,20 @@ export class AuthenticationPlugin implements PluginInterface {
     ];
   }
 
+  async getSidebar(path: string) {
+    if (path.startsWith("/settings")) {
+      return [
+        {
+          type: "link" as const,
+          label: "Logout",
+          href: "/signout",
+        },
+      ];
+    }
+
+    return [];
+  }
+
   getProfileMenuItems() {
     return [
       {

package/src/lib/authentication/authentication.ts

@@ -1,16 +1,13 @@
-import { ZudokuPlugin } 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>;
-  getAuthenticationPlugin?(): ZudokuPlugin;
   onPageLoad?(): void;
   signRequest(request: Request): Promise<Request>;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {
-  (config: TConfig): AuthenticationProvider;
+  (config: TConfig): AuthenticationPlugin;
 }

package/src/lib/authentication/providers/auth0.tsx

@@ -1,9 +1,15 @@
 import { type Auth0AuthenticationConfig } from "../../../config/config.js";
-import { type AuthenticationProviderInitializer } from "../authentication.js";
+import {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
 import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
 
-class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
+class Auth0AuthenticationProvider
+  extends OpenIDAuthenticationProvider
+  implements AuthenticationPlugin
+{
   constructor(config: Auth0AuthenticationConfig) {
     super({
       ...config,

package/src/lib/authentication/providers/clerk.tsx

@@ -1,50 +1,16 @@
 import type { Clerk } from "@clerk/clerk-js";
+import { LogOutIcon } from "lucide-react";
+import { type ZudokuPlugin } from "zudoku/plugins";
 import { type ClerkAuthenticationConfig } from "../../../config/config.js";
-import { type AuthenticationProviderInitializer } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { SignIn } from "../components/SignIn.js";
+import { SignOut } from "../components/SignOut.js";
+import { SignUp } from "../components/SignUp.js";
 import { useAuthState } from "../state.js";
 
-class ClerkAuthPlugin extends AuthenticationPlugin {
-  constructor(private clerk: Promise<Clerk | undefined>) {
-    super();
-  }
-  initialize = async () => {
-    const clerk = await this.clerk;
-
-    if (!clerk) {
-      return;
-    }
-
-    if (clerk.session) {
-      const verifiedEmail = clerk.session.user.emailAddresses.find(
-        (email) => email.verification.status === "verified",
-      );
-      useAuthState.setState({
-        isAuthenticated: true,
-        isPending: false,
-        profile: {
-          sub: clerk.session.user.id,
-          name: clerk.session.user.fullName ?? undefined,
-          email:
-            verifiedEmail?.emailAddress ??
-            clerk.session.user.emailAddresses[0]?.emailAddress,
-          emailVerified: verifiedEmail !== undefined,
-          pictureUrl: clerk.session.user.imageUrl,
-        },
-        providerData: {
-          user: clerk.session.user,
-        },
-      });
-    } else {
-      useAuthState.setState({
-        isAuthenticated: false,
-        isPending: false,
-        profile: undefined,
-      });
-    }
-  };
-}
-
 const clerkAuth: AuthenticationProviderInitializer<
   ClerkAuthenticationConfig
 > = ({
@@ -52,7 +18,7 @@ const clerkAuth: AuthenticationProviderInitializer<
   redirectToAfterSignOut = "/",
   redirectToAfterSignUp,
   redirectToAfterSignIn,
-}) => {
+}): AuthenticationPlugin & ZudokuPlugin => {
   let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
@@ -111,7 +77,68 @@ const clerkAuth: AuthenticationProviderInitializer<
   }
 
   return {
-    clerk: clerkApi,
+    getRoutes: () => {
+      return [
+        {
+          path: "/signout",
+          element: <SignOut />,
+        },
+        {
+          path: "/signin",
+          element: <SignIn />,
+        },
+        {
+          path: "/signup",
+          element: <SignUp />,
+        },
+      ];
+    },
+
+    getProfileMenuItems() {
+      return [
+        {
+          label: "Logout",
+          path: "/signout",
+          category: "bottom",
+          icon: LogOutIcon,
+        } as const,
+      ];
+    },
+    initialize: async () => {
+      const clerk = await ensureLoaded;
+
+      if (!clerk) {
+        return;
+      }
+
+      if (clerk.session) {
+        const verifiedEmail = clerk.session.user.emailAddresses.find(
+          (email) => email.verification.status === "verified",
+        );
+        useAuthState.setState({
+          isAuthenticated: true,
+          isPending: false,
+          profile: {
+            sub: clerk.session.user.id,
+            name: clerk.session.user.fullName ?? undefined,
+            email:
+              verifiedEmail?.emailAddress ??
+              clerk.session.user.emailAddresses[0]?.emailAddress,
+            emailVerified: verifiedEmail !== undefined,
+            pictureUrl: clerk.session.user.imageUrl,
+          },
+          providerData: {
+            user: clerk.session.user,
+          },
+        });
+      } else {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: undefined,
+        });
+      }
+    },
     getAccessToken,
     signRequest,
     signOut: async () => {
@@ -148,9 +175,6 @@ const clerkAuth: AuthenticationProviderInitializer<
           : redirectTo,
       });
     },
-    getAuthenticationPlugin() {
-      return new ClerkAuthPlugin(ensureLoaded);
-    },
   };
 };