zudoku 0.0.0-f49e3ea → 0.0.0-f52e8af

package/src/lib/components/Bootstrap.tsx

@@ -4,14 +4,24 @@ import {
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode, useState } from "react";
-import { type createBrowserRouter, RouterProvider } from "react-router-dom";
+import { StrictMode } from "react";
 import {
+  type createBrowserRouter,
   type createStaticRouter,
   type StaticHandlerContext,
   StaticRouterProvider,
-} from "react-router-dom/server.js";
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+import { BypassProtectedRoutesContext } from "./context/BypassProtectedRoutesContext.js";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
 
 const Bootstrap = ({
   router,
@@ -19,51 +29,41 @@ const Bootstrap = ({
 }: {
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
-}) => {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 1000 * 60 * 5,
-          },
-        },
-      }),
-  );
-
-  return (
-    <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+}) => (
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+        <BypassProtectedRoutesContext value={false}>
           <HelmetProvider>
             <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-              <RouterProvider
-                router={router}
-                future={{ v7_startTransition: true }}
-              />
+              <RouterProvider router={router} />
             </StaggeredRenderContext.Provider>
           </HelmetProvider>
-        </HydrationBoundary>
-      </QueryClientProvider>
-    </StrictMode>
-  );
-};
+        </BypassProtectedRoutesContext>
+      </HydrationBoundary>
+    </QueryClientProvider>
+  </StrictMode>
+);
 
 const BootstrapStatic = ({
   router,
   context,
   queryClient,
   helmetContext,
+  bypassProtection = false,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
   queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
+  bypassProtection?: boolean;
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HelmetProvider context={helmetContext}>
-        <StaticRouterProvider router={router} context={context} />
+        <BypassProtectedRoutesContext value={bypassProtection}>
+          <StaticRouterProvider router={router} context={context} />
+        </BypassProtectedRoutesContext>
       </HelmetProvider>
     </QueryClientProvider>
   </StrictMode>

package/src/lib/components/BuildCheck.tsx

@@ -0,0 +1,75 @@
+import { useQuery } from "@tanstack/react-query";
+import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-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,
+  endpoint = "/__zuplo/docs",
+}: {
+  buildId?: string;
+  endpoint?: string;
+}) => {
+  const buildStatusQuery = useQuery({
+    queryKey: ["zuplo-build-check", buildId, endpoint],
+    refetchInterval: 3000,
+    enabled:
+      typeof buildId !== "undefined" &&
+      import.meta.env.ZUPLO_ENVIRONMENT_TYPE === "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)),
+  });
+
+  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>
+      <Button
+        variant="outline"
+        size="sm"
+        className="w-full"
+        onClick={() => {
+          window.location.reload();
+        }}
+      >
+        Reload
+      </Button>
+    </div>
+  );
+};

package/src/lib/components/Footer.tsx

@@ -0,0 +1,136 @@
+import { ExternalLink as ExternalLinkIcon } from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
+import type { FooterSocialIcons } from "../../config/validators/common.js";
+import { cn } from "../util/cn.js";
+import { AnchorLink } from "./AnchorLink.js";
+import { useZudoku } from "./index.js";
+import { Slotlet } from "./SlotletProvider.js";
+
+const SocialIcon = ({
+  icon,
+}: {
+  icon: (typeof FooterSocialIcons)[number] | ReactNode;
+}) => {
+  if (typeof icon === "string") {
+    return (
+      <img
+        src={`https://cdn.simpleicons.org/${icon}/000000/ffffff`}
+        className="size-5"
+        alt={icon}
+      />
+    );
+  }
+  return icon;
+};
+
+const isExternalUrl = (href: string) => /^https?:/.test(href);
+
+export const Footer = () => {
+  const { page } = useZudoku();
+  const footer = page?.footer;
+
+  if (!footer) return null;
+
+  return (
+    <footer className="border-t bg-background">
+      <div className="mx-auto max-w-screen-2xl px-4 lg:px-8 py-8 pt-20">
+        <div
+          className={cn("flex flex-row gap-8", {
+            "justify-center": !footer.position || footer.position === "center",
+            "justify-start": footer.position === "start",
+            "justify-end": footer.position === "end",
+          })}
+        >
+          <Slotlet 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))]"
+              style={{ "--columns": footer.columns.length } as CSSProperties}
+            >
+              {footer.columns.map((column) => (
+                <div
+                  className={cn({
+                    "justify-self-center":
+                      !column.position || column.position === "center",
+                    "justify-self-start": column.position === "start",
+                    "justify-self-end": column.position === "end",
+                  })}
+                  key={column.title}
+                >
+                  <span className="text-sm font-semibold">{column.title}</span>
+                  <ul className="mt-4 space-y-2">
+                    {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 + link.label}>
+                          {isExternalUrl(link.href) ? (
+                            <a
+                              href={link.href}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className={className}
+                            >
+                              <span>{link.label}</span>
+                              <ExternalLinkIcon size={12} />
+                            </a>
+                          ) : (
+                            <AnchorLink to={link.href} className={className}>
+                              <span>{link.label}</span>
+                            </AnchorLink>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+          <Slotlet name="footer-after" />
+        </div>
+        <div
+          className={cn(
+            "flex items-center justify-between",
+            footer.columns && "border-t mt-8 pt-8",
+          )}
+        >
+          {footer.logo && (
+            <>
+              <img
+                src={footer.logo.src.light}
+                alt={footer.logo.alt}
+                className="w-8 dark:hidden"
+                style={{ width: footer.logo.width }}
+              />
+              <img
+                src={footer.logo.src.dark}
+                alt={footer.logo.alt}
+                className="w-8 hidden dark:block"
+                style={{ width: footer.logo.width }}
+              />
+            </>
+          )}
+          {footer.copyright && (
+            <p className="text-sm text-muted-foreground">{footer.copyright}</p>
+          )}
+          <div className="flex items-center gap-2">
+            {footer.social?.map((social) => (
+              <a
+                key={social.href}
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-auto gap-2 flex text-muted-foreground hover:text-accent-foreground"
+              >
+                <SocialIcon icon={social.icon} />
+                {social.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

package/src/lib/components/Header.tsx

@@ -1,9 +1,12 @@
 import { memo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
-import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
+import {
+  isProfileMenuPlugin,
+  type ProfileNavigationItem,
+} from "../core/plugins.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,7 +19,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
-import { joinPath } from "../util/joinPath.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -41,7 +44,12 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
     </DropdownMenuSub>
   ) : (
     <Link to={item.path ?? ""}>
-      <DropdownMenuItem key={item.label}>{item.label}</DropdownMenuItem>
+      <DropdownMenuItem key={item.label} className="flex gap-2">
+        {item.icon && (
+          <item.icon size={16} strokeWidth={1} absoluteStrokeWidth />
+        )}
+        {item.label}
+      </DropdownMenuItem>
     </Link>
   );
 };
@@ -55,13 +63,13 @@ export const Header = memo(function HeaderInner() {
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
-    .map((i) => <RecursiveMenu key={i.label} item={i} />);
+    .sort((i) => i.weight ?? 0);
 
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
-      <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
+      <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="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -71,7 +79,7 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.light)
                           ? page.logo.src.light
-                          : joinPath(
+                          : joinUrl(
                               import.meta.env.BASE_URL,
                               page.logo.src.light,
                             )
@@ -82,33 +90,33 @@ export const Header = memo(function HeaderInner() {
                       loading="lazy"
                     />
                     <img
-                      data-hide-on-theme="light"
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
-                          : joinPath(
+                          : joinUrl(
                               import.meta.env.BASE_URL,
                               page.logo.src.dark,
                             )
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10"
+                      className="h-10 hidden dark:block"
                       loading="lazy"
                     />
                   </>
                 )}
-                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                <span className="font-semibold text-2xl">
                   {page?.pageTitle}
                 </span>
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-1 lg:grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full justify-center hidden lg:flex">
-              <Search />
-            </div>
 
+          <div className="absolute inset-x-0 justify-center items-center hidden lg:flex w-full pointer-events-none">
+            <Search className="pointer-events-auto" />
+          </div>
+
+          <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" />
@@ -121,31 +129,64 @@ export const Header = memo(function HeaderInner() {
                       Login
                     </Button>
                   ) : (
-                    accountItems.length > 0 && (
+                    Object.values(accountItems).length > 0 && (
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.email ? `${profile.email}` : "My Account"}
+                            {profile?.name ? `${profile.name}` : "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
-                          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                          <DropdownMenuSeparator />
-                          {accountItems}
+                          <DropdownMenuLabel>
+                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.email && (
+                              <div className="font-normal text-muted-foreground">
+                                {profile.email}
+                              </div>
+                            )}
+                          </DropdownMenuLabel>
+                          {accountItems.filter((i) => i.category === "top")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "top")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter(
+                            (i) => !i.category || i.category === "middle",
+                          ).length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter(
+                              (i) => !i.category || i.category === "middle",
+                            )
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
+                          {accountItems.filter((i) => i.category === "bottom")
+                            .length > 0 && <DropdownMenuSeparator />}
+                          {accountItems
+                            .filter((i) => i.category === "bottom")
+                            .map((i) => (
+                              <RecursiveMenu key={i.label} item={i} />
+                            ))}
                         </DropdownMenuContent>
                       </DropdownMenu>
                     )
                   )}
                 </ClientOnly>
               )}
-              <ThemeSwitch />
               <Slotlet name="head-navigation-end" />
+              <ThemeSwitch />
             </div>
           </div>
         </div>
-        <Slotlet name="top-navigation-before" />
-        <TopNavigation />
-        <Slotlet name="top-navigation-after" />
+      </div>
+      <div className="border-b hidden lg:block">
+        <div className="max-w-screen-2xl mx-auto border-transparent">
+          <Slotlet name="top-navigation-before" />
+          <TopNavigation />
+          <Slotlet name="top-navigation-after" />
+        </div>
       </div>
     </header>
   );

package/src/lib/components/Heading.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 import { cva, type VariantProps } from "class-variance-authority";
@@ -38,23 +38,22 @@ const getComponent = (level: number) => {
   }
 };
 
-export interface HeadingProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof heading> {
-  children: ReactNode;
-  className?: string;
-  id?: string;
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  registerSidebarAnchor?: boolean;
-}
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
+  VariantProps<typeof heading> & {
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    registerSidebarAnchor?: boolean;
+  };
 
-export const Heading: React.FC<HeadingProps> = ({
+export const Heading = ({
   level,
   children,
   id,
   className,
   registerSidebarAnchor,
-}) => {
+}: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
 
@@ -67,10 +66,11 @@ export const Heading: React.FC<HeadingProps> = ({
       {id && (
         <a
           href={`#${id}`}
-          className="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="before:content-['#'] no-underline absolute text-primary -start-[0.8em] pe-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          #
+          {/* Zero width space */}
+          &#8203;
         </a>
       )}
       {children}

package/src/lib/components/InlineCode.tsx

@@ -1,29 +1,26 @@
 import type { ReactNode } from "react";
+import { SelectOnClick } from "../plugins/openapi/components/SelectOnClick.js";
 import { cn } from "../util/cn.js";
 
 export const InlineCode = ({
   className,
   children,
   selectOnClick,
+  onClick,
 }: {
   className?: string;
   children: ReactNode;
   selectOnClick?: boolean;
+  onClick?: () => void;
 }) => (
-  <code
-    onClick={(e) => {
-      if (!selectOnClick) return;
-      const selection = window.getSelection();
-      const range = document.createRange();
-      range.selectNodeContents(e.currentTarget);
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-    }}
-    className={cn(
-      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
-      className,
-    )}
-  >
-    {children}
-  </code>
+  <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]",
+        className,
+      )}
+    >
+      {children}
+    </code>
+  </SelectOnClick>
 );