zudoku 0.0.0-ed94abf → 0.0.0-edd80c1

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

@@ -1,58 +1,24 @@
 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
 > = ({
   clerkPubKey,
   redirectToAfterSignOut = "/",
-  redirectToAfterSignUp = "/",
-  redirectToAfterSignIn = "/",
-}) => {
+  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 () => {
@@ -129,24 +156,25 @@ const clerkAuth: AuthenticationProviderInitializer<
     signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignIn({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
     signUp: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignUp({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    getAuthenticationPlugin() {
-      return new ClerkAuthPlugin(ensureLoaded);
-    },
   };
 };
 

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

@@ -4,10 +4,10 @@ import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
@@ -23,43 +23,26 @@ export interface OpenIdProviderData {
   tokenType: string;
 }
 
-class OpenIdAuthPlugin extends AuthenticationPlugin {
-  constructor(
-    private callbackUrlPath: string,
-    private handleCallback: () => Promise<string>,
-  ) {
-    super();
-  }
-  getRoutes() {
-    return [
-      ...super.getRoutes(),
-      {
-        path: this.callbackUrlPath,
-        element: (
-          <ClientOnly>
-            <CallbackHandler handleCallback={this.handleCallback} />
-          </ClientOnly>
-        ),
-      },
-    ];
-  }
-}
+export const OPENID_CALLBACK_PATH = "/oauth/callback";
 
-export class OpenIDAuthenticationProvider implements AuthenticationProvider {
+export class OpenIDAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   protected client: oauth.Client;
   protected issuer: string;
-
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
   protected callbackUrlPath: string;
-  protected logoutRedirectUrlPath: string;
+
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
   ) => void;
-  private readonly redirectToAfterSignUp: string;
-  private readonly redirectToAfterSignIn: string;
-  private readonly redirectToAfterSignOut: string;
+
+  protected readonly redirectToAfterSignUp: string | undefined;
+  protected readonly redirectToAfterSignIn: string | undefined;
+  protected readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
   private readonly scopes: string[];
 
@@ -69,25 +52,24 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     clientId,
     redirectToAfterSignUp,
     redirectToAfterSignIn,
-    redirectToAfterSignOut,
+    redirectToAfterSignOut = "/",
     basePath,
     scopes,
   }: OpenIDAuthenticationConfig) {
+    super();
     this.client = {
       client_id: clientId,
       token_endpoint_auth_method: "none",
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+    // This is the callback URL for the OAuth provider. So it needs the base path.
+    this.callbackUrlPath = joinUrl(basePath, OPENID_CALLBACK_PATH);
     this.scopes = scopes ?? ["openid", "profile", "email"];
 
-    const root = joinUrl(basePath, "/");
-
-    this.logoutRedirectUrlPath = root;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
   protected async getAuthServer() {
@@ -133,14 +115,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
       isSignUp: true,
     });
   }
 
   async signIn({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
     });
   }
 
@@ -173,11 +155,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       authorizationServer.authorization_endpoint,
     );
 
-    const finalRedirect = redirectTo.startsWith(window.location.origin)
-      ? redirectTo.slice(window.location.origin.length)
-      : redirectTo;
-
-    sessionStorage.setItem("redirect-to", finalRedirect);
+    sessionStorage.setItem("redirect-to", redirectTo);
 
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
@@ -274,7 +252,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     const redirectUrl = new URL(
       window.location.origin + this.redirectToAfterSignOut,
     );
-    redirectUrl.pathname = this.logoutRedirectUrlPath;
+    redirectUrl.pathname = this.callbackUrlPath;
 
     let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
@@ -385,10 +363,18 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return redirectTo;
   };
 
-  getAuthenticationPlugin() {
-    // TODO: This API is a bit messy, we need to refactor auth plugins/providers
-    // to remove the extra layers of abstraction.
-    return new OpenIdAuthPlugin(this.callbackUrlPath, this.handleCallback);
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: OPENID_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
+      },
+    ];
   }
 }
 

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

@@ -6,16 +6,17 @@ import {
 } from "@supabase/supabase-js";
 import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { AuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
-class SupabaseAuthPlugin extends AuthenticationPlugin {}
-
-class SupabaseAuthenticationProvider implements AuthenticationProvider {
+class SupabaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   private readonly client: SupabaseClient;
   private readonly provider: Provider;
   private readonly redirectToAfterSignUp: string;
@@ -31,6 +32,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignOut,
     basePath,
   }: SupabaseAuthenticationConfig) {
+    super();
     this.provider = provider;
     this.client = createClient(supabaseUrl, supabaseKey, {
       auth: {
@@ -139,8 +141,6 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     });
   };
 
-  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
-
   onPageLoad = async () => {
     const { data, error } = await this.client.auth.getSession();
 

package/src/lib/components/Autocomplete.tsx

@@ -71,7 +71,7 @@ const AutocompletePopover = ({
         onMouseEnter={() => setDontClose(true)}
         onMouseLeave={() => setDontClose(false)}
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className={cn("p-0 w-[--radix-popover-trigger-width]", {
+        className={cn("p-0 w-(--radix-popover-trigger-width)", {
           "border-0": count === 0,
         })}
         align="start"

package/src/lib/components/Banner.tsx

@@ -31,7 +31,7 @@ export const Banner = () => {
   return (
     <div
       className={cn(
-        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
+        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
         mappedColor,
       )}
       data-pagefind-ignore="all"
@@ -41,7 +41,7 @@ export const Banner = () => {
       {page.banner.dismissible && (
         <button
           type="button"
-          className="md:absolute md:right-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
+          className="md:absolute md:end-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
           onClick={() => setIsBannerOpen(false)}
         >
           <CircleXIcon size={16} />

package/src/lib/components/BuildCheck.tsx

@@ -1,7 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
+import { z } from "zod";
 import { Button } from "../ui/Button.js";
 
+const BuildStatusSchema = z.object({
+  buildId: z.string(),
+  timestamp: z.string(),
+  status: z.enum(["in-progress", "success", "failed"]),
+});
+
 export const BuildCheck = ({
   buildId,
   endpoint = "/__zuplo/docs",
@@ -11,21 +18,29 @@ export const BuildCheck = ({
 }) => {
   const buildStatusQuery = useQuery({
     queryKey: ["zuplo-build-check", buildId, endpoint],
-    refetchInterval: 2000,
-    enabled: !!buildId,
+    refetchInterval: 3000,
+    enabled:
+      typeof buildId !== "undefined" &&
+      import.meta.env.ZUPLO_ENVIRONMENT_TYPE === "WORKING_COPY",
+    retry: false,
     queryFn: () =>
-      fetch(endpoint).then((res) => res.json()) as Promise<{
-        buildId: string;
-        timestamp: string;
-        status: "in-progress" | "completed" | "failed";
-      }>,
+      fetch(endpoint, { signal: AbortSignal.timeout(2000) })
+        .then((res) => {
+          if (!res.ok) throw new Error("Failed to fetch build status");
+          return res.json();
+        })
+        .then((data) => BuildStatusSchema.parse(data)),
   });
 
-  if (buildStatusQuery.data?.buildId === buildId) {
+  if (
+    buildStatusQuery.isError ||
+    !buildStatusQuery.data ||
+    buildStatusQuery.data.buildId === buildId
+  ) {
     return null;
   }
 
-  const isCompleted = buildStatusQuery.data?.status === "completed";
+  const isCompleted = buildStatusQuery.data.status === "success";
 
   return (
     <div className="fixed flex flex-col gap-3 p-4 rounded-xl w-96 border z-20 bg-background left-0 right-0 top-4 mx-auto shadow-lg">

package/src/lib/components/ErrorPage.tsx

@@ -13,7 +13,7 @@ export const ErrorPage = ({
   category?: ReactNode;
 }) => {
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <div className={ProseClasses + " h-full pt-(--padding-content-top)"}>
       {category && <CategoryHeading>{category}</CategoryHeading>}
       {title && (
         <Heading level={1} className="flex gap-3.5 items-center">

package/src/lib/components/Footer.tsx

@@ -1,10 +1,10 @@
 import { ExternalLink as ExternalLinkIcon } from "lucide-react";
 import type { CSSProperties, ReactNode } from "react";
-import type { FooterSocialIcons } from "../../config/validators/common.js";
+import type { FooterSocialIcons } from "../../config/validators/validate.js";
 import { cn } from "../util/cn.js";
 import { AnchorLink } from "./AnchorLink.js";
 import { useZudoku } from "./index.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 
 const SocialIcon = ({
   icon,
@@ -41,7 +41,7 @@ export const Footer = () => {
             "justify-end": footer.position === "end",
           })}
         >
-          <Slotlet name="footer-before" />
+          <Slot.Target name="footer-before" />
           {footer.columns && (
             <div
               className="w-full md:max-w-screen-md grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
@@ -59,12 +59,12 @@ export const Footer = () => {
                 >
                   <span className="text-sm font-semibold">{column.title}</span>
                   <ul className="mt-4 space-y-2">
-                    {column.links.map((link, i) => {
+                    {column.links.map((link) => {
                       const className =
                         "flex flex-row gap-1 items-center text-sm text-muted-foreground hover:text-accent-foreground";
 
                       return (
-                        <li key={link.href + i}>
+                        <li key={link.href + link.label}>
                           {isExternalUrl(link.href) ? (
                             <a
                               href={link.href}
@@ -76,10 +76,7 @@ export const Footer = () => {
                               <ExternalLinkIcon size={12} />
                             </a>
                           ) : (
-                            <AnchorLink
-                              to={link.href + i}
-                              className={className}
-                            >
+                            <AnchorLink to={link.href} className={className}>
                               <span>{link.label}</span>
                             </AnchorLink>
                           )}
@@ -91,7 +88,7 @@ export const Footer = () => {
               ))}
             </div>
           )}
-          <Slotlet name="footer-after" />
+          <Slot.Target name="footer-after" />
         </div>
         <div
           className={cn(

package/src/lib/components/Header.tsx

@@ -19,13 +19,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
+import { cn } from "../util/cn.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
 import { Search } from "./Search.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
 
@@ -58,54 +59,53 @@ export const Header = memo(function HeaderInner() {
   const auth = useAuth();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
-  const { page, plugins } = context;
+  const { page, plugins, options } = context;
 
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
     .sort((i) => i.weight ?? 0);
 
+  const logoLightSrc = page?.logo
+    ? /https?:\/\//.test(page.logo.src.light)
+      ? page.logo.src.light
+      : joinUrl(options.basePath, page.logo.src.light)
+    : undefined;
+  const logoDarkSrc = page?.logo
+    ? /https?:\/\//.test(page.logo.src.dark)
+      ? page.logo.src.dark
+      : joinUrl(options.basePath, page.logo.src.dark)
+    : undefined;
+
+  const borderBottom = "inset-shadow-[0_-1px_0_0_var(--border)]";
+
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
-      <div className="border-b">
-        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height] border-transparent">
+      <div className={borderBottom}>
+        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
                 {page?.logo && (
                   <>
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.light)
-                          ? page.logo.src.light
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.light,
-                            )
-                      }
+                      src={logoLightSrc}
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10 dark:hidden"
+                      className="max-h-(--top-header-height) dark:hidden"
                       loading="lazy"
                     />
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.dark)
-                          ? page.logo.src.dark
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.dark,
-                            )
-                      }
+                      src={logoDarkSrc}
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10 hidden dark:block"
+                      className="max-h-(--top-header-height) hidden dark:block"
                       loading="lazy"
                     />
                   </>
                 )}
-                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                <span className="font-semibold text-2xl">
                   {page?.pageTitle}
                 </span>
               </div>
@@ -119,10 +119,10 @@ export const Header = memo(function HeaderInner() {
           <div className="flex items-center gap-8">
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
-              <Slotlet name="head-navigation-start" />
+              <Slot.Target name="head-navigation-start" />
               {isAuthEnabled && (
                 <ClientOnly
-                  fallback={<Skeleton className="rounded h-5 w-24 mr-4" />}
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
                 >
                   {!isAuthenticated ? (
                     <Button variant="ghost" onClick={() => auth.login()}>
@@ -133,7 +133,7 @@ export const Header = memo(function HeaderInner() {
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.name ?? "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
@@ -175,17 +175,17 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <Slotlet name="head-navigation-end" />
+              <Slot.Target name="head-navigation-end" />
               <ThemeSwitch />
             </div>
           </div>
         </div>
       </div>
-      <div className="border-b hidden lg:block">
+      <div className={cn("hidden lg:block", borderBottom)}>
         <div className="max-w-screen-2xl mx-auto border-transparent">
-          <Slotlet name="top-navigation-before" />
+          <Slot.Target name="top-navigation-before" />
           <TopNavigation />
-          <Slotlet name="top-navigation-after" />
+          <Slot.Target name="top-navigation-after" />
         </div>
       </div>
     </header>