zudoku 0.16.3 → 0.18.0

package/src/lib/components/Header.tsx

@@ -1,7 +1,7 @@
-import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
 import { Link } from "react-router-dom";
 import { Button } from "zudoku/ui/Button.js";
+import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
 import {
@@ -16,14 +16,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
-import { cn } from "../util/cn.js";
 import { joinPath } from "../util/joinPath.js";
 import { Banner } from "./Banner.js";
-import { useTheme } from "./context/ThemeContext.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 { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
 
 const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
@@ -48,7 +48,6 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
 
 export const Header = memo(function HeaderInner() {
   const auth = useAuth();
-  const [isDark, toggleTheme] = useTheme();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
   const { page, plugins } = context;
@@ -58,8 +57,6 @@ export const Header = memo(function HeaderInner() {
     .flatMap((p) => p.getProfileMenuItems(context))
     .map((i) => <RecursiveMenu key={i.label} item={i} />);
 
-  const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
-
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
@@ -81,10 +78,11 @@ export const Header = memo(function HeaderInner() {
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className={cn("h-10", isDark && "hidden")}
+                      className="h-10 dark:hidden"
                       loading="lazy"
                     />
                     <img
+                      data-hide-on-theme="light"
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
@@ -95,7 +93,7 @@ export const Header = memo(function HeaderInner() {
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className={cn("h-10", !isDark && "hidden")}
+                      className="h-10"
                       loading="lazy"
                     />
                   </>
@@ -114,36 +112,33 @@ export const Header = memo(function HeaderInner() {
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
               <Slotlet name="head-navigation-start" />
-              {isAuthEnabled && !isAuthenticated ? (
-                <Button variant="ghost" onClick={() => auth.login()}>
-                  Login
-                </Button>
-              ) : (
-                accountItems.length > 0 && (
-                  <DropdownMenu modal={false}>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost">
-                        {profile?.email ? `${profile.email}` : "My Account"}
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-56">
-                      <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                      <DropdownMenuSeparator />
-                      {accountItems}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )
+              {isAuthEnabled && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded h-5 w-24 mr-4" />}
+                >
+                  {!isAuthenticated ? (
+                    <Button variant="ghost" onClick={() => auth.login()}>
+                      Login
+                    </Button>
+                  ) : (
+                    accountItems.length > 0 && (
+                      <DropdownMenu modal={false}>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost">
+                            {profile?.email ? `${profile.email}` : "My Account"}
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-56">
+                          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                          <DropdownMenuSeparator />
+                          {accountItems}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )
+                  )}
+                </ClientOnly>
               )}
-              <Button
-                variant="ghost"
-                aria-label={
-                  isDark ? "Switch to light mode" : "Switch to dark mode"
-                }
-                className="p-2.5 -m-2.5 rounded-full"
-                onClick={toggleTheme}
-              >
-                <ThemeIcon size={18} />
-              </Button>
+              <ThemeSwitch />
               <Slotlet name="head-navigation-end" />
             </div>
           </div>

package/src/lib/components/Layout.tsx

@@ -1,7 +1,8 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { PanelLeftIcon } from "lucide-react";
 import { Suspense, useEffect, useRef, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigation } from "react-router-dom";
+import { useSpinDelay } from "spin-delay";
 import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
@@ -13,6 +14,12 @@ import { Sidebar } from "./navigation/Sidebar.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
+const LoadingFallback = () => (
+  <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
+    <Spinner />
+  </main>
+);
+
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
@@ -36,6 +43,13 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     previousLocationPath.current = location.pathname;
   }, [location.pathname, setActiveAnchor]);
 
+  // Page transition is happening: https://reactrouter.com/start/framework/pending-ui#global-pending-navigation
+  const isNavigating = Boolean(useNavigation().location);
+  const showSpinner = useSpinDelay(isNavigating, {
+    delay: 300,
+    minDuration: 500,
+  });
+
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
@@ -52,41 +66,39 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Slotlet name="layout-after-head" />
 
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
-        <Suspense
-          fallback={
-            <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
-              <Spinner />
-            </main>
-          }
-        >
-          <Drawer direction="left">
-            <Sidebar />
-            <div
-              className={cn(
-                "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
-                "peer-data-[navigation=false]:hidden",
-              )}
-            >
-              <DrawerTrigger className="flex items-center gap-2">
-                <PanelLeftIcon size={16} strokeWidth={1.5} />
-                <span className="text-sm">Menu</span>
-              </DrawerTrigger>
-            </div>
-            <main
-              className={cn(
-                "h-full dark:border-white/10 translate-x-0",
-                "lg:overflow-visible",
-                // This works in tandem with the `SidebarWrapper` component
-                "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
-                "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
-              )}
-            >
-              <Slotlet name="zudoku-before-content" />
-              {children ?? <Outlet />}
-              <Slotlet name="zudoku-after-content" />
-            </main>
-          </Drawer>
-        </Suspense>
+        {showSpinner ? (
+          <LoadingFallback />
+        ) : (
+          <Suspense fallback={<LoadingFallback />}>
+            <Drawer direction="left">
+              <Sidebar />
+              <div
+                className={cn(
+                  "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
+                  "peer-data-[navigation=false]:hidden",
+                )}
+              >
+                <DrawerTrigger className="flex items-center gap-2">
+                  <PanelLeftIcon size={16} strokeWidth={1.5} />
+                  <span className="text-sm">Menu</span>
+                </DrawerTrigger>
+              </div>
+              <main
+                className={cn(
+                  "h-full dark:border-white/10 translate-x-0",
+                  "lg:overflow-visible",
+                  // This works in tandem with the `SidebarWrapper` component
+                  "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
+                  "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
+                )}
+              >
+                <Slotlet name="zudoku-before-content" />
+                {children ?? <Outlet />}
+                <Slotlet name="zudoku-after-content" />
+              </main>
+            </Drawer>
+          </Suspense>
+        )}
       </div>
     </>
   );

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,25 +1,29 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { cx } from "class-variance-authority";
 import { MenuIcon } from "lucide-react";
-import { NavLink } from "react-router-dom";
+import { useState } from "react";
 import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
-  DrawerClose,
   DrawerContent,
   DrawerTitle,
   DrawerTrigger,
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Search } from "./Search.js";
-import { isHiddenItem } from "./TopNavigation.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
+import { isHiddenItem, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
   const { isAuthenticated } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   return (
-    <Drawer direction="right">
+    <Drawer
+      direction="right"
+      open={drawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
       <div className="flex lg:hidden justify-self-end">
         <DrawerTrigger className="lg:hidden">
           <MenuIcon size={22} />
@@ -36,21 +40,14 @@ export const MobileTopNavigation = () => {
           <Search />
         </div>
         <ul className="flex flex-col items-center gap-4 p-4">
+          <li>
+            <ThemeSwitch />
+          </li>
           {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.label}>
-              <NavLink
-                className={({ isActive }) =>
-                  cx(
-                    "block font-medium border-b-2",
-                    isActive
-                      ? "border-primary text-foreground"
-                      : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                  )
-                }
-                to={item.id}
-              >
-                <DrawerClose>{item.label}</DrawerClose>
-              </NavLink>
+              <button onClick={() => setDrawerOpen(false)}>
+                <TopNavItem {...item} />
+              </button>
             </li>
           ))}
         </ul>

package/src/lib/components/SyntaxHighlight.tsx

@@ -33,9 +33,10 @@ void import("prismjs/components/prism-javascript.min.js");
 // @ts-expect-error This is untyped
 void import("prismjs/components/prism-typescript.min.js");
 
+import { useTheme } from "next-themes";
 import { useState } from "react";
 import { cn } from "../util/cn.js";
-import { useTheme } from "./context/ThemeContext.js";
+import { ClientOnly } from "./ClientOnly.js";
 
 type SyntaxHighlightProps = {
   className?: string;
@@ -55,72 +56,106 @@ export const SyntaxHighlight = ({
   language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
-  const [isDark] = useTheme();
+  const { resolvedTheme } = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
   if (!props.code) {
     return null;
   }
 
+  const highlightTheme =
+    resolvedTheme === "dark" ? themes.vsDark : themes.github;
+
+  // hardcoded values from the themes to avoid color flash in SSR
+  const themeColorClasses =
+    "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
+
   return (
-    <Highlight
-      theme={isDark ? themes.vsDark : themes.github}
-      language={remapLang[language] ?? language}
-      {...props}
-    >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+    <ClientOnly
+      fallback={
         <div className="relative group">
           <pre
             className={cn(
               "relative scrollbar overflow-x-auto",
-              className,
               props.className,
-              props.noBackground && "!bg-transparent",
+              props.noBackground ? "!bg-transparent" : themeColorClasses,
               props.wrapLines && "whitespace-pre-wrap break-words",
             )}
-            style={style}
           >
-            {tokens.map((line, i) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <div key={i} {...getLineProps({ line })}>
-                {line.map((token, key) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <span key={key} {...getTokenProps({ token })} />
-                ))}
-              </div>
-            ))}
+            {props.code}
           </pre>
           {props.showLanguageIndicator && (
             <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
               {language}
             </span>
           )}
-          {copyable && (
-            <button
-              type="button"
-              aria-label="Copy code"
-              title="Copy code"
-              className="absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition"
-              disabled={isCopied}
-              onClick={() => {
-                setIsCopied(true);
-                void navigator.clipboard.writeText(
-                  tokens
-                    .map((line) => line.map(({ content }) => content).join(""))
-                    .join("\n"),
-                );
-                setTimeout(() => setIsCopied(false), 2000);
-              }}
-            >
-              {isCopied ? (
-                <CheckIcon className="text-emerald-600" size={16} />
-              ) : (
-                <CopyIcon size={16} />
-              )}
-            </button>
-          )}
         </div>
-      )}
-    </Highlight>
+      }
+    >
+      <Highlight
+        theme={highlightTheme}
+        language={remapLang[language] ?? language}
+        {...props}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <div className="relative group">
+            <pre
+              className={cn(
+                "relative scrollbar overflow-x-auto",
+                className,
+                props.className,
+                props.noBackground && "!bg-transparent",
+                props.wrapLines && "whitespace-pre-wrap break-words",
+              )}
+              style={style}
+            >
+              {tokens.map((line, i) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={i} {...getLineProps({ line })}>
+                  {line.map((token, key) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+            {props.showLanguageIndicator && (
+              <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+                {language}
+              </span>
+            )}
+            {copyable && (
+              <button
+                type="button"
+                aria-label="Copy code"
+                title="Copy code"
+                className="absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition"
+                disabled={isCopied}
+                onClick={() => {
+                  setIsCopied(true);
+                  void navigator.clipboard.writeText(
+                    tokens
+                      .map((l) => l.map(({ content }) => content).join(""))
+                      .join("\n"),
+                  );
+                  setTimeout(() => setIsCopied(false), 2000);
+                }}
+              >
+                {isCopied ? (
+                  <CheckIcon
+                    className="text-emerald-600"
+                    size={16}
+                    strokeWidth={2.5}
+                    absoluteStrokeWidth
+                  />
+                ) : (
+                  <CopyIcon size={16} />
+                )}
+              </button>
+            )}
+          </div>
+        )}
+      </Highlight>
+    </ClientOnly>
   );
 };

package/src/lib/components/ThemeSwitch.tsx

@@ -0,0 +1,26 @@
+import { MoonStarIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "zudoku/ui/Button.js";
+import { ClientOnly } from "./ClientOnly.js";
+
+export const ThemeSwitch = () => {
+  const { resolvedTheme, setTheme } = useTheme();
+  const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
+
+  return (
+    <ClientOnly>
+      <Button
+        variant="ghost"
+        aria-label={
+          resolvedTheme === "dark"
+            ? "Switch to light mode"
+            : "Switch to dark mode"
+        }
+        className="p-2.5 -m-2.5 rounded-full"
+        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      >
+        <ThemeIcon size={18} />
+      </Button>
+    </ClientOnly>
+  );
+};

package/src/lib/components/TopNavigation.tsx

@@ -1,8 +1,9 @@
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
-import { Link } from "react-router-dom";
-import { useAuth } from "../authentication/hook.js";
+import { NavLink, useNavigation } from "react-router-dom";
 import { TopNavigationItem } from "../../config/validators/validate.js";
+import { useAuth } from "../authentication/hook.js";
+import { ZudokuError } from "../util/invariant.js";
 import { joinPath } from "../util/joinPath.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { traverseSidebar } from "./navigation/utils.js";
@@ -32,7 +33,7 @@ export const TopNavigation = () => {
       <nav className="hidden lg:block border-b text-sm px-12 h-[--top-nav-height]">
         <ul className="flex flex-row items-center gap-8">
           {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-          <li key={item.id}>
+            <li key={item.id}>
               <TopNavItem {...item} />
             </li>
           ))}
@@ -42,10 +43,16 @@ export const TopNavigation = () => {
   );
 };
 
-const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
+export const TopNavItem = ({
+  id,
+  label,
+  default: defaultLink,
+}: TopNavigationItem) => {
   const { sidebars } = useZudoku();
-  const nav = useCurrentNavigation();
   const currentSidebar = sidebars[id];
+  const currentNav = useCurrentNavigation();
+  const isNavigating = Boolean(useNavigation().location);
+  const isActive = currentNav.topNavItem?.id === id && !isNavigating;
 
   // TODO: This is a bit of a hack to get the first link in the sidebar
   // We should really process this when we load the config so we can validate
@@ -60,25 +67,26 @@ const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
       : joinPath(id));
 
   if (!first) {
-    throw new Error(
-      `No links found in top navigation for top navigation '${id}'. Check that the sidebar isn't empty or that a default link set.`,
-    );
+    throw new ZudokuError("Page not found.", {
+      developerHint: `No links found in top navigation for '${id}'. Check that the sidebar isn't empty or that a default link is set.`,
+    });
   }
 
-  // Manually set the active sidebar based on our logic of what is active
-  const isActive = nav.data.topNavItem?.id === id;
-
   return (
-    <Link
-      className={cx(
-        "block py-3.5 font-medium -mb-px border-b-2",
-        isActive
-          ? "border-primary text-foreground"
-          : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-      )}
+    // We don't use isActive here because it has to be inside the sidebar,
+    // the top nav id doesn't necessarily start with the sidebar id
+    <NavLink
+      className={({ isPending }) =>
+        cx(
+          "block lg:py-3.5 font-medium -mb-px border-b-2",
+          isActive || isPending
+            ? "border-primary text-foreground"
+            : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+        )
+      }
       to={first}
     >
       {label}
-    </Link>
+    </NavLink>
   );
 };