create-vexcms 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/index.js

@@ -2068,6 +2068,10 @@ function stripOrgFromDbConstants(filePath, content) {
 }
 
 // src/installers/base.ts
+var MARKETING_DEPENDENCIES = {
+  /** Render-time syntax highlighting for the CodeShowcase and Split blocks. */
+  shiki: "^4.4.3"
+};
 var VexFrameworkInstaller = class {
   /**
    * Binds this installer to the destination directory and package name used
@@ -2106,6 +2110,34 @@ var VexFrameworkInstaller = class {
     }
     await overlayTemplate({ overlayDir, targetDir: this.targetPath });
   }
+  /**
+   * Apply the parts of the marketing overlay that copying files cannot express.
+   *
+   * `overlayTemplate` only adds and overwrites — it has no way to remove a
+   * base file, and it does not touch `package.json`. Two things therefore
+   * have to happen here:
+   *
+   * 1. **Delete base's `(frontend)/page.tsx`.** It and the overlay's
+   *    `(frontend)/(site)/page.tsx` both resolve to `/`. Next picks base's,
+   *    so the marketing home page is unreachable and every scaffold shows the
+   *    bare bootstrap `WelcomePage` instead of the seeded site. The `(site)`
+   *    route group owns `/` in a marketing scaffold.
+   * 2. **Add `shiki`.** The CodeShowcase and Split blocks highlight at render
+   *    time in a server component. It is a marketing-only dependency, so it
+   *    is added here rather than carried in base's `package.json` where a
+   *    `--bare` scaffold would install it for nothing.
+   */
+  async finalizeMarketingOverlay() {
+    const homeRoute = path2.join(this.targetPath, "src/app/(frontend)/page.tsx");
+    await fs5.remove(homeRoute);
+    const pkgPath = path2.join(this.targetPath, "package.json");
+    const pkg = await fs5.readJson(pkgPath);
+    pkg.dependencies = { ...pkg.dependencies, shiki: MARKETING_DEPENDENCIES.shiki };
+    pkg.dependencies = Object.fromEntries(
+      Object.entries(pkg.dependencies).sort(([a], [b]) => a.localeCompare(b))
+    );
+    await fs5.writeJson(pkgPath, pkg, { spaces: 2 });
+  }
   /**
    * Update the package.json name field, the vex:update script (to match the
    * detected package manager), and README.md's `{{PROJECT_NAME}}` heading.
@@ -2398,6 +2430,7 @@ var VexFrameworkInstaller = class {
       const overlaySpinner = ora("Applying marketing site template...").start();
       try {
         await this.applyTemplateOverlay("marketing-site");
+        await this.finalizeMarketingOverlay();
         overlaySpinner.succeed("Marketing site template applied");
       } catch (error) {
         overlaySpinner.fail("Failed to apply template overlay");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vexcms",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.7",
   "description": "Scaffold a new VexCMS project",
   "keywords": [
     "cms",

package/templates/base-nextjs/convex/auth/index.ts

@@ -3,10 +3,10 @@ import type { GenericActionCtx } from "convex/server"
 import { createBetterAuthAdapter } from "@vexcms/better-auth"
 import { betterAuth } from "better-auth"
 
-import { authOptions } from "./options"
-
 import type { DataModel } from "../_generated/dataModel"
 
+import { authOptions } from "./options"
+
 export const createAuth = (ctx: GenericActionCtx<DataModel>, { optionsOnly } = { optionsOnly: false }) => {
   return betterAuth({
     database: createBetterAuthAdapter(ctx),

package/templates/base-nextjs/convex/auth/sessions.ts

@@ -19,7 +19,7 @@ export const getSessionWithUser = query({
       .withIndex("by_token", (q) => q.eq("token", args.sessionToken))
       .first()
 
-    if (!session) return null
+    if (!session) {return null}
 
     if (session.expiresAt < Date.now()) {
       console.error("[getSessionWithUser] Session Expired")
@@ -27,10 +27,10 @@ export const getSessionWithUser = query({
     }
 
     const userId = session.userId
-    if (!userId) return null
+    if (!userId) {return null}
 
     const user = await ctx.db.get(userId as Id<typeof TABLE_SLUG_USERS>)
-    if (!user) return null
+    if (!user) {return null}
 
     return {
       session: {

package/templates/base-nextjs/convex/vex/firstUser.ts

@@ -1,10 +1,10 @@
 import { ConvexError } from "convex/values"
 
-import { mutation, query } from "../_generated/server"
-
 import { TABLE_SLUG_USERS } from "~/db/constants"
 import { USER_ROLES } from "~/db/constants/auth"
 
+import { mutation, query } from "../_generated/server"
+
 /**
  * Check whether the admin panel has been bootstrapped (at least one admin
  * exists). Used by `WelcomePage` to decide between "Sign Up" and "Sign In".

package/templates/base-nextjs/next.config.ts

@@ -1,7 +1,27 @@
 import type { NextConfig } from "next"
 
+import { existsSync } from "node:fs"
+import { dirname, join, resolve } from "node:path"
+
 import { env } from "./src/env.mjs"
 
+/**
+ * Walks up from the app directory looking for `pnpm-workspace.yaml`.
+ *
+ * @param from - Directory to start from.
+ * @returns The workspace root when this app is a workspace member, otherwise
+ *   `from` unchanged.
+ */
+function findWorkspaceRoot(from: string): string {
+  let dir = resolve(from)
+  for (;;) {
+    if (existsSync(join(dir, "pnpm-workspace.yaml"))) {return dir}
+    const parent = dirname(dir)
+    if (parent === dir) {return resolve(from)}
+    dir = parent
+  }
+}
+
 // Convex file storage URLs (`next/image` sources for uploaded media) are
 // served from `<deployment>.convex.cloud` — derive the hostname from the
 // validated NEXT_PUBLIC_CONVEX_URL so scaffolds work without a manual
@@ -20,12 +40,21 @@ const nextConfig: NextConfig = {
   },
   allowedDevOrigins: ["127.0.01", "localhost"],
   reactCompiler: true,
-  // Pin the workspace root to THIS app. Without it, Next walks up and adopts
-  // any outer lockfile (e.g. when this project lives inside a monorepo),
-  // which shifts Turbopack's file-tracing root and Tailwind's source-scan
-  // root — producing wrong relative paths and scanning files outside the app.
+  // Turbopack's root sets the file-tracing root AND Tailwind's source-scan
+  // root, so it has to be the directory that actually owns `node_modules`.
+  //
+  // Standalone scaffold: that is this app. Pinning it stops Next walking up
+  // and adopting an unrelated outer lockfile.
+  //
+  // pnpm workspace member: it is the workspace root — dependencies are
+  // hoisted into the root virtual store and `next` is only reachable from
+  // there. Pinning to the app dir makes the build fail with "Could not find
+  // the Next.js package".
+  //
+  // Detecting `pnpm-workspace.yaml` picks the right answer in both cases
+  // without the template needing a monorepo-specific variant.
   turbopack: {
-    root: import.meta.dirname,
+    root: findWorkspaceRoot(import.meta.dirname),
   },
   images: {
     // Additional remote image hosts (e.g. an external CMS or CDN) can be

package/templates/base-nextjs/package.json

@@ -24,11 +24,11 @@
     "@t3-oss/env-nextjs": "0.13.11",
     "@tanstack/react-form": "1.33.1",
     "@tanstack/react-query": "5.101.2",
-    "@vexcms/better-auth": "~0.1.0-alpha.5",
-    "@vexcms/core": "~0.1.0-alpha.5",
-    "@vexcms/file-storage-convex": "~0.1.0-alpha.5",
-    "@vexcms/next": "~0.1.0-alpha.5",
-    "@vexcms/react": "~0.1.0-alpha.5",
+    "@vexcms/better-auth": "~0.1.0-alpha.7",
+    "@vexcms/core": "~0.1.0-alpha.7",
+    "@vexcms/file-storage-convex": "~0.1.0-alpha.7",
+    "@vexcms/next": "~0.1.0-alpha.7",
+    "@vexcms/react": "~0.1.0-alpha.7",
     "better-auth": "1.6.23",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -52,7 +52,7 @@
     "@types/node": "20.19.43",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@vexcms/cli": "~0.1.0-alpha.5",
+    "@vexcms/cli": "~0.1.0-alpha.7",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.5",
     "eslint-config-next": "15.5.9",

package/templates/base-nextjs/src/app/(vexcms)/admin/[[...path]]/page.tsx

@@ -1,6 +1,6 @@
 import { api } from "@convex/_generated/api";
-import { NextAdminPage } from "@vexcms/next/server";
 import { canAccessAdminPanel } from "@vexcms/core";
+import { NextAdminPage } from "@vexcms/next/server";
 import { redirect } from "next/navigation";
 
 import { fetchAuthQuery, getToken } from "~/auth/server";

package/templates/base-nextjs/src/auth/serverUtils.ts

@@ -6,7 +6,7 @@ export async function getSessionToken() {
   const cookieStore = await cookies()
   const sessionTokenCookie = cookieStore.get("better-auth.session_token")?.value
 
-  if (!sessionTokenCookie) return null
+  if (!sessionTokenCookie) {return null}
 
   // better-auth stores tokens as "<raw_token>.<hmac_signature>" (2 parts, not a JWT)
   // The raw token (first part) is what's indexed in the DB by_token
@@ -24,12 +24,12 @@ export async function getSessionToken() {
 export const getCurrentUser = async () => {
   try {
     const sessionToken = await getSessionToken()
-    if (!sessionToken) return null
+    if (!sessionToken) {return null}
 
     const session = await fetchQuery(api.auth.sessions.getSessionWithUser, {
       sessionToken,
     })
-    if (!session?.user) return null
+    if (!session?.user) {return null}
     return session.user
   } catch (error) {
     console.error("Error getting current user:", error)
@@ -43,12 +43,12 @@ export const getCurrentUser = async () => {
 export async function getSession() {
   try {
     const sessionToken = await getSessionToken()
-    if (!sessionToken) return null
+    if (!sessionToken) {return null}
 
     const session = await fetchQuery(api.auth.sessions.getSessionWithUser, {
       sessionToken,
     })
-    if (!session?.user) return null
+    if (!session?.user) {return null}
     return session
   } catch (error) {
     console.error("[getSession] Error:", error)

package/templates/base-nextjs/src/components/WelcomePage.tsx

@@ -1,25 +1,12 @@
 "use client"
 
+import { api } from "@convex/_generated/api"
 import { useMutation, useQuery } from "convex/react"
 import { usePathname, useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
-import { api } from "@convex/_generated/api"
 import { useSession } from "~/auth/client"
 
-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>
-  )
-}
-
 /**
  * Landing UI for a project that has not been bootstrapped yet (no admin user),
  * and the "Go to Admin" / "Sign in" entry point once it has.
@@ -41,33 +28,44 @@ export function WelcomePage() {
   const [promoting, setPromoting] = useState(false)
   const [navigating, setNavigating] = useState(false)
 
-  // Reset navigating state when the user comes back to the home page
-  // (e.g. closing the intercepting auth dialog)
-  useEffect(() => {
-    if (pathname === "/") {
-      setNavigating(false)
-    }
-  }, [pathname])
+  // Reset `navigating` when the user lands back on the home page (e.g. they
+  // dismissed the intercepting auth dialog). Adjusting state during render on
+  // a changed input is the pattern React documents for this; an effect would
+  // paint the stale spinner for a frame first.
+  const [lastPathname, setLastPathname] = useState(pathname)
+  if (lastPathname !== pathname) {
+    setLastPathname(pathname)
+    if (pathname === "/") {setNavigating(false)}
+  }
+
+  // Run-once latch. `promoting` and `navigating` both render, so they stay
+  // state; the guard does not, so it is a ref — that keeps it out of the
+  // dependency array and stops the effect re-running just to re-read it.
+  const promotingRef = useRef(false)
 
-  // If the user is signed in and this is a fresh project, try to promote them
   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])
+    if (!session?.user || isBootstrapped !== false || promotingRef.current) {return}
+
+    promotingRef.current = true
+    setPromoting(true)
+    setNavigating(true)
+
+    promoteFirstAdmin()
+      .then((result) => {
+        if (result.promoted) {
+          router.push("/admin")
+          return
+        }
+        promotingRef.current = false
+        setPromoting(false)
+        setNavigating(false)
+      })
+      .catch(() => {
+        promotingRef.current = false
+        setPromoting(false)
+        setNavigating(false)
+      })
+  }, [session, isBootstrapped, promoteFirstAdmin, router])
 
   // Treat undefined (query still loading) as not bootstrapped — show the welcome page immediately
   const bootstrapped = isBootstrapped === true
@@ -93,17 +91,17 @@ export function WelcomePage() {
 
       <div className="flex gap-4">
         {session?.user ? (
-          <button onClick={() => handleNavigate("/admin")} disabled={navigating} className={buttonClass}>
+          <button className={buttonClass} disabled={navigating} onClick={() => handleNavigate("/admin")}>
             {navigating && <LoadingSpinner />}
             {navigating ? "Loading..." : "Go to Admin Panel"}
           </button>
         ) : bootstrapped ? (
-          <button onClick={() => handleNavigate("/auth/sign-in")} disabled={navigating} className={buttonClass}>
+          <button className={buttonClass} disabled={navigating} onClick={() => handleNavigate("/auth/sign-in")}>
             {navigating && <LoadingSpinner />}
             {navigating ? "Loading..." : "Sign In"}
           </button>
         ) : (
-          <button onClick={() => handleNavigate("/auth/sign-up")} disabled={navigating} className={buttonClass}>
+          <button className={buttonClass} disabled={navigating} onClick={() => handleNavigate("/auth/sign-up")}>
             {navigating && <LoadingSpinner />}
             {navigating ? "Loading..." : "Create Admin Account"}
           </button>
@@ -114,3 +112,16 @@ export function WelcomePage() {
     </div>
   )
 }
+
+function LoadingSpinner() {
+  return (
+    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        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"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/templates/base-nextjs/src/vexcms/collections/users.ts

@@ -13,7 +13,7 @@ export const users = defineCollection({
     plural: "Users",
   },
   fields: {
-    name: text({ required: true }),
+    name: text({ label: "Name", required: true }),
     // Add custom user fields here — the auth adapter already contributes
     // name/email/roles/etc. from Better Auth's schema.
   },

package/templates/marketing-site/convex/schema.ts

@@ -5,14 +5,14 @@ import { TABLE_SLUG_ACCOUNTS, TABLE_SLUG_USERS } from "~/db/constants"
 
 import {
   apikey,
+  footers,
+  headers,
   images,
   jwks,
-  session,
-  verification,
   pages,
-  headers,
-  footers,
+  session,
   themes,
+  verification,
 } from "./vex.schema"
 
 export default defineSchema({