@lukoweb/apitogo 0.2.23 → 0.2.24

package/src/lib/components/navigation/NavigationFilterInput.tsx

@@ -1,35 +1,35 @@
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@lukoweb/apitogo/ui/InputGroup.js";
-import { SearchIcon, XIcon } from "lucide-react";
-import { useNavigationFilter } from "./NavigationFilterContext.js";
-
-export const NavigationFilterInput = ({
-  placeholder,
-}: {
-  placeholder?: string;
-}) => {
-  const { query, setQuery } = useNavigationFilter();
-
-  return (
-    <InputGroup className="my-2">
-      <InputGroupAddon>
-        <SearchIcon className="size-3.5" />
-      </InputGroupAddon>
-      <InputGroupInput
-        type="text"
-        placeholder={placeholder}
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-      />
-      {query && (
-        <InputGroupButton onClick={() => setQuery("")}>
-          <XIcon className="size-3" />
-        </InputGroupButton>
-      )}
-    </InputGroup>
-  );
-};
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@lukoweb/apitogo/ui/InputGroup.js";
+import { SearchIcon, XIcon } from "lucide-react";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
+
+export const NavigationFilterInput = ({
+  placeholder,
+}: {
+  placeholder?: string;
+}) => {
+  const { query, setQuery } = useNavigationFilter();
+
+  return (
+    <InputGroup className="my-2">
+      <InputGroupAddon>
+        <SearchIcon className="size-3.5" />
+      </InputGroupAddon>
+      <InputGroupInput
+        type="text"
+        placeholder={placeholder}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      {query && (
+        <InputGroupButton onClick={() => setQuery("")}>
+          <XIcon className="size-3" />
+        </InputGroupButton>
+      )}
+    </InputGroup>
+  );
+};

package/src/lib/components/navigation/NavigationItem.tsx

@@ -1,181 +1,181 @@
-import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@lukoweb/apitogo/ui/Tooltip.js";
-import { ExternalLinkIcon } from "lucide-react";
-import { Suspense, lazy, useEffect, useRef, useState } from "react";
-import { NavLink, useLocation } from "react-router";
-import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
-import { useAuth } from "../../authentication/hook.js";
-import { cn } from "../../util/cn.js";
-import { joinUrl } from "../../util/joinUrl.js";
-import { AnchorLink } from "../AnchorLink.js";
-import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
-import { useZudoku } from "../context/ZudokuContext.js";
-import { NavigationBadge } from "./NavigationBadge.js";
-import { NavigationCategory } from "./NavigationCategory.js";
-import { useNavigationFilter } from "./NavigationFilterContext.js";
-import { NavigationFilterInput } from "./NavigationFilterInput.js";
-import { navigationListItem, shouldShowItem } from "./utils.js";
-
-const HastRichText = lazy(() => import("../../util/hastToJsx.js"));
-
-const TruncatedLabel = ({
-  label,
-  className,
-}: {
-  label: string;
-  className?: string;
-}) => {
-  const ref = useRef<HTMLSpanElement>(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    if (ref.current.offsetWidth < ref.current.scrollWidth) {
-      setIsTruncated(true);
-    }
-  }, []);
-
-  return (
-    <>
-      <span
-        className={cn("truncate flex-1", className)}
-        title={label}
-        ref={ref}
-      >
-        {label}
-      </span>
-      {isTruncated && (
-        <Tooltip disableHoverableContent>
-          <TooltipTrigger className="absolute inset-0 z-10" />
-          <TooltipContent className="max-w-64" side="bottom" align="center">
-            {label}
-          </TooltipContent>
-        </Tooltip>
-      )}
-    </>
-  );
-};
-
-export const DATA_ANCHOR_ATTR = "data-anchor";
-
-export const NavigationItem = ({
-  item,
-  onRequestClose,
-}: {
-  item: NavigationItemType;
-  onRequestClose?: () => void;
-}) => {
-  const location = useLocation();
-  const { activeAnchor } = useViewportAnchor();
-  const auth = useAuth();
-  const context = useZudoku();
-  const { query } = useNavigationFilter();
-
-  if (!shouldShowItem({ auth, context, filterQuery: query })(item)) {
-    return null;
-  }
-
-  switch (item.type) {
-    case "category":
-      return (
-        <NavigationCategory category={item} onRequestClose={onRequestClose} />
-      );
-    case "separator":
-      return (
-        <Separator className="my-1 mx-auto w-[calc(100%-var(--padding-nav-item)*2)]!" />
-      );
-    case "section":
-      return (
-        <div className="mt-4 px-(--padding-nav-item) text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-          {item.label}
-        </div>
-      );
-    case "filter":
-      return <NavigationFilterInput placeholder={item.placeholder} />;
-    case "doc":
-      return (
-        <NavLink
-          viewTransition
-          className={({ isActive, isPending }) =>
-            navigationListItem({ isActive, isPending })
-          }
-          to={joinUrl(item.path)}
-          onClick={onRequestClose}
-          end
-        >
-          {item.icon && (
-            <item.icon size={16} className="align-[-0.125em] shrink-0" />
-          )}
-          {item.rich ? (
-            <Suspense fallback={<span>{item.label}</span>}>
-              <span>
-                <HastRichText>{item.rich}</HastRichText>
-              </span>
-            </Suspense>
-          ) : (
-            <TruncatedLabel label={item.label} className="flex-1" />
-          )}
-          {item.badge && <NavigationBadge {...item.badge} />}
-        </NavLink>
-      );
-    case "link":
-    case "custom-page": {
-      const href = item.type === "link" ? item.to : joinUrl(item.path);
-      const hasAnchor = href.includes("#");
-      return !href.startsWith("http") ? (
-        <AnchorLink
-          to={{
-            pathname: href.split("#")[0],
-            hash: href.split("#")[1],
-            search: location.search,
-          }}
-          {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
-          className={navigationListItem({
-            isActive:
-              href ===
-              (hasAnchor
-                ? [joinUrl(location.pathname), activeAnchor]
-                    .filter(Boolean)
-                    .join("#")
-                : joinUrl(location.pathname)),
-          })}
-          onClick={onRequestClose}
-        >
-          {item.icon && (
-            <item.icon size={16} className="align-[-0.125em] shrink-0" />
-          )}
-          {item.badge ? (
-            <>
-              {item.label && <TruncatedLabel label={item.label} />}
-              <NavigationBadge {...item.badge} />
-            </>
-          ) : (
-            <span className="break-all">{item.label}</span>
-          )}
-        </AnchorLink>
-      ) : (
-        <a
-          className={navigationListItem()}
-          href={href}
-          target={"target" in item ? item.target : "_blank"}
-          rel="noopener noreferrer"
-          onClick={onRequestClose}
-        >
-          {item.icon && (
-            <item.icon size={16} className="align-[-0.125em] shrink-0" />
-          )}
-          <span className="whitespace-normal">{item.label}</span>
-          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
-          <span className="whitespace-nowrap">
-            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
-          </span>
-        </a>
-      );
-    }
-  }
-};
+import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@lukoweb/apitogo/ui/Tooltip.js";
+import { ExternalLinkIcon } from "lucide-react";
+import { Suspense, lazy, useEffect, useRef, useState } from "react";
+import { NavLink, useLocation } from "react-router";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { useAuth } from "../../authentication/hook.js";
+import { cn } from "../../util/cn.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { NavigationBadge } from "./NavigationBadge.js";
+import { NavigationCategory } from "./NavigationCategory.js";
+import { useNavigationFilter } from "./NavigationFilterContext.js";
+import { NavigationFilterInput } from "./NavigationFilterInput.js";
+import { navigationListItem, shouldShowItem } from "./utils.js";
+
+const HastRichText = lazy(() => import("../../util/hastToJsx.js"));
+
+const TruncatedLabel = ({
+  label,
+  className,
+}: {
+  label: string;
+  className?: string;
+}) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (ref.current.offsetWidth < ref.current.scrollWidth) {
+      setIsTruncated(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <span
+        className={cn("truncate flex-1", className)}
+        title={label}
+        ref={ref}
+      >
+        {label}
+      </span>
+      {isTruncated && (
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger className="absolute inset-0 z-10" />
+          <TooltipContent className="max-w-64" side="bottom" align="center">
+            {label}
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+export const DATA_ANCHOR_ATTR = "data-anchor";
+
+export const NavigationItem = ({
+  item,
+  onRequestClose,
+}: {
+  item: NavigationItemType;
+  onRequestClose?: () => void;
+}) => {
+  const location = useLocation();
+  const { activeAnchor } = useViewportAnchor();
+  const auth = useAuth();
+  const context = useZudoku();
+  const { query } = useNavigationFilter();
+
+  if (!shouldShowItem({ auth, context, filterQuery: query })(item)) {
+    return null;
+  }
+
+  switch (item.type) {
+    case "category":
+      return (
+        <NavigationCategory category={item} onRequestClose={onRequestClose} />
+      );
+    case "separator":
+      return (
+        <Separator className="my-1 mx-auto w-[calc(100%-var(--padding-nav-item)*2)]!" />
+      );
+    case "section":
+      return (
+        <div className="mt-4 px-(--padding-nav-item) text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          {item.label}
+        </div>
+      );
+    case "filter":
+      return <NavigationFilterInput placeholder={item.placeholder} />;
+    case "doc":
+      return (
+        <NavLink
+          viewTransition
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.path)}
+          onClick={onRequestClose}
+          end
+        >
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
+          {item.rich ? (
+            <Suspense fallback={<span>{item.label}</span>}>
+              <span>
+                <HastRichText>{item.rich}</HastRichText>
+              </span>
+            </Suspense>
+          ) : (
+            <TruncatedLabel label={item.label} className="flex-1" />
+          )}
+          {item.badge && <NavigationBadge {...item.badge} />}
+        </NavLink>
+      );
+    case "link":
+    case "custom-page": {
+      const href = item.type === "link" ? item.to : joinUrl(item.path);
+      const hasAnchor = href.includes("#");
+      return !href.startsWith("http") ? (
+        <AnchorLink
+          to={{
+            pathname: href.split("#")[0],
+            hash: href.split("#")[1],
+            search: location.search,
+          }}
+          {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
+          className={navigationListItem({
+            isActive:
+              href ===
+              (hasAnchor
+                ? [joinUrl(location.pathname), activeAnchor]
+                    .filter(Boolean)
+                    .join("#")
+                : joinUrl(location.pathname)),
+          })}
+          onClick={onRequestClose}
+        >
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
+          {item.badge ? (
+            <>
+              {item.label && <TruncatedLabel label={item.label} />}
+              <NavigationBadge {...item.badge} />
+            </>
+          ) : (
+            <span className="break-all">{item.label}</span>
+          )}
+        </AnchorLink>
+      ) : (
+        <a
+          className={navigationListItem()}
+          href={href}
+          target={"target" in item ? item.target : "_blank"}
+          rel="noopener noreferrer"
+          onClick={onRequestClose}
+        >
+          {item.icon && (
+            <item.icon size={16} className="align-[-0.125em] shrink-0" />
+          )}
+          <span className="whitespace-normal">{item.label}</span>
+          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
+          <span className="whitespace-nowrap">
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
+          </span>
+        </a>
+      );
+    }
+  }
+};

package/src/lib/components/navigation/NavigationWrapper.tsx

@@ -1,49 +1,49 @@
-import { type PropsWithChildren, useEffect, useRef } from "react";
-import { cn } from "../../util/cn.js";
-import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
-import { useZudoku } from "../context/ZudokuContext.js";
-import { PoweredByZudoku } from "./PoweredByZudoku.js";
-
-export const NavigationWrapper = ({
-  children,
-  className,
-}: PropsWithChildren<{
-  className?: string;
-}>) => {
-  const { options } = useZudoku();
-  const navRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const active = navRef.current?.querySelector('[aria-current="page"]');
-    scrollIntoViewIfNeeded(active ?? null);
-  }, []);
-
-  return (
-    <div
-      className="grid sticky top-(--header-height) lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r"
-      data-pagefind-ignore="all"
-    >
-      <nav
-        ref={navRef}
-        className={cn(
-          "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
-          "-mx-(--padding-nav-item) pb-[8vh] pt-(--padding-content-top) scroll-pt-2",
-          // Revert the padding/margin on the first child
-          "-mt-2.5",
-          className,
-        )}
-        style={{
-          maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
-        }}
-      >
-        {children}
-      </nav>
-
-      <div className="bg-background border-t p-2 mx-5  gap-2 items-center mt-2 drop-shadow-[0_-3px_1px_rgba(0,0,0,0.015)] hidden lg:[&:has(>_:nth-child(1):last-child)]:flex">
-        {options.site?.showPoweredBy !== false && <PoweredByZudoku />}
-      </div>
-    </div>
-  );
-};
-
-NavigationWrapper.displayName = "NavigationWrapper";
+import { type PropsWithChildren, useEffect, useRef } from "react";
+import { cn } from "../../util/cn.js";
+import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { PoweredByZudoku } from "./PoweredByZudoku.js";
+
+export const NavigationWrapper = ({
+  children,
+  className,
+}: PropsWithChildren<{
+  className?: string;
+}>) => {
+  const { options } = useZudoku();
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const active = navRef.current?.querySelector('[aria-current="page"]');
+    scrollIntoViewIfNeeded(active ?? null);
+  }, []);
+
+  return (
+    <div
+      className="grid sticky top-(--header-height) lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r"
+      data-pagefind-ignore="all"
+    >
+      <nav
+        ref={navRef}
+        className={cn(
+          "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
+          "-mx-(--padding-nav-item) pb-[8vh] pt-(--padding-content-top) scroll-pt-2",
+          // Revert the padding/margin on the first child
+          "-mt-2.5",
+          className,
+        )}
+        style={{
+          maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
+        }}
+      >
+        {children}
+      </nav>
+
+      <div className="bg-background border-t p-2 mx-5  gap-2 items-center mt-2 drop-shadow-[0_-3px_1px_rgba(0,0,0,0.015)] hidden lg:[&:has(>_:nth-child(1):last-child)]:flex">
+        {options.site?.showPoweredBy !== false && <PoweredByZudoku />}
+      </div>
+    </div>
+  );
+};
+
+NavigationWrapper.displayName = "NavigationWrapper";

package/src/lib/components/navigation/PoweredByZudoku.tsx

@@ -1,39 +1,39 @@
-import { ChevronRightIcon } from "lucide-react";
-import { cn } from "../../util/cn.js";
-import ZuploLogo from "./ZuploLogo.js";
-
-export const PoweredByZudoku = ({ className }: { className?: string }) => (
-  <a
-    href={
-      import.meta.env.IS_ZUPLO ? "https://zuplo.com" : "https://apitogo.com"
-    }
-    target="_blank"
-    rel="noopener noreferrer"
-    className={cn(
-      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-xs h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
-      className,
-    )}
-  >
-    <div className="opacity-70 hover:opacity-100 transition-opacity gap-1.5 text-[11px] font-medium rounded-full h-7 flex items-center text-nowrap">
-      {import.meta.env.IS_ZUPLO ? (
-        <ZuploLogo className="w-3.5 h-3.5 dark:fill-white" />
-      ) : (
-        <img
-          src="/Icon.png"
-          alt=""
-          aria-hidden="true"
-          className="w-3.5 h-3.5"
-        />
-      )}
-      powered by {import.meta.env.IS_ZUPLO ? "Zuplo" : "apitogo"}
-    </div>
-    <div className="text-xs font-medium opacity-70 hover:text-foreground transition-colors cursor-pointer">
-      <ChevronRightIcon
-        size={12}
-        absoluteStrokeWidth
-        strokeWidth={1.5}
-        className="rtl:rotate-180"
-      />
-    </div>
-  </a>
-);
+import { ChevronRightIcon } from "lucide-react";
+import { cn } from "../../util/cn.js";
+import ZuploLogo from "./ZuploLogo.js";
+
+export const PoweredByZudoku = ({ className }: { className?: string }) => (
+  <a
+    href={
+      import.meta.env.IS_ZUPLO ? "https://zuplo.com" : "https://apitogo.com"
+    }
+    target="_blank"
+    rel="noopener noreferrer"
+    className={cn(
+      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-xs h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
+      className,
+    )}
+  >
+    <div className="opacity-70 hover:opacity-100 transition-opacity gap-1.5 text-[11px] font-medium rounded-full h-7 flex items-center text-nowrap">
+      {import.meta.env.IS_ZUPLO ? (
+        <ZuploLogo className="w-3.5 h-3.5 dark:fill-white" />
+      ) : (
+        <img
+          src="/Icon.png"
+          alt=""
+          aria-hidden="true"
+          className="w-3.5 h-3.5"
+        />
+      )}
+      powered by {import.meta.env.IS_ZUPLO ? "Zuplo" : "apitogo"}
+    </div>
+    <div className="text-xs font-medium opacity-70 hover:text-foreground transition-colors cursor-pointer">
+      <ChevronRightIcon
+        size={12}
+        absoluteStrokeWidth
+        strokeWidth={1.5}
+        className="rtl:rotate-180"
+      />
+    </div>
+  </a>
+);