zudoku 0.0.0-e4d0ea8 → 0.0.0-e5559fc

package/src/lib/components/Header.tsx

@@ -1,9 +1,12 @@
-import { MoonStarIcon, SunIcon } from "lucide-react";
 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";
-import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
-import { Button } from "../ui/Button.js";
+import {
+  isProfileMenuPlugin,
+  type ProfileNavigationItem,
+} from "../core/plugins.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,13 +19,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
-import { cn } from "../util/cn.js";
+import { joinUrl } from "../util/joinUrl.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 { Slot } from "./Slot.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
 
 const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
@@ -40,110 +44,146 @@ 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>
   );
 };
 
 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;
+  const { page, plugins, options } = context;
 
   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);
 
-  const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
+  const logoLightSrc = page?.logo
+    ? /https?:\/\//.test(page.logo.src.light)
+      ? page.logo.src.light
+      : joinUrl(options.basePath, page.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)
+    : undefined;
 
   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="border-b">
+        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height] border-transparent">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
                 {page?.logo && (
                   <>
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.light)
-                          ? page.logo.src.light
-                          : import.meta.env.BASE_URL + page.logo.src.light
-                      }
+                      src={logoLightSrc}
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className={cn("h-10", isDark && "hidden")}
+                      className="max-h-[--top-header-height] dark:hidden"
                       loading="lazy"
                     />
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.dark)
-                          ? page.logo.src.dark
-                          : import.meta.env.BASE_URL + page.logo.src.dark
-                      }
+                      src={logoDarkSrc}
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className={cn("h-10", !isDark && "hidden")}
+                      className="max-h-[--top-header-height] hidden dark:block"
                       loading="lazy"
                     />
                   </>
                 )}
-                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                <span className="font-semibold text-2xl">
                   {page?.pageTitle}
                 </span>
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-2 md:grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full justify-center hidden md:flex ">
-              <Search />
-            </div>
 
+          <div className="absolute inset-x-0 justify-center items-center hidden lg:flex w-full pointer-events-none">
+            <Search className="pointer-events-auto" />
+          </div>
+
+          <div className="flex items-center gap-8">
             <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>
-                )
+              <Slot.Target name="head-navigation-start" />
+              {isAuthEnabled && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded h-5 w-24 mr-4" />}
+                >
+                  {!isAuthenticated ? (
+                    <Button variant="ghost" onClick={() => auth.login()}>
+                      Login
+                    </Button>
+                  ) : (
+                    Object.values(accountItems).length > 0 && (
+                      <DropdownMenu modal={false}>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost">
+                            {profile?.name ?? "My Account"}
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-56">
+                          <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>
+                    )
+                  )}
+                </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>
-              <Slotlet name="head-navigation-end" />
+              <Slot.Target name="head-navigation-end" />
+              <ThemeSwitch />
             </div>
           </div>
         </div>
-        <Slotlet name="top-navigation-before" />
-        <TopNavigation />
-        <Slotlet name="top-navigation-after" />
+      </div>
+      <div className="border-b hidden lg:block">
+        <div className="max-w-screen-2xl mx-auto border-transparent">
+          <Slot.Target name="top-navigation-before" />
+          <TopNavigation />
+          <Slot.Target name="top-navigation-after" />
+        </div>
       </div>
     </header>
   );

package/src/lib/components/Heading.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 import { cva, type VariantProps } from "class-variance-authority";
@@ -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 = HTMLAttributes<HTMLHeadingElement> &
+  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 -start-[0.8em] pe-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}

package/src/lib/components/InlineCode.tsx

@@ -1,29 +1,26 @@
 import type { ReactNode } from "react";
+import { SelectOnClick } from "../plugins/openapi/components/SelectOnClick.js";
 import { cn } from "../util/cn.js";
 
 export const InlineCode = ({
   className,
   children,
   selectOnClick,
+  onClick,
 }: {
   className?: string;
   children: ReactNode;
   selectOnClick?: boolean;
+  onClick?: () => void;
 }) => (
-  <code
-    onClick={(e) => {
-      if (!selectOnClick) return;
-      const selection = window.getSelection();
-      const range = document.createRange();
-      range.selectNodeContents(e.currentTarget);
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-    }}
-    className={cn(
-      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
-      className,
-    )}
-  >
-    {children}
-  </code>
+  <SelectOnClick asChild enabled={selectOnClick} onClick={onClick}>
+    <code
+      className={cn(
+        "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
+        className,
+      )}
+    >
+      {children}
+    </code>
+  </SelectOnClick>
 );

package/src/lib/components/Layout.tsx

@@ -1,93 +1,69 @@
 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 { Drawer, DrawerTrigger } from "../ui/Drawer.js";
+import { Suspense, useEffect, type ReactNode } from "react";
+import { Outlet, useLocation } from "react-router";
 import { cn } from "../util/cn.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
-import { Sidebar } from "./navigation/Sidebar.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Main } from "./Main.js";
+import { Slot } from "./Slot.js";
 import { Spinner } from "./Spinner.js";
 
+const LoadingFallback = () => (
+  <main className="col-span-full row-span-full grid place-items-center">
+    <Spinner />
+  </main>
+);
+
 export const Layout = ({ children }: { children?: ReactNode }) => {
+  const { meta, authentication, options } = useZudoku();
   const location = useLocation();
-  const { setActiveAnchor } = useViewportAnchor();
-  const { meta, authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
 
-  const previousLocationPath = useRef(location.pathname);
-
   useEffect(() => {
     // Initialize the authentication plugin
-    authentication?.pageLoad?.();
+    authentication?.onPageLoad?.();
   }, [authentication]);
 
-  useEffect(() => {
-    // always reset on location change
-    if (location.pathname !== previousLocationPath.current) {
-      setActiveAnchor("");
-    }
-    previousLocationPath.current = location.pathname;
-  }, [location.pathname, setActiveAnchor]);
-
   return (
     <>
-      {import.meta.env.MODE === "standalone" && (
-        <style>{`:root { --top-nav-height: 0px; }`}</style>
-      )}
       <Helmet titleTemplate={meta?.title}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
         {meta?.description && (
           <meta name="description" content={meta.description} />
         )}
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
       </Helmet>
-      <Slotlet name="layout-before-head" />
+      <Slot.Target name="layout-before-head" />
       <Header />
-      <Slotlet name="layout-after-head" />
+      <Slot.Target 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>
+      <div
+        className={cn(
+          "grid max-w-screen-2xl w-full lg:mx-auto",
+          "[&:has(>:only-child)]:grid-rows-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr]",
+          "grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]",
+        )}
+      >
+        <Suspense fallback={<LoadingFallback />}>
+          <Main>{children ?? <Outlet />}</Main>
         </Suspense>
       </div>
+      <Footer />
     </>
   );
 };

package/src/lib/components/Main.tsx

@@ -0,0 +1,51 @@
+import { PanelLeftIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
+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 { Slot } from "./Slot.js";
+
+export const Main = ({ children }: PropsWithChildren) => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const { sidebar } = useCurrentNavigation();
+  const hasSidebar = sidebar.length > 0;
+  const isNavigating = useNavigation().state === "loading";
+  const { options } = useZudoku();
+
+  return (
+    <Drawer
+      direction={options.page?.dir === "rtl" ? "right" : "left"}
+      open={isDrawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
+      {hasSidebar && (
+        <Sidebar
+          onRequestClose={() => setDrawerOpen(false)}
+          sidebar={sidebar}
+        />
+      )}
+      {hasSidebar && (
+        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur 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} />
+            <span className="text-sm">Menu</span>
+          </DrawerTrigger>
+        </div>
+      )}
+      <main
+        data-pagefind-body
+        className={cn(
+          "px-4 lg:pe-8 lg:px-8",
+          !hasSidebar && "col-span-full",
+          isNavigating && "animate-pulse",
+        )}
+      >
+        <Slot.Target name="content-before" />
+        {children}
+        <Slot.Target name="content-after" />
+      </main>
+    </Drawer>
+  );
+};

package/src/lib/components/Markdown.tsx

@@ -1,38 +1,42 @@
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
+import { memo } from "react";
+import { MarkdownHooks, type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { visit } from "unist-util-visit";
+import { createConfiguredShikiRehypePlugins } from "../shiki.js";
 import { MdxComponents } from "../util/MdxComponents.js";
-
-// same as in packages/dev-portal/framework/vite.ts
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const rehypeCodeBlockPlugin = () => (tree: any) => {
-  visit(tree, "element", (node, _index, parent) => {
-    if (node.tagName === "code") {
-      node.properties.inline = String(parent?.tagName !== "pre");
-    }
-  });
-};
+import { useZudoku } from "./context/ZudokuContext.js";
 
 const remarkPlugins = [remarkGfm];
-const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
-export const Markdown = ({
-  content,
-  className,
-}: {
-  content: string;
-  className?: string;
-}) => (
-  <ReactMarkdown
-    remarkPlugins={remarkPlugins}
-    rehypePlugins={rehypePlugins}
-    components={MdxComponents}
-    className={className}
-  >
-    {content}
-  </ReactMarkdown>
+export const Markdown = memo(
+  ({
+    content,
+    className,
+    components,
+  }: {
+    content: string;
+    className?: string;
+    components?: Components;
+  }) => {
+    const { syntaxHighlighting } = useZudoku().options;
+    const rehypePlugins = createConfiguredShikiRehypePlugins(
+      syntaxHighlighting?.themes,
+    );
+
+    return (
+      <div className={className}>
+        <MarkdownHooks
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={{ ...MdxComponents, ...components }}
+        >
+          {content}
+        </MarkdownHooks>
+      </div>
+    );
+  },
 );
+
+Markdown.displayName = "Markdown";