zudoku 0.0.0-feda542 → 0.0.0-ff27e7ea

package/src/lib/components/BuildCheck.tsx

@@ -0,0 +1,88 @@
+import { useQuery } from "@tanstack/react-query";
+import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
+import { useEffect } from "react";
+import { z } from "zod";
+import { Button } from "../ui/Button.js";
+
+const BuildStatusSchema = z.object({
+  buildId: z.string(),
+  timestamp: z.string(),
+  status: z.enum(["in-progress", "success", "failed"]),
+});
+
+export const BuildCheck = ({
+  buildId,
+  environmentType,
+  endpoint = "/__zuplo/docs",
+}: {
+  buildId?: string;
+  environmentType?: string;
+  endpoint?: string;
+}) => {
+  const buildStatusQuery = useQuery({
+    queryKey: ["zuplo-build-check", buildId, endpoint],
+    refetchInterval: 3000,
+    enabled: buildId !== undefined && environmentType === "WORKING_COPY",
+    retry: false,
+    queryFn: () =>
+      fetch(endpoint, { signal: AbortSignal.timeout(2000) })
+        .then((res) => {
+          if (!res.ok) throw new Error("Failed to fetch build status");
+          return res.json();
+        })
+        .then((data) => BuildStatusSchema.parse(data)),
+  });
+
+  useEffect(() => {
+    if (
+      buildStatusQuery.data?.status === "success" &&
+      buildStatusQuery.data.buildId
+    ) {
+      // biome-ignore lint/suspicious/noDocumentCookie: CookieStore too new to use
+      document.cookie = `zuplo-build=${buildStatusQuery.data.buildId}; path=/; max-age=300; secure; SameSite=None`;
+    }
+  }, [buildStatusQuery.data]);
+
+  if (
+    buildStatusQuery.isError ||
+    !buildStatusQuery.data ||
+    buildStatusQuery.data.buildId === buildId
+  ) {
+    return null;
+  }
+
+  const isCompleted = buildStatusQuery.data.status === "success";
+
+  return (
+    <div className="fixed flex flex-col gap-3 p-4 rounded-xl w-96 border z-20 bg-background left-0 right-0 top-4 mx-auto shadow-lg">
+      {isCompleted ? (
+        <div className="flex flex-row items-center gap-2">
+          <CircleFadingArrowUpIcon size={16} />
+          <span className="text-sm">New version available</span>
+        </div>
+      ) : (
+        <div className="flex flex-row items-center gap-2">
+          <LoaderCircleIcon size={16} className="animate-spin" />
+          <span className="text-sm">Building new version...</span>
+        </div>
+      )}
+      <span className="text-xs">
+        {!isCompleted
+          ? "A new version of the developer portal will be available soon."
+          : "To see the new version, reload the page now."}
+      </span>
+      {isCompleted && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full"
+          onClick={() => {
+            window.location.reload();
+          }}
+        >
+          Reload
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/CategoryHeading.tsx

@@ -9,7 +9,10 @@ export const CategoryHeading = ({
   className?: string;
 }) => {
   return (
-    <div className={cx("text-sm font-semibold text-primary mb-2", className)}>
+    <div
+      className={cx("text-sm font-semibold text-primary mb-2", className)}
+      data-pagefind-ignore="all"
+    >
       {children}
     </div>
   );

package/src/lib/components/ErrorPage.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { Heading } from "./Heading.js";
-import { ProseClasses } from "./Markdown.js";
+import { Typography } from "./Typography.js";
 
 export const ErrorPage = ({
   title = "An error occurred",
@@ -13,7 +13,7 @@ export const ErrorPage = ({
   category?: ReactNode;
 }) => {
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <Typography className={"h-full pt-(--padding-content-top)"}>
       {category && <CategoryHeading>{category}</CategoryHeading>}
       {title && (
         <Heading level={1} className="flex gap-3.5 items-center">
@@ -21,6 +21,6 @@ export const ErrorPage = ({
         </Heading>
       )}
       <p>{message}</p>
-    </div>
+    </Typography>
   );
 };

package/src/lib/components/Footer.tsx

@@ -1,10 +1,10 @@
 import { ExternalLink as ExternalLinkIcon } from "lucide-react";
 import type { CSSProperties, ReactNode } from "react";
-import type { FooterSocialIcons } from "../../config/validators/common.js";
+import type { FooterSocialIcons } from "../../config/validators/validate.js";
 import { cn } from "../util/cn.js";
 import { AnchorLink } from "./AnchorLink.js";
 import { useZudoku } from "./index.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 
 const SocialIcon = ({
   icon,
@@ -26,7 +26,7 @@ const SocialIcon = ({
 const isExternalUrl = (href: string) => /^https?:/.test(href);
 
 export const Footer = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const footer = page?.footer;
 
   if (!footer) return null;
@@ -41,7 +41,7 @@ export const Footer = () => {
             "justify-end": footer.position === "end",
           })}
         >
-          <Slotlet name="footer-before" />
+          <Slot.Target name="footer-before" />
           {footer.columns && (
             <div
               className="w-full md:max-w-screen-md grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
@@ -59,12 +59,12 @@ export const Footer = () => {
                 >
                   <span className="text-sm font-semibold">{column.title}</span>
                   <ul className="mt-4 space-y-2">
-                    {column.links.map((link, i) => {
+                    {column.links.map((link) => {
                       const className =
                         "flex flex-row gap-1 items-center text-sm text-muted-foreground hover:text-accent-foreground";
 
                       return (
-                        <li key={link.href + i}>
+                        <li key={link.href + link.label}>
                           {isExternalUrl(link.href) ? (
                             <a
                               href={link.href}
@@ -76,10 +76,7 @@ export const Footer = () => {
                               <ExternalLinkIcon size={12} />
                             </a>
                           ) : (
-                            <AnchorLink
-                              to={link.href + i}
-                              className={className}
-                            >
+                            <AnchorLink to={link.href} className={className}>
                               <span>{link.label}</span>
                             </AnchorLink>
                           )}
@@ -91,7 +88,7 @@ export const Footer = () => {
               ))}
             </div>
           )}
-          <Slotlet name="footer-after" />
+          <Slot.Target name="footer-after" />
         </div>
         <div
           className={cn(

package/src/lib/components/Framed.tsx

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+import type { PropsWithChildren } from "react";
+import { cn } from "../util/cn.js";
+
+const frameVariants = cva("", {
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      full: "max-w-full",
+    },
+    align: {
+      center: "mx-auto",
+      start: "me-auto",
+      end: "ms-auto",
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+    align: "center",
+  },
+});
+
+export const Framed = ({
+  caption,
+  className,
+  size = "xl",
+  align = "center",
+  children,
+}: PropsWithChildren<{
+  caption?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  align?: "center" | "start" | "end";
+}>) => (
+  <figure className={cn(frameVariants({ size, align }), className)}>
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50 p-1 shadow-sm">
+      <div className="not-prose rounded-md [&_img]:rounded-md! relative overflow-hidden bg-background">
+        {children}
+      </div>
+    </div>
+    {caption && (
+      <figcaption className="mt-3 text-center text-sm text-muted-foreground">
+        {caption}
+      </figcaption>
+    )}
+  </figure>
+);

package/src/lib/components/Header.tsx

@@ -19,13 +19,15 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
+import { cn } from "../util/cn.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
+import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
 
@@ -35,9 +37,8 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
       <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
       <DropdownMenuPortal>
         <DropdownMenuSubContent>
-          {item.children.map((item, i) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <RecursiveMenu key={i} item={item} />
+          {item.children.map((child) => (
+            <RecursiveMenu key={child.label} item={child} />
           ))}
         </DropdownMenuSubContent>
       </DropdownMenuPortal>
@@ -58,56 +59,58 @@ export const Header = memo(function HeaderInner() {
   const auth = useAuth();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
-  const { page, plugins } = context;
+  const { site, plugins, options } = context;
 
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
     .sort((i) => i.weight ?? 0);
 
+  const logoLightSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.light)
+      ? site.logo.src.light
+      : joinUrl(options.basePath, site.logo.src.light)
+    : undefined;
+  const logoDarkSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.dark)
+      ? site.logo.src.dark
+      : joinUrl(options.basePath, site.logo.src.dark)
+    : undefined;
+
+  const borderBottom = "inset-shadow-[0_-1px_0_0_var(--border)]";
+
   return (
-    <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
+    <header
+      className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full"
+      data-pagefind-ignore="all"
+    >
       <Banner />
-      <div className="border-b">
-        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height] border-transparent">
+      <div className={cn(borderBottom, "relative")}>
+        <PageProgress />
+        <div className="max-w-screen-2xl mx-auto flex items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
           <div className="flex">
-            <Link to="/">
+            <Link to={site?.logo?.href ?? "/"}>
               <div className="flex items-center gap-3.5">
-                {page?.logo && (
+                {site?.logo ? (
                   <>
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.light)
-                          ? page.logo.src.light
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.light,
-                            )
-                      }
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
-                      className="h-10 dark:hidden"
+                      src={logoLightSrc}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
+                      className="max-h-(--top-header-height) dark:hidden"
                       loading="lazy"
                     />
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.dark)
-                          ? page.logo.src.dark
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.dark,
-                            )
-                      }
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
-                      className="h-10 hidden dark:block"
+                      src={logoDarkSrc}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
+                      className="max-h-(--top-header-height) hidden dark:block"
                       loading="lazy"
                     />
                   </>
+                ) : (
+                  <span className="font-semibold text-2xl">{site?.title}</span>
                 )}
-                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
-                  {page?.pageTitle}
-                </span>
               </div>
             </Link>
           </div>
@@ -119,10 +122,10 @@ export const Header = memo(function HeaderInner() {
           <div className="flex items-center gap-8">
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
-              <Slotlet name="head-navigation-start" />
+              <Slot.Target name="head-navigation-start" />
               {isAuthEnabled && (
                 <ClientOnly
-                  fallback={<Skeleton className="rounded h-5 w-24 mr-4" />}
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
                 >
                   {!isAuthenticated ? (
                     <Button variant="ghost" onClick={() => auth.login()}>
@@ -133,7 +136,7 @@ export const Header = memo(function HeaderInner() {
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.name ?? "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
@@ -175,17 +178,17 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <Slotlet name="head-navigation-end" />
+              <Slot.Target name="head-navigation-end" />
               <ThemeSwitch />
             </div>
           </div>
         </div>
       </div>
-      <div className="border-b hidden lg:block">
-        <div className="max-w-screen-2xl mx-auto border-transparent">
-          <Slotlet name="top-navigation-before" />
+      <div className={cn("hidden lg:block", borderBottom)}>
+        <div className="max-w-screen-2xl mx-auto border-transparent relative">
+          <Slot.Target name="top-navigation-before" />
           <TopNavigation />
-          <Slotlet name="top-navigation-after" />
+          <Slot.Target name="top-navigation-after" />
         </div>
       </div>
     </header>

package/src/lib/components/Heading.tsx

@@ -1,7 +1,7 @@
-import React, { type ReactNode } from "react";
-import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
-
 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: {
@@ -38,13 +38,17 @@ const getComponent = (level: number) => {
   }
 };
 
-export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
   VariantProps<typeof heading> & {
     children: ReactNode;
     className?: string;
     id?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    registerSidebarAnchor?: boolean;
+    /**
+     * 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 = ({
@@ -52,7 +56,7 @@ export const Heading = ({
   children,
   id,
   className,
-  registerSidebarAnchor,
+  registerNavigationAnchor,
 }: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
@@ -60,20 +64,19 @@ export const Heading = ({
   return (
     <Component
       className={heading({ className, level })}
-      ref={registerSidebarAnchor ? ref : undefined}
+      ref={registerNavigationAnchor ? ref : undefined}
       id={id}
     >
+      {children}
       {id && (
         <a
           href={`#${id}`}
-          className="before:content-['#'] no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          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}`}
         >
-          {/* Zero width space */}
-          &#8203;
+          <LinkIcon className="size-[0.75em] min-w-4 min-h-4" />
         </a>
       )}
-      {children}
     </Component>
   );
 };

package/src/lib/components/InlineCode.tsx

@@ -16,7 +16,7 @@ export const InlineCode = ({
   <SelectOnClick asChild enabled={selectOnClick} onClick={onClick}>
     <code
       className={cn(
-        "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
+        "font-mono border p-1 py-0.5 rounded-sm bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
         className,
       )}
     >

package/src/lib/components/LanguageIcon.tsx

@@ -0,0 +1,181 @@
+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: 22,
+  },
+  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")),
+  },
+  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>
+  );
+};