zudoku 0.0.0-f471fb8 → 0.0.0-f52e8af

package/src/lib/authentication/components/SignIn.tsx

@@ -1,5 +1,13 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router";
+import { Link, useSearchParams } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {
@@ -11,5 +19,30 @@ export const SignIn = () => {
     });
   }, [context.authentication, search]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign in</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign-in process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Login
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };

package/src/lib/authentication/components/SignUp.tsx

@@ -1,11 +1,45 @@
 import { useEffect } from "react";
+import { Button, Link } from "zudoku/components";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignUp = () => {
   const context = useZudoku();
+
   useEffect(() => {
     void (context.authentication?.signUp() ?? context.authentication?.signIn());
   }, [context.authentication]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign up</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign up process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Register
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };

package/src/lib/authentication/providers/auth0.tsx

@@ -37,7 +37,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     });
 
     const redirectUrl = new URL(window.location.origin);
-    redirectUrl.pathname = this.logoutRedirectUrlPath;
+    redirectUrl.pathname = this.redirectToAfterSignOut;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
     // For Auth0 tenants created on or after 14 November 2023, RP-Initiated

package/src/lib/authentication/providers/clerk.tsx

@@ -50,8 +50,8 @@ const clerkAuth: AuthenticationProviderInitializer<
 > = ({
   clerkPubKey,
   redirectToAfterSignOut = "/",
-  redirectToAfterSignUp = "/",
-  redirectToAfterSignIn = "/",
+  redirectToAfterSignUp,
+  redirectToAfterSignIn,
 }) => {
   let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
@@ -126,22 +126,26 @@ const clerkAuth: AuthenticationProviderInitializer<
         providerData: null,
       });
     },
-    signIn: async ({ redirectTo }: { redirectTo?: string }) => {
+    signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignIn({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    signUp: async ({ redirectTo }: { redirectTo?: string }) => {
+    signUp: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignUp({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
     getAuthenticationPlugin() {

package/src/lib/authentication/providers/openid.tsx

@@ -23,18 +23,17 @@ export interface OpenIdProviderData {
   tokenType: string;
 }
 
+export const OPENID_CALLBACK_PATH = "/oauth/callback";
+
 class OpenIdAuthPlugin extends AuthenticationPlugin {
-  constructor(
-    private callbackUrlPath: string,
-    private handleCallback: () => Promise<string>,
-  ) {
+  constructor(private handleCallback: () => Promise<string>) {
     super();
   }
   getRoutes() {
     return [
       ...super.getRoutes(),
       {
-        path: this.callbackUrlPath,
+        path: OPENID_CALLBACK_PATH,
         element: (
           <ClientOnly>
             <CallbackHandler handleCallback={this.handleCallback} />
@@ -48,18 +47,18 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
 export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   protected client: oauth.Client;
   protected issuer: string;
-
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
   protected callbackUrlPath: string;
-  protected logoutRedirectUrlPath: string;
+
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
   ) => void;
-  private readonly redirectToAfterSignUp: string;
-  private readonly redirectToAfterSignIn: string;
-  private readonly redirectToAfterSignOut: string;
+
+  protected readonly redirectToAfterSignUp: string | undefined;
+  protected readonly redirectToAfterSignIn: string | undefined;
+  protected readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
   private readonly scopes: string[];
 
@@ -69,7 +68,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     clientId,
     redirectToAfterSignUp,
     redirectToAfterSignIn,
-    redirectToAfterSignOut,
+    redirectToAfterSignOut = "/",
     basePath,
     scopes,
   }: OpenIDAuthenticationConfig) {
@@ -79,15 +78,13 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+    // This is the callback URL for the OAuth provider. So it needs the base path.
+    this.callbackUrlPath = joinUrl(basePath, OPENID_CALLBACK_PATH);
     this.scopes = scopes ?? ["openid", "profile", "email"];
 
-    const root = joinUrl(basePath, "/");
-
-    this.logoutRedirectUrlPath = root;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
   protected async getAuthServer() {
@@ -133,14 +130,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
       isSignUp: true,
     });
   }
 
   async signIn({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
     });
   }
 
@@ -173,11 +170,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       authorizationServer.authorization_endpoint,
     );
 
-    const finalRedirect = redirectTo.startsWith(window.location.origin)
-      ? redirectTo.slice(window.location.origin.length)
-      : redirectTo;
-
-    sessionStorage.setItem("redirect-to", finalRedirect);
+    sessionStorage.setItem("redirect-to", redirectTo);
 
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
@@ -274,7 +267,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     const redirectUrl = new URL(
       window.location.origin + this.redirectToAfterSignOut,
     );
-    redirectUrl.pathname = this.logoutRedirectUrlPath;
+    redirectUrl.pathname = this.callbackUrlPath;
 
     let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
@@ -388,7 +381,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   getAuthenticationPlugin() {
     // TODO: This API is a bit messy, we need to refactor auth plugins/providers
     // to remove the extra layers of abstraction.
-    return new OpenIdAuthPlugin(this.callbackUrlPath, this.handleCallback);
+    return new OpenIdAuthPlugin(this.handleCallback);
   }
 }
 

package/src/lib/components/Banner.tsx

@@ -41,7 +41,7 @@ export const Banner = () => {
       {page.banner.dismissible && (
         <button
           type="button"
-          className="md:absolute md:right-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
+          className="md:absolute md:end-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
           onClick={() => setIsBannerOpen(false)}
         >
           <CircleXIcon size={16} />

package/src/lib/components/Bootstrap.tsx

@@ -13,6 +13,7 @@ import {
 } 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: {
@@ -32,11 +33,13 @@ const Bootstrap = ({
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-        <HelmetProvider>
-          <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-            <RouterProvider router={router} />
-          </StaggeredRenderContext.Provider>
-        </HelmetProvider>
+        <BypassProtectedRoutesContext value={false}>
+          <HelmetProvider>
+            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+              <RouterProvider router={router} />
+            </StaggeredRenderContext.Provider>
+          </HelmetProvider>
+        </BypassProtectedRoutesContext>
       </HydrationBoundary>
     </QueryClientProvider>
   </StrictMode>
@@ -47,16 +50,20 @@ const BootstrapStatic = ({
   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

@@ -69,7 +69,7 @@ export const Header = memo(function HeaderInner() {
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
       <div className="border-b">
-        <div className="max-w-screen-2xl 2xl:border-x mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height]">
+        <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">
@@ -105,7 +105,7 @@ export const Header = memo(function HeaderInner() {
                     />
                   </>
                 )}
-                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                <span className="font-semibold text-2xl">
                   {page?.pageTitle}
                 </span>
               </div>
@@ -182,7 +182,7 @@ export const Header = memo(function HeaderInner() {
         </div>
       </div>
       <div className="border-b hidden lg:block">
-        <div className="max-w-screen-2xl mx-auto 2xl:border-x">
+        <div className="max-w-screen-2xl mx-auto border-transparent">
           <Slotlet name="top-navigation-before" />
           <TopNavigation />
           <Slotlet name="top-navigation-after" />

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,7 +38,7 @@ const getComponent = (level: number) => {
   }
 };
 
-export type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> &
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
   VariantProps<typeof heading> & {
     children: ReactNode;
     className?: string;
@@ -66,7 +66,7 @@ export const Heading = ({
       {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="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 */}

package/src/lib/components/Layout.tsx

@@ -1,10 +1,12 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { Suspense, useEffect, type ReactNode } from "react";
 import { Outlet, useLocation } from "react-router";
+import { cn } from "../util/cn.js";
 import { joinUrl } from "../util/joinUrl.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 { Slotlet } from "./SlotletProvider.js";
@@ -30,9 +32,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
-      {import.meta.env.MODE === "standalone" && (
-        <style>{`:root { --top-nav-height: 0px; }`}</style>
-      )}
       <Helmet titleTemplate={meta?.title}>
         {options.canonicalUrlOrigin && (
           <link
@@ -53,11 +52,18 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="grid grid-cols-1 grid-rows-[min-content_1fr] lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto px-4 lg:px-8 2xl:border-x">
+      <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 />
     </>
   );
 };