zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

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

@@ -113,25 +113,41 @@ export class OpenIDAuthenticationProvider
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
+      replace,
       isSignUp: true,
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
+      replace,
     });
   }
 
   private async authorize({
     redirectTo,
     isSignUp = false,
+    replace = false,
   }: {
     redirectTo: string;
     isSignUp?: boolean;
+    replace?: boolean;
   }): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
@@ -187,8 +203,11 @@ export class OpenIDAuthenticationProvider
     sessionStorage.setItem(STATE_KEY, state);
     authorizationUrl.searchParams.set("state", state);
 
-    // now redirect the user to authorizationUrl.href
-    location.href = authorizationUrl.href;
+    if (replace) {
+      location.replace(authorizationUrl.href);
+    } else {
+      location.href = authorizationUrl.href;
+    }
   }
 
   async getAccessToken(): Promise<string> {
@@ -273,6 +292,59 @@ export class OpenIDAuthenticationProvider
     }
   };
 
+  onPageLoad = async () => {
+    const { providerData } = useAuthState.getState();
+
+    if (!providerData) {
+      useAuthState.setState({ isPending: false });
+      return;
+    }
+
+    const tokenState = providerData as OpenIdProviderData;
+
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+
+      try {
+        const as = await this.getAuthServer();
+        const request = await oauth.refreshTokenGrantRequest(
+          as,
+          this.client,
+          tokenState.refreshToken,
+        );
+        const response = await oauth.processRefreshTokenResponse(
+          as,
+          this.client,
+          request,
+        );
+
+        if (!response.access_token) {
+          throw new AuthorizationError("No access token in response");
+        }
+
+        this.setTokensFromResponse(response);
+      } catch {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+    }
+
+    useAuthState.setState({ isPending: false });
+  };
+
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");

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

@@ -51,12 +51,7 @@ class SupabaseAuthenticationProvider
       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();
       }
     });
   }
@@ -72,9 +67,7 @@ class SupabaseAuthenticationProvider
       pictureUrl: user.user_metadata.avatar_url,
     };
 
-    useAuthState.setState({
-      isAuthenticated: true,
-      isPending: false,
+    useAuthState.getState().setLoggedIn({
       profile,
       providerData: { session },
     });

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/components/Autocomplete.tsx

@@ -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") {

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) {
@@ -34,7 +34,6 @@ export const Banner = () => {
         "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>

package/src/lib/components/BuildCheck.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
-import { z } from "zod";
+import { z } from "zod/v4";
 import { Button } from "../ui/Button.js";
 
 const BuildStatusSchema = z.object({

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

@@ -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;

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

package/src/lib/components/Header.tsx

@@ -25,6 +25,7 @@ import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
+import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
 import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
@@ -59,55 +60,57 @@ export const Header = memo(function HeaderInner() {
   const auth = useAuth();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
-  const { page, plugins, options } = context;
+  const { site, 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)
+  const logoLightSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.light)
+      ? site.logo.src.light
+      : joinUrl(options.basePath, site.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)
+  const logoDarkSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.dark)
+      ? site.logo.src.dark
+      : joinUrl(options.basePath, site.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">
+    <header
+      className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full"
+      data-pagefind-ignore="all"
+    >
       <Banner />
-      <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={cn(borderBottom, "relative")}>
+        <PageProgress />
+        <div className="max-w-screen-2xl mx-auto flex items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
           <div className="flex">
-            <Link to="/">
+            <Link to={site?.logo?.href ?? "/"}>
               <div className="flex items-center gap-3.5">
-                {page?.logo && (
+                {site?.logo && (
                   <>
                     <img
                       src={logoLightSrc}
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
                       className="max-h-(--top-header-height) dark:hidden"
                       loading="lazy"
                     />
                     <img
                       src={logoDarkSrc}
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
                       className="max-h-(--top-header-height) hidden dark:block"
                       loading="lazy"
                     />
                   </>
                 )}
-                <span className="font-semibold text-2xl">
-                  {page?.pageTitle}
-                </span>
+                <span className="font-semibold text-2xl">{site?.title}</span>
               </div>
             </Link>
           </div>
@@ -182,7 +185,7 @@ export const Header = memo(function HeaderInner() {
         </div>
       </div>
       <div className={cn("hidden lg:block", borderBottom)}>
-        <div className="max-w-screen-2xl mx-auto border-transparent">
+        <div className="max-w-screen-2xl mx-auto border-transparent relative">
           <Slot.Target name="top-navigation-before" />
           <TopNavigation />
           <Slot.Target name="top-navigation-after" />

package/src/lib/components/Heading.tsx

@@ -2,6 +2,8 @@ import type { HTMLAttributes, ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 import { cva, type VariantProps } from "class-variance-authority";
+import { LinkIcon } from "lucide-react";
+import { cn } from "../util/cn.js";
 
 const heading = cva("group relative", {
   variants: {
@@ -44,7 +46,11 @@ export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
     className?: string;
     id?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    registerSidebarAnchor?: boolean;
+    /**
+     * This is to set labels as active when the heading is in the viewport.
+     * It's used in the navigation/toc to highlight the current section.
+     */
+    registerNavigationAnchor?: boolean;
   };
 
 export const Heading = ({
@@ -52,28 +58,30 @@ export const Heading = ({
   children,
   id,
   className,
-  registerSidebarAnchor,
+  registerNavigationAnchor,
 }: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
 
   return (
     <Component
-      className={heading({ className, level })}
-      ref={registerSidebarAnchor ? ref : undefined}
+      className={heading({
+        className: cn(className, "flex items-center gap-[0.33em]"),
+        level,
+      })}
+      ref={registerNavigationAnchor ? ref : undefined}
       id={id}
     >
+      {children}
       {id && (
         <a
           href={`#${id}`}
-          className="before:content-['#'] no-underline absolute text-primary -start-[0.8em] pe-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="rounded text-[0.8em] text-muted-foreground p-0.5 -m-0.5 opacity-0 group-hover:opacity-50 hover:text-primary hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          {/* Zero width space */}
-          &#8203;
+          <LinkIcon className="size-[0.75em] min-w-4 min-h-4" />
         </a>
       )}
-      {children}
     </Component>
   );
 };

package/src/lib/components/Main.tsx

@@ -4,29 +4,29 @@ import { useNavigation } from "react-router";
 import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { Sidebar } from "./navigation/Sidebar.js";
+import { Navigation } from "./navigation/Navigation.js";
 import { Slot } from "./Slot.js";
 
 export const Main = ({ children }: PropsWithChildren) => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
-  const { sidebar } = useCurrentNavigation();
-  const hasSidebar = sidebar.length > 0;
+  const { navigation } = useCurrentNavigation();
+  const hasNavigation = navigation.length > 0;
   const isNavigating = useNavigation().state === "loading";
   const { options } = useZudoku();
 
   return (
     <Drawer
-      direction={options.page?.dir === "rtl" ? "right" : "left"}
+      direction={options.site?.dir === "rtl" ? "right" : "left"}
       open={isDrawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
-      {hasSidebar && (
-        <Sidebar
+      {hasNavigation && (
+        <Navigation
           onRequestClose={() => setDrawerOpen(false)}
-          sidebar={sidebar}
+          navigation={navigation}
         />
       )}
-      {hasSidebar && (
+      {hasNavigation && (
         <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
           <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
@@ -38,7 +38,7 @@ export const Main = ({ children }: PropsWithChildren) => {
         data-pagefind-body
         className={cn(
           "px-4 lg:pe-8 lg:px-8",
-          !hasSidebar && "col-span-full",
+          !hasNavigation && "col-span-full",
           isNavigating && "animate-pulse",
         )}
       >

package/src/lib/components/Markdown.tsx

@@ -1,15 +1,14 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { MarkdownHooks, type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { createConfiguredShikiRehypePlugins } from "../shiki.js";
 import { MdxComponents } from "../util/MdxComponents.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Typography } from "./Typography.js";
 
 const remarkPlugins = [remarkGfm];
 
-// other styles are defined in main.css .prose
-export const ProseClasses = "prose dark:prose-invert prose-neutral";
-
 export const Markdown = memo(
   ({
     content,
@@ -21,20 +20,29 @@ export const Markdown = memo(
     components?: Components;
   }) => {
     const { syntaxHighlighting } = useZudoku().options;
-    const rehypePlugins = createConfiguredShikiRehypePlugins(
-      syntaxHighlighting?.themes,
+    const rehypePlugins = useMemo(
+      () => [
+        rehypeRaw,
+        ...createConfiguredShikiRehypePlugins(syntaxHighlighting?.themes),
+      ],
+      [syntaxHighlighting?.themes],
+    );
+
+    const mdComponents = useMemo(
+      () => ({ ...MdxComponents, ...components }),
+      [components],
     );
 
     return (
-      <div className={className}>
+      <Typography className={className}>
         <MarkdownHooks
           remarkPlugins={remarkPlugins}
           rehypePlugins={rehypePlugins}
-          components={{ ...MdxComponents, ...components }}
+          components={mdComponents}
         >
           {content}
         </MarkdownHooks>
-      </div>
+      </Typography>
     );
   },
 );