@lukoweb/apitogo 0.1.54 → 0.1.55

package/src/lib/components/HeaderNavigation.tsx

@@ -6,6 +6,7 @@ import {
   type HeaderNavItem,
   type HeaderNavLinkItem,
 } from "../../config/validators/HeaderNavigationSchema.js";
+import { withoutMarketingCtaHeaderNavigation } from "../authentication/header-nav-filter.js";
 import { useAuth } from "../authentication/hook.js";
 import type { ZudokuContext } from "../core/ZudokuContext.js";
 import {
@@ -15,12 +16,14 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
 } from "../ui/NavigationMenu.js";
 import { cn } from "../util/cn.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { shouldShowItem } from "./navigation/utils.js";
 
+const marketingNavLinkClassName =
+  "inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+
 const NavLinkItem = ({ item }: { item: HeaderNavLinkItem }) => {
   const Icon = item.icon as LucideIcon | undefined;
   return (
@@ -118,10 +121,7 @@ const HeaderNavItemComponent = ({
             to={item.to}
             target={item.target}
             rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
-            className={cn(
-              navigationMenuTriggerStyle(),
-              "flex items-center gap-2",
-            )}
+            className={marketingNavLinkClassName}
           >
             {Icon && <Icon size={16} />}
             {item.label}
@@ -146,8 +146,10 @@ const HeaderNavItemComponent = ({
 export const HeaderNavigation = () => {
   const context = useZudoku();
   const auth = useAuth();
-  const items = context.options.header?.navigation;
-  const navPosition = context.options.header?.placements?.navigation ?? "end";
+  const items = withoutMarketingCtaHeaderNavigation(
+    context.options.header?.navigation ?? [],
+  );
+  const navPosition = context.options.header?.placements?.navigation ?? "start";
   if (!items || items.length === 0) return null;
 
   const viewportAlign =
@@ -158,8 +160,8 @@ export const HeaderNavigation = () => {
         : undefined;
 
   return (
-    <NavigationMenu className={viewportAlign}>
-      <NavigationMenuList>
+    <NavigationMenu className={cn("max-w-none", viewportAlign)}>
+      <NavigationMenuList className="gap-1">
         {items.map((item) => (
           <HeaderNavItemComponent
             key={"to" in item ? item.to : item.label}

package/src/lib/components/MobileTopNavigation.tsx

@@ -3,6 +3,7 @@ import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { deepEqual } from "fast-equals";
 import {
+  ArrowRightIcon,
   ChevronDownIcon,
   LogOutIcon,
   MenuIcon,
@@ -15,6 +16,7 @@ import {
   type HeaderNavItem,
   type HeaderNavLinkItem,
 } from "../../config/validators/HeaderNavigationSchema.js";
+import { withoutMarketingCtaHeaderNavigation } from "../authentication/header-nav-filter.js";
 import { useAuth } from "../authentication/hook.js";
 import {
   Collapsible,
@@ -127,8 +129,10 @@ export const MobileTopNavigation = () => {
     options: { header, navigation = [], site },
     getProfileMenuItems,
   } = context;
-  const headerNavigation = header?.navigation ?? [];
-  const { isAuthenticated, profile, isAuthEnabled } = authState;
+  const headerNavigation = withoutMarketingCtaHeaderNavigation(
+    header?.navigation ?? [],
+  );
+  const { isAuthenticated, profile, isAuthEnabled, login, signup } = authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const accountItems = getProfileMenuItems();
@@ -158,18 +162,6 @@ export const MobileTopNavigation = () => {
               <DrawerTitle>Navigation</DrawerTitle>
             </VisuallyHidden>
             <ul className="flex flex-col gap-1 px-4">
-              {headerNavigation.map((item) => (
-                <MobileHeaderNavItem
-                  key={item.label}
-                  item={item}
-                  onNavigate={() => setDrawerOpen(false)}
-                />
-              ))}
-              {headerNavigation.length > 0 && <Separator className="my-2" />}
-              <li className="empty:hidden">
-                <Slot.Target name="top-navigation-side" />
-              </li>
-
               {filteredItems.map((item) => {
                 if (item.type === "separator") {
                   return <Separator className="my-2" key={item.label} />;
@@ -192,6 +184,19 @@ export const MobileTopNavigation = () => {
                   </li>
                 );
               })}
+              {filteredItems.length > 0 && headerNavigation.length > 0 && (
+                <Separator className="my-2" />
+              )}
+              <li className="empty:hidden">
+                <Slot.Target name="top-navigation-side" />
+              </li>
+              {headerNavigation.map((item) => (
+                <MobileHeaderNavItem
+                  key={item.label}
+                  item={item}
+                  onNavigate={() => setDrawerOpen(false)}
+                />
+              ))}
               {isAuthEnabled && isAuthenticated && (
                 <>
                   <Separator className="my-2" />
@@ -227,7 +232,7 @@ export const MobileTopNavigation = () => {
             </ul>
           </div>
           <div className="border-t shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-4 pt-3 flex flex-col gap-2">
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between gap-2">
               {isAuthEnabled &&
                 (isAuthenticated ? (
                   <Button asChild variant="outline">
@@ -241,20 +246,34 @@ export const MobileTopNavigation = () => {
                         strokeWidth={1}
                         absoluteStrokeWidth
                       />
-                      Logout
+                      Log out
                     </Link>
                   </Button>
                 ) : (
-                  <Button asChild variant="outline">
-                    <Link
-                      to={`/signin?redirect=${encodeURIComponent(location.pathname)}`}
-                      onClick={() => setDrawerOpen(false)}
+                  <div className="flex flex-1 items-center gap-2">
+                    <Button
+                      variant="ghost"
+                      className="font-semibold"
+                      onClick={() => {
+                        setDrawerOpen(false);
+                        void login({ redirectTo: location.pathname });
+                      }}
                     >
-                      Login
-                    </Link>
-                  </Button>
+                      Sign in
+                    </Button>
+                    <Button
+                      className="gap-1.5"
+                      onClick={() => {
+                        setDrawerOpen(false);
+                        void signup({ redirectTo: location.pathname });
+                      }}
+                    >
+                      Start free
+                      <ArrowRightIcon size={15} strokeWidth={2} />
+                    </Button>
+                  </div>
                 ))}
-              <ThemeSwitch />
+              <ThemeSwitch variant="compact" />
             </div>
             {site?.showPoweredBy !== false && (
               <PoweredByZudoku className="grow-0 justify-center gap-1" />

package/src/lib/components/SiteTitle.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../util/cn.js";
+
+type SiteTitleProps = {
+  title: string;
+  className?: string;
+};
+
+export const SiteTitle = ({ title, className }: SiteTitleProps) => {
+  return (
+    <div
+      className={cn(
+        "shrink-0 font-bold text-[19px] tracking-[-0.02em] text-foreground",
+        className,
+      )}
+      style={{ fontFamily: '"Space Grotesk", var(--font-sans, sans-serif)' }}
+    >
+      {title}
+    </div>
+  );
+};

package/src/lib/components/ThemeSwitch.tsx

@@ -4,17 +4,51 @@ import { focusRing } from "../ui/util.js";
 import { cn } from "../util/cn.js";
 import { useIsClient } from "./ClientOnly.js";
 
-export const ThemeSwitch = () => {
+export const ThemeSwitch = ({
+  variant = "default",
+}: {
+  variant?: "default" | "compact";
+}) => {
   const { resolvedTheme, setTheme } = useTheme();
   const isClient = useIsClient();
 
   const theme = isClient ? resolvedTheme : undefined;
 
+  const handleThemeToggle = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+
+  if (variant === "compact") {
+    return (
+      <button
+        type="button"
+        className={cn(
+          "grid size-[38px] place-items-center rounded-[9px] border border-border text-muted-foreground transition-colors hover:border-border hover:text-foreground",
+          focusRing,
+        )}
+        onClick={handleThemeToggle}
+        aria-label={
+          !isClient
+            ? "Toggle theme"
+            : theme === "dark"
+              ? "Switch to light mode"
+              : "Switch to dark mode"
+        }
+      >
+        {!isClient || theme === "dark" ? (
+          <SunIcon size={17} strokeWidth={1.8} />
+        ) : (
+          <MoonIcon size={17} strokeWidth={1.8} />
+        )}
+      </button>
+    );
+  }
+
   return (
     <button
       type="button"
       className={cn("flex rounded-full border p-0.5 gap-0.5 group", focusRing)}
-      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      onClick={handleThemeToggle}
       aria-label={
         !isClient
           ? "Toggle theme"

package/src/lib/components/TopNavigation.tsx

@@ -7,8 +7,6 @@ import type { NavigationItem } from "../../config/validators/NavigationSchema.js
 import { useAuth } from "../authentication/hook.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
-import { Slot } from "./Slot.js";
-
 export const TopNavigation = () => {
   const context = useZudoku();
   const {
@@ -18,30 +16,26 @@ export const TopNavigation = () => {
   const filteredItems = navigation.filter(shouldShowItem({ auth, context }));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
-    return <style>{`:root { --top-nav-height: 0px; }`}</style>;
+    return null;
   }
 
   return (
     <Suspense>
-      <div className="items-center justify-between px-8 h-(--top-nav-height) hidden lg:flex text-sm relative">
-        <nav className="text-sm">
-          <ul className="flex flex-row items-center gap-8">
-            {filteredItems.map((item) =>
-              item.type === "separator" ? (
-                <li key={item.label} className="-mx-4 h-7">
-                  <Separator orientation="vertical" />
-                </li>
-              ) : item.type !== "section" && item.type !== "filter" ? (
-                <li key={item.label + item.type}>
-                  <TopNavItem {...item} />
-                </li>
-              ) : null,
-            )}
-          </ul>
-        </nav>
-        <Slot.Target name="top-navigation-side" />
-      </div>
-      {/* <PageProgress /> */}
+      <nav className="min-w-0 text-sm">
+        <ul className="flex flex-row items-center gap-1">
+          {filteredItems.map((item) =>
+            item.type === "separator" ? (
+              <li key={item.label} className="mx-1 h-5">
+                <Separator orientation="vertical" />
+              </li>
+            ) : item.type !== "section" && item.type !== "filter" ? (
+              <li key={item.label + item.type}>
+                <TopNavItem {...item} />
+              </li>
+            ) : null,
+          )}
+        </ul>
+      </nav>
     </Suspense>
   );
 };
@@ -60,18 +54,11 @@ export const TopNavLink = ({
       className={({ isActive: isActiveNavLink, isPending }) => {
         const isActiveReal = isActiveNavLink || isActive;
         return cx(
-          "flex items-center gap-2 lg:py-3.5 font-medium -mb-px transition duration-150 delay-75 relative",
+          "inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
           isActiveReal || isPending
-            ? [
-                "text-foreground",
-                // underline with view transition animation
-                "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0",
-                "after:h-0.5 after:bg-primary",
-                isActiveReal &&
-                  "after:[view-transition-name:top-nav-underline]",
-                isPending && "after:bg-primary/25",
-              ]
-            : "text-foreground/75 hover:text-foreground",
+            ? "bg-muted text-foreground"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          isPending && "opacity-75",
         );
       }}
       {...props}

package/src/lib/core/ZudokuContext.ts

@@ -71,6 +71,7 @@ type Site = Partial<{
   dir?: "ltr" | "rtl";
   showPoweredBy?: boolean;
   title?: string;
+  showTitleInHeader?: boolean;
   logo?: {
     src: {
       light: string;

package/src/vite/config.ts

@@ -21,6 +21,11 @@ import { ensurePagefindDevStub } from "./pagefind-dev-stub.js";
 import vitePlugin from "./plugin.js";
 import { getZuploSystemConfigurations } from "./zuplo.js";
 
+const browserConfigLoaderPath = path.join(
+  getZudokuRootDir(),
+  "src/config/apitogo-config-loader.browser.ts",
+);
+
 /** Resolved absolute public directory (Vite default: `<root>/public`). */
 const resolveMergedPublicDir = (
   rootDir: string,
@@ -114,6 +119,22 @@ export async function getViteConfig(
         "@mdx-js/react": import.meta.resolve("@mdx-js/react"),
       },
     },
+    environments: {
+      client: {
+        resolve: {
+          alias: {
+            [path.join(
+              getZudokuRootDir(),
+              "src/config/apitogo-config-loader.node.ts",
+            )]: browserConfigLoaderPath,
+            [path.join(
+              getZudokuRootDir(),
+              "src/config/apitogo-config-loader.node.js",
+            )]: browserConfigLoaderPath,
+          },
+        },
+      },
+    },
     define: {
       "process.env.ZUDOKU_VERSION": JSON.stringify(packageJson.version),
       "process.env.IS_ZUPLO": ZuploEnv.isZuplo,

package/src/vite/plugin-auth.ts

@@ -16,7 +16,10 @@ const viteAuthPlugin = (): Plugin => {
       if (id === resolvedVirtualModuleId) {
         const config = getCurrentConfig();
 
-        if (!config.authentication || config.__meta.mode === "standalone") {
+        if (
+          !config.authentication?.type ||
+          config.__meta.mode === "standalone"
+        ) {
           return `export const configuredAuthProvider = undefined;`;
         }
         // TODO: Validate that the authConfig.type is a valid authentication provider

package/src/vite/plugin-config.ts

@@ -1,18 +1,50 @@
+import path from "node:path";
 import { normalizePath, type Plugin, type ResolvedConfig } from "vite";
+import { getZudokuRootDir } from "../cli/common/package-json.js";
 import { getCurrentConfig, loadZudokuConfig } from "../config/loader.js";
+import type { ConfigWithMeta } from "../config/loader.js";
 
 const virtualModuleId = "virtual:zudoku-config";
 const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+const browserConfigLoaderPath = path.join(
+  getZudokuRootDir(),
+  "src/config/apitogo-config-loader.browser.ts",
+);
+
+function serializeClientConfig(config: ConfigWithMeta): string {
+  const {
+    plugins: _plugins,
+    __meta: _meta,
+    __resolvedModules,
+    ...rest
+  } = config;
+
+  return JSON.stringify({ ...rest, __resolvedModules }, (_key, value) =>
+    typeof value === "function" ? undefined : value,
+  );
+}
 
 const viteConfigPlugin = (): Plugin => {
   let viteConfig: ResolvedConfig;
 
   return {
     name: "zudoku-config-plugin",
-    resolveId(id) {
-      if (id !== virtualModuleId) return;
+    resolveId(source, _importer, options) {
+      if (source === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+
+      if (!source.includes("apitogo-config-loader.node")) {
+        return;
+      }
+
+      const isServerEnvironment =
+        options?.ssr === true ||
+        this.environment?.config?.consumer === "server";
 
-      return resolvedVirtualModuleId;
+      if (!isServerEnvironment) {
+        return browserConfigLoaderPath;
+      }
     },
     configResolved(resolvedConfig) {
       viteConfig = resolvedConfig;
@@ -43,8 +75,11 @@ const viteConfigPlugin = (): Plugin => {
 import rawConfig from "${normalizePath(configPath)}";
 import { runPluginTransformConfig } from "@lukoweb/apitogo/plugins";
 
+const embeddedConfig = ${serializeClientConfig(loadedConfig)};
+
 const config = await runPluginTransformConfig({
-  ...rawConfig,
+  ...embeddedConfig,
+  plugins: rawConfig?.plugins ?? embeddedConfig.plugins ?? [],
   __meta: ${JSON.stringify(clientMeta)},
 });
 export default config;