zudoku 0.0.0-fd8f8ad → 0.0.0-feda542

package/src/lib/components/Layout.tsx

@@ -1,47 +1,51 @@
 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 { Main } from "./Main.js";
 import { Slotlet } from "./SlotletProvider.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} />
         )}
@@ -51,43 +55,18 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <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>
+      <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,50 @@
+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 } from "./context/ZudokuContext.js";
+import { Sidebar } from "./navigation/Sidebar.js";
+import { Slotlet } from "./SlotletProvider.js";
+
+export const Main = ({ children }: PropsWithChildren) => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const { sidebar } = useCurrentNavigation();
+  const hasSidebar = sidebar.length > 0;
+  const isNavigating = useNavigation().state === "loading";
+
+  return (
+    <Drawer
+      direction="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 left-0 right-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",
+        )}
+      >
+        <Slotlet name="zudoku-before-content" />
+        {children}
+        <Slotlet name="zudoku-after-content" />
+      </main>
+    </Drawer>
+  );
+};

package/src/lib/components/Markdown.tsx

@@ -1,8 +1,9 @@
-import ReactMarkdown from "react-markdown";
+import { memo } from "react";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
 import { MdxComponents } from "../util/MdxComponents.js";
+import { ReactMarkdown } from "./ReactMarkdown.js";
 
 // same as in packages/dev-portal/framework/vite.ts
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,19 +21,17 @@ 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 }: { content: string; className?: string }) => (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={MdxComponents}
+      className={className}
+    >
+      {content}
+    </ReactMarkdown>
+  ),
 );
+
+Markdown.displayName = "Markdown";

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,63 +1,65 @@
 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 { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem } from "./TopNavigation.js";
+import { isHiddenItem, PageProgress, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { topNavigation } = useZudoku();
+  const { topNavigation, options } = 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} />
         </DrawerTrigger>
+        <PageProgress />
       </div>
       <DrawerContent
-        className="lg:hidden h-screen right-0 left-auto w-[320px] rounded-none overflow-auto"
+        className="lg:hidden h-[100dvh] right-0 left-auto w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <VisuallyHidden>
-          <DrawerTitle>Navigation</DrawerTitle>
-        </VisuallyHidden>
-        <div className="flex p-4">
-          <Search />
+        <div className="p-4 overflow-y-auto overscroll-none h-full flex flex-col justify-between">
+          <div>
+            <VisuallyHidden>
+              <DrawerTitle>Navigation</DrawerTitle>
+            </VisuallyHidden>
+            <Search className="flex p-4" />
+            <ul className="flex flex-col items-center gap-4 p-4">
+              <li>
+                <ThemeSwitch />
+              </li>
+              {topNavigation
+                .filter(isHiddenItem(isAuthenticated))
+                .map((item) => (
+                  <li key={item.label}>
+                    <button type="button" onClick={() => setDrawerOpen(false)}>
+                      <TopNavItem {...item} />
+                    </button>
+                  </li>
+                ))}
+            </ul>
+          </div>
+          {options.page?.showPoweredBy !== false && (
+            <PoweredByZudoku className="flex-grow-0 justify-center gap-1" />
+          )}
         </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>
-            </li>
-          ))}
-        </ul>
       </DrawerContent>
     </Drawer>
   );

package/src/lib/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import { UnlinkIcon } from "lucide-react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { DeveloperHint } from "./DeveloperHint.js";
 import { Heading } from "./Heading.js";

package/src/lib/components/Pagination.tsx

@@ -0,0 +1,50 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { Link } from "react-router";
+import { cn } from "../util/cn.js";
+import { Button } from "./index.js";
+
+export const Pagination = ({
+  prev,
+  next,
+  className,
+}: {
+  prev: { to: string; label: string } | undefined;
+  next: { to: string; label: string } | undefined;
+  className?: string;
+}) => {
+  const linkClass =
+    "group transition-all p-5 space-x-1 transition-all hover:text-foreground";
+
+  return (
+    <div
+      className={cn(
+        "flex -mx-4 text-muted-foreground font-semibold",
+        prev ? "justify-between" : "justify-end",
+        className,
+      )}
+    >
+      {prev && (
+        <Button variant="ghost" asChild>
+          <Link to={prev.to} relative="path" className={linkClass}>
+            <ArrowLeftIcon
+              className="group-hover:motion-safe:animate-bounce-x-start"
+              size={12}
+            />
+            <span className="truncate">{prev.label}</span>
+          </Link>
+        </Button>
+      )}
+      {next && (
+        <Button variant="ghost" asChild>
+          <Link to={next.to} relative="path" className={linkClass}>
+            <span className="truncate ">{next.label}</span>
+            <ArrowRightIcon
+              className="group-hover:motion-safe:animate-bounce-x-end"
+              size={12}
+            />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/PathRenderer.tsx

@@ -0,0 +1,61 @@
+import { Fragment, type ReactNode } from "react";
+
+type PathParamProps = {
+  name: string;
+  index: number;
+  originalValue?: string;
+};
+
+export const PathRenderer = ({
+  path,
+  renderParam,
+}: {
+  path: string;
+  renderParam: (props: PathParamProps) => ReactNode;
+}) => {
+  let paramIndex = 0;
+  return path.split("/").map((part, i, arr) => {
+    const matches = Array.from(part.matchAll(/{([^}]+)}/g));
+    const elements: ReactNode[] = [];
+    let lastIndex = 0;
+
+    matches.forEach((match) => {
+      const [originalValue, name] = match;
+      if (!name) return;
+      const startIndex = match.index!;
+
+      if (startIndex > lastIndex) {
+        elements.push(
+          <Fragment key={`text-${lastIndex}-${startIndex}`}>
+            {part.slice(lastIndex, startIndex)}
+          </Fragment>,
+        );
+      }
+
+      elements.push(
+        <Fragment key={`param-${name}`}>
+          {renderParam({ name, originalValue, index: paramIndex++ })}
+        </Fragment>,
+      );
+
+      lastIndex = startIndex + originalValue.length;
+    });
+
+    if (lastIndex < part.length) {
+      elements.push(
+        <Fragment key={`text-${lastIndex}-${part.length}`}>
+          {part.slice(lastIndex)}
+        </Fragment>,
+      );
+    }
+
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <Fragment key={`${part}-${i}`}>
+        {elements}
+        {i < arr.length - 1 && "/"}
+        <wbr />
+      </Fragment>
+    );
+  });
+};

package/src/lib/components/ReactMarkdown.license.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Espen Hovlandsdal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.