zudoku 0.3.0-dev.13 → 0.3.0-dev.131

package/src/lib/components/Header.tsx

@@ -1,69 +1,140 @@
 import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
 
+import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../authentication/hook.js";
-import { TopNavigation } from "./TopNavigation.js";
-import { useDevPortal } from "./context/DevPortalProvider.js";
+import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
+import { Button } from "../ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../ui/DropdownMenu.js";
+import { cn } from "../util/cn.js";
 import { useTheme } from "./context/ThemeContext.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+import { Search } from "./Search.js";
+import { Slotlet } from "./SlotletProvider.js";
+import { TopNavigation } from "./TopNavigation.js";
+
+const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
+  return item.children ? (
+    <DropdownMenuSub key={item.label}>
+      <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent>
+          {item.children.map((item, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <RecursiveMenu key={i} item={item} />
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+  ) : (
+    <Link to={item.path ?? ""}>
+      <DropdownMenuItem key={item.label}>{item.label}</DropdownMenuItem>
+    </Link>
+  );
+};
 
 export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
-  const { isAuthenticated, profile, isAuthEnabled, login, logout } = useAuth();
-  const { page } = useDevPortal();
+  const { isAuthenticated, profile, isAuthEnabled } = useAuth();
+  const { pathname } = useLocation();
+  const context = useZudoku();
+  const { page, plugins } = context;
+
+  const accountItems = plugins
+    .filter((p) => isProfileMenuPlugin(p))
+    .flatMap((p) => p.getProfileMenuItems(context))
+    .map((i) => <RecursiveMenu key={i.label} item={i} />);
 
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
   return (
     <header className="fixed top-0 w-full z-10 bg-background/80 backdrop-blur">
       <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b border-border px-12 h-[--top-header-height]">
-          <div className="flex items-center gap-3.5">
-            {page?.logo && (
-              <img src={page.logo} alt={page.pageTitle} className="h-10" />
-            )}
-            <span className="font-bold text-2xl text-foreground/85 tracking-wide">
-              {page?.pageTitle}
-            </span>
+        <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
+          <div className="flex">
+            <Link to="/">
+              <div className="flex items-center gap-3.5">
+                {page?.logo && (
+                  <>
+                    <img
+                      src={page.logo.src.light}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", isDark && "hidden")}
+                      loading="lazy"
+                    />
+                    <img
+                      src={page.logo.src.dark}
+                      alt={page.logo.alt ?? page.pageTitle}
+                      style={{ width: page.logo.width }}
+                      className={cn("h-10", !isDark && "hidden")}
+                      loading="lazy"
+                    />
+                  </>
+                )}
+                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                  {page?.pageTitle}
+                </span>
+              </div>
+            </Link>
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full max-w-prose">
-              {/*<button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
-                <div className="flex items-center gap-2 flex-grow">
-                  <SearchIcon size={14} />
-                  Search
-                </div>
-                <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
-                  ⌘K
-                </kbd>
-              </button>*/}
+            <div className="w-full justify-center flex">
+              <Search />
             </div>
 
-            <div className="items-center justify-self-end text-sm hidden lg:flex">
-              {isAuthEnabled && (
-                <>
-                  {isAuthenticated ? (
-                    <button
-                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded text-nowrap"
-                      onClick={logout}
-                    >
-                      Logout {profile?.email ? `(${profile.email})` : null}
-                    </button>
-                  ) : (
-                    <button
-                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
-                      onClick={login}
-                    >
-                      Login
-                    </button>
-                  )}
-                </>
+            <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
+              <Slotlet name="head-navigation-start" />
+              {isAuthEnabled && !isAuthenticated ? (
+                <Button variant="ghost" asChild>
+                  <Link
+                    to={{
+                      pathname: "/signin",
+                      search: `?redirect=${encodeURIComponent(pathname)}`,
+                    }}
+                  >
+                    Login
+                  </Link>
+                </Button>
+              ) : (
+                accountItems.length > 0 && (
+                  <DropdownMenu>
+                    <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>
+                )
               )}
+
               <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>
+              <Slotlet name="head-navigation-end" />
             </div>
           </div>
         </div>

package/src/lib/components/InlineCode.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { cn } from "../util/cn.js";
+
+export const InlineCode = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) => (
+  <code
+    className={cn(
+      className,
+      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
+    )}
+  >
+    {children}
+  </code>
+);

package/src/lib/components/Layout.tsx

@@ -1,18 +1,20 @@
+import { Helmet } from "@zudoku/react-helmet-async";
 import { Suspense, useEffect, useRef, type ReactNode } from "react";
 import { Outlet, useLocation } from "react-router-dom";
-import { Helmet } from "../core/helmet.js";
+import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
+import { useZudoku } from "./context/ZudokuContext.js";
 import { Header } from "./Header.js";
-import { SideNavigation } from "./navigation/SideNavigation.js";
+import { Sidebar } from "./navigation/Sidebar.js";
+import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
-  const { meta } = useDevPortal();
+  const { meta } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
@@ -29,8 +31,10 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
+      {import.meta.env.MODE === "standalone" && (
+        <style>{`:root { --top-nav-height: 0px; }`}</style>
+      )}
       <Helmet titleTemplate={meta?.title}>
-        <title>Home</title>
         {meta?.description && (
           <meta name="description" content={meta.description} />
         )}
@@ -46,14 +50,18 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
             </div>
           }
         >
-          <SideNavigation />
+          <Sidebar />
           <main
-            className="dark:border-white/10 translate-x-0 h-full
-          lg:overflow-visible
-          lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]
-          lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] peer-data-[navigation=true]:pl-12"
+            className={cn(
+              "dark:border-white/10 translate-x-0 h-full",
+              "lg:overflow-visible",
+              "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>
         </Suspense>
       </div>

package/src/lib/components/Markdown.tsx

@@ -1,4 +1,5 @@
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
 import { MdxComponents } from "../util/MdxComponents.js";
@@ -8,13 +9,13 @@ import { MdxComponents } from "../util/MdxComponents.js";
 const rehypeCodeBlockPlugin = () => (tree: any) => {
   visit(tree, "element", (node, _index, parent) => {
     if (node.tagName === "code") {
-      node.properties.inline = parent?.tagName !== "pre";
+      node.properties.inline = String(parent?.tagName !== "pre");
     }
   });
 };
 
 const remarkPlugins = [remarkGfm];
-const rehypePlugins = [rehypeCodeBlockPlugin];
+const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";

package/src/lib/components/NotFoundPage.tsx

@@ -0,0 +1,33 @@
+import { UnlinkIcon } from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { DeveloperHint } from "./DeveloperHint.js";
+import { Heading } from "./Heading.js";
+import { ProseClasses } from "./Markdown.js";
+
+export const NotFoundPage = () => {
+  const params = useParams();
+
+  return (
+    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+      <CategoryHeading>404</CategoryHeading>
+      <Heading level={1} className="flex gap-3.5 items-center">
+        Page not found
+        <UnlinkIcon size={24} />
+      </Heading>
+      <DeveloperHint>
+        Start by adding a file at{" "}
+        <code>
+          {"{PROJECT_ROOT}"}/{params["*"]}.mdx
+        </code>{" "}
+        and add some content to make this error go away.
+      </DeveloperHint>
+      <p>
+        It seems that the page you are looking for does not exist or may have
+        been moved. Please check the URL for any typos or use the navigation
+        menu to find the correct page.
+      </p>
+      <Link to="/">Go back home</Link>
+    </div>
+  );
+};

package/src/lib/components/Search.tsx

@@ -0,0 +1,60 @@
+import { SearchIcon } from "lucide-react";
+import { Suspense, useCallback, useEffect, useState } from "react";
+import { isSearchPlugin } from "../core/plugins.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Search = () => {
+  const ctx = useZudoku();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onClose = useCallback(() => setIsOpen(false), []);
+
+  useEffect(() => {
+    if (isOpen) {
+      return;
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setIsOpen(true);
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, setIsOpen]);
+
+  const searchPlugin = ctx.plugins.find(isSearchPlugin);
+
+  if (!searchPlugin) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72"
+      >
+        <div className="flex items-center gap-2 flex-grow">
+          <SearchIcon size={14} />
+          Search
+        </div>
+        <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
+          ⌘K
+        </kbd>
+      </button>
+      <Suspense fallback={null}>
+        {searchPlugin.renderSearch({
+          isOpen,
+          onClose,
+        })}
+      </Suspense>
+    </>
+  );
+};

package/src/lib/components/SlotletProvider.tsx

@@ -0,0 +1,30 @@
+import React, { type ReactElement, ReactNode, useContext } from "react";
+import { isValidElementType } from "react-is";
+export type Slotlets = Record<string, ReactNode | ReactElement>;
+
+const SlotletContext = React.createContext<Slotlets | undefined>({});
+
+export const SlotletProvider = ({
+  slotlets,
+  children,
+}: {
+  children: ReactNode;
+  slotlets?: Slotlets;
+}) => {
+  return (
+    <SlotletContext.Provider value={slotlets}>
+      {children}
+    </SlotletContext.Provider>
+  );
+};
+
+export const Slotlet = ({ name }: { name: string }) => {
+  const context = useContext(SlotletContext);
+  const componentOrElement = context?.[name];
+
+  if (isValidElementType(componentOrElement)) {
+    return React.createElement(componentOrElement);
+  }
+
+  return componentOrElement;
+};

package/src/lib/components/SyntaxHighlight.tsx

@@ -7,25 +7,23 @@ import {
 
 import { CheckIcon, CopyIcon } from "lucide-react";
 
-if (!import.meta.env.SSR) {
-  globalThis.Prism = Prism;
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-bash.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-ruby.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-markup-templating.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-php.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-json.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-java.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-csharp.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-objectivec.min.js");
-}
+globalThis.Prism = Prism;
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-bash.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-ruby.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-markup-templating.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-php.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-json.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-java.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-csharp.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-objectivec.min.js");
 
 import { useState } from "react";
 import { cn } from "../util/cn.js";
@@ -37,10 +35,12 @@ type SyntaxHighlightProps = {
   wrapLines?: boolean;
   copyable?: boolean;
   showLanguageIndicator?: boolean;
-} & Omit<HighlightProps, "children">;
+  language?: string;
+} & Omit<HighlightProps, "children" | "language">;
 
 export const SyntaxHighlight = ({
   copyable = true,
+  language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
   const [isDark] = useTheme();
@@ -51,23 +51,44 @@ export const SyntaxHighlight = ({
   }
 
   return (
-    <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
+    <Highlight
+      theme={isDark ? themes.vsDark : themes.github}
+      language={language}
+      {...props}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre
-          className={cn(
-            "group relative",
-            className,
-            props.className,
-            props.noBackground && "!bg-transparent",
-            props.wrapLines && "whitespace-pre-wrap break-words",
+        <div className="relative group">
+          <pre
+            className={cn(
+              "relative 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>
           )}
-          style={style}
-        >
           {copyable && (
             <button
               type="button"
               aria-label="Copy code"
-              className="absolute top-1.5 right-3 p-3 opacity-0 group-hover:opacity-100 transition hover:bg-zinc-500/10 hover:dark:bg-zinc-700/25 rounded-lg text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400"
+              title="Copy code"
+              className="absolute top-1.5 right-1.5 p-2.5 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);
@@ -86,19 +107,7 @@ export const SyntaxHighlight = ({
               )}
             </button>
           )}
-          {props.showLanguageIndicator && (
-            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-              {props.language}
-            </span>
-          )}
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token })} />
-              ))}
-            </div>
-          ))}
-        </pre>
+        </div>
       )}
     </Highlight>
   );

package/src/lib/components/TopNavigation.tsx

@@ -1,15 +1,20 @@
 import { cx } from "class-variance-authority";
 import { NavLink } from "react-router-dom";
 
-import { useDevPortal } from "./context/DevPortalProvider.js";
+import { useZudoku } from "./context/ZudokuContext.js";
 
 export const TopNavigation = () => {
-  const { navigation } = useDevPortal();
+  const { topNavigation } = useZudoku();
+
+  // Hide top nav if there is only one item
+  if (topNavigation.length <= 1) {
+    return null;
+  }
 
   return (
-    <nav className="border-b border-border text-sm px-12 h-[--top-nav-height]">
+    <nav className="border-b text-sm px-12 h-[--top-nav-height]">
       <ul className="flex flex-row items-center gap-8">
-        {navigation.map((item) => (
+        {topNavigation.map((item) => (
           <li key={item.label}>
             <NavLink
               className={({ isActive }) =>
@@ -20,7 +25,7 @@ export const TopNavigation = () => {
                     : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
                 )
               }
-              to={item.path}
+              to={item.id}
             >
               {item.label}
             </NavLink>

package/src/lib/components/context/ThemeContext.tsx

@@ -1,46 +1,8 @@
-import {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, useContext } from "react";
 
-const ThemeContext = createContext<readonly [boolean, () => void]>([
+export const ThemeContext = createContext<readonly [boolean, () => void]>([
   false,
   () => {},
 ]);
 
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-};
-
-export const ThemeProvider = (props: { children: ReactNode }) => {
-  const [dark, setDark] = useState(false);
-
-  // On mount, read the preferred theme from the persistence
-  useEffect(() => {
-    const theme = localStorage.getItem("theme");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-    const isDark = theme === "dark" || (!theme && prefersDark.matches);
-
-    setDark(isDark);
-  }, [dark]);
-
-  // To toggle between dark and light modes
-  const toggle = useCallback(() => {
-    const toggled = !dark;
-    document.documentElement.classList.toggle("dark", toggled);
-    localStorage.setItem("theme", toggled ? "dark" : "light");
-    setDark(toggled);
-  }, [dark]);
-
-  const value = [dark, toggle] as const;
-
-  return <ThemeContext.Provider value={value} {...props} />;
-};
+export const useTheme = () => useContext(ThemeContext);

package/src/lib/components/context/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import { ReactNode, useCallback, useEffect, useState } from "react";
+import { ThemeContext } from "./ThemeContext.js";
+
+export const ThemeProvider = (props: { children: ReactNode }) => {
+  const [dark, setDark] = useState(false);
+
+  // On mount, read the preferred theme from the persistence
+  useEffect(() => {
+    const theme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+    const isDark = theme === "dark" || (!theme && prefersDark.matches);
+
+    setDark(isDark);
+  }, [dark]);
+
+  // To toggle between dark and light modes
+  const toggle = useCallback(() => {
+    const toggled = !dark;
+    document.documentElement.classList.toggle("dark", toggled);
+    localStorage.setItem("theme", toggled ? "dark" : "light");
+    setDark(toggled);
+  }, [dark]);
+
+  const value = [dark, toggle] as const;
+
+  return <ThemeContext.Provider value={value} {...props} />;
+};