zudoku 0.0.0-ed94abf → 0.0.0-edf4a635

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

@@ -4,22 +4,24 @@ import {
   type Session,
   type SupabaseClient,
 } from "@supabase/supabase-js";
-import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
-import {
-  type AuthenticationProvider,
-  type AuthenticationProviderInitializer,
+import type { SupabaseAuthenticationConfig } from "../../../config/config.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import type {
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { AuthorizationError } from "../errors.js";
-import { useAuthState, type UserProfile } from "../state.js";
-
-class SupabaseAuthPlugin extends AuthenticationPlugin {}
+import { type UserProfile, useAuthState } from "../state.js";
 
-class SupabaseAuthenticationProvider implements AuthenticationProvider {
+class SupabaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   private readonly client: SupabaseClient;
   private readonly provider: Provider;
   private readonly redirectToAfterSignUp: string;
   private readonly redirectToAfterSignIn: string;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Keep around
   private readonly redirectToAfterSignOut: string;
 
   constructor({
@@ -31,6 +33,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignOut,
     basePath,
   }: SupabaseAuthenticationConfig) {
+    super();
     this.provider = provider;
     this.client = createClient(supabaseUrl, supabaseKey, {
       auth: {
@@ -49,12 +52,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
       if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
         await this.updateUserState(session);
       } else if (event === "SIGNED_OUT") {
-        useAuthState.setState({
-          isAuthenticated: false,
-          isPending: false,
-          profile: undefined,
-          providerData: undefined,
-        });
+        useAuthState.getState().setLoggedOut();
       }
     });
   }
@@ -70,9 +68,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
       pictureUrl: user.user_metadata.avatar_url,
     };
 
-    useAuthState.setState({
-      isAuthenticated: true,
-      isPending: false,
+    useAuthState.getState().setLoggedIn({
       profile,
       providerData: { session },
     });
@@ -139,8 +135,6 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     });
   };
 
-  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
-
   onPageLoad = async () => {
     const { data, error } = await this.client.auth.getSession();
 

package/src/lib/authentication/state.ts

@@ -6,12 +6,15 @@ export interface AuthState<ProviderData = unknown> {
   isPending: boolean;
   profile: UserProfile | null;
   providerData: ProviderData | null;
-}
-
-export class Authentication {
-  async setLoggedIn(isLoggedIn: boolean) {}
-  async setProfile() {}
-  async setPersistentProviderData() {}
+  setAuthenticationPending: () => void;
+  setLoggedOut: () => void;
+  setLoggedIn: ({
+    profile,
+    providerData,
+  }: {
+    profile: UserProfile;
+    providerData: unknown;
+  }) => void;
 }
 
 export type StoreWithPersist<T> = Mutate<
@@ -35,11 +38,38 @@ const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
 
 export const useAuthState = create<AuthState>()(
   persist(
-    (state) => ({
+    (set) => ({
       isAuthenticated: false,
       isPending: true,
       profile: null,
       providerData: null,
+      setAuthenticationPending: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedOut: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedIn: ({
+        profile,
+        providerData,
+      }: {
+        profile: UserProfile;
+        providerData: unknown;
+      }) =>
+        set(() => ({
+          isAuthenticated: true,
+          isPending: false,
+          profile,
+          providerData,
+        })),
     }),
     {
       merge: (persistedState, currentState) => {

package/src/lib/authentication/use-broadcast/LICENSE.md

@@ -2,8 +2,17 @@ MIT License
 
 Copyright (c) 2023 Romain
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/src/lib/authentication/use-broadcast/shared.ts

@@ -1,6 +1,6 @@
 // https://github.com/Romainlg29/use-broadcast/
 
-import { StateCreator, StoreMutatorIdentifier } from "zustand";
+import type { StateCreator, StoreMutatorIdentifier } from "zustand";
 
 export type SharedOptions = {
   /**
@@ -71,7 +71,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
       self instanceof WorkerGlobalScope
     )
   ) {
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.warn(
       "BroadcastChannel is not supported in this environment. The store will not be shared.",
     );
@@ -82,7 +82,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
    * If BroadcastChannel is not supported, return the basic store
    */
   if (typeof BroadcastChannel === "undefined") {
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.warn(
       "BroadcastChannel is not supported in this browser. The store will not be shared.",
     );
@@ -220,7 +220,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
       /**
        * Set the new tab / window id
        */
-      const new_id = tabs[tabs.length - 1]! + 1;
+      const new_id = (tabs[tabs.length - 1] ?? 0) + 1;
       tabs.push(new_id);
 
       options?.onTabsChange?.(tabs);

package/src/lib/authentication/use-broadcast/useBroadcast.ts

@@ -93,13 +93,13 @@ export const useBroadcast = <T>(
      * If BroadcastChannel is not supported, we log an error and return
      */
     if (typeof window === "undefined") {
-      // eslint-disable-next-line no-console
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
       console.error("Window is undefined!");
       return;
     }
 
     if (!window.BroadcastChannel) {
-      // eslint-disable-next-line no-console
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
       console.error("BroadcastChannel is not supported!");
       return;
     }

package/src/lib/components/AnchorLink.tsx

@@ -1,4 +1,4 @@
-import { type MouseEvent } from "react";
+import type { MouseEvent } from "react";
 import { NavLink, type NavLinkProps, useHref, useLocation } from "react-router";
 import { useScrollToHash } from "../util/useScrollToAnchor.js";
 

package/src/lib/components/Autocomplete.tsx

@@ -1,6 +1,6 @@
 import { PopoverAnchor } from "@radix-ui/react-popover";
 import { useCommandState } from "cmdk";
-import { useRef, useState, type KeyboardEvent, type Ref } from "react";
+import { type KeyboardEvent, type Ref, useRef, useState } from "react";
 import {
   Command,
   CommandInlineInput,
@@ -26,7 +26,7 @@ const AutocompletePopover = ({
   options,
   onChange,
   className,
-  placeholder = "Enter value",
+  placeholder = "Value",
   onEnterPress,
   ref,
 }: AutocompleteProps) => {
@@ -39,6 +39,7 @@ const AutocompletePopover = ({
     <Popover open={open}>
       <PopoverAnchor>
         <CommandInlineInput
+          autoComplete="off"
           ref={(el) => {
             inputRef.current = el;
             if (typeof ref === "function") {
@@ -71,7 +72,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

@@ -12,7 +12,7 @@ const COLOR_MAP = {
 } as const;
 
 export const Banner = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const [isBannerOpen, setIsBannerOpen] = useState(true);
 
   if (!page?.banner || !isBannerOpen) {
@@ -31,17 +31,16 @@ 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"
       style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {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/Bootstrap.tsx

@@ -32,6 +32,7 @@ const Bootstrap = ({
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
+      {/* biome-ignore lint/suspicious/noExplicitAny: Allow any type */}
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
         <BypassProtectedRoutesContext value={false}>
           <HelmetProvider>

package/src/lib/components/BuildCheck.tsx

@@ -1,31 +1,57 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
+import { useEffect } from "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,
+  environmentType,
   endpoint = "/__zuplo/docs",
 }: {
   buildId?: string;
+  environmentType?: string;
   endpoint?: string;
 }) => {
   const buildStatusQuery = useQuery({
     queryKey: ["zuplo-build-check", buildId, endpoint],
-    refetchInterval: 2000,
-    enabled: !!buildId,
+    refetchInterval: 3000,
+    enabled: buildId !== undefined && environmentType === "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) {
+  useEffect(() => {
+    if (
+      buildStatusQuery.data?.status === "success" &&
+      buildStatusQuery.data.buildId
+    ) {
+      // biome-ignore lint/suspicious/noDocumentCookie: CookieStore too new to use
+      document.cookie = `zuplo-build=${buildStatusQuery.data.buildId}; path=/; max-age=300; secure; SameSite=None`;
+    }
+  }, [buildStatusQuery.data]);
+
+  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/CategoryHeading.tsx

@@ -9,7 +9,10 @@ export const CategoryHeading = ({
   className?: string;
 }) => {
   return (
-    <div className={cx("text-sm font-semibold text-primary mb-2", className)}>
+    <div
+      className={cx("text-sm font-semibold text-primary mb-2", className)}
+      data-pagefind-ignore="all"
+    >
       {children}
     </div>
   );

package/src/lib/components/ErrorPage.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { Heading } from "./Heading.js";
-import { ProseClasses } from "./Markdown.js";
+import { Typography } from "./Typography.js";
 
 export const ErrorPage = ({
   title = "An error occurred",
@@ -13,7 +13,7 @@ export const ErrorPage = ({
   category?: ReactNode;
 }) => {
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <Typography className={"h-full pt-(--padding-content-top)"}>
       {category && <CategoryHeading>{category}</CategoryHeading>}
       {title && (
         <Heading level={1} className="flex gap-3.5 items-center">
@@ -21,6 +21,6 @@ export const ErrorPage = ({
         </Heading>
       )}
       <p>{message}</p>
-    </div>
+    </Typography>
   );
 };

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,
@@ -26,7 +26,7 @@ const SocialIcon = ({
 const isExternalUrl = (href: string) => /^https?:/.test(href);
 
 export const Footer = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const footer = page?.footer;
 
   if (!footer) return null;
@@ -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/Framed.tsx

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+import type { PropsWithChildren } from "react";
+import { cn } from "../util/cn.js";
+
+const frameVariants = cva("", {
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      full: "max-w-full",
+    },
+    align: {
+      center: "mx-auto",
+      start: "me-auto",
+      end: "ms-auto",
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+    align: "center",
+  },
+});
+
+export const Framed = ({
+  caption,
+  className,
+  size = "xl",
+  align = "center",
+  children,
+}: PropsWithChildren<{
+  caption?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  align?: "center" | "start" | "end";
+}>) => (
+  <figure className={cn(frameVariants({ size, align }), className)}>
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50 p-1 shadow-sm">
+      <div className="not-prose rounded-md [&_img]:rounded-md! relative overflow-hidden bg-background">
+        {children}
+      </div>
+    </div>
+    {caption && (
+      <figcaption className="mt-3 text-center text-sm text-muted-foreground">
+        {caption}
+      </figcaption>
+    )}
+  </figure>
+);