@lukoweb/apitogo 0.2.23 → 0.2.24

package/src/lib/components/LanguageIcon.tsx

@@ -1,199 +1,199 @@
-import {
-  type ComponentType,
-  type LazyExoticComponent,
-  lazy,
-  Suspense,
-  type SVGProps,
-} from "react";
-
-type Language = {
-  pattern: RegExp;
-  icon: LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>;
-  width?: number;
-};
-
-const Languages: Record<string, Language> = {
-  typescript: {
-    pattern: /^(ts|typescript)$/,
-    icon: lazy(() => import("../assets/language-icons/typescript.js")),
-    width: 15,
-  },
-  javascript: {
-    pattern: /^(js|javascript)$/,
-    icon: lazy(() => import("../assets/language-icons/javascript.js")),
-  },
-  react: {
-    pattern: /^(react|tsx|jsx)$/,
-    icon: lazy(() => import("../assets/language-icons/react.js")),
-    width: 20,
-  },
-  markdown: {
-    pattern: /^(md|markdown)$/,
-    icon: lazy(() => import("../assets/language-icons/markdown.js")),
-    width: 22,
-  },
-  mdx: {
-    pattern: /^mdx$/,
-    icon: lazy(() => import("../assets/language-icons/mdx.js")),
-    width: 28,
-  },
-  java: {
-    pattern: /^(java)$/,
-    icon: lazy(() => import("../assets/language-icons/java.js")),
-    width: 22,
-  },
-  json: {
-    pattern: /^jsonc?$/,
-    icon: lazy(() => import("../assets/language-icons/json.js")),
-  },
-  yaml: {
-    pattern: /^yaml$/,
-    icon: lazy(() => import("../assets/language-icons/yaml.js")),
-  },
-  toml: {
-    pattern: /^toml$/,
-    icon: lazy(() => import("../assets/language-icons/toml.js")),
-  },
-  shell: {
-    pattern: /^(shell|bash|sh|zsh|term|terminal|ansi)$/,
-    icon: lazy(() => import("../assets/language-icons/shell.js")),
-  },
-  python: {
-    pattern: /^(py|python)$/,
-    icon: lazy(() => import("../assets/language-icons/python.js")),
-  },
-  pnpm: {
-    pattern: /^pnp(m|x)$/,
-    icon: lazy(() => import("../assets/language-icons/pnpm.js")),
-    width: 14,
-  },
-  npm: {
-    pattern: /^np(m|x)$/,
-    icon: lazy(() => import("../assets/language-icons/npm.js")),
-  },
-  yarn: {
-    pattern: /^yarn$/,
-    icon: lazy(() => import("../assets/language-icons/yarn.js")),
-    width: 16,
-  },
-  bun: {
-    pattern: /^bun(x)?$/,
-    icon: lazy(() => import("../assets/language-icons/bun.js")),
-  },
-  csharp: {
-    pattern: /^(cs|csharp|vb)$/,
-    icon: lazy(() => import("../assets/language-icons/csharp.js")),
-    width: 20,
-  },
-  rust: {
-    pattern: /^(rs|rust)$/,
-    icon: lazy(() => import("../assets/language-icons/rust.js")),
-    width: 20,
-  },
-  ruby: {
-    pattern: /^(rb|ruby)$/,
-    icon: lazy(() => import("../assets/language-icons/ruby.js")),
-  },
-  php: {
-    pattern: /^php$/,
-    icon: lazy(() => import("../assets/language-icons/php.js")),
-    width: 24,
-  },
-  html: {
-    pattern: /^html?$/,
-    icon: lazy(() => import("../assets/language-icons/html.js")),
-    width: 15,
-  },
-  css: {
-    pattern: /^css$/,
-    icon: lazy(() => import("../assets/language-icons/css.js")),
-  },
-  objectivec: {
-    pattern: /^(objc|objectivec)$/,
-    icon: lazy(() => import("../assets/language-icons/objectivec.js")),
-    width: 16,
-  },
-  swift: {
-    pattern: /^swift$/,
-    icon: lazy(() => import("../assets/language-icons/swift.js")),
-  },
-  go: {
-    pattern: /^go$/,
-    icon: lazy(() => import("../assets/language-icons/go.js")),
-    width: 28,
-  },
-  xml: {
-    pattern: /^xml$/,
-    icon: lazy(() => import("../assets/language-icons/xml.js")),
-  },
-  kotlin: {
-    pattern: /^(kt|kotlin)$/,
-    icon: lazy(() => import("../assets/language-icons/kotlin.js")),
-    width: 14,
-  },
-  graphql: {
-    pattern: /^(gql|graphql)$/,
-    icon: lazy(() => import("../assets/language-icons/graphql.js")),
-  },
-  zig: {
-    pattern: /^zig$/,
-    icon: lazy(() => import("../assets/language-icons/zig.js")),
-    width: 28,
-  },
-  scala: {
-    pattern: /^scala$/,
-    icon: lazy(() => import("../assets/language-icons/scala.js")),
-    width: 18,
-  },
-  dart: {
-    pattern: /^dart$/,
-    icon: lazy(() => import("../assets/language-icons/dart.js")),
-    width: 20,
-  },
-  ocaml: {
-    pattern: /^ocaml$/,
-    icon: lazy(() => import("../assets/language-icons/ocaml.js")),
-    width: 20,
-  },
-  c: {
-    pattern: /^c$/,
-    icon: lazy(() => import("../assets/language-icons/c.js")),
-    width: 20,
-  },
-  cpp: {
-    pattern: /^(cpp|c\+\+)$/,
-    icon: lazy(() => import("../assets/language-icons/cpp.js")),
-    width: 20,
-  },
-  commonlisp: {
-    pattern: /^(clisp|common-lisp|lisp|cl|commonlisp)$/,
-    icon: lazy(() => import("../assets/language-icons/commonlisp.js")),
-    width: 18,
-  },
-  elixir: {
-    pattern: /^elixir$/,
-    icon: lazy(() => import("../assets/language-icons/elixir.js")),
-    width: 18,
-  },
-  powershell: {
-    pattern: /^(pshell|powershell|ps1)$/,
-    icon: lazy(() => import("../assets/language-icons/powershell.js")),
-    width: 18,
-  },
-};
-
-export const LanguageIcon = ({ language }: { language?: string }) => {
-  if (!language) return null;
-
-  const Lang = Object.values(Languages).find((l) => l.pattern.test(language));
-
-  if (!Lang) return null;
-
-  const size = Lang.width ?? 18;
-
-  return (
-    <Suspense fallback={<div style={{ width: size, height: "1em" }} />}>
-      <Lang.icon className="h-auto" style={{ width: size }} />
-    </Suspense>
-  );
-};
+import {
+  type ComponentType,
+  type LazyExoticComponent,
+  lazy,
+  Suspense,
+  type SVGProps,
+} from "react";
+
+type Language = {
+  pattern: RegExp;
+  icon: LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>;
+  width?: number;
+};
+
+const Languages: Record<string, Language> = {
+  typescript: {
+    pattern: /^(ts|typescript)$/,
+    icon: lazy(() => import("../assets/language-icons/typescript.js")),
+    width: 15,
+  },
+  javascript: {
+    pattern: /^(js|javascript)$/,
+    icon: lazy(() => import("../assets/language-icons/javascript.js")),
+  },
+  react: {
+    pattern: /^(react|tsx|jsx)$/,
+    icon: lazy(() => import("../assets/language-icons/react.js")),
+    width: 20,
+  },
+  markdown: {
+    pattern: /^(md|markdown)$/,
+    icon: lazy(() => import("../assets/language-icons/markdown.js")),
+    width: 22,
+  },
+  mdx: {
+    pattern: /^mdx$/,
+    icon: lazy(() => import("../assets/language-icons/mdx.js")),
+    width: 28,
+  },
+  java: {
+    pattern: /^(java)$/,
+    icon: lazy(() => import("../assets/language-icons/java.js")),
+    width: 22,
+  },
+  json: {
+    pattern: /^jsonc?$/,
+    icon: lazy(() => import("../assets/language-icons/json.js")),
+  },
+  yaml: {
+    pattern: /^yaml$/,
+    icon: lazy(() => import("../assets/language-icons/yaml.js")),
+  },
+  toml: {
+    pattern: /^toml$/,
+    icon: lazy(() => import("../assets/language-icons/toml.js")),
+  },
+  shell: {
+    pattern: /^(shell|bash|sh|zsh|term|terminal|ansi)$/,
+    icon: lazy(() => import("../assets/language-icons/shell.js")),
+  },
+  python: {
+    pattern: /^(py|python)$/,
+    icon: lazy(() => import("../assets/language-icons/python.js")),
+  },
+  pnpm: {
+    pattern: /^pnp(m|x)$/,
+    icon: lazy(() => import("../assets/language-icons/pnpm.js")),
+    width: 14,
+  },
+  npm: {
+    pattern: /^np(m|x)$/,
+    icon: lazy(() => import("../assets/language-icons/npm.js")),
+  },
+  yarn: {
+    pattern: /^yarn$/,
+    icon: lazy(() => import("../assets/language-icons/yarn.js")),
+    width: 16,
+  },
+  bun: {
+    pattern: /^bun(x)?$/,
+    icon: lazy(() => import("../assets/language-icons/bun.js")),
+  },
+  csharp: {
+    pattern: /^(cs|csharp|vb)$/,
+    icon: lazy(() => import("../assets/language-icons/csharp.js")),
+    width: 20,
+  },
+  rust: {
+    pattern: /^(rs|rust)$/,
+    icon: lazy(() => import("../assets/language-icons/rust.js")),
+    width: 20,
+  },
+  ruby: {
+    pattern: /^(rb|ruby)$/,
+    icon: lazy(() => import("../assets/language-icons/ruby.js")),
+  },
+  php: {
+    pattern: /^php$/,
+    icon: lazy(() => import("../assets/language-icons/php.js")),
+    width: 24,
+  },
+  html: {
+    pattern: /^html?$/,
+    icon: lazy(() => import("../assets/language-icons/html.js")),
+    width: 15,
+  },
+  css: {
+    pattern: /^css$/,
+    icon: lazy(() => import("../assets/language-icons/css.js")),
+  },
+  objectivec: {
+    pattern: /^(objc|objectivec)$/,
+    icon: lazy(() => import("../assets/language-icons/objectivec.js")),
+    width: 16,
+  },
+  swift: {
+    pattern: /^swift$/,
+    icon: lazy(() => import("../assets/language-icons/swift.js")),
+  },
+  go: {
+    pattern: /^go$/,
+    icon: lazy(() => import("../assets/language-icons/go.js")),
+    width: 28,
+  },
+  xml: {
+    pattern: /^xml$/,
+    icon: lazy(() => import("../assets/language-icons/xml.js")),
+  },
+  kotlin: {
+    pattern: /^(kt|kotlin)$/,
+    icon: lazy(() => import("../assets/language-icons/kotlin.js")),
+    width: 14,
+  },
+  graphql: {
+    pattern: /^(gql|graphql)$/,
+    icon: lazy(() => import("../assets/language-icons/graphql.js")),
+  },
+  zig: {
+    pattern: /^zig$/,
+    icon: lazy(() => import("../assets/language-icons/zig.js")),
+    width: 28,
+  },
+  scala: {
+    pattern: /^scala$/,
+    icon: lazy(() => import("../assets/language-icons/scala.js")),
+    width: 18,
+  },
+  dart: {
+    pattern: /^dart$/,
+    icon: lazy(() => import("../assets/language-icons/dart.js")),
+    width: 20,
+  },
+  ocaml: {
+    pattern: /^ocaml$/,
+    icon: lazy(() => import("../assets/language-icons/ocaml.js")),
+    width: 20,
+  },
+  c: {
+    pattern: /^c$/,
+    icon: lazy(() => import("../assets/language-icons/c.js")),
+    width: 20,
+  },
+  cpp: {
+    pattern: /^(cpp|c\+\+)$/,
+    icon: lazy(() => import("../assets/language-icons/cpp.js")),
+    width: 20,
+  },
+  commonlisp: {
+    pattern: /^(clisp|common-lisp|lisp|cl|commonlisp)$/,
+    icon: lazy(() => import("../assets/language-icons/commonlisp.js")),
+    width: 18,
+  },
+  elixir: {
+    pattern: /^elixir$/,
+    icon: lazy(() => import("../assets/language-icons/elixir.js")),
+    width: 18,
+  },
+  powershell: {
+    pattern: /^(pshell|powershell|ps1)$/,
+    icon: lazy(() => import("../assets/language-icons/powershell.js")),
+    width: 18,
+  },
+};
+
+export const LanguageIcon = ({ language }: { language?: string }) => {
+  if (!language) return null;
+
+  const Lang = Object.values(Languages).find((l) => l.pattern.test(language));
+
+  if (!Lang) return null;
+
+  const size = Lang.width ?? 18;
+
+  return (
+    <Suspense fallback={<div style={{ width: size, height: "1em" }} />}>
+      <Lang.icon className="h-auto" style={{ width: size }} />
+    </Suspense>
+  );
+};

package/src/lib/components/Layout.tsx

@@ -1,59 +1,59 @@
-import { TooltipProvider } from "@lukoweb/apitogo/ui/Tooltip.js";
-import { type ReactNode, Suspense, useEffect } from "react";
-import { Outlet } from "react-router";
-import { cn } from "../util/cn.js";
-import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
-import { useScrollToTop } from "../util/useScrollToTop.js";
-import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { Footer } from "./Footer.js";
-import { Header } from "./Header.js";
-import { Main } from "./Main.js";
-import { Slot } from "./Slot.js";
-import { Spinner } from "./Spinner.js";
-
-const LoadingFallback = () => (
-  <main className="col-span-full row-span-full grid place-items-center">
-    <Spinner />
-  </main>
-);
-
-export const Layout = ({ children }: { children?: ReactNode }) => {
-  const { authentication } = useZudoku();
-  const { navigation } = useCurrentNavigation();
-  const hasSideNav = navigation.length > 0;
-
-  useScrollToAnchor();
-  useScrollToTop();
-
-  useEffect(() => {
-    // Initialize the authentication plugin
-    authentication?.onPageLoad?.();
-  }, [authentication]);
-
-  return (
-    <TooltipProvider>
-      <Slot.Target name="layout-before-head" />
-      <Suspense>
-        <Header />
-      </Suspense>
-      <Slot.Target name="layout-after-head" />
-
-      <div
-        className={cn(
-          "grid w-full",
-          // Docs shell: cap width + reserve side-nav column.
-          // Marketing pages (no side nav): full-bleed so section backgrounds
-          // and compare/FAQ bands can span the viewport.
-          hasSideNav
-            ? "max-w-screen-2xl lg:mx-auto grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr] grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]"
-            : "grid-cols-1 grid-rows-1",
-        )}
-      >
-        <Suspense fallback={<LoadingFallback />}>
-          <Main>{children ?? <Outlet />}</Main>
-        </Suspense>
-      </div>
-      <Footer />
-    </TooltipProvider>
-  );
-};
+import { TooltipProvider } from "@lukoweb/apitogo/ui/Tooltip.js";
+import { type ReactNode, Suspense, useEffect } from "react";
+import { Outlet } from "react-router";
+import { cn } from "../util/cn.js";
+import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
+import { useScrollToTop } from "../util/useScrollToTop.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { Footer } from "./Footer.js";
+import { Header } from "./Header.js";
+import { Main } from "./Main.js";
+import { Slot } from "./Slot.js";
+import { Spinner } from "./Spinner.js";
+
+const LoadingFallback = () => (
+  <main className="col-span-full row-span-full grid place-items-center">
+    <Spinner />
+  </main>
+);
+
+export const Layout = ({ children }: { children?: ReactNode }) => {
+  const { authentication } = useZudoku();
+  const { navigation } = useCurrentNavigation();
+  const hasSideNav = navigation.length > 0;
+
+  useScrollToAnchor();
+  useScrollToTop();
+
+  useEffect(() => {
+    // Initialize the authentication plugin
+    authentication?.onPageLoad?.();
+  }, [authentication]);
+
+  return (
+    <TooltipProvider>
+      <Slot.Target name="layout-before-head" />
+      <Suspense>
+        <Header />
+      </Suspense>
+      <Slot.Target name="layout-after-head" />
+
+      <div
+        className={cn(
+          "grid w-full",
+          // Docs shell: cap width + reserve side-nav column.
+          // Marketing pages (no side nav): full-bleed so section backgrounds
+          // and compare/FAQ bands can span the viewport.
+          hasSideNav
+            ? "max-w-screen-2xl lg:mx-auto grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr] grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]"
+            : "grid-cols-1 grid-rows-1",
+        )}
+      >
+        <Suspense fallback={<LoadingFallback />}>
+          <Main>{children ?? <Outlet />}</Main>
+        </Suspense>
+      </div>
+      <Footer />
+    </TooltipProvider>
+  );
+};

package/src/lib/components/Main.tsx

@@ -1,52 +1,52 @@
-import { Drawer, DrawerTrigger } from "@lukoweb/apitogo/ui/Drawer.js";
-import { PanelLeftIcon } from "lucide-react";
-import { type PropsWithChildren, useState } from "react";
-import { useNavigation } from "react-router";
-import { cn } from "../util/cn.js";
-import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { Navigation } from "./navigation/Navigation.js";
-import { Slot } from "./Slot.js";
-
-export const Main = ({ children }: PropsWithChildren) => {
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
-  const { navigation } = useCurrentNavigation();
-  const hasNavigation = navigation.length > 0;
-  const isNavigating = useNavigation().state === "loading";
-  const { options } = useZudoku();
-
-  return (
-    <Drawer
-      direction={options.site?.dir === "rtl" ? "right" : "left"}
-      open={isDrawerOpen}
-      onOpenChange={(open) => setDrawerOpen(open)}
-    >
-      {hasNavigation && (
-        <Navigation
-          onRequestClose={() => setDrawerOpen(false)}
-          navigation={navigation}
-        />
-      )}
-      {hasNavigation && (
-        <div className="lg:hidden m-0 p-0 md:-mx-4 md:px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
-          <DrawerTrigger className="flex items-center gap-2 px-4">
-            <PanelLeftIcon size={16} strokeWidth={1.5} />
-            <span className="text-sm">Menu</span>
-          </DrawerTrigger>
-        </div>
-      )}
-      <main
-        data-pagefind-body
-        className={cn(
-          // Docs: gutter so content clears the side nav.
-          // Marketing: no shell padding — pages own section px / full-bleed bands.
-          hasNavigation ? "px-4 lg:pe-8 lg:px-8" : "col-span-full px-0",
-          isNavigating && "animate-pulse",
-        )}
-      >
-        <Slot.Target name="content-before" />
-        {children}
-        <Slot.Target name="content-after" />
-      </main>
-    </Drawer>
-  );
-};
+import { Drawer, DrawerTrigger } from "@lukoweb/apitogo/ui/Drawer.js";
+import { PanelLeftIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
+import { useNavigation } from "react-router";
+import { cn } from "../util/cn.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { Navigation } from "./navigation/Navigation.js";
+import { Slot } from "./Slot.js";
+
+export const Main = ({ children }: PropsWithChildren) => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const { navigation } = useCurrentNavigation();
+  const hasNavigation = navigation.length > 0;
+  const isNavigating = useNavigation().state === "loading";
+  const { options } = useZudoku();
+
+  return (
+    <Drawer
+      direction={options.site?.dir === "rtl" ? "right" : "left"}
+      open={isDrawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
+      {hasNavigation && (
+        <Navigation
+          onRequestClose={() => setDrawerOpen(false)}
+          navigation={navigation}
+        />
+      )}
+      {hasNavigation && (
+        <div className="lg:hidden m-0 p-0 md:-mx-4 md:px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
+          <DrawerTrigger className="flex items-center gap-2 px-4">
+            <PanelLeftIcon size={16} strokeWidth={1.5} />
+            <span className="text-sm">Menu</span>
+          </DrawerTrigger>
+        </div>
+      )}
+      <main
+        data-pagefind-body
+        className={cn(
+          // Docs: gutter so content clears the side nav.
+          // Marketing: no shell padding — pages own section px / full-bleed bands.
+          hasNavigation ? "px-4 lg:pe-8 lg:px-8" : "col-span-full px-0",
+          isNavigating && "animate-pulse",
+        )}
+      >
+        <Slot.Target name="content-before" />
+        {children}
+        <Slot.Target name="content-after" />
+      </main>
+    </Drawer>
+  );
+};