@lukoweb/apitogo 0.1.24 → 0.1.37

package/src/lib/components/HeaderNavigation.tsx

@@ -1,148 +1,148 @@
-import type { LucideIcon } from "lucide-react";
-import { Link } from "react-router";
-import {
-  isHeaderNavGroup,
-  type HeaderNavGroup,
-  type HeaderNavItem,
-  type HeaderNavLinkItem,
-} from "../../config/validators/HeaderNavigationSchema.js";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "../ui/NavigationMenu.js";
-import { cn } from "../util/cn.js";
-import { useZudoku } from "./context/ZudokuContext.js";
-
-const NavLinkItem = ({ item }: { item: HeaderNavLinkItem }) => {
-  const Icon = item.icon as LucideIcon | undefined;
-  return (
-    <NavigationMenuLink asChild>
-      <Link
-        to={item.to}
-        target={item.target}
-        rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
-        className="block select-none rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-      >
-        <div className="flex items-center gap-2">
-          {Icon && (
-            <Icon size={16} className="shrink-0 text-muted-foreground" />
-          )}
-          <div className="text-sm font-medium leading-none">{item.label}</div>
-        </div>
-        {item.description && (
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1.5">
-            {item.description}
-          </p>
-        )}
-      </Link>
-    </NavigationMenuLink>
-  );
-};
-
-const DropdownContent = ({
-  items,
-}: {
-  items: Array<HeaderNavLinkItem | HeaderNavGroup>;
-}) => {
-  return items.some(isHeaderNavGroup) ? (
-    <div className="flex gap-4 p-4">
-      {items.map((item) =>
-        isHeaderNavGroup(item) ? (
-          <div key={item.label} className="min-w-[200px]">
-            <div className="mb-2 px-3 text-sm font-medium text-muted-foreground">
-              {item.label}
-            </div>
-            <ul className="flex flex-col gap-1">
-              {item.items.map((subItem) => (
-                <li key={subItem.to}>
-                  <NavLinkItem item={subItem} />
-                </li>
-              ))}
-            </ul>
-          </div>
-        ) : (
-          <div key={item.to}>
-            <NavLinkItem item={item} />
-          </div>
-        ),
-      )}
-    </div>
-  ) : (
-    <ul className="grid gap-1 p-3 w-[400px] md:grid-cols-2">
-      {items.flatMap((item) =>
-        !isHeaderNavGroup(item) ? (
-          <li key={item.to}>
-            <NavLinkItem item={item} />
-          </li>
-        ) : (
-          []
-        ),
-      )}
-    </ul>
-  );
-};
-
-const HeaderNavItemComponent = ({ item }: { item: HeaderNavItem }) => {
-  if ("to" in item) {
-    const Icon = item.icon as LucideIcon | undefined;
-    return (
-      <NavigationMenuItem>
-        <NavigationMenuLink asChild>
-          <Link
-            to={item.to}
-            target={item.target}
-            rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
-            className={cn(
-              navigationMenuTriggerStyle(),
-              "flex items-center gap-2",
-            )}
-          >
-            {Icon && <Icon size={16} />}
-            {item.label}
-          </Link>
-        </NavigationMenuLink>
-      </NavigationMenuItem>
-    );
-  }
-
-  return (
-    <NavigationMenuItem>
-      <NavigationMenuTrigger className="bg-transparent">
-        {item.label}
-      </NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <DropdownContent items={item.items} />
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-  );
-};
-
-export const HeaderNavigation = () => {
-  const { options } = useZudoku();
-  const items = options.header?.navigation;
-  const navPosition = options.header?.placements?.navigation ?? "end";
-  if (!items || items.length === 0) return null;
-
-  const viewportAlign =
-    navPosition === "end"
-      ? "**:data-[slot=navigation-menu-viewport-wrapper]:left-auto **:data-[slot=navigation-menu-viewport-wrapper]:right-0"
-      : navPosition === "center"
-        ? "**:data-[slot=navigation-menu-viewport-wrapper]:left-1/2 **:data-[slot=navigation-menu-viewport-wrapper]:-translate-x-1/2"
-        : undefined;
-
-  return (
-    <NavigationMenu className={viewportAlign}>
-      <NavigationMenuList>
-        {items.map((item, index) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: Stable because it's statically defined in the config
-          <HeaderNavItemComponent key={`${item.label}-${index}`} item={item} />
-        ))}
-      </NavigationMenuList>
-    </NavigationMenu>
-  );
-};
+import type { LucideIcon } from "lucide-react";
+import { Link } from "react-router";
+import {
+  isHeaderNavGroup,
+  type HeaderNavGroup,
+  type HeaderNavItem,
+  type HeaderNavLinkItem,
+} from "../../config/validators/HeaderNavigationSchema.js";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "../ui/NavigationMenu.js";
+import { cn } from "../util/cn.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+const NavLinkItem = ({ item }: { item: HeaderNavLinkItem }) => {
+  const Icon = item.icon as LucideIcon | undefined;
+  return (
+    <NavigationMenuLink asChild>
+      <Link
+        to={item.to}
+        target={item.target}
+        rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+        className="block select-none rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+      >
+        <div className="flex items-center gap-2">
+          {Icon && (
+            <Icon size={16} className="shrink-0 text-muted-foreground" />
+          )}
+          <div className="text-sm font-medium leading-none">{item.label}</div>
+        </div>
+        {item.description && (
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-1.5">
+            {item.description}
+          </p>
+        )}
+      </Link>
+    </NavigationMenuLink>
+  );
+};
+
+const DropdownContent = ({
+  items,
+}: {
+  items: Array<HeaderNavLinkItem | HeaderNavGroup>;
+}) => {
+  return items.some(isHeaderNavGroup) ? (
+    <div className="flex gap-4 p-4">
+      {items.map((item) =>
+        isHeaderNavGroup(item) ? (
+          <div key={item.label} className="min-w-[200px]">
+            <div className="mb-2 px-3 text-sm font-medium text-muted-foreground">
+              {item.label}
+            </div>
+            <ul className="flex flex-col gap-1">
+              {item.items.map((subItem) => (
+                <li key={subItem.to}>
+                  <NavLinkItem item={subItem} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <div key={item.to}>
+            <NavLinkItem item={item} />
+          </div>
+        ),
+      )}
+    </div>
+  ) : (
+    <ul className="grid gap-1 p-3 w-[400px] md:grid-cols-2">
+      {items.flatMap((item) =>
+        !isHeaderNavGroup(item) ? (
+          <li key={item.to}>
+            <NavLinkItem item={item} />
+          </li>
+        ) : (
+          []
+        ),
+      )}
+    </ul>
+  );
+};
+
+const HeaderNavItemComponent = ({ item }: { item: HeaderNavItem }) => {
+  if ("to" in item) {
+    const Icon = item.icon as LucideIcon | undefined;
+    return (
+      <NavigationMenuItem>
+        <NavigationMenuLink asChild>
+          <Link
+            to={item.to}
+            target={item.target}
+            rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+            className={cn(
+              navigationMenuTriggerStyle(),
+              "flex items-center gap-2",
+            )}
+          >
+            {Icon && <Icon size={16} />}
+            {item.label}
+          </Link>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuTrigger className="bg-transparent">
+        {item.label}
+      </NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <DropdownContent items={item.items} />
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  );
+};
+
+export const HeaderNavigation = () => {
+  const { options } = useZudoku();
+  const items = options.header?.navigation;
+  const navPosition = options.header?.placements?.navigation ?? "end";
+  if (!items || items.length === 0) return null;
+
+  const viewportAlign =
+    navPosition === "end"
+      ? "**:data-[slot=navigation-menu-viewport-wrapper]:left-auto **:data-[slot=navigation-menu-viewport-wrapper]:right-0"
+      : navPosition === "center"
+        ? "**:data-[slot=navigation-menu-viewport-wrapper]:left-1/2 **:data-[slot=navigation-menu-viewport-wrapper]:-translate-x-1/2"
+        : undefined;
+
+  return (
+    <NavigationMenu className={viewportAlign}>
+      <NavigationMenuList>
+        {items.map((item, index) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: Stable because it's statically defined in the config
+          <HeaderNavItemComponent key={`${item.label}-${index}`} item={item} />
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+};

package/src/lib/components/Heading.tsx

@@ -1,84 +1,84 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { LinkIcon } from "lucide-react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
-
-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 type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
-  VariantProps<typeof heading> & {
-    children: ReactNode;
-    className?: string;
-    id?: string;
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * This is to set labels as active when the heading is in the viewport.
-     * It's used in the navigation/toc to highlight the current section.
-     */
-    registerNavigationAnchor?: boolean;
-  };
-
-export const Heading = ({
-  level,
-  children,
-  id,
-  className,
-  registerNavigationAnchor,
-  ...props
-}: HeadingProps) => {
-  const Component = getComponent(level ?? 1);
-  const { ref } = useRegisterAnchorElement();
-
-  return (
-    <Component
-      className={heading({ className, level })}
-      ref={registerNavigationAnchor ? ref : undefined}
-      id={id}
-      {...props}
-    >
-      {children}
-      {id && (
-        <a
-          href={`#${id}`}
-          className="ms-[0.33em] rounded text-[0.8em] text-muted-foreground p-0.5 -m-0.5 opacity-0 group-hover:opacity-50 hover:text-primary hover:!opacity-100 transition-opacity duration-200 inline-flex items-center align-middle"
-          aria-label={`Link to ${id}`}
-        >
-          <LinkIcon className="size-[0.75em] min-w-4 min-h-4" />
-        </a>
-      )}
-    </Component>
-  );
-};
+import { cva, type VariantProps } from "class-variance-authority";
+import { LinkIcon } from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
+
+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 type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
+  VariantProps<typeof heading> & {
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * This is to set labels as active when the heading is in the viewport.
+     * It's used in the navigation/toc to highlight the current section.
+     */
+    registerNavigationAnchor?: boolean;
+  };
+
+export const Heading = ({
+  level,
+  children,
+  id,
+  className,
+  registerNavigationAnchor,
+  ...props
+}: HeadingProps) => {
+  const Component = getComponent(level ?? 1);
+  const { ref } = useRegisterAnchorElement();
+
+  return (
+    <Component
+      className={heading({ className, level })}
+      ref={registerNavigationAnchor ? ref : undefined}
+      id={id}
+      {...props}
+    >
+      {children}
+      {id && (
+        <a
+          href={`#${id}`}
+          className="ms-[0.33em] rounded text-[0.8em] text-muted-foreground p-0.5 -m-0.5 opacity-0 group-hover:opacity-50 hover:text-primary hover:!opacity-100 transition-opacity duration-200 inline-flex items-center align-middle"
+          aria-label={`Link to ${id}`}
+        >
+          <LinkIcon className="size-[0.75em] min-w-4 min-h-4" />
+        </a>
+      )}
+    </Component>
+  );
+};

package/src/lib/components/InlineCode.tsx

@@ -1,15 +1,15 @@
-import type { AllHTMLAttributes } from "react";
-import { cn } from "../util/cn.js";
-
-export const InlineCode = ({
-  className,
-  ...props
-}: AllHTMLAttributes<HTMLSpanElement>) => (
-  <code
-    className={cn(
-      "font-mono border p-1 py-0.5 rounded-sm bg-border/50 dark:bg-border/70 wrap-anywhere",
-      className,
-    )}
-    {...props}
-  />
-);
+import type { AllHTMLAttributes } from "react";
+import { cn } from "../util/cn.js";
+
+export const InlineCode = ({
+  className,
+  ...props
+}: AllHTMLAttributes<HTMLSpanElement>) => (
+  <code
+    className={cn(
+      "font-mono border p-1 py-0.5 rounded-sm bg-border/50 dark:bg-border/70 wrap-anywhere",
+      className,
+    )}
+    {...props}
+  />
+);

package/src/lib/components/LandingLayout.tsx

@@ -0,0 +1,21 @@
+import { TooltipProvider } from "@lukoweb/apitogo/ui/Tooltip.js";
+import type { ReactNode } from "react";
+import { Suspense } from "react";
+import { Outlet } from "react-router";
+import { Footer } from "./Footer.js";
+import { Header } from "./Header.js";
+import { Slot } from "./Slot.js";
+
+export const LandingLayout = ({ children }: { children?: ReactNode }) => (
+  <TooltipProvider>
+    <Slot.Target name="layout-before-head" />
+    <Suspense>
+      <Header />
+    </Suspense>
+    <Slot.Target name="layout-after-head" />
+    <main className="min-h-[calc(100dvh-var(--top-header-height))] w-full">
+      {children ?? <Outlet />}
+    </main>
+    <Footer />
+  </TooltipProvider>
+);