create-vexcms 0.1.0-alpha.2 → 0.1.0-alpha.21

package/templates/marketing-site/src/vexcms/blocks/Header/index.tsx

@@ -2,172 +2,239 @@
 
 import type { BlockComponentProps } from "@vexcms/react"
 
-import { Menu, Settings, X } from "lucide-react"
+import {
+  buttonVariants,
+  cn,
+  Separator,
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+  useCanAccessAdminPanel,
+} from "@vexcms/react"
+import { Menu, Settings } from "lucide-react"
 import Link from "next/link"
+import { usePathname } from "next/navigation"
 import { useEffect, useState } from "react"
 
-import { useSession } from "~/auth/client"
-import { cn, buttonVariants } from "@vexcms/react"
+import type { HeaderBlock } from "~/vex.types"
+
+import { BrandMark } from "~/components/BrandMark"
+import { Container } from "~/components/Container"
+import { MediaImage } from "~/components/MediaImage"
 
 export { headerBlock } from "./config"
 
-export default function HeaderBlock({ block }: BlockComponentProps) {
-  const {
-    logoText,
-    logoHref = "/",
-    menuItems,
-    actionButtons,
-  } = block as {
-    logoText?: string
-    logoImage?: string
-    logoHref?: string
-    menuItems?: Array<{ label: string; href: string }>
-    actionButtons?: Array<{ label: string; href: string; variant?: string }>
-  }
-
-  const { data: session } = useSession()
-  const role = session?.user?.role
-  const isAdmin = role === "admin" || (Array.isArray(role) && role.includes("admin"))
-
-  const [menuState, setMenuState] = useState(false)
+/** Past this many nav items the bar would crowd at `md`, so the Sheet holds
+ *  on until `lg`. The bar never wraps to two lines and never shrinks its type. */
+const NAV_CROWD_THRESHOLD = 7
+
+/** Scroll distance at which the bar takes its background and rule. */
+const SCROLL_THRESHOLD = 8
+
+/**
+ * Site header — a rule that appears when you scroll.
+ *
+ * Transparent over the hero at rest; past 8px it takes
+ * `bg-background/70 backdrop-blur-md` and a bottom border and loses 8px of
+ * height. The scroll listener is passive and rAF-throttled, and is the only
+ * scroll listener on the page.
+ */
+export default function HeaderBlockRenderer({ block }: BlockComponentProps) {
+  const { actionButtons, logoHref, logoImage, logoText, menuItems } = block as HeaderBlock
+
+  const pathname = usePathname()
+  // Same predicate the `/admin` route runs server-side, so this link can never
+  // offer a destination that redirects to `/unauthorized`. Reading a role off
+  // the session by hand was the previous approach and never matched: roles are
+  // stored in `access.userRolesField` ("roles"), not better-auth's scalar
+  // `user.role`, so the button rendered for nobody.
+  const canAccessAdmin = useCanAccessAdminPanel()
+
   const [isScrolled, setIsScrolled] = useState(false)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
 
   useEffect(() => {
+    let frame = 0
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 50)
+      if (frame) {return}
+      frame = window.requestAnimationFrame(() => {
+        frame = 0
+        setIsScrolled(window.scrollY > SCROLL_THRESHOLD)
+      })
+    }
+    handleScroll()
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+      window.cancelAnimationFrame(frame)
     }
-    window.addEventListener("scroll", handleScroll)
-    return () => window.removeEventListener("scroll", handleScroll)
   }, [])
 
+  const items = menuItems ?? []
+  const actions = actionButtons ?? []
+  const isCrowded = items.length >= NAV_CROWD_THRESHOLD
+  // The whole bar switches at one breakpoint: `md` normally, `lg` when the nav
+  // is crowded. Tailwind needs both class sets written out literally.
+  const navClass = isCrowded ? "hidden lg:flex" : "hidden md:flex"
+  const triggerClass = isCrowded ? "lg:hidden" : "md:hidden"
+
   return (
-    <header>
-      <nav
-        className="fixed z-20 w-full px-2"
-        data-state={menuState ? "active" : undefined}
-      >
-        <div
-          className={cn(
-            "mx-auto mt-2 max-w-6xl px-6 transition-all duration-300 lg:px-12",
-            isScrolled &&
-              "bg-background/50 max-w-4xl rounded-2xl border backdrop-blur-lg lg:px-5"
-          )}
-        >
-          <div className="relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
-            <div className="flex w-full justify-between lg:w-auto">
-              <Link
-                aria-label="home"
-                className="flex items-center gap-2 text-lg font-semibold"
-                href={logoHref}
-              >
-                {logoText ?? "Vex CMS"}
-              </Link>
+    <header
+      className={cn(
+        "sticky top-0 z-50 transition-[background-color,border-color,height] duration-[180ms] ease-[var(--ease-emphasized)]",
+        isScrolled
+          ? "h-14 border-b border-border bg-background/70 backdrop-blur-md"
+          : "h-14 border-b border-transparent md:h-16"
+      )}
+    >
+      <Container className="flex h-full items-center justify-between gap-6">
+        <div className="flex items-center gap-10">
+          <Link
+            aria-label={logoText ?? "Home"}
+            className="flex shrink-0 items-center gap-2 text-foreground"
+            href={logoHref ?? "/"}
+          >
+            {logoImage?.length ? (
+              <MediaImage
+                alt={logoText ?? ""}
+                className="h-5 w-auto"
+                height={20}
+                value={logoImage}
+                width={96}
+              />
+            ) : (
+              <>
+                <BrandMark className="size-4 text-primary" />
+                {logoText ? (
+                  <span className="text-[15px] font-extrabold tracking-[-0.03em]">{logoText}</span>
+                ) : null}
+              </>
+            )}
+          </Link>
 
-              <button
-                aria-label={menuState ? "Close Menu" : "Open Menu"}
-                className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
-                onClick={() => setMenuState(!menuState)}
-              >
-                <Menu className="m-auto size-6 duration-200 in-data-[state=active]:scale-0 in-data-[state=active]:rotate-180 in-data-[state=active]:opacity-0" />
-                <X className="absolute inset-0 m-auto size-6 scale-0 -rotate-180 opacity-0 duration-200 in-data-[state=active]:scale-100 in-data-[state=active]:rotate-0 in-data-[state=active]:opacity-100" />
-              </button>
-
-              <div className="absolute inset-0 m-auto hidden size-fit lg:block">
-                <ul className="flex gap-8 text-sm">
-                  {(menuItems ?? []).map((item, index) => (
-                    <li key={index}>
-                      <Link
-                        className="text-muted-foreground hover:text-accent-foreground block duration-150"
-                        href={item.href}
-                      >
-                        <span>{item.label}</span>
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
+          {items.length > 0 ? (
+            <nav className={cn("items-center gap-1", navClass)}>
+              {items.map((item) => {
+                const isCurrent = pathname === item.href
+                return (
+                  <Link
+                    aria-current={isCurrent ? "page" : undefined}
+                    className={cn(
+                      "rounded-sm px-2.5 py-1.5 text-sm transition-colors duration-[180ms] ease-[var(--ease-emphasized)] active:translate-y-px",
+                      isCurrent
+                        ? "bg-accent text-foreground"
+                        : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                    )}
+                    href={item.href}
+                    key={`${item.label}-${item.href}`}
+                  >
+                    {item.label}
+                  </Link>
+                )
+              })}
+            </nav>
+          ) : null}
+        </div>
 
-            <div className="hidden lg:flex lg:gap-3">
-              {(actionButtons ?? []).map((button, index) => (
+        <div className="flex items-center gap-2">
+          {actions.length > 0 ? (
+            <div className={cn("items-center gap-2", navClass)}>
+              {actions.map((action) => (
                 <Link
-                  key={index}
-                  href={button.href}
                   className={cn(
                     buttonVariants({
                       size: "sm",
-                      variant: (button.variant as "default" | "outline" | "ghost") ?? "default",
-                    })
+                      variant:
+                        (action.variant?.[0]) ??
+                        "default",
+                    }),
+                    "active:translate-y-px"
                   )}
+                  href={action.href}
+                  key={`${action.label}-${action.href}`}
                 >
-                  <span>{button.label}</span>
+                  {action.label}
                 </Link>
               ))}
-              {isAdmin && (
-                <Link
-                  href="/admin"
-                  className={cn(
-                    buttonVariants({ size: "sm", variant: "outline" }),
-                    "gap-1.5"
-                  )}
-                >
-                  <Settings className="size-3.5" />
-                  <span>Admin</span>
-                </Link>
-              )}
             </div>
+          ) : null}
 
-            {/* Mobile menu */}
-            <div className="bg-background absolute top-[125%] z-10 mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 in-data-[state=active]:block md:flex-nowrap lg:m-0 lg:w-fit lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
-              <div className="lg:hidden">
-                <ul className="space-y-6 text-base">
-                  {(menuItems ?? []).map((item, index) => (
-                    <li key={index}>
-                      <Link
-                        className="text-muted-foreground hover:text-accent-foreground block duration-150"
-                        href={item.href}
-                      >
-                        <span>{item.label}</span>
-                      </Link>
-                    </li>
+          {/* Template affordance, not part of the marketing design: a signed-in
+              admin gets a direct route to the panel even when the seeded nav
+              does not list one. */}
+          {canAccessAdmin ? (
+            <Link
+              className={cn(
+                buttonVariants({ size: "sm", variant: "outline" }),
+                navClass,
+                "gap-1.5 active:translate-y-px"
+              )}
+              href="/admin"
+            >
+              <Settings className="size-3.5" />
+              Admin
+            </Link>
+          ) : null}
+
+          {items.length > 0 || actions.length > 0 ? (
+            <Sheet onOpenChange={setIsMenuOpen} open={isMenuOpen}>
+              <SheetTrigger
+                aria-label="Open menu"
+                className={cn(buttonVariants({ size: "icon-sm", variant: "ghost" }), triggerClass)}
+              >
+                <Menu className="size-5" />
+              </SheetTrigger>
+              <SheetContent className="rounded-lg border-border bg-background" side="top">
+                <SheetTitle className="sr-only">Menu</SheetTitle>
+                <nav className="flex flex-col px-2 pt-2">
+                  {items.map((item) => (
+                    <Link
+                      aria-current={pathname === item.href ? "page" : undefined}
+                      className={cn(
+                        "flex min-h-11 items-center rounded-sm px-3 text-[15px] transition-colors duration-[180ms] active:translate-y-px",
+                        pathname === item.href
+                          ? "bg-accent text-foreground"
+                          : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                      )}
+                      href={item.href}
+                      key={`sheet-${item.label}-${item.href}`}
+                      onClick={() => setIsMenuOpen(false)}
+                    >
+                      {item.label}
+                    </Link>
                   ))}
-                </ul>
-
-                {(actionButtons && actionButtons.length > 0 || isAdmin) && (
-                  <div className="mt-6 flex flex-col space-y-3">
-                    {(actionButtons ?? []).map((button, index) => (
-                      <Link
-                        key={index}
-                        href={button.href}
-                        className={cn(
-                          buttonVariants({
-                            size: "sm",
-                            variant: (button.variant as "default" | "outline" | "ghost") ?? "default",
-                          })
-                        )}
-                      >
-                        <span>{button.label}</span>
-                      </Link>
-                    ))}
-                    {isAdmin && (
-                      <Link
-                        href="/admin"
-                        className={cn(
-                          buttonVariants({ size: "sm", variant: "outline" }),
-                          "gap-1.5"
-                        )}
-                      >
-                        <Settings className="size-3.5" />
-                        <span>Admin</span>
-                      </Link>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
+                </nav>
+
+                {actions.length > 0 ? (
+                  <>
+                    <Separator className="my-4" />
+                    <div className="flex flex-col gap-2 px-2 pb-2">
+                      {actions.map((action) => (
+                        <Link
+                          className={cn(
+                            buttonVariants({
+                              size: "default",
+                              variant:
+                                (action.variant?.[0]) ?? "default",
+                            }),
+                            "w-full"
+                          )}
+                          href={action.href}
+                          key={`sheet-${action.label}-${action.href}`}
+                          onClick={() => setIsMenuOpen(false)}
+                        >
+                          {action.label}
+                        </Link>
+                      ))}
+                    </div>
+                  </>
+                ) : null}
+              </SheetContent>
+            </Sheet>
+          ) : null}
         </div>
-      </nav>
+      </Container>
     </header>
   )
 }

package/templates/marketing-site/src/vexcms/blocks/Hero/config.ts

@@ -1,4 +1,4 @@
-import { defineBlock, text } from "@vexcms/core"
+import { defineBlock, select, text } from "@vexcms/core"
 
 import { BLOCK_SLUG_HERO } from "../constants"
 
@@ -6,35 +6,50 @@ export const heroBlock = defineBlock({
   slug: BLOCK_SLUG_HERO,
   label: "Hero Section",
   fields: {
+    variant: select({
+      label: "Variant",
+      description:
+        "Full is the landing hero — 90vh, centred, decorative background. Compact is an interior page-header band.",
+      options: [
+        { label: "Full", value: "full" },
+        { label: "Compact", value: "compact" },
+      ],
+      defaultValue: ["full"],
+    }),
     badgeText: text({
       label: "Badge Text",
-      defaultValue: "Now in public beta",
-      description: "Small text shown in the announcement badge",
+      defaultValue: "v0.1.0-alpha — now on npm",
+      description:
+        "Announcement pill on the full variant; the uppercase eyebrow on the compact one.",
     }),
     badgeLink: text({
       label: "Badge Link",
-      defaultValue: "/docs",
-      description: "URL the badge links to",
+      defaultValue: "https://www.npmjs.com/package/@vexcms/core",
+      description: "Optional. Without it the badge renders as plain text, not a link.",
     }),
     heading: text({
       label: "Heading",
       required: true,
-      defaultValue: "The CMS built for Convex",
+      defaultValue: "The CMS that thinks in types.",
     }),
     subheading: text({
       label: "Subheading",
       defaultValue:
-        "Vex CMS gives you a full-featured content management system powered by Convex — real-time data, type-safe schemas, and a beautiful admin panel out of the box.",
+        "A headless CMS built natively on Convex. Declare your collections in TypeScript and Vex generates the Convex schema, the types, and the queries — no translation layer. Every edit reaches every subscriber in milliseconds.",
+    }),
+    installCommand: text({
+      label: "Install Command",
+      defaultValue: "pnpm create vexcms@alpha",
+      description:
+        "Optional. Renders a copy-to-clipboard command row under the CTAs. Full variant only.",
     }),
     primaryCtaLabel: text({
       label: "Primary CTA Label",
-      required: true,
-      defaultValue: "Get Started",
+      defaultValue: "Read the docs",
     }),
     primaryCtaHref: text({
       label: "Primary CTA Link",
-      required: true,
-      defaultValue: "/docs",
+      defaultValue: "https://docs.vexcms.dev/guides/quickstart/",
     }),
     secondaryCtaLabel: text({
       label: "Secondary CTA Label",
@@ -42,7 +57,7 @@ export const heroBlock = defineBlock({
     }),
     secondaryCtaHref: text({
       label: "Secondary CTA Link",
-      defaultValue: "https://github.com/vexcms/vex",
+      defaultValue: "https://github.com/ianyimi/vex",
     }),
   },
   admin: {