@mehdad67/apitogo 0.1.24

package/src/lib/components/MobileTopNavigation.tsx

@@ -0,0 +1,276 @@
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
+import { Skeleton } from "@lukoweb/apitogo/ui/Skeleton.js";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { deepEqual } from "fast-equals";
+import {
+  ChevronDownIcon,
+  LogOutIcon,
+  MenuIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Link, useLocation } from "react-router";
+import {
+  isHeaderNavGroup,
+  type HeaderNavItem,
+  type HeaderNavLinkItem,
+} from "../../config/validators/HeaderNavigationSchema.js";
+import { useAuth } from "../authentication/hook.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/Collapsible.js";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../ui/Drawer.js";
+import { ClientOnly } from "./ClientOnly.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
+import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
+import { PageProgress } from "./PageProgress.js";
+import { Slot } from "./Slot.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
+
+const MobileHeaderNavLink = ({
+  item,
+  onClick,
+}: {
+  item: HeaderNavLinkItem;
+  onClick: () => void;
+}) => {
+  const Icon = item.icon as LucideIcon | undefined;
+  return (
+    <Link
+      to={item.to}
+      target={item.target}
+      rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+      onClick={onClick}
+      className="flex items-center font-medium gap-2 py-2 text-foreground/80 hover:text-foreground"
+    >
+      {Icon && <Icon size={16} />}
+      {item.label}
+    </Link>
+  );
+};
+
+const MobileHeaderNavItem = ({
+  item,
+  onNavigate,
+}: {
+  item: HeaderNavItem;
+  onNavigate: () => void;
+}) => {
+  if ("to" in item) {
+    const Icon = item.icon as LucideIcon | undefined;
+    return (
+      <li className="w-full">
+        <Link
+          to={item.to}
+          target={item.target}
+          rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+          onClick={onNavigate}
+          className="flex items-center gap-2 py-2 text-base font-medium"
+        >
+          {Icon && <Icon size={16} />}
+          {item.label}
+        </Link>
+      </li>
+    );
+  }
+
+  return (
+    <li className="w-full">
+      <Collapsible>
+        <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-base font-medium group">
+          {item.label}
+          <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ul className="flex flex-col border-l ms-1 ps-3 my-1">
+            {item.items.map((subItem) =>
+              isHeaderNavGroup(subItem) ? (
+                <li key={subItem.label} className="flex flex-col">
+                  <div className="text-sm text-muted-foreground py-2">
+                    {subItem.label}
+                  </div>
+                  {subItem.items.map((link) => (
+                    <MobileHeaderNavLink
+                      key={link.to}
+                      item={link}
+                      onClick={onNavigate}
+                    />
+                  ))}
+                </li>
+              ) : (
+                <li key={subItem.to}>
+                  <MobileHeaderNavLink item={subItem} onClick={onNavigate} />
+                </li>
+              ),
+            )}
+          </ul>
+        </CollapsibleContent>
+      </Collapsible>
+    </li>
+  );
+};
+
+export const MobileTopNavigation = () => {
+  const context = useZudoku();
+  const authState = useAuth();
+  const location = useLocation();
+  const currentNav = useCurrentNavigation();
+
+  const {
+    options: { header, navigation = [], site },
+    getProfileMenuItems,
+  } = context;
+  const headerNavigation = header?.navigation ?? [];
+  const { isAuthenticated, profile, isAuthEnabled } = authState;
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const accountItems = getProfileMenuItems();
+  const filteredItems = navigation.filter(
+    shouldShowItem({ auth: authState, context }),
+  );
+
+  return (
+    <Drawer
+      direction={site?.dir === "rtl" ? "left" : "right"}
+      open={drawerOpen}
+      onOpenChange={setDrawerOpen}
+    >
+      <div className="flex lg:hidden justify-self-end">
+        <DrawerTrigger className="lg:hidden">
+          <MenuIcon size={22} />
+        </DrawerTrigger>
+        <PageProgress />
+      </div>
+      <DrawerContent
+        className="lg:hidden h-dvh inset-e-0 start-auto w-[340px] rounded-none"
+        aria-describedby={undefined}
+      >
+        <div className="py-2 h-full flex flex-col">
+          <div className="flex-1 overflow-y-auto overscroll-none">
+            <VisuallyHidden>
+              <DrawerTitle>Navigation</DrawerTitle>
+            </VisuallyHidden>
+            <ul className="flex flex-col gap-1 px-4">
+              {headerNavigation.map((item) => (
+                <MobileHeaderNavItem
+                  key={item.label}
+                  item={item}
+                  onNavigate={() => setDrawerOpen(false)}
+                />
+              ))}
+              {headerNavigation.length > 0 && <Separator className="my-2" />}
+              <li className="empty:hidden">
+                <Slot.Target name="top-navigation-side" />
+              </li>
+
+              {filteredItems.map((item) => {
+                if (item.type === "separator") {
+                  return <Separator className="my-2" key={item.label} />;
+                }
+                if (item.type === "section" || item.type === "filter") {
+                  return null;
+                }
+                const path = getFirstMatchingPath(item);
+                const isActive = deepEqual(currentNav.topNavItem, item);
+                return (
+                  <li key={item.label}>
+                    <Link
+                      to={path}
+                      onClick={() => setDrawerOpen(false)}
+                      className={`flex items-center gap-2 py-2 text-base font-medium ${isActive ? "text-foreground" : "text-foreground/75 hover:text-foreground"}`}
+                    >
+                      {item.icon && <item.icon size={16} />}
+                      {item.label}
+                    </Link>
+                  </li>
+                );
+              })}
+              {isAuthEnabled && isAuthenticated && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded-sm h-5 w-24" />}
+                >
+                  <Separator className="my-2" />
+                  <li className="py-2">
+                    <div className="text-base font-medium">
+                      {profile?.name ?? "My Account"}
+                    </div>
+                    {profile?.email && profile.email !== profile?.name && (
+                      <div className="text-sm text-muted-foreground">
+                        {profile.email}
+                      </div>
+                    )}
+                  </li>
+                  {accountItems.map((i) => (
+                    <li key={i.label}>
+                      <Link
+                        to={i.path ?? ""}
+                        target={i.target}
+                        rel={
+                          i.target === "_blank"
+                            ? "noopener noreferrer"
+                            : undefined
+                        }
+                        onClick={() => setDrawerOpen(false)}
+                        className="flex items-center py-2 text-base font-medium text-foreground/75 hover:text-foreground"
+                      >
+                        {i.label}
+                      </Link>
+                    </li>
+                  ))}
+                </ClientOnly>
+              )}
+            </ul>
+          </div>
+          <div className="border-t shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-4 pt-3 flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              {isAuthEnabled && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded-sm h-8 w-16" />}
+                >
+                  {isAuthenticated ? (
+                    <Button asChild variant="outline">
+                      <Link
+                        to="/signout"
+                        onClick={() => setDrawerOpen(false)}
+                        className="flex items-center gap-2"
+                      >
+                        <LogOutIcon
+                          size={16}
+                          strokeWidth={1}
+                          absoluteStrokeWidth
+                        />
+                        Logout
+                      </Link>
+                    </Button>
+                  ) : (
+                    <Button asChild variant="outline">
+                      <Link
+                        to={`/signin?redirect=${encodeURIComponent(location.pathname)}`}
+                        onClick={() => setDrawerOpen(false)}
+                      >
+                        Login
+                      </Link>
+                    </Button>
+                  )}
+                </ClientOnly>
+              )}
+              <ThemeSwitch />
+            </div>
+            {site?.showPoweredBy !== false && (
+              <PoweredByZudoku className="grow-0 justify-center gap-1" />
+            )}
+          </div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+};

package/src/lib/components/MultiSelect.tsx

@@ -0,0 +1,86 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@lukoweb/apitogo/ui/Popover.js";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../util/cn.js";
+
+type MultiSelectProps = {
+  options: readonly string[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+export const MultiSelect = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select values...",
+  className,
+}: MultiSelectProps) => {
+  const [open, setOpen] = useState(false);
+
+  const toggleValue = (option: string) => {
+    if (value.includes(option)) {
+      onChange(value.filter((v) => v !== option));
+    } else {
+      onChange([...value, option]);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "flex items-center justify-between w-full h-9 bg-transparent text-xs font-mono text-left truncate",
+            !value.length && "text-muted-foreground",
+            className,
+          )}
+        >
+          <span className="truncate">
+            {value.length > 0 ? value.join(", ") : placeholder}
+          </span>
+          <ChevronDownIcon className="size-3.5 shrink-0 opacity-50" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-1 w-(--radix-popover-trigger-width)"
+        align="start"
+        side="bottom"
+        onWheel={(e) => e.stopPropagation()}
+        onTouchMove={(e) => e.stopPropagation()}
+      >
+        <div className="max-h-[140px] overflow-y-auto">
+          {options.map((option) => {
+            const isSelected = value.includes(option);
+            return (
+              <button
+                key={option}
+                type="button"
+                className="flex items-center gap-2 w-full rounded-xs px-2 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                onClick={() => toggleValue(option)}
+              >
+                <span
+                  className={cn(
+                    "flex size-4 shrink-0 items-center justify-center rounded-[4px] border",
+                    isSelected &&
+                      "bg-primary border-primary text-primary-foreground",
+                  )}
+                >
+                  {isSelected && <CheckIcon className="size-3" />}
+                </span>
+                <span className="truncate font-mono text-xs">{option}</span>
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/lib/components/NotFoundPage.tsx

@@ -0,0 +1,37 @@
+import { UnlinkIcon } from "lucide-react";
+import { Link, useParams } from "react-router";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { DeveloperHint } from "./DeveloperHint.js";
+import { Heading } from "./Heading.js";
+import { Typography } from "./Typography.js";
+
+export const NotFoundPage = () => {
+  const params = useParams();
+
+  return (
+    <Typography
+      className="h-full pt-(--padding-content-top)"
+      data-pagefind-ignore="all"
+    >
+      <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>
+          {"{DOCUMENT_ROOT}"}/{params["*"]}.mdx
+        </code>{" "}
+        and add some content to make this error go away. By default{" "}
+        <code>DOCUMENT_ROOT</code> is the `pages` directory.
+      </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>
+    </Typography>
+  );
+};

package/src/lib/components/PageProgress.tsx

@@ -0,0 +1,28 @@
+import { useNProgress } from "@tanem/react-nprogress";
+import { useEffect, useState } from "react";
+import { useNavigation } from "react-router";
+
+export const PageProgress = () => {
+  const navigation = useNavigation();
+  const isNavigating = navigation.state === "loading";
+  // delay the animation to avoid flickering
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimating(isNavigating), 200);
+
+    return () => clearTimeout(timer);
+  }, [isNavigating]);
+
+  const { isFinished, progress } = useNProgress({ isAnimating });
+
+  return (
+    <div
+      className="absolute w-0 left-0 right-0 bottom-[-1px] h-[2px] bg-primary transition-all duration-300 ease-in-out"
+      style={{
+        opacity: isFinished ? 0 : 1,
+        width: isFinished ? 0 : `${progress * 100}%`,
+      }}
+    />
+  );
+};

package/src/lib/components/PagefindSearchMeta.tsx

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from "react";
+
+/**
+ * Adds metadata to be captured by Pagefind for search results.
+ * Content is visually hidden but indexed by the search engine.
+ */
+export const PagefindSearchMeta = ({
+  name,
+  children,
+}: PropsWithChildren<{ name?: string }>) => (
+  <span data-pagefind-meta={name} className="sr-only">
+    {children}
+  </span>
+);

package/src/lib/components/Pagination.tsx

@@ -0,0 +1,44 @@
+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 min-w-0 transition-all p-5 space-x-1 rtl:space-x-reverse hover:text-foreground";
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap gap-2 -mx-4 text-muted-foreground font-semibold",
+        prev ? "justify-between" : "justify-end",
+        className,
+      )}
+      data-pagefind-ignore="all"
+    >
+      {prev && (
+        <Button variant="ghost" className="min-w-0 max-w-full" asChild>
+          <Link to={prev.to} relative="path" className={linkClass}>
+            <ArrowLeftIcon size={14} strokeWidth={2.5} />
+            <span className="text-lg truncate">{prev.label}</span>
+          </Link>
+        </Button>
+      )}
+      {next && (
+        <Button variant="ghost" className="ms-auto min-w-0 max-w-full" asChild>
+          <Link to={next.to} relative="path" className={linkClass}>
+            <span className="text-lg truncate">{next.label}</span>
+            <ArrowRightIcon size={14} strokeWidth={2.5} />
+          </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 (
+      // biome-ignore lint/suspicious/noArrayIndexKey: index should be stable
+      <Fragment key={`${part}-${i}`}>
+        {elements}
+        {i < arr.length - 1 && "/"}
+        <wbr />
+      </Fragment>
+    );
+  });
+};

package/src/lib/components/PluginHeads.tsx

@@ -0,0 +1,17 @@
+import { Helmet } from "@zudoku/react-helmet-async";
+import type { Location } from "react-router";
+import { hasHead, type ApitogoPlugin } from "../core/plugins.js";
+
+export const PluginHeads = ({
+  plugins,
+  location,
+}: {
+  plugins: ApitogoPlugin[];
+  location: Location;
+}) =>
+  plugins
+    .flatMap((plugin) =>
+      hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
+    )
+    // biome-ignore lint/suspicious/noArrayIndexKey: No stable key available
+    .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);

package/src/lib/components/Search.tsx

@@ -0,0 +1,70 @@
+import { SearchIcon } from "lucide-react";
+import { Suspense, useCallback, useEffect, useState } from "react";
+import { isSearchPlugin } from "../core/plugins.js";
+import { focusRing } from "../ui/util.js";
+import { cn } from "../util/cn.js";
+import { getOS } from "../util/os.js";
+import { ClientOnly } from "./ClientOnly.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Search = ({ className }: { className?: string }) => {
+  const ctx = useZudoku();
+  const [isOpen, setIsOpen] = useState(false);
+  const onOpen = useCallback(() => setIsOpen(true), []);
+  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]);
+
+  const searchPlugin = ctx.options.plugins?.find(isSearchPlugin);
+
+  if (!searchPlugin) return null;
+
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        onClick={onOpen}
+        className={cn(
+          "relative w-full md:w-56 flex items-center border bg-clip-padding h-8 rounded-lg px-3 pr-14 text-sm transition-all",
+          "border-input text-muted-foreground bg-background hover:bg-muted/50 hover:text-foreground shadow-xs",
+          focusRing,
+        )}
+      >
+        <div className="flex items-center gap-2">
+          <SearchIcon size={14} />
+          Search
+        </div>
+        <ClientOnly>
+          <KbdShortcut />
+        </ClientOnly>
+      </button>
+      <Suspense>{searchPlugin.renderSearch({ isOpen, onClose })}</Suspense>
+    </div>
+  );
+};
+
+const KbdShortcut = () => {
+  const os = getOS();
+  return (
+    <kbd className="hidden md:flex absolute inset-e-1.5 h-5 select-none items-center gap-0.5 rounded-sm border bg-muted px-1.5 font-mono text-xs font-medium">
+      {os === "apple" ? <span className="text-base">⌘</span> : "CTRL+"}K
+    </kbd>
+  );
+};