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

package/package.json

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

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.21",
-    "@vexcms/core": "~0.1.0-alpha.21",
-    "@vexcms/file-storage-convex": "~0.1.0-alpha.21",
-    "@vexcms/next": "~0.1.0-alpha.21",
-    "@vexcms/react": "~0.1.0-alpha.21",
+    "@vexcms/better-auth": "~0.1.0-alpha.22",
+    "@vexcms/core": "~0.1.0-alpha.22",
+    "@vexcms/file-storage-convex": "~0.1.0-alpha.22",
+    "@vexcms/next": "~0.1.0-alpha.22",
+    "@vexcms/react": "~0.1.0-alpha.22",
     "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.21",
+    "@vexcms/cli": "~0.1.0-alpha.22",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.5",
     "eslint-config-next": "15.5.9",

package/templates/marketing-site/src/components/SiteFooter.tsx

@@ -2,8 +2,7 @@
 
 import { convexQuery } from "@convex-dev/react-query"
 import { api } from "@convex/_generated/api"
-import { useQuery } from "@tanstack/react-query"
-import { type RenderableBlock, RenderBlocks } from "@vexcms/react"
+import { type RenderableBlock, RenderBlocks, useLivePreviewDocumentQuery } from "@vexcms/react"
 
 import type { FootersDocument } from "~/vex.types"
 
@@ -16,10 +15,15 @@ export function SiteFooter({
 }: {
   initialData?: FootersDocument | null
 }) {
-  const { data: footer } = useQuery({
-    ...convexQuery(api.footers.getFirst, {}),
-    initialData: initialData ?? undefined,
-  })
+  // See `SiteHeader`: the overlay only reaches documents a consumer hands it,
+  // so editing the footer while previewing a page needs this wrapper.
+  const { data: footer } = useLivePreviewDocumentQuery(
+    {
+      ...convexQuery(api.footers.getFirst, {}),
+      initialData: initialData ?? undefined,
+    },
+    "footers",
+  )
 
   const content = footer?.content as null | PageBlockLike[] | undefined
   if (!content) {return null}

package/templates/marketing-site/src/components/SiteHeader.tsx

@@ -2,8 +2,7 @@
 
 import { convexQuery } from "@convex-dev/react-query"
 import { api } from "@convex/_generated/api"
-import { useQuery } from "@tanstack/react-query"
-import { type RenderableBlock, RenderBlocks } from "@vexcms/react"
+import { type RenderableBlock, RenderBlocks, useLivePreviewDocumentQuery } from "@vexcms/react"
 
 import type { HeadersDocument } from "~/vex.types"
 
@@ -16,10 +15,16 @@ export function SiteHeader({
 }: {
   initialData?: HeadersDocument | null
 }) {
-  const { data: header } = useQuery({
-    ...convexQuery(api.headers.getFirst, {}),
-    initialData: initialData ?? undefined,
-  })
+  // `useLivePreviewDocumentQuery`, not a bare `useQuery`: the live-preview
+  // overlay only reaches documents a consumer hands it, so a plain query here
+  // means editing the header while previewing a page changes nothing.
+  const { data: header } = useLivePreviewDocumentQuery(
+    {
+      ...convexQuery(api.headers.getFirst, {}),
+      initialData: initialData ?? undefined,
+    },
+    "headers",
+  )
 
   const content = header?.content as null | PageBlockLike[] | undefined
   if (!content) {return null}

package/templates/marketing-site/src/vexcms/collections/headers.ts

@@ -8,6 +8,9 @@ export const headers = defineCollection({
   admin: {
     useAsTitle: "name",
     icon: "PanelTop",
+    livePreview: {
+      url: "/",
+    },
   },
   fields: {
     name: text({