create-vexcms 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vexcms",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "bin": {
     "create-vexcms": "./dist/index.js"

package/templates/base-nextjs/convex/tsconfig.json

@@ -7,7 +7,7 @@
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "target": "ESNext",
-    "lib": ["ES2023", "dom"],
+    "lib": ["ES2023", "dom", "dom.iterable"],
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
     "isolatedModules": true,

package/templates/base-nextjs/package.json

@@ -22,12 +22,12 @@
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-form": "^1.27.7",
     "@tanstack/react-query": "^5.90.17",
-    "@vexcms/admin-next": "~0.0.12",
-    "@vexcms/better-auth": "~0.0.12",
-    "@vexcms/core": "~0.0.12",
-    "@vexcms/richtext": "~0.0.12",
-    "@vexcms/ui": "~0.0.12",
-    "@vexcms/file-storage-convex": "~0.0.12",
+    "@vexcms/admin-next": "~0.0.14",
+    "@vexcms/better-auth": "~0.0.14",
+    "@vexcms/core": "~0.0.14",
+    "@vexcms/richtext": "~0.0.14",
+    "@vexcms/ui": "~0.0.14",
+    "@vexcms/file-storage-convex": "~0.0.14",
     "better-auth": ">=1.4.9 <1.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -54,7 +54,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vexcms/cli": "~0.0.12",
+    "@vexcms/cli": "~0.0.14",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9",
     "eslint-config-next": "15.5.9",

package/templates/base-nextjs/src/lib/utils.ts

@@ -4,3 +4,15 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/**
+ * Normalize a page slug for consistent lookup.
+ * - Strips leading/trailing slashes
+ * - Treats "/" and "/home" and "home" all as "home"
+ * - "/features" becomes "features"
+ */
+export function normalizeSlug(slug?: string): string {
+  if (!slug) return "home"
+  const cleaned = slug.replace(/^\/+|\/+$/g, "")
+  return cleaned === "" ? "home" : cleaned
+}

package/templates/marketing-site/src/app/(frontend)/PageContent.tsx

@@ -3,15 +3,24 @@
 import { RenderBlocks } from "@vexcms/ui"
 import { convexQuery } from "@convex-dev/react-query"
 import { useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery as useConvexQuery } from "convex/react"
 import Link from "next/link"
+import { usePathname, useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
 import { anyApi } from "convex/server"
 
+import { api } from "@convex/_generated/api"
+import { useSession } from "~/auth/client"
+import { normalizeSlug } from "~/lib/utils"
 import { blockComponents } from "~/vexcms/blocks"
 
 /**
  * Client component that renders a page using TanStack Query + convexQuery.
  * When initialData is provided (from server fetchQuery), renders immediately.
  * The reactive subscription keeps data up-to-date after hydration.
+ *
+ * On a fresh project with no "home" page, shows the bootstrap/auth flow
+ * so the first user can sign up and become admin.
  */
 export function PageContent({
   slug,
@@ -20,9 +29,11 @@ export function PageContent({
   slug?: string
   initialData?: Record<string, unknown> | null
 }) {
+  const normalizedSlug = normalizeSlug(slug)
+
   const { data: page, isPending } = useQuery({
     ...convexQuery(anyApi.pages.getBySlug, {
-      slug: slug ?? "home",
+      slug: normalizedSlug,
       _vexDrafts: false,
     }),
     initialData: initialData ?? undefined,
@@ -37,15 +48,8 @@ export function PageContent({
   }
 
   if (!page) {
-    if (!slug || slug === "home") {
-      return (
-        <div className="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
-          <h1 className="text-4xl font-bold tracking-tight">Vex CMS</h1>
-          <p className="text-lg text-muted-foreground">
-            Create a page with slug &ldquo;home&rdquo; to get started.
-          </p>
-        </div>
-      )
+    if (normalizedSlug === "home") {
+      return <WelcomePage />
     }
 
     return (
@@ -72,3 +76,111 @@ export function PageContent({
     />
   )
 }
+
+function LoadingSpinner() {
+  return (
+    <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+    </svg>
+  )
+}
+
+/**
+ * Welcome page shown on fresh projects with no "home" page.
+ * Handles the first-user bootstrap flow: sign up → promote to admin → redirect to admin panel.
+ */
+function WelcomePage() {
+  const isBootstrapped = useConvexQuery(api.vex.firstUser.isBootstrapped)
+  const promoteFirstAdmin = useMutation(api.vex.firstUser.promoteFirstAdmin)
+  const { data: session } = useSession()
+  const router = useRouter()
+  const pathname = usePathname()
+  const [promoting, setPromoting] = useState(false)
+  const [navigating, setNavigating] = useState(false)
+
+  useEffect(() => {
+    if (pathname === "/") {
+      setNavigating(false)
+    }
+  }, [pathname])
+
+  useEffect(() => {
+    if (session?.user && isBootstrapped === false && !promoting) {
+      setPromoting(true)
+      setNavigating(true)
+      promoteFirstAdmin()
+        .then((result) => {
+          if (result.promoted) {
+            router.push("/admin")
+          } else {
+            setNavigating(false)
+          }
+        })
+        .catch(() => {
+          setPromoting(false)
+          setNavigating(false)
+        })
+    }
+  }, [session, isBootstrapped, promoting, promoteFirstAdmin, router])
+
+  const bootstrapped = isBootstrapped === true
+
+  const buttonClass =
+    "inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+
+  const handleNavigate = (path: string) => {
+    setNavigating(true)
+    router.push(path)
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold tracking-tight">VEX CMS</h1>
+        <p className="mt-3 text-lg text-muted-foreground">
+          {bootstrapped
+            ? "Your content management system is ready."
+            : "Welcome! Create your admin account to get started."}
+        </p>
+      </div>
+
+      <div className="flex gap-4">
+        {session?.user ? (
+          <button
+            onClick={() => handleNavigate("/admin")}
+            disabled={navigating}
+            className={buttonClass}
+          >
+            {navigating && <LoadingSpinner />}
+            {navigating ? "Loading..." : "Go to Admin Panel"}
+          </button>
+        ) : bootstrapped ? (
+          <button
+            onClick={() => handleNavigate("/auth/sign-in")}
+            disabled={navigating}
+            className={buttonClass}
+          >
+            {navigating && <LoadingSpinner />}
+            {navigating ? "Loading..." : "Sign In"}
+          </button>
+        ) : (
+          <button
+            onClick={() => handleNavigate("/auth/sign-up")}
+            disabled={navigating}
+            className={buttonClass}
+          >
+            {navigating && <LoadingSpinner />}
+            {navigating ? "Loading..." : "Create Admin Account"}
+          </button>
+        )}
+      </div>
+
+      {promoting && (
+        <p className="text-sm text-muted-foreground animate-pulse">
+          Setting up your admin account...
+        </p>
+      )}
+    </div>
+  )
+}

package/templates/marketing-site/src/app/(frontend)/[slug]/page.tsx

@@ -2,25 +2,27 @@ import { api } from "@convex/_generated/api"
 import { fetchQuery } from "convex/nextjs"
 
 import { generatePageMetadata } from "~/lib/metadata"
+import { normalizeSlug } from "~/lib/utils"
 import { PageContent } from "../PageContent"
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
-  return generatePageMetadata({ slug })
+  return generatePageMetadata({ slug: normalizeSlug(slug) })
 }
 
 export default async function PublicPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params
+  const normalized = normalizeSlug(slug)
 
   let initialData: null | Record<string, unknown> = null
   try {
     initialData = await fetchQuery(api.pages.getBySlug, {
-      slug,
+      slug: normalized,
       _vexDrafts: false,
     })
   } catch {
     // Fall back to client-only fetch
   }
 
-  return <PageContent initialData={initialData} slug={slug} />
+  return <PageContent initialData={initialData} slug={normalized} />
 }

package/templates/marketing-site/src/app/(frontend)/preview/[slug]/page.tsx

@@ -2,6 +2,7 @@ import { fetchQuery } from "convex/nextjs"
 
 import { api } from "@convex/_generated/api"
 
+import { normalizeSlug } from "~/lib/utils"
 import { PreviewPageContent } from "./PreviewPageContent"
 
 export default async function PreviewPage({
@@ -10,16 +11,17 @@ export default async function PreviewPage({
   params: Promise<{ slug: string }>
 }) {
   const { slug } = await params
+  const normalized = normalizeSlug(slug)
 
   let initialData: Record<string, unknown> | null = null
   try {
     initialData = await fetchQuery(api.pages.getBySlug, {
-      slug,
+      slug: normalized,
       _vexDrafts: "snapshot" as any,
     })
   } catch {
     // Fall back to client-only fetch
   }
 
-  return <PreviewPageContent slug={slug} initialData={initialData} />
+  return <PreviewPageContent slug={normalized} initialData={initialData} />
 }