create-vexcms 0.0.7 → 0.0.9

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

@@ -0,0 +1,37 @@
+import { fetchQuery } from "convex/nextjs"
+
+import { api } from "@convex/_generated/api"
+
+import { SiteFooter } from "~/components/SiteFooter"
+import { SiteHeader } from "~/components/SiteHeader"
+import { ThemeStyle } from "~/components/ThemeStyle"
+
+export default async function FrontendLayout({
+  auth,
+  children,
+}: Readonly<{
+  auth: React.ReactNode
+  children: React.ReactNode
+}>) {
+  let headerData: Record<string, unknown> | null = null
+  let footerData: Record<string, unknown> | null = null
+
+  try {
+    ;[headerData, footerData] = await Promise.all([
+      fetchQuery(api.headers.getFirst),
+      fetchQuery(api.footers.getFirst),
+    ])
+  } catch {
+    // Convex not available — fall back to client-only fetch
+  }
+
+  return (
+    <>
+      <ThemeStyle />
+      <SiteHeader initialData={headerData} />
+      <main>{children}</main>
+      <SiteFooter initialData={footerData} />
+      {auth}
+    </>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { fetchQuery } from "convex/nextjs"
+
+import { api } from "@convex/_generated/api"
+
+import { generatePageMetadata } from "~/lib/metadata"
+import { PageContent } from "./PageContent"
+
+export async function generateMetadata() {
+  return generatePageMetadata({ slug: "home" })
+}
+
+export default async function HomePage() {
+  let initialData: Record<string, unknown> | null = null
+  try {
+    initialData = await fetchQuery(api.pages.getBySlug, {
+      slug: "home",
+      _vexDrafts: false,
+    })
+  } catch {
+    // Fall back to client-only fetch
+  }
+
+  return <PageContent initialData={initialData} />
+}

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

@@ -0,0 +1,55 @@
+"use client"
+
+import { RenderBlocks, useVexPreview } from "@vexcms/ui"
+import { convexQuery } from "@convex-dev/react-query"
+import { useQuery } from "@tanstack/react-query"
+import { anyApi } from "convex/server"
+
+import { blockComponents } from "~/vexcms/blocks"
+
+/**
+ * Client component for live preview using TanStack Query.
+ * initialData from server fetch eliminates loading flash.
+ * The reactive subscription picks up draft snapshot changes in real-time.
+ */
+export function PreviewPageContent({
+  slug,
+  initialData,
+}: {
+  slug: string
+  initialData?: Record<string, unknown> | null
+}) {
+  const { data: page } = useQuery({
+    ...convexQuery(anyApi.pages.getBySlug, {
+      slug,
+      _vexDrafts: "snapshot",
+    }),
+    initialData: initialData ?? undefined,
+  })
+
+  // Notify admin panel's live preview when data changes
+  useVexPreview({ data: page })
+
+  if (page === null || page === undefined) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-12">
+        <h1 className="text-2xl font-bold">Preview not found</h1>
+        <p className="mt-2 text-muted-foreground">
+          No page with slug &ldquo;{slug}&rdquo; exists.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {/* Preview banner */}
+      <div className="fixed top-0 left-0 right-0 z-50 border-b border-yellow-200 bg-yellow-50 px-4 py-2 text-center text-sm text-yellow-800">
+        Preview Mode — This page may not be published yet.
+      </div>
+      <div className="pt-10">
+        <RenderBlocks blocks={page.content} components={blockComponents} />
+      </div>
+    </>
+  )
+}

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

@@ -1,69 +1,25 @@
-"use client"
-
-import type { RichTextDocument } from "@vexcms/core"
+import { fetchQuery } from "convex/nextjs"
 
 import { api } from "@convex/_generated/api"
-import { RichText } from "@vexcms/richtext/render"
-import { useVexPreview } from "@vexcms/ui"
-import { useQuery } from "convex/react"
-import { useParams } from "next/navigation"
-
-/**
- * Preview page route — renders draft pages for live preview.
- * Used by the admin panel's live preview iframe.
- *
- * Uses the same getBySlug query but with _vexDrafts: "snapshot"
- * so the draft snapshot is automatically merged onto the document.
- */
-export default function PreviewPage() {
-  const { slug } = useParams<{ slug: string }>()
-
-  const page = useQuery(api.pages.getBySlug, {
-    slug,
-    _vexDrafts: "snapshot",
-  })
-
-  // Notify admin panel's live preview when data changes
-  useVexPreview({ data: page })
 
-  if (page === undefined) {
-    return (
-      <div className="mx-auto max-w-3xl px-4 py-12">
-        <div className="flex items-center gap-2">
-          <div className="h-2 w-2 rounded-full bg-yellow-500 animate-pulse" />
-          <p className="text-muted-foreground">Loading preview…</p>
-        </div>
-      </div>
-    )
+import { PreviewPageContent } from "./PreviewPageContent"
+
+export default async function PreviewPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+
+  let initialData: Record<string, unknown> | null = null
+  try {
+    initialData = await fetchQuery(api.pages.getBySlug, {
+      slug,
+      _vexDrafts: "snapshot" as any,
+    })
+  } catch {
+    // Fall back to client-only fetch
   }
 
-  if (page === null) {
-    return (
-      <div className="mx-auto max-w-3xl px-4 py-12">
-        <h1 className="text-2xl font-bold">Preview not found</h1>
-        <p className="mt-2 text-muted-foreground">
-          No page with slug &ldquo;{slug}&rdquo; exists.
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="mx-auto max-w-3xl px-4 py-12">
-      {/* Preview banner */}
-      <div className="mb-6 rounded-md border border-yellow-200 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
-        Preview Mode — This page may not be published yet.
-      </div>
-
-      <h1 className="text-3xl font-bold mb-6">{page.title ?? "Untitled"}</h1>
-
-      {page.content ? (
-        <div className="prose prose-lg max-w-none">
-          <RichText content={page.content as RichTextDocument} />
-        </div>
-      ) : (
-        <p className="text-muted-foreground">This page has no content yet.</p>
-      )}
-    </div>
-  )
+  return <PreviewPageContent slug={slug} initialData={initialData} />
 }

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

@@ -0,0 +1,18 @@
+import { ThemeInjector } from "~/components/ThemeInjector"
+import { ThemeStyle } from "~/components/ThemeStyle"
+
+export default function PreviewLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <>
+      {/* Server-rendered draft theme CSS — eliminates flash on preview load */}
+      <ThemeStyle drafts />
+      {/* Client-side theme injector — picks up real-time draft changes via snapshot */}
+      <ThemeInjector siteSettingsSlug="site_settings" drafts="snapshot" />
+      {children}
+    </>
+  )
+}

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

@@ -0,0 +1,28 @@
+"use client"
+
+import { RenderBlocks } from "@vexcms/ui"
+import { convexQuery } from "@convex-dev/react-query"
+import { useQuery } from "@tanstack/react-query"
+import { anyApi } from "convex/server"
+
+import { blockComponents } from "~/vexcms/blocks"
+
+export function SiteFooter({
+  initialData,
+}: {
+  initialData?: Record<string, unknown> | null
+}) {
+  const { data: footer } = useQuery({
+    ...convexQuery(anyApi.footers.getFirst, {}),
+    initialData: initialData ?? undefined,
+  })
+
+  if (!footer?.content) return null
+
+  return (
+    <RenderBlocks
+      blocks={footer.content as any}
+      components={blockComponents}
+    />
+  )
+}

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

@@ -0,0 +1,28 @@
+"use client"
+
+import { RenderBlocks } from "@vexcms/ui"
+import { convexQuery } from "@convex-dev/react-query"
+import { useQuery } from "@tanstack/react-query"
+import { anyApi } from "convex/server"
+
+import { blockComponents } from "~/vexcms/blocks"
+
+export function SiteHeader({
+  initialData,
+}: {
+  initialData?: Record<string, unknown> | null
+}) {
+  const { data: header } = useQuery({
+    ...convexQuery(anyApi.headers.getFirst, {}),
+    initialData: initialData ?? undefined,
+  })
+
+  if (!header?.content) return null
+
+  return (
+    <RenderBlocks
+      blocks={header.content as any}
+      components={blockComponents}
+    />
+  )
+}

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

@@ -0,0 +1,128 @@
+"use client"
+
+import { useQuery } from "convex/react"
+import { useVexPreview } from "@vexcms/ui"
+import { anyApi } from "convex/server"
+
+/**
+ * CSS variable name mapping from camelCase field names to CSS custom property names.
+ */
+const FIELD_TO_CSS_VAR: Record<string, string> = {
+  background: "background",
+  foreground: "foreground",
+  card: "card",
+  cardForeground: "card-foreground",
+  popover: "popover",
+  popoverForeground: "popover-foreground",
+  primary: "primary",
+  primaryForeground: "primary-foreground",
+  secondary: "secondary",
+  secondaryForeground: "secondary-foreground",
+  muted: "muted",
+  mutedForeground: "muted-foreground",
+  accent: "accent",
+  accentForeground: "accent-foreground",
+  destructive: "destructive",
+  destructiveForeground: "destructive-foreground",
+  border: "border",
+  input: "input",
+  ring: "ring",
+  chart1: "chart-1",
+  chart2: "chart-2",
+  chart3: "chart-3",
+  chart4: "chart-4",
+  chart5: "chart-5",
+  sidebar: "sidebar",
+  sidebarForeground: "sidebar-foreground",
+  sidebarPrimary: "sidebar-primary",
+  sidebarPrimaryForeground: "sidebar-primary-foreground",
+  sidebarAccent: "sidebar-accent",
+  sidebarAccentForeground: "sidebar-accent-foreground",
+  sidebarBorder: "sidebar-border",
+  sidebarRing: "sidebar-ring",
+}
+
+function buildCSSVars(colors: Record<string, unknown> | null | undefined): string {
+  if (!colors) return ""
+
+  const vars: string[] = []
+  for (const [fieldName, cssVar] of Object.entries(FIELD_TO_CSS_VAR)) {
+    const value = colors[fieldName]
+    if (typeof value === "string" && value) {
+      vars.push(`  --${cssVar}: ${value};`)
+    }
+  }
+  return vars.join("\n")
+}
+
+/**
+ * Client component that reads the active theme from the site_settings global
+ * and injects CSS variables for light and dark modes.
+ *
+ * @param props.siteSettingsSlug - The global slug for site settings
+ * @param props.drafts - When "snapshot", reads draft/preview data instead of published
+ */
+export function ThemeInjector({
+  siteSettingsSlug,
+  drafts,
+}: {
+  siteSettingsSlug: string
+  drafts?: "snapshot" | false
+}) {
+  // Use globals.get which supports draft awareness
+  const settingsDoc = useQuery(
+    anyApi.vex.globals?.get,
+    {
+      globalSlug: siteSettingsSlug,
+      ...(drafts ? { _vexDrafts: drafts } : {}),
+    },
+  ) as Record<string, unknown> | null | undefined
+
+  const activeThemeId = settingsDoc?.activeTheme as string | undefined
+
+  // Fetch the active theme document
+  // In draft mode, use versioned query to pick up unpublished theme changes
+  const theme = useQuery(
+    drafts
+      ? anyApi.vex.versions?.getDocumentForEdit
+      : anyApi.vex.api.themes?.get,
+    activeThemeId
+      ? drafts
+        ? { collectionSlug: "themes", documentId: activeThemeId }
+        : { id: activeThemeId }
+      : "skip",
+  ) as Record<string, unknown> | null | undefined
+
+  // In draft mode, notify the admin panel when settings or theme data changes
+  // so the live preview spinner stops
+  useVexPreview({ data: drafts ? { settings: settingsDoc, theme } : undefined })
+
+  if (!theme) return null
+
+  const lightColors = theme.light as Record<string, unknown> | undefined
+  const darkColors = theme.dark as Record<string, unknown> | undefined
+
+  const lightVars = buildCSSVars(lightColors)
+  const darkVars = buildCSSVars(darkColors)
+
+  if (!lightVars && !darkVars) return null
+
+  const css = [
+    lightVars ? `:root {\n${lightVars}\n}` : "",
+    darkVars ? `.dark {\n${darkVars}\n}` : "",
+  ]
+    .filter(Boolean)
+    .join("\n\n")
+
+  const radius = theme.radius as string | undefined
+  const fontFamily = theme.fontFamily as string | undefined
+  const extraVars: string[] = []
+  if (radius) extraVars.push(`  --radius: ${radius};`)
+  if (fontFamily) extraVars.push(`  --font-sans: ${fontFamily};`)
+
+  const extraCSS = extraVars.length > 0 ? `\n:root {\n${extraVars.join("\n")}\n}` : ""
+
+  return (
+    <style dangerouslySetInnerHTML={{ __html: css + extraCSS }} />
+  )
+}

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

@@ -0,0 +1,104 @@
+import { fetchQuery } from "convex/nextjs"
+
+import { api } from "@convex/_generated/api"
+
+/**
+ * CSS variable name mapping from camelCase field names to CSS custom property names.
+ */
+const FIELD_TO_CSS_VAR: Record<string, string> = {
+  background: "background",
+  foreground: "foreground",
+  card: "card",
+  cardForeground: "card-foreground",
+  popover: "popover",
+  popoverForeground: "popover-foreground",
+  primary: "primary",
+  primaryForeground: "primary-foreground",
+  secondary: "secondary",
+  secondaryForeground: "secondary-foreground",
+  muted: "muted",
+  mutedForeground: "muted-foreground",
+  accent: "accent",
+  accentForeground: "accent-foreground",
+  destructive: "destructive",
+  destructiveForeground: "destructive-foreground",
+  border: "border",
+  input: "input",
+  ring: "ring",
+  chart1: "chart-1",
+  chart2: "chart-2",
+  chart3: "chart-3",
+  chart4: "chart-4",
+  chart5: "chart-5",
+  sidebar: "sidebar",
+  sidebarForeground: "sidebar-foreground",
+  sidebarPrimary: "sidebar-primary",
+  sidebarPrimaryForeground: "sidebar-primary-foreground",
+  sidebarAccent: "sidebar-accent",
+  sidebarAccentForeground: "sidebar-accent-foreground",
+  sidebarBorder: "sidebar-border",
+  sidebarRing: "sidebar-ring",
+}
+
+function buildCSSVars(colors: Record<string, unknown> | null | undefined): string {
+  if (!colors) return ""
+
+  const vars: string[] = []
+  for (const [fieldName, cssVar] of Object.entries(FIELD_TO_CSS_VAR)) {
+    const value = colors[fieldName]
+    if (typeof value === "string" && value) {
+      vars.push(`  --${cssVar}: ${value};`)
+    }
+  }
+  return vars.join("\n")
+}
+
+/**
+ * Server component that fetches the active theme and inlines CSS variables
+ * into the initial HTML. This eliminates the flash of unstyled content
+ * that occurs when theme variables are injected client-side.
+ *
+ * @param props.drafts - When true, fetches the draft/preview theme instead of published.
+ *                       Use this in the preview layout so the server-rendered CSS
+ *                       matches the draft state the admin is editing.
+ */
+export async function ThemeStyle({ drafts }: { drafts?: boolean } = {}) {
+  let theme: Record<string, unknown> | null = null
+  try {
+    theme = drafts
+      ? await fetchQuery(api.theme.getActivePreview) as Record<string, unknown> | null
+      : await fetchQuery(api.theme.getActive) as Record<string, unknown> | null
+  } catch {
+    // Convex not available during build — use default styles
+    return null
+  }
+
+  if (!theme) return null
+
+  const lightColors = theme.light as Record<string, unknown> | undefined
+  const darkColors = theme.dark as Record<string, unknown> | undefined
+
+  const lightVars = buildCSSVars(lightColors)
+  const darkVars = buildCSSVars(darkColors)
+
+  if (!lightVars && !darkVars) return null
+
+  const css = [
+    lightVars ? `:root {\n${lightVars}\n}` : "",
+    darkVars ? `.dark {\n${darkVars}\n}` : "",
+  ]
+    .filter(Boolean)
+    .join("\n\n")
+
+  const radius = theme.radius as string | undefined
+  const fontFamily = theme.fontFamily as string | undefined
+  const extraVars: string[] = []
+  if (radius) extraVars.push(`  --radius: ${radius};`)
+  if (fontFamily) extraVars.push(`  --font-sans: ${fontFamily};`)
+
+  const extraCSS = extraVars.length > 0 ? `\n:root {\n${extraVars.join("\n")}\n}` : ""
+
+  return (
+    <style dangerouslySetInnerHTML={{ __html: css + extraCSS }} />
+  )
+}

package/templates/marketing-site/src/components/admin/IconPickerField.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import { useVexField } from "@vexcms/ui"
+import { icons } from "lucide-react"
+import { useMemo } from "react"
+
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "~/components/ui/combobox"
+import { Label } from "~/components/ui/label"
+import { cn } from "~/lib/utils"
+
+type IconName = keyof typeof icons
+
+const iconNames = Object.keys(icons) as IconName[]
+
+/**
+ * Custom admin field component that renders a searchable icon picker.
+ * Stores the selected icon name as a string (e.g. "Zap", "Shield", "Code").
+ *
+ * When used inside an array field, receives a `field` prop with synthetic
+ * state/handleChange. When used at the top level, uses useVexField.
+ */
+export default function IconPickerField({
+  name,
+  field: syntheticField,
+}: {
+  name: string
+  fieldDef?: any
+  readOnly?: boolean
+  field?: {
+    state: { value: unknown }
+    handleChange: (value: unknown) => void
+  }
+}) {
+  // Use synthetic field from array context, or useVexField for top-level
+  const vexField = useVexField<string>({ name })
+
+  const value = syntheticField
+    ? (syntheticField.state.value as string) ?? ""
+    : vexField.value ?? ""
+
+  const setValueFn = syntheticField
+    ? (v: string) => syntheticField.handleChange(v)
+    : (v: string) => vexField.setValue(v)
+
+  const fieldDef = vexField.fieldDef
+  const readOnly = vexField.readOnly
+
+  const selectedIcon = value && value in icons ? value : null
+  const SelectedIconComponent = selectedIcon
+    ? icons[selectedIcon as IconName]
+    : null
+
+  // Sort items so the selected icon appears first
+  const sortedItems = useMemo(() => {
+    if (!selectedIcon) return iconNames
+    return [
+      selectedIcon as IconName,
+      ...iconNames.filter((n) => n !== selectedIcon),
+    ]
+  }, [selectedIcon])
+
+  return (
+    <div className="space-y-2">
+      <Label>{(fieldDef as any)?.label ?? "Icon"}</Label>
+      <div className="flex items-start gap-2">
+        {/* Icon preview square */}
+        <div
+          className={cn(
+            "flex size-9 shrink-0 items-center justify-center rounded-md border bg-background",
+            selectedIcon
+              ? "text-foreground"
+              : "text-muted-foreground/40"
+          )}
+        >
+          {SelectedIconComponent ? (
+            <SelectedIconComponent className="size-4" />
+          ) : null}
+        </div>
+
+        {/* Combobox */}
+        <div className="flex-1">
+          <Combobox
+            value={selectedIcon ?? ""}
+            onValueChange={(val) => {
+              // Toggle: clicking the already-selected icon deselects it
+              if (val === selectedIcon) {
+                setValueFn("")
+              } else {
+                setValueFn((val as string) ?? "")
+              }
+            }}
+            items={sortedItems}
+          >
+            <ComboboxInput
+              placeholder="Search icons..."
+              disabled={readOnly}
+            />
+            <ComboboxContent>
+              <ComboboxEmpty>No icons found</ComboboxEmpty>
+              <ComboboxList>
+                {(iconName) => {
+                  const Icon = icons[iconName as IconName]
+                  const isSelected = iconName === selectedIcon
+                  return (
+                    <ComboboxItem
+                      key={iconName}
+                      value={iconName}
+                      className={cn(isSelected && "bg-accent")}
+                    >
+                      <Icon className="size-4 shrink-0" />
+                      <span>{iconName}</span>
+                    </ComboboxItem>
+                  )
+                }}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        </div>
+      </div>
+      {(fieldDef as any)?.admin?.description && (
+        <p className="text-muted-foreground text-xs">
+          {(fieldDef as any).admin.description}
+        </p>
+      )}
+    </div>
+  )
+}