@lukoweb/apitogo 0.1.23 → 0.1.37

package/src/lib/components/NotFoundPage.tsx

@@ -1,37 +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>
-  );
-};
+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

@@ -1,28 +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}%`,
-      }}
-    />
-  );
-};
+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

@@ -1,14 +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>
-);
+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

@@ -1,44 +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>
-  );
-};
+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

@@ -1,61 +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>
-    );
-  });
-};
+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

@@ -1,17 +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>);
+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

@@ -1,70 +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>
-  );
-};
+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>
+  );
+};