@mehdad67/apitogo 0.1.24

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>
+);

package/src/lib/components/LanguageIcon.tsx

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

package/src/lib/components/Layout.tsx

@@ -0,0 +1,53 @@
+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 { 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();
+
+  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 max-w-screen-2xl w-full lg:mx-auto",
+          "[&:has(>:only-child)]:grid-rows-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr]",
+          "grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]",
+        )}
+      >
+        <Suspense fallback={<LoadingFallback />}>
+          <Main>{children ?? <Outlet />}</Main>
+        </Suspense>
+      </div>
+      <Footer />
+    </TooltipProvider>
+  );
+};

package/src/lib/components/Main.tsx

@@ -0,0 +1,51 @@
+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(
+          "px-4 lg:pe-8 lg:px-8",
+          !hasNavigation && "col-span-full",
+          isNavigating && "animate-pulse",
+        )}
+      >
+        <Slot.Target name="content-before" />
+        {children}
+        <Slot.Target name="content-after" />
+      </main>
+    </Drawer>
+  );
+};

package/src/lib/components/Markdown.tsx

@@ -0,0 +1,55 @@
+import { memo, useMemo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import { useHighlighter } from "../hooks/useHighlighter.js";
+import { createConfiguredShikiRehypePlugins } from "../shiki.js";
+import { MdxComponents } from "../util/MdxComponents.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+import { Typography } from "./Typography.js";
+
+const remarkPlugins = [remarkGfm];
+
+export const Markdown = memo(
+  ({
+    content,
+    className,
+    components,
+  }: {
+    content: string;
+    className?: string;
+    components?: Components;
+  }) => {
+    const { syntaxHighlighting } = useZudoku().options;
+    const highlighter = useHighlighter();
+    const rehypePlugins = useMemo(
+      () => [
+        rehypeRaw,
+        ...createConfiguredShikiRehypePlugins(
+          highlighter,
+          syntaxHighlighting?.themes,
+        ),
+      ],
+      [syntaxHighlighting?.themes, highlighter],
+    );
+
+    const mdComponents = useMemo(
+      () => ({ ...MdxComponents, ...components }),
+      [components],
+    );
+
+    return (
+      <Typography className={className}>
+        <ReactMarkdown
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={mdComponents}
+        >
+          {content}
+        </ReactMarkdown>
+      </Typography>
+    );
+  },
+);
+
+Markdown.displayName = "Markdown";

package/src/lib/components/Mermaid.tsx

@@ -0,0 +1,74 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { useQuery } from "@tanstack/react-query";
+import type { MermaidConfig } from "mermaid";
+import type { ComponentProps } from "react";
+import { useId } from "react";
+import { useTheme } from "../hooks/index.js";
+import { Spinner } from "./Spinner.js";
+
+export type MermaidProps = {
+  chart: string;
+  config?: MermaidConfig;
+} & ComponentProps<"div">;
+
+let mermaidPromise: Promise<typeof import("mermaid").default> | null = null;
+
+const loadMermaid = () => {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid")
+      .then((mod) => mod.default)
+      .catch((error) => {
+        throw new Error(
+          "Mermaid is not installed. Please install it with: npm install mermaid",
+          { cause: error },
+        );
+      });
+  }
+  return mermaidPromise;
+};
+
+export const Mermaid = ({ chart, config, ...props }: MermaidProps) => {
+  const id = useId();
+  const theme = useTheme();
+
+  const {
+    data: svg,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["mermaid", chart, config, theme.resolvedTheme],
+    queryFn: async () => {
+      const mermaid = await loadMermaid();
+      mermaid.initialize({
+        theme: theme.resolvedTheme === "dark" ? "dark" : "base",
+        ...config,
+      });
+
+      const { svg } = await mermaid.render(id, chart);
+      return svg;
+    },
+    enabled: typeof window !== "undefined",
+    retry: false,
+  });
+
+  if (error)
+    return (
+      <Alert className="flex flex-col gap-2" variant="destructive">
+        <AlertTitle>Mermaid Error</AlertTitle>
+        <AlertDescription className="overflow-auto wrap-break-word whitespace-pre-wrap font-mono text-xs">
+          {error.message}
+        </AlertDescription>
+      </Alert>
+    );
+
+  if (isPending) return <Spinner />;
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid generates valid SVG
+  return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
+};
+
+export default Mermaid;

package/src/lib/components/Meta.tsx

@@ -0,0 +1,46 @@
+import { Helmet } from "@zudoku/react-helmet-async";
+import type { PropsWithChildren } from "react";
+import { useLocation } from "react-router";
+import { joinUrl } from "../util/joinUrl.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Meta = ({ children }: PropsWithChildren) => {
+  const { options } = useZudoku();
+  const { metadata: meta } = options;
+  const location = useLocation();
+
+  return (
+    <>
+      <Helmet titleTemplate={meta?.title} defaultTitle={meta?.defaultTitle}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
+        {meta?.description && (
+          <meta name="description" content={meta.description} />
+        )}
+        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+        {meta?.generator && <meta name="generator" content={meta.generator} />}
+        {meta?.applicationName && (
+          <meta name="application-name" content={meta.applicationName} />
+        )}
+        {meta?.referrer && <meta name="referrer" content={meta.referrer} />}
+        {meta?.keywords && meta.keywords.length > 0 && (
+          <meta name="keywords" content={meta.keywords.join(", ")} />
+        )}
+        {meta?.authors?.map((author) => (
+          <meta key={author} name="author" content={author} />
+        ))}
+        {meta?.creator && <meta name="creator" content={meta.creator} />}
+        {meta?.publisher && <meta name="publisher" content={meta.publisher} />}
+      </Helmet>
+      {children}
+    </>
+  );
+};