zudoku 0.0.0-f9d5b02 → 0.0.0-fabd0c1

package/src/app/tailwind.ts

@@ -1,68 +1,83 @@
 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" },
-          },
-        },
-      }),
-      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))",
+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: {
+        fontFamily: {
+          sans,
+          mono,
         },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-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))",
+          },
         },
       },
     },
-  },
-  plugins: [typographyPlugin],
+    plugins: [typographyPlugin],
+  };
 };
 
 export default config;

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,3 +1,4 @@
+import { LogOutIcon } from "lucide-react";
 import {
   CommonPlugin,
   NavigationPlugin,
@@ -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

@@ -5,8 +5,8 @@ export interface AuthenticationProvider {
   signIn(options?: { redirectTo?: string }): Promise<void>;
   signOut(): Promise<void>;
   getAccessToken(): Promise<string>;
-  pageLoad?(): void;
   getAuthenticationPlugin?(): ZudokuPlugin;
+  onPageLoad?(): void;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {

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

@@ -1,5 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
 import { ZudokuError } from "../../util/invariant.js";
 
 export function CallbackHandler({

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

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {

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

@@ -1,5 +1,5 @@
 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 = () => {

package/src/lib/authentication/hook.ts

@@ -8,9 +8,7 @@ export const useAuth = () => {
 
   return {
     isAuthEnabled,
-    isPending: authState.isPending,
-    profile: authState.profile,
-    isAuthenticated: Boolean(authState.profile),
+    ...authState,
 
     login: async () => {
       if (!isAuthEnabled) {

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

@@ -31,9 +31,10 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
-      profile: undefined,
+      profile: null,
+      providerData: null,
     });
-    sessionStorage.clear();
+
     const redirectUrl = new URL(
       window.location.origin + this.logoutRedirectUrlPath,
     );

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

@@ -12,8 +12,9 @@ import { useAuthState, UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
 
-interface TokenState {
+export interface OpenIdProviderData {
   accessToken: string;
+  idToken?: string;
   refreshToken?: string;
   expiresOn: Date;
   tokenType: string;
@@ -101,13 +102,17 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       throw new AuthorizationError("No expires_in in response");
     }
 
-    const tokens: TokenState = {
+    const tokens: OpenIdProviderData = {
       accessToken: response.access_token,
       refreshToken: response.refresh_token,
+      idToken: response.id_token,
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
-    sessionStorage.setItem("token-state", JSON.stringify(tokens));
+
+    useAuthState.setState({
+      providerData: tokens,
+    });
   }
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
@@ -194,22 +199,27 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
-    const tokenState = sessionStorage.getItem("token-state");
-    if (!tokenState) {
+    const { providerData } = useAuthState.getState();
+    if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
+    const tokenState = providerData as OpenIdProviderData;
 
-    const state = JSON.parse(tokenState) as TokenState;
-    if (state.expiresOn < new Date()) {
-      if (!state.refreshToken) {
-        await this.signIn();
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
         return "";
       }
 
       const request = await oauth.refreshTokenGrantRequest(
         as,
         this.client,
-        state.refreshToken,
+        tokenState.refreshToken,
       );
       const response = await oauth.processRefreshTokenResponse(
         as,
@@ -225,7 +235,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
       return response.access_token.toString();
     } else {
-      return state.accessToken;
+      return tokenState.accessToken;
     }
   }
 
@@ -234,8 +244,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       isAuthenticated: false,
       isPending: false,
       profile: undefined,
+      providerData: undefined,
     });
-    sessionStorage.clear();
 
     const as = await this.getAuthServer();
 
@@ -342,32 +352,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
-    sessionStorage.setItem(
-      "profile-state",
-      JSON.stringify(useAuthState.getState().profile),
-    );
-
     const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
     sessionStorage.removeItem("redirect-to");
     return redirectTo;
   };
 
-  pageLoad(): void {
-    const profileState = sessionStorage.getItem("profile-state");
-    if (profileState) {
-      try {
-        const profile = JSON.parse(profileState);
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
-          profile,
-        });
-      } catch (err) {
-        logger.error("Error parsing auth state", err);
-      }
-    }
-  }
-
   getAuthenticationPlugin() {
     // TODO: This API is a bit messy, we need to refactor auth plugins/providers
     // to remove the extra layers of abstraction.

package/src/lib/authentication/state.ts

@@ -1,24 +1,58 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { shared } from "./use-broadcast/shared.js";
+import { create, type Mutate, type StoreApi } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 
-export interface AuthState {
+export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
-  profile?: UserProfile;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
 }
 
-export const useAuthState = create<AuthState>(
-  shared(
-    (_) => ({
+export class Authentication {
+  async setLoggedIn(isLoggedIn: boolean) {}
+  async setProfile() {}
+  async setPersistentProviderData() {}
+}
+
+export type StoreWithPersist<T> = Mutate<
+  StoreApi<T>,
+  [["zustand/persist", unknown]]
+>;
+
+export const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
+  const storageEventCallback = (e: StorageEvent) => {
+    if (e.key === store.persist.getOptions().name && e.newValue) {
+      void store.persist.rehydrate();
+    }
+  };
+
+  window.addEventListener("storage", storageEventCallback);
+
+  return () => {
+    window.removeEventListener("storage", storageEventCallback);
+  };
+};
+
+export const useAuthState = create<AuthState>()(
+  persist(
+    (state) => ({
       isAuthenticated: false,
       isPending: false,
-      profile: undefined,
+      profile: null,
+      providerData: null,
     }),
-    { name: "auth-state" },
+    {
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+      // partialize: (s) => ({ state: s }),
+    },
   ),
 );
 
+if (typeof window !== "undefined") {
+  withStorageDOMEvents(useAuthState);
+}
+
 export interface UserProfile {
   sub: string;
   email: string | undefined;

package/src/lib/components/AnchorLink.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router-dom";
+import { Link, type LinkProps, useLocation } from "react-router";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.

package/src/lib/components/Bootstrap.tsx

@@ -4,38 +4,43 @@ import {
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode, useMemo } from "react";
-import { type createBrowserRouter, RouterProvider } from "react-router-dom";
+import { StrictMode } from "react";
 import {
+  type createBrowserRouter,
   type createStaticRouter,
   type StaticHandlerContext,
   StaticRouterProvider,
-} from "react-router-dom/server.js";
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
 const Bootstrap = ({
   router,
   hydrate = false,
 }: {
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
-}) => {
-  const queryClient = useMemo(() => new QueryClient(), []);
-
-  return (
-    <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-          <HelmetProvider>
-            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-              <RouterProvider router={router} />
-            </StaggeredRenderContext.Provider>
-          </HelmetProvider>
-        </HydrationBoundary>
-      </QueryClientProvider>
-    </StrictMode>
-  );
-};
+}) => (
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+        <HelmetProvider>
+          <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+            <RouterProvider router={router} />
+          </StaggeredRenderContext.Provider>
+        </HelmetProvider>
+      </HydrationBoundary>
+    </QueryClientProvider>
+  </StrictMode>
+);
 
 const BootstrapStatic = ({
   router,

package/src/lib/components/Header.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
@@ -41,7 +41,12 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
     </DropdownMenuSub>
   ) : (
     <Link to={item.path ?? ""}>
-      <DropdownMenuItem key={item.label}>{item.label}</DropdownMenuItem>
+      <DropdownMenuItem key={item.label} className="flex gap-2">
+        {item.icon && (
+          <item.icon size={16} strokeWidth={1} absoluteStrokeWidth />
+        )}
+        {item.label}
+      </DropdownMenuItem>
     </Link>
   );
 };
@@ -55,13 +60,13 @@ export const Header = memo(function HeaderInner() {
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
-    .map((i) => <RecursiveMenu key={i.label} item={i} />);
+    .sort((i) => i.weight ?? 0);
 
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
       <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
+        <div className="grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-4 lg:px-12 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -82,7 +87,6 @@ export const Header = memo(function HeaderInner() {
                       loading="lazy"
                     />
                     <img
-                      data-hide-on-theme="light"
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
@@ -93,7 +97,7 @@ export const Header = memo(function HeaderInner() {
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10"
+                      className="h-10 hidden dark:block"
                       loading="lazy"
                     />
                   </>
@@ -121,17 +125,46 @@ export const Header = memo(function HeaderInner() {
                       Login
                     </Button>
                   ) : (
-                    accountItems.length > 0 && (
+                    Object.values(accountItems).length > 0 && (
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.email ? `${profile.email}` : "My Account"}
+                            {profile?.name ? `${profile.name}` : "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
-                          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                          <DropdownMenuSeparator />
-                          {accountItems}
+                          <DropdownMenuLabel>
+                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.email && (
+                              <div className="font-normal text-muted-foreground">
+                                {profile.email}
+                              </div>
+                            )}
+                          </DropdownMenuLabel>
+                          {accountItems.filter((i) => i.category === "top")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "top")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter(
+                            (i) => !i.category || i.category === "middle",
+                          ).length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter(
+                              (i) => !i.category || i.category === "middle",
+                            )
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter((i) => i.category === "bottom")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "bottom")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
                         </DropdownMenuContent>
                       </DropdownMenu>
                     )

package/src/lib/components/Heading.tsx

@@ -38,23 +38,22 @@ const getComponent = (level: number) => {
   }
 };
 
-export interface HeadingProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof heading> {
-  children: ReactNode;
-  className?: string;
-  id?: string;
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  registerSidebarAnchor?: boolean;
-}
+export type HeadingProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof heading> & {
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    registerSidebarAnchor?: boolean;
+  };
 
-export const Heading: React.FC<HeadingProps> = ({
+export const Heading = ({
   level,
   children,
   id,
   className,
   registerSidebarAnchor,
-}) => {
+}: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
 
@@ -67,10 +66,11 @@ export const Heading: React.FC<HeadingProps> = ({
       {id && (
         <a
           href={`#${id}`}
-          className="no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="before:content-['#'] no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          #
+          {/* Zero width space */}
+          &#8203;
         </a>
       )}
       {children}