zudoku 0.1.1-dev.9 → 0.3.0-dev.100

package/src/lib/components/Dialog.tsx

@@ -0,0 +1,119 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg border-border",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <XIcon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/lib/components/ErrorPage.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { Heading } from "./Heading.js";
+import { ProseClasses } from "./Markdown.js";
+
+export const ErrorPage = ({
+  title = "An error occurred",
+  message,
+  category,
+}: {
+  title?: ReactNode;
+  message?: ReactNode;
+  category?: ReactNode;
+}) => {
+  return (
+    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+      {category && <CategoryHeading>{category}</CategoryHeading>}
+      {title && (
+        <Heading level={1} className="flex gap-3.5 items-center">
+          {title}
+        </Heading>
+      )}
+      <p>{message}</p>
+      <Link to="/">Go back home</Link>
+    </div>
+  );
+};

package/src/lib/components/Header.tsx

@@ -0,0 +1,142 @@
+import { MoonStarIcon, SunIcon } from "lucide-react";
+import { memo } from "react";
+
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../authentication/hook.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 { 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 } = 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 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 justify-center flex">
+              <Search />
+            </div>
+
+            <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
+              {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>
+            </div>
+          </div>
+        </div>
+        <TopNavigation />
+      </div>
+    </header>
+  );
+});

package/src/lib/components/Heading.tsx

@@ -0,0 +1,79 @@
+import React, { type ReactNode } from "react";
+import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+const heading = cva("group relative", {
+  variants: {
+    level: {
+      6: "text-md",
+      5: "text-lg",
+      4: "text-xl",
+      3: "text-xl font-semibold",
+      2: "text-2xl font-bold",
+      1: "text-4xl font-extrabold",
+    },
+  },
+  defaultVariants: {
+    level: 1,
+  },
+});
+
+const getComponent = (level: number) => {
+  switch (level) {
+    case 1:
+      return "h1";
+    case 2:
+      return "h2";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+    default:
+      return "h1";
+  }
+};
+
+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 const Heading: React.FC<HeadingProps> = ({
+  level,
+  children,
+  id,
+  className,
+  registerSidebarAnchor,
+}) => {
+  const Component = getComponent(level ?? 1);
+  const { ref } = useRegisterAnchorElement();
+
+  return (
+    <Component
+      className={heading({ className, level })}
+      ref={registerSidebarAnchor ? ref : undefined}
+      id={id}
+    >
+      {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"
+          aria-label={`Link to ${id}`}
+        >
+          #
+        </a>
+      )}
+      {children}
+    </Component>
+  );
+};

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

@@ -0,0 +1,70 @@
+import { Helmet } from "@zudoku/react-helmet-async";
+import { Suspense, useEffect, useRef, type ReactNode } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import { cn } from "../util/cn.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 { Header } from "./Header.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 } = useZudoku();
+
+  useScrollToAnchor();
+  useScrollToTop();
+
+  const previousLocationPath = useRef(location.pathname);
+
+  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}>
+        {meta?.description && (
+          <meta name="description" content={meta.description} />
+        )}
+        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+      </Helmet>
+      <Header />
+
+      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12 h-full">
+        <Suspense
+          fallback={
+            <div className="grid h-full place-items-center">
+              <Spinner />
+            </div>
+          }
+        >
+          <Sidebar />
+          <main
+            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/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>
+    </>
+  );
+};