zudoku 0.0.0-fcb84d6 → 0.0.0-fd8f8ad

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

@@ -0,0 +1,146 @@
+// https://github.com/Romainlg29/use-broadcast/
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Our hook will return an object with three properties:
+ * - send: a function that will send a message to all other tabs
+ * - state: the current state of the broadcast
+ * - subscribe: a function that will subscribe to the broadcast (Only if options.subscribe is true)
+ */
+export type UseBroadcastReturn<T> = {
+  send: (val: T) => void;
+  state: T | undefined;
+  subscribe: (callback: (e: T) => void) => () => void;
+};
+
+/**
+ * The options for the useBroadcast hook
+ */
+export type UseBroadcastOptions = {
+  subscribe?: boolean;
+};
+
+/**
+ *
+ * @param name The name of the broadcast channel
+ * @param val The initial value of the broadcast
+ * @returns Returns an object with three properties: send, state and subscribe
+ */
+export const useBroadcast = <T>(
+  name: string,
+  val?: T,
+  options?: UseBroadcastOptions,
+): UseBroadcastReturn<T> => {
+  /**
+   * Store the state of the broadcast
+   */
+  const [state, setState] = useState<T | undefined>(val);
+
+  /**
+   * Store the BroadcastChannel instance
+   */
+  const channel = useRef<BroadcastChannel | null>(null);
+
+  /**
+   * Store the listeners
+   */
+  const listeners = useRef<((e: T) => void)[]>([]);
+
+  /**
+   * This function send the value to all the other tabs
+   * @param val The value to send
+   */
+  const send = (val: T) => {
+    if (!channel.current) {
+      return;
+    }
+
+    /**
+     * Send the value to all the other tabs
+     */
+    channel.current.postMessage(val);
+
+    if (!options?.subscribe) {
+      setState(val);
+    }
+
+    /**
+     * Dispatch the event to the listeners
+     */
+    listeners.current.forEach((listener) => listener(val));
+  };
+
+  /**
+   * This function subscribe to the broadcast
+   * @param callback The callback function
+   * @returns Returns a function that unsubscribe the callback
+   */
+  const subscribe = (callback: (e: T) => void) => {
+    /**
+     * Add the callback to the listeners
+     */
+    listeners.current.push(callback);
+
+    /**
+     * Return a function that unsubscribe the callback
+     */
+    return () =>
+      listeners.current.splice(listeners.current.indexOf(callback), 1);
+  };
+
+  useEffect(() => {
+    /**
+     * If BroadcastChannel is not supported, we log an error and return
+     */
+    if (typeof window === "undefined") {
+      // eslint-disable-next-line no-console
+      console.error("Window is undefined!");
+      return;
+    }
+
+    if (!window.BroadcastChannel) {
+      // eslint-disable-next-line no-console
+      console.error("BroadcastChannel is not supported!");
+      return;
+    }
+
+    /**
+     * If the channel is null, we create a new one
+     */
+    if (!channel.current) {
+      channel.current = new BroadcastChannel(name);
+    }
+
+    /**
+     * Subscribe to the message event
+     * @param e The message event
+     */
+    channel.current.onmessage = (e) => {
+      /**
+       * Update the state
+       */
+      if (!options?.subscribe) {
+        setState(e.data);
+      }
+
+      /**
+       * Dispatch an event to the listeners
+       */
+      listeners.current.forEach((listener) => listener(e.data));
+    };
+
+    /**
+     * Cleanup
+     */
+    return () => {
+      if (!channel.current) {
+        return;
+      }
+
+      channel.current.close();
+      channel.current = null;
+    };
+  }, [name, options]);
+
+  return { send, state, subscribe };
+};

package/src/lib/components/Bootstrap.tsx

@@ -1,5 +1,10 @@
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode } from "react";
+import { StrictMode, useState } from "react";
 import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
   type createStaticRouter,
@@ -15,13 +20,31 @@ const Bootstrap = ({
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
 }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 5,
+          },
+        },
+      }),
+  );
+
   return (
     <StrictMode>
-      <HelmetProvider>
-        <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-          <RouterProvider router={router} />
-        </StaggeredRenderContext.Provider>
-      </HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+          <HelmetProvider>
+            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+              <RouterProvider
+                router={router}
+                future={{ v7_startTransition: true }}
+              />
+            </StaggeredRenderContext.Provider>
+          </HelmetProvider>
+        </HydrationBoundary>
+      </QueryClientProvider>
     </StrictMode>
   );
 };
@@ -29,16 +52,20 @@ const Bootstrap = ({
 const BootstrapStatic = ({
   router,
   context,
+  queryClient,
   helmetContext,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
+  queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
 }) => (
   <StrictMode>
-    <HelmetProvider context={helmetContext}>
-      <StaticRouterProvider router={router} context={context} />
-    </HelmetProvider>
+    <QueryClientProvider client={queryClient}>
+      <HelmetProvider context={helmetContext}>
+        <StaticRouterProvider router={router} context={context} />
+      </HelmetProvider>
+    </QueryClientProvider>
   </StrictMode>
 );
 

package/src/lib/components/ClientOnly.tsx

@@ -1,13 +1,16 @@
-import { useSyncExternalStore } from "react";
+import { type ReactNode, useSyncExternalStore } from "react";
 
 const noop = () => () => {};
 
-export const ClientOnly = (props: { children: React.ReactNode }) => {
+export const ClientOnly = (props: {
+  children: ReactNode;
+  fallback?: ReactNode;
+}) => {
   const value = useSyncExternalStore(
     noop,
     () => "client",
     () => "server",
   );
 
-  return value === "client" ? props.children : null;
+  return value === "client" ? props.children : props.fallback;
 };

package/src/lib/components/DeveloperHint.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { Callout } from "../ui/Callout.js";
+import { Markdown } from "./Markdown.js";
 
 export const DeveloperHint = ({
   children,
@@ -13,7 +14,11 @@ export const DeveloperHint = ({
   return (
     <Callout type="caution" title="Developer hint" className={className}>
       <div className="flex flex-col gap-2">
-        <div>{children}</div>
+        {typeof children === "string" ? (
+          <Markdown content={children} />
+        ) : (
+          <div>{children}</div>
+        )}
         <small className="italic">
           Note: This hint is only shown in development mode.
         </small>

package/src/lib/components/Header.tsx

@@ -1,9 +1,9 @@
-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 { Button } from "../ui/Button.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,13 +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 }) => {
@@ -47,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;
@@ -57,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 />
@@ -70,17 +68,32 @@ export const Header = memo(function HeaderInner() {
                 {page?.logo && (
                   <>
                     <img
-                      src={page.logo.src.light}
+                      src={
+                        /https?:\/\//.test(page.logo.src.light)
+                          ? page.logo.src.light
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.light,
+                            )
+                      }
                       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
-                      src={page.logo.src.dark}
+                      data-hide-on-theme="light"
+                      src={
+                        /https?:\/\//.test(page.logo.src.dark)
+                          ? page.logo.src.dark
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.dark,
+                            )
+                      }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className={cn("h-10", !isDark && "hidden")}
+                      className="h-10"
                       loading="lazy"
                     />
                   </>
@@ -99,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
-                type="button"
-                aria-label={
-                  isDark ? "Switch to light mode" : "Switch to dark mode"
-                }
-                className="cursor-pointer hover:bg-secondary 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/MobileTopNavigation.tsx

@@ -2,6 +2,7 @@ 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 { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
   DrawerClose,
@@ -11,9 +12,13 @@ import {
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Search } from "./Search.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
+import { isHiddenItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation } = useZudoku();
+  const { isAuthenticated } = useAuth();
+
   return (
     <Drawer direction="right">
       <div className="flex lg:hidden justify-self-end">
@@ -32,7 +37,10 @@ export const MobileTopNavigation = () => {
           <Search />
         </div>
         <ul className="flex flex-col items-center gap-4 p-4">
-          {topNavigation.map((item) => (
+          <li>
+            <ThemeSwitch />
+          </li>
+          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.label}>
               <NavLink
                 className={({ isActive }) =>

package/src/lib/components/SlotletProvider.tsx

@@ -8,6 +8,7 @@ import { isValidElementType } from "react-is";
 import {
   type Location,
   type NavigateFunction,
+  type Params,
   type SetURLSearchParams,
 } from "react-router-dom";
 import { useExposedProps } from "../util/useExposedProps.js";
@@ -38,6 +39,7 @@ export type ExposedComponentProps = {
   navigate: NavigateFunction;
   searchParams: URLSearchParams;
   setSearchParams: SetURLSearchParams;
+  params: Params;
 };
 
 export const Slotlet = ({ name }: { name: string }) => {

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;
@@ -46,77 +47,114 @@ type SyntaxHighlightProps = {
   language?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
+const remapLang = {
+  mdx: "md",
+} as Record<string, string>;
+
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
-  const [isDark] = useTheme();
+  const { theme } = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
   if (!props.code) {
     return null;
   }
 
+  const highlightTheme = theme === "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={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,24 @@
+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 { theme, setTheme } = useTheme();
+  const ThemeIcon = theme === "dark" ? MoonStarIcon : SunIcon;
+
+  return (
+    <ClientOnly>
+      <Button
+        variant="ghost"
+        aria-label={
+          theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+        }
+        className="p-2.5 -m-2.5 rounded-full"
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      >
+        <ThemeIcon size={18} />
+      </Button>
+    </ClientOnly>
+  );
+};