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

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

@@ -1,7 +1,7 @@
 import { getGlobal } from "@vexcms/core/server"
 
 import { GLOBAL_SLUG_SITE_SETTINGS } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 
 import { query } from "./_generated/server"
 

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

@@ -1,7 +1,7 @@
 import { getGlobal } from "@vexcms/core/server"
 
 import { GLOBAL_SLUG_SITE_SETTINGS, type TABLE_SLUG_THEMES } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 
 import type { Doc, Id } from "./_generated/dataModel"
 import type { QueryCtx } from "./_generated/server"
@@ -36,11 +36,11 @@ async function resolveTheme(props: {
     slug: GLOBAL_SLUG_SITE_SETTINGS,
     access: { bypass: true },
   })
-  if (!settings) return null
+  if (!settings) {return null}
 
   const reference = settings[props.field] as string[] | undefined
   const themeId = reference?.[0]
-  if (!themeId) return null
+  if (!themeId) {return null}
 
   return await props.ctx.db.get(themeId as Id<typeof TABLE_SLUG_THEMES>)
 }

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

@@ -30,15 +30,27 @@ export const pages = defineTable({
           blockType: v.literal("hero"),
           blockName: v.optional(v.string()),
           id: v.string(),
+          variant: v.optional(v.array(v.union(v.literal("full"), v.literal("compact")))),
           badgeText: v.optional(v.string()),
           badgeLink: v.optional(v.string()),
           heading: v.string(),
           subheading: v.optional(v.string()),
-          primaryCtaLabel: v.string(),
-          primaryCtaHref: v.string(),
+          installCommand: v.optional(v.string()),
+          primaryCtaLabel: v.optional(v.string()),
+          primaryCtaHref: v.optional(v.string()),
           secondaryCtaLabel: v.optional(v.string()),
           secondaryCtaHref: v.optional(v.string()),
         }),
+        v.object({
+          blockType: v.literal("stats"),
+          blockName: v.optional(v.string()),
+          id: v.string(),
+          heading: v.optional(v.string()),
+          subheading: v.optional(v.string()),
+          items: v.array(
+            v.object({ value: v.string(), label: v.string(), description: v.optional(v.string()) })
+          ),
+        }),
         v.object({
           blockType: v.literal("features"),
           blockName: v.optional(v.string()),
@@ -49,6 +61,50 @@ export const pages = defineTable({
             v.object({ title: v.string(), description: v.string(), icon: v.optional(v.string()) })
           ),
         }),
+        v.object({
+          blockType: v.literal("code_showcase"),
+          blockName: v.optional(v.string()),
+          id: v.string(),
+          heading: v.string(),
+          subheading: v.optional(v.string()),
+          panes: v.array(
+            v.object({
+              label: v.string(),
+              filename: v.optional(v.string()),
+              language: v.optional(
+                v.array(
+                  v.union(v.literal("ts"), v.literal("tsx"), v.literal("bash"), v.literal("json"))
+                )
+              ),
+              authored: v.optional(v.array(v.union(v.literal("authored"), v.literal("generated")))),
+              code: v.string(),
+              caption: v.optional(v.string()),
+            })
+          ),
+        }),
+        v.object({
+          blockType: v.literal("split"),
+          blockName: v.optional(v.string()),
+          id: v.string(),
+          eyebrow: v.optional(v.string()),
+          heading: v.string(),
+          body: v.string(),
+          bullets: v.optional(
+            v.array(v.object({ icon: v.optional(v.string()), text: v.string() }))
+          ),
+          media: v.optional(
+            v.array(v.union(v.literal("code"), v.literal("image"), v.literal("none")))
+          ),
+          code: v.optional(v.string()),
+          codeFilename: v.optional(v.string()),
+          codeLanguage: v.optional(
+            v.array(
+              v.union(v.literal("ts"), v.literal("tsx"), v.literal("bash"), v.literal("json"))
+            )
+          ),
+          image: v.optional(v.array(v.id("images"))),
+          mediaPosition: v.optional(v.array(v.union(v.literal("right"), v.literal("left")))),
+        }),
         v.object({
           blockType: v.literal("how_it_works"),
           blockName: v.optional(v.string()),
@@ -70,27 +126,33 @@ export const pages = defineTable({
               feature: v.string(),
               description: v.optional(v.string()),
               status: v.array(
-                v.union(v.literal("shipped"), v.literal("coming-soon"), v.literal("planned"))
+                v.union(
+                  v.literal("shipped"),
+                  v.literal("in-progress"),
+                  v.literal("planned"),
+                  v.literal("exploring"),
+                  v.literal("future")
+                )
               ),
             })
           ),
         }),
         v.object({
-          blockType: v.literal("cta"),
+          blockType: v.literal("faq"),
           blockName: v.optional(v.string()),
           id: v.string(),
           heading: v.string(),
           subheading: v.optional(v.string()),
-          actions: v.optional(v.array(v.object({ label: v.string(), href: v.string() }))),
+          supportLink: v.optional(v.string()),
+          items: v.array(v.object({ question: v.string(), answer: v.string() })),
         }),
         v.object({
-          blockType: v.literal("faq"),
+          blockType: v.literal("cta"),
           blockName: v.optional(v.string()),
           id: v.string(),
           heading: v.string(),
           subheading: v.optional(v.string()),
-          supportLink: v.optional(v.string()),
-          items: v.array(v.object({ question: v.string(), answer: v.string() })),
+          actions: v.optional(v.array(v.object({ label: v.string(), href: v.string() }))),
         })
       )
     )
@@ -98,6 +160,7 @@ export const pages = defineTable({
   metaTitle: v.optional(v.string()),
   metaDescription: v.optional(v.string()),
   ogImage: v.optional(v.array(v.id("images"))),
+  updatedAt: v.optional(v.number()),
 }).index("by_slug", ["slug"])
 
 export const headers = defineTable({
@@ -126,6 +189,7 @@ export const headers = defineTable({
       })
     )
   ),
+  updatedAt: v.optional(v.number()),
 }).index("by_name", ["name"])
 
 export const footers = defineTable({
@@ -148,6 +212,7 @@ export const footers = defineTable({
       })
     )
   ),
+  updatedAt: v.optional(v.number()),
 }).index("by_name", ["name"])
 
 export const themes = defineTable({
@@ -226,6 +291,7 @@ export const themes = defineTable({
       sidebarRing: v.optional(v.string()),
     })
   ),
+  updatedAt: v.optional(v.number()),
 }).index("by_name", ["name"])
 
 export const session = defineTable({
@@ -237,7 +303,6 @@ export const session = defineTable({
   userAgent: v.optional(v.string()),
   userId: v.string(),
   impersonatedBy: v.optional(v.string()),
-  activeOrganizationId: v.optional(v.string()),
 })
   .index("by_token", ["token"])
   .index("by_userId", ["userId"])
@@ -299,35 +364,6 @@ export const jwks = defineTable({
   expiresAt: v.optional(v.number()),
 })
 
-export const organization = defineTable({
-  name: v.string(),
-  slug: v.string(),
-  logo: v.optional(v.string()),
-  createdAt: v.number(),
-  metadata: v.optional(v.string()),
-}).index("by_slug", ["slug"])
-
-export const member = defineTable({
-  organizationId: v.string(),
-  userId: v.string(),
-  role: v.string(),
-  createdAt: v.number(),
-})
-  .index("by_organizationId", ["organizationId"])
-  .index("by_userId", ["userId"])
-
-export const invitation = defineTable({
-  organizationId: v.string(),
-  email: v.string(),
-  role: v.optional(v.string()),
-  status: v.string(),
-  expiresAt: v.number(),
-  createdAt: v.number(),
-  inviterId: v.string(),
-})
-  .index("by_organizationId", ["organizationId"])
-  .index("by_email", ["email"])
-
 export const images = defineTable({
   filename: v.string(),
   alt: v.string(),
@@ -338,6 +374,7 @@ export const images = defineTable({
   src: v.string(),
   width: v.optional(v.number()),
   height: v.optional(v.number()),
+  updatedAt: v.optional(v.number()),
 })
   .index("by_deleted", ["deleted"])
   .searchIndex("search_filename", {

package/templates/marketing-site/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <!-- The VexCMS chevron, same geometry as src/components/BrandMark.tsx scaled
+       2x. Ember is hard-coded (#f87e28, the dark-mode primary token
+       oklch(72% 0.175 50)) rather than currentColor: a favicon renders outside
+       the document, so it has no colour to inherit, and this hue holds up on
+       both light and dark browser chrome. -->
+  <path
+    d="M5 6.5 14.5 25.5a1.7 1.7 0 0 0 3 0L27 6.5"
+    fill="none"
+    stroke="#f87e28"
+    stroke-linecap="square"
+    stroke-width="4.5"
+  />
+</svg>

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

@@ -0,0 +1,64 @@
+"use client"
+
+import { convexQuery } from "@convex-dev/react-query"
+import { api } from "@convex/_generated/api"
+import { RenderBlocks, useLivePreviewQuery } from "@vexcms/react"
+
+import type { CodeHighlightMap } from "~/lib/highlight"
+import type { PagesDocument } from "~/vex.types"
+
+import { CodeHighlightProvider } from "~/components/CodeHighlightContext"
+import { WelcomePage } from "~/components/WelcomePage"
+import { blockComponents } from "~/vexcms/blocks"
+
+export interface PageContentProps {
+  /**
+   * Server-highlighted code panes for `initialData`, keyed by
+   * `codeHighlightKey`. Built by `highlightPageBlocks`, because nothing below
+   * this client boundary can await shiki.
+   */
+  codeHighlights?: CodeHighlightMap
+  /** Server-fetched `pages.getBySlug` result, hydrated as the query's initial data. */
+  initialData?: PagesDocument[]
+  /** URL slug to render. Omit (or empty) for the home page. */
+  slug?: string
+}
+
+/**
+ * Renders one marketing page's blocks via `RenderBlocks` (Contract 1), or
+ * falls back to base's bootstrap `WelcomePage` when no `home` page document
+ * exists yet — a fresh scaffold before `pnpm seed` has run (Contract 3).
+ *
+ * `pages.getBySlug` always returns an array (empty when no match — the same
+ * shape every collection query returns); `useLivePreviewQuery` performs that
+ * narrowing itself and overlays any unsaved editor values for this document
+ * when the page is being rendered inside a live preview.
+ */
+export function PageContent({ codeHighlights, slug, initialData }: PageContentProps) {
+  const normalizedSlug = slug && slug.length > 0 ? slug : "home"
+
+  const { data: page, isPending } = useLivePreviewQuery(
+    {
+      ...convexQuery(api.pages.getBySlug, { slug: normalizedSlug }),
+      initialData,
+    },
+    "pages",
+  )
+
+  if (isPending && initialData === undefined) {
+    return null
+  }
+
+  if (!page) {
+    return <WelcomePage />
+  }
+
+  return (
+    <CodeHighlightProvider highlights={codeHighlights ?? {}}>
+      <RenderBlocks
+        blocks={page.blocks}
+        components={blockComponents}
+      />
+    </CodeHighlightProvider>
+  )
+}

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

@@ -0,0 +1,31 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { LivePreviewProvider } from "@vexcms/react"
+
+import config from "~/vex.config"
+
+/**
+ * Mounts the live-preview listener for the public site's client tree.
+ *
+ * A `"use client"` component so `vex.config` is imported and owned on the
+ * client — it never crosses the RSC boundary as a prop (ADR-013; the config's
+ * `admin.livePreview.url` resolvers and field validators are functions, which
+ * React refuses to serialize). Mirrors `admin/clientProviders.tsx`.
+ *
+ * `LivePreviewProvider` gates itself on `?vexLivePreview=1` plus the
+ * session-verified `vex-live-preview` cookie `proxy.ts` sets, so wrapping the
+ * layout unconditionally costs a disabled provider and nothing else — and
+ * keeps every public route statically prerenderable.
+ */
+export function SiteLivePreviewProvider({ children }: { children: ReactNode }) {
+  return (
+    <LivePreviewProvider
+      allowedOrigins={config.livePreview.allowedOrigins}
+      collections={config.collections}
+    >
+      {children}
+    </LivePreviewProvider>
+  )
+}

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

@@ -0,0 +1,63 @@
+import { api } from "@convex/_generated/api"
+import { vexStaticParams } from "@vexcms/next/seo"
+import { notFound } from "next/navigation"
+
+import type { PagesDocument } from "~/vex.types"
+
+import { generatePageMetadata } from "~/lib/metadata"
+import { highlightPageBlocks } from "~/lib/highlight"
+import { vex } from "~/lib/vex"
+
+import { PageContent } from "../PageContent"
+
+// Next requires this to be an inline literal — it is read by static analysis
+// before any module executes, so neither `vexConfig.revalidate.revalidateSeconds`
+// nor an imported constant is accepted ("Invalid segment configuration export").
+export const revalidate = 3600
+
+export async function generateStaticParams() {
+  const entries = await vexStaticParams({
+    client: vex,
+    query: api.pages.publishedSlugs,
+    paramName: "slug",
+    getSlug: (item) => item.slug,
+  })
+
+  return entries.filter((entry) => entry.slug !== "home")
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  return generatePageMetadata({ slug: slug && slug.length > 0 ? slug : "home" })
+}
+
+export default async function PublicPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const normalized = slug && slug.length > 0 ? slug : "home"
+
+  // The two failure modes are deliberately NOT the same:
+  //
+  // - The query THROWS: the deployment is unreachable. A scaffold builds with
+  //   placeholder env, so throwing here would fail `next build` outright.
+  //   Render with no seed and let the client's live subscription hydrate.
+  // - The query SUCCEEDS and returns `[]`: the deployment answered, and this
+  //   page genuinely does not exist. That must be a real 404, not an empty
+  //   200 — an empty 200 gets the URL indexed as a live, blank page.
+  let initialData: PagesDocument[] | undefined
+  let reachable = true
+  try {
+    initialData = await vex.query(api.pages.getBySlug, { slug: normalized })
+  } catch {
+    reachable = false
+  }
+
+  if (reachable && (!initialData || initialData.length === 0)) {
+    notFound()
+  }
+
+  const codeHighlights = await highlightPageBlocks(initialData?.[0]?.blocks)
+
+  return (
+    <PageContent codeHighlights={codeHighlights} initialData={initialData} slug={normalized} />
+  )
+}

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

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react"
+
+import { api } from "@convex/_generated/api"
+
+import type { FootersDocument, HeadersDocument } from "~/vex.types"
+
+import { SiteFooter } from "~/components/SiteFooter"
+import { SiteHeader } from "~/components/SiteHeader"
+import { ThemeStyle } from "~/components/ThemeStyle"
+import { vex } from "~/lib/vex"
+import { SiteLivePreviewProvider } from "./SiteLivePreviewProvider"
+
+/**
+ * Marketing chrome: header + footer around every site page. Auth routes live
+ * outside this group (directly under `(frontend)`), so they stay chrome-free.
+ */
+export default async function SiteLayout({
+  children,
+}: Readonly<{
+  children: ReactNode
+}>) {
+  let headerData: HeadersDocument | null = null
+  let footerData: FootersDocument | null = null
+
+  try {
+    ;[headerData, footerData] = await Promise.all([
+      vex.query(api.headers.getFirst),
+      vex.query(api.footers.getFirst),
+    ])
+  } catch {
+    // Convex not available — fall back to client-only fetch
+  }
+
+  return (
+    <SiteLivePreviewProvider>
+      <ThemeStyle />
+      {/* Sits above the sticky header so it is the first tab stop on every
+          page. Visually hidden until focused. */}
+      <a
+        className="sr-only focus-visible:not-sr-only focus-visible:fixed focus-visible:top-3 focus-visible:left-3 focus-visible:z-100 focus-visible:rounded-sm focus-visible:border focus-visible:border-border focus-visible:bg-card focus-visible:px-3 focus-visible:py-2 focus-visible:text-sm focus-visible:font-medium focus-visible:text-foreground"
+        href="#main"
+      >
+        Skip to content
+      </a>
+      <SiteHeader initialData={headerData} />
+      <main id="main">{children}</main>
+      <SiteFooter initialData={footerData} />
+    </SiteLivePreviewProvider>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { api } from "@convex/_generated/api"
+
+import type { PagesDocument } from "~/vex.types"
+
+import { generatePageMetadata } from "~/lib/metadata"
+import { highlightPageBlocks } from "~/lib/highlight"
+import { vex } from "~/lib/vex"
+
+import { PageContent } from "./PageContent"
+
+// Next requires this to be an inline literal — it is read by static analysis
+// before any module executes, so neither `vexConfig.revalidate.revalidateSeconds`
+// nor an imported constant is accepted ("Invalid segment configuration export").
+export const revalidate = 3600
+
+export async function generateMetadata() {
+  return generatePageMetadata({ slug: "home" })
+}
+
+export default async function HomePage() {
+  let initialData: PagesDocument[] | undefined
+  try {
+    initialData = await vex.query(api.pages.getBySlug, { slug: "home" })
+  } catch {
+    // Fall back to client-only fetch
+  }
+
+  const codeHighlights = await highlightPageBlocks(initialData?.[0]?.blocks)
+
+  return (
+    <PageContent codeHighlights={codeHighlights} initialData={initialData} />
+  )
+}

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

@@ -1,38 +1,24 @@
 import type { ReactNode } from "react"
 
-import { fetchQuery } from "convex/nextjs"
+import { FirstAdminBootstrap } from "~/components/FirstAdminBootstrap"
 
-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({
+/**
+ * Frontend shell: first-admin bootstrap + the `@auth` parallel slot only.
+ * The marketing chrome (header/footer) lives in the nested `(site)` group so
+ * auth routes (`/auth/sign-in`, sign-up, …) render standalone — themed via
+ * the root layout, but without the site navigation wrapped around the form.
+ */
+export default function FrontendLayout({
   auth,
   children,
 }: Readonly<{
   auth: ReactNode
   children: 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} />
+      <FirstAdminBootstrap />
+      {children}
       {auth}
     </>
   )

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import { NextAdminLayout } from "@vexcms/next/client";
+
+import { AuthServerProvider } from "~/components/providers/auth";
+import { getCurrentUser } from "~/auth/serverUtils";
+import { ThemeLive } from "~/components/ThemeLive";
+import { ThemeStyle } from "~/components/ThemeStyle";
+
+import { ClientProviders } from "./clientProviders";
+
+/**
+ * Overlays `base-nextjs`'s admin layout to wire the theme system in: base
+ * ships no theme, so its admin layout has nothing to render here. `<ThemeStyle
+ * scope="admin" />` covers first paint; `<ThemeLive scope="admin" />` keeps it
+ * live after a save in the admin panel, with no full reload. Emitted at
+ * `:root:root`, so it outranks the site theme on admin routes only. Falls
+ * back to the site theme when `siteSettings.adminTheme` is empty — see
+ * `api.theme.getAdmin`.
+ */
+export default async function AdminLayout({ children }: { children: ReactNode }) {
+  const user = await getCurrentUser();
+  return (
+    <AuthServerProvider>
+      <ClientProviders>
+        <ThemeStyle scope="admin" />
+        <ThemeLive scope="admin" />
+        <NextAdminLayout user={user ?? undefined}>{children}</NextAdminLayout>
+      </ClientProviders>
+    </AuthServerProvider>
+  );
+}