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

package/templates/marketing-site/src/vex.types.ts

@@ -4,6 +4,8 @@
 /* eslint-disable perfectionist/sort-union-types */
 /* eslint-disable perfectionist/sort-interfaces */
 /* eslint-disable perfectionist/sort-modules */
+/* eslint-disable perfectionist/sort-object-types */
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 
 import type { Id } from "@convex/_generated/dataModel"
 import type { VexDocument, VexDocumentGlobal } from "@vexcms/core"
@@ -28,16 +30,35 @@ export type HeroBlock = {
   blockType: "hero"
   blockName?: string
   id: string
+  variant?: ("full" | "compact")[]
   badgeText?: string
   badgeLink?: string
   heading: string
   subheading?: string
-  primaryCtaLabel: string
-  primaryCtaHref: string
+  installCommand?: string
+  primaryCtaLabel?: string
+  primaryCtaHref?: string
   secondaryCtaLabel?: string
   secondaryCtaHref?: string
 }
 
+export type StatsBlock = {
+  blockType: "stats"
+  blockName?: string
+  id: string
+  heading?: string
+  subheading?: string
+  items: {
+    /**
+     * Free text, not a number — "0", "12" and "~30s" all render. Any unit belongs in
+     * the string.
+     */
+    value: string
+    label: string
+    description?: string
+  }[]
+}
+
 export type FeaturesBlock = {
   blockType: "features"
   blockName?: string
@@ -54,6 +75,51 @@ export type FeaturesBlock = {
   }[]
 }
 
+export type CodeShowcaseBlock = {
+  blockType: "code_showcase"
+  blockName?: string
+  id: string
+  heading: string
+  subheading?: string
+  panes: {
+    /**
+     * Shown uppercase in the chrome bar.
+     */
+    label: string
+    filename?: string
+    language?: ("ts" | "tsx" | "bash" | "json")[]
+    /**
+     * Hand-written panes carry the primary-coloured label — the only signal separating
+     * human input from generated output.
+     */
+    authored?: ("authored" | "generated")[]
+    code: string
+    caption?: string
+  }[]
+}
+
+export type SplitBlock = {
+  blockType: "split"
+  blockName?: string
+  id: string
+  eyebrow?: string
+  heading: string
+  body: string
+  bullets?: {
+    /**
+     * Lucide icon name
+     */
+    icon?: string
+    text: string
+  }[]
+  media?: ("code" | "image" | "none")[]
+  code?: string
+  codeFilename?: string
+  codeLanguage?: ("ts" | "tsx" | "bash" | "json")[]
+  image?: Id<"images">[]
+  mediaPosition?: ("right" | "left")[]
+}
+
 export type HowItWorksBlock = {
   blockType: "how_it_works"
   blockName?: string
@@ -79,37 +145,45 @@ export type RoadmapBlock = {
   items: {
     feature: string
     description?: string
-    status: string[]
+    status: ("shipped" | "in-progress" | "planned" | "exploring" | "future")[]
   }[]
 }
 
-export type CtaBlock = {
-  blockType: "cta"
+export type FaqBlock = {
+  blockType: "faq"
   blockName?: string
   id: string
   heading: string
   subheading?: string
-  actions?: {
-    label: string
-    href: string
+  supportLink?: string
+  items: {
+    question: string
+    answer: string
   }[]
 }
 
-export type FaqBlock = {
-  blockType: "faq"
+export type CtaBlock = {
+  blockType: "cta"
   blockName?: string
   id: string
   heading: string
   subheading?: string
-  supportLink?: string
-  items: {
-    question: string
-    answer: string
+  actions?: {
+    label: string
+    href: string
   }[]
 }
 
 export type PageBlock =
-  HeroBlock | FeaturesBlock | HowItWorksBlock | RoadmapBlock | CtaBlock | FaqBlock
+  | HeroBlock
+  | StatsBlock
+  | FeaturesBlock
+  | CodeShowcaseBlock
+  | SplitBlock
+  | HowItWorksBlock
+  | RoadmapBlock
+  | FaqBlock
+  | CtaBlock
 
 export interface PagesDocument extends VexDocument {
   _id: Id<"pages">
@@ -128,6 +202,7 @@ export interface PagesDocument extends VexDocument {
    */
   metaDescription?: string
   ogImage?: Id<"images">[]
+  updatedAt?: number
 }
 export type HeaderBlock = {
   blockType: "header"
@@ -143,7 +218,7 @@ export type HeaderBlock = {
   actionButtons?: {
     label: string
     href: string
-    variant?: string[]
+    variant?: ("default" | "outline" | "ghost")[]
   }[]
 }
 
@@ -151,6 +226,7 @@ export interface HeadersDocument extends VexDocument {
   _id: Id<"headers">
   name: string
   content?: HeaderBlock[]
+  updatedAt?: number
 }
 export type FooterBlock = {
   blockType: "footer"
@@ -177,6 +253,7 @@ export interface FootersDocument extends VexDocument {
   _id: Id<"footers">
   name: string
   content?: FooterBlock[]
+  updatedAt?: number
 }
 
 export interface Theme extends VexDocument {
@@ -269,6 +346,7 @@ export interface Theme extends VexDocument {
     sidebarBorder?: string
     sidebarRing?: string
   }
+  updatedAt?: number
 }
 
 export interface SessionDocument extends VexDocument {
@@ -281,7 +359,6 @@ export interface SessionDocument extends VexDocument {
   userAgent?: string
   userId: string
   impersonatedBy?: string
-  activeOrganizationId?: string
 }
 
 export interface AccountDocument extends VexDocument {
@@ -342,34 +419,6 @@ export interface JwksDocument extends VexDocument {
   expiresAt?: number
 }
 
-export interface OrganizationDocument extends VexDocument {
-  _id: Id<"organization">
-  name: string
-  slug: string
-  logo?: string
-  createdAt: number
-  metadata?: string
-}
-
-export interface MemberDocument extends VexDocument {
-  _id: Id<"member">
-  organizationId: string
-  userId: string
-  role: string
-  createdAt: number
-}
-
-export interface InvitationDocument extends VexDocument {
-  _id: Id<"invitation">
-  organizationId: string
-  email: string
-  role?: string
-  status: string
-  expiresAt: number
-  createdAt: number
-  inviterId: string
-}
-
 export interface Image extends VexDocument {
   _id: Id<"images">
   filename: string
@@ -381,6 +430,7 @@ export interface Image extends VexDocument {
   src: string
   width?: number
   height?: number
+  updatedAt?: number
 }
 
 export interface SiteSettingsGlobal extends VexDocumentGlobal<"siteSettings"> {
@@ -434,9 +484,6 @@ export type CollectionSlug =
   | "verification"
   | "apikey"
   | "jwks"
-  | "organization"
-  | "member"
-  | "invitation"
   | "images"
 
 export type GlobalSlug = "siteSettings"
@@ -456,9 +503,6 @@ export type DocumentBySlug = {
   verification: VerificationDocument
   apikey: ApikeyDocument
   jwks: JwksDocument
-  organization: OrganizationDocument
-  member: MemberDocument
-  invitation: InvitationDocument
   images: Image
 }
 
@@ -479,9 +523,6 @@ declare module "@vexcms/core" {
       | "verification"
       | "apikey"
       | "jwks"
-      | "organization"
-      | "member"
-      | "invitation"
       | "images"
     GlobalSlug: "siteSettings"
     MediaCollectionSlug: "images"
@@ -497,9 +538,6 @@ declare module "@vexcms/core" {
       verification: VerificationDocument
       apikey: ApikeyDocument
       jwks: JwksDocument
-      organization: OrganizationDocument
-      member: MemberDocument
-      invitation: InvitationDocument
       images: Image
     }
     GlobalDocumentBySlug: {
@@ -516,23 +554,26 @@ declare module "@vexcms/core" {
         text: "title" | "slug" | "metaTitle" | "metaDescription"
         blocks: "blocks"
         upload: "ogImage"
+        number: "updatedAt"
       }
       headers: {
         text: "name"
         blocks: "content"
+        number: "updatedAt"
       }
       footers: {
         text: "name"
         blocks: "content"
+        number: "updatedAt"
       }
       themes: {
         text: "name" | "fontFamily" | "radius"
         group: "light" | "dark"
+        number: "updatedAt"
       }
       session: {
         date: "expiresAt" | "createdAt" | "updatedAt"
-        text:
-          "token" | "ipAddress" | "userAgent" | "userId" | "impersonatedBy" | "activeOrganizationId"
+        text: "token" | "ipAddress" | "userAgent" | "userId" | "impersonatedBy"
       }
       account: {
         text:
@@ -574,21 +615,9 @@ declare module "@vexcms/core" {
         text: "publicKey" | "privateKey"
         date: "createdAt" | "expiresAt"
       }
-      organization: {
-        text: "name" | "slug" | "logo" | "metadata"
-        date: "createdAt"
-      }
-      member: {
-        text: "organizationId" | "userId" | "role"
-        date: "createdAt"
-      }
-      invitation: {
-        text: "organizationId" | "email" | "role" | "status" | "inviterId"
-        date: "expiresAt" | "createdAt"
-      }
       images: {
         text: "filename" | "alt" | "mimeType" | "storageId" | "src"
-        number: "size" | "width" | "height"
+        number: "size" | "width" | "height" | "updatedAt"
         checkbox: "deleted"
       }
     }
@@ -620,15 +649,12 @@ declare module "@vexcms/core" {
         by_key: readonly ["key"]
       }
       jwks: {}
-      organization: { by_slug: readonly ["slug"] }
-      member: { by_organizationId: readonly ["organizationId"]; by_userId: readonly ["userId"] }
-      invitation: { by_organizationId: readonly ["organizationId"]; by_email: readonly ["email"] }
       images: { by_deleted: readonly ["deleted"] }
     }
     CustomActionsBySlug: {}
     AuthSlugs: {
       user: "user"
-      organization: "organization"
+      organization: never
     }
   }
 }

package/templates/marketing-site/src/vexcms/api.ts

@@ -3,7 +3,7 @@ import { createGetAuth } from "@vexcms/better-auth"
 import { vexServerApi } from "@vexcms/core/server"
 
 import { TABLE_SLUG_ORGANIZATIONS, TABLE_SLUG_SESSIONS, TABLE_SLUG_USERS } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
 
 /**
  * Bound server API — `config`/`getAuth` are threaded once here so
@@ -12,7 +12,7 @@ import config from "~/vex.config"
  *
  * Mirrors `apps/test/src/vexcms/api.ts`'s `vexServerApi` binding.
  */
-export const { get, find, search, create, remove, update, globals } = vexServerApi<DataModel>({
+export const { get, find, search, create, remove, update, globals, publishedSlugs } = vexServerApi<DataModel>({
   config,
   getAuth: createGetAuth({
     orgCollectionSlug: TABLE_SLUG_ORGANIZATIONS,

package/templates/marketing-site/src/vexcms/blocks/CTA/config.ts

@@ -19,14 +19,15 @@ export const ctaBlock = defineBlock({
     actions: array({
       label: "Actions",
       items: group({
+        label: "Action",
         fields: {
           label: text({ label: "Button Label", required: true }),
           href: text({ label: "Button Link", required: true }),
         },
       }),
       defaultValue: [
-        { label: "Get Started", href: "/docs" },
-        { label: "View on GitHub", href: "https://github.com/vexcms/vex" },
+        { label: "Get Started", href: "https://docs.vexcms.dev/guides/quickstart/" },
+        { label: "View on GitHub", href: "https://github.com/ianyimi/vex" },
       ],
     }),
   },

package/templates/marketing-site/src/vexcms/blocks/CTA/index.tsx

@@ -1,46 +1,62 @@
 import type { BlockComponentProps } from "@vexcms/react"
 
+import { buttonVariants, cn } from "@vexcms/react"
 import Link from "next/link"
 
-import { cn } from "~/lib/utils"
-import { buttonVariants } from "@vexcms/react"
+import type { CtaBlock } from "~/vex.types"
+
+import { Container } from "~/components/Container"
 
 export { ctaBlock } from "./config"
 
+
+/**
+ * CTA — the page's last surface.
+ *
+ * The only block permitted more air than a standard section: it is what
+ * separates the page from the footer. Shares `bg-card` with Stats, so the two
+ * must never sit adjacent.
+ *
+ * `actions` has no variant field, so the renderer assigns by index — first
+ * solid, the rest outline.
+ */
 export default function CTABlock({ block }: BlockComponentProps) {
-  const { heading, subheading, actions } = block as unknown as {
-    heading: string
-    subheading?: string
-    actions?: Array<{ label: string; href: string }>
-  }
+  const { actions, heading, subheading } = block as CtaBlock
+  const items = actions ?? []
 
   return (
-    <section className="py-16 md:py-32">
-      <div className="mx-auto max-w-5xl px-6">
-        <div className="text-center">
-          <h2 className="text-4xl font-semibold text-balance lg:text-5xl">
-            {heading}
-          </h2>
-          {subheading && <p className="mt-4">{subheading}</p>}
-
-          <div className="mt-12 flex flex-wrap justify-center gap-4">
-            {(actions ?? []).map((action, index) => (
+    <section className="border-y border-border bg-card py-16 text-center md:py-24 xl:py-32">
+      <Container>
+        <h2 className="mx-auto max-w-[24ch] text-[28px] leading-[1.12] font-bold tracking-[-0.03em] text-balance text-foreground md:text-4xl xl:text-[40px]">
+          {heading}
+        </h2>
+
+        {subheading ? (
+          <p className="mx-auto mt-5 max-w-[60ch] text-[17px] leading-[1.6] text-pretty text-muted-foreground">
+            {subheading}
+          </p>
+        ) : null}
+
+        {items.length > 0 ? (
+          <div className="mx-auto mt-9 flex w-full max-w-[320px] flex-col gap-3 sm:max-w-none sm:flex-row sm:flex-wrap sm:justify-center">
+            {items.map((action, index) => (
               <Link
-                key={index}
-                href={action.href ?? "/"}
                 className={cn(
                   buttonVariants({
                     size: "lg",
-                    variant: index % 2 === 1 ? "outline" : "default",
-                  })
+                    variant: index === 0 ? "default" : "outline",
+                  }),
+                  "active:translate-y-px"
                 )}
+                href={action.href}
+                key={`${action.label}-${index}`}
               >
-                <span>{action.label}</span>
+                {action.label}
               </Link>
             ))}
           </div>
-        </div>
-      </div>
+        ) : null}
+      </Container>
     </section>
   )
 }

package/templates/marketing-site/src/vexcms/blocks/CodeShowcase/config.ts

@@ -0,0 +1,62 @@
+import { array, defineBlock, group, select, text } from "@vexcms/core"
+
+import { BLOCK_SLUG_CODE_SHOWCASE } from "../constants"
+
+export const codeShowcaseBlock = defineBlock({
+  slug: BLOCK_SLUG_CODE_SHOWCASE,
+  label: "Code Showcase",
+  fields: {
+    heading: text({
+      label: "Heading",
+      required: true,
+      defaultValue: "Write the collection. Get the database.",
+    }),
+    subheading: text({
+      label: "Subheading",
+      defaultValue:
+        "The left pane is hand-written; the right one is the Convex schema vex dev emits from it and never edited.",
+    }),
+    panes: array({
+      label: "Panes",
+      required: true,
+      description:
+        "Two panes render side by side in one frame. Three or more render as a tab set.",
+      items: group({
+        label: "Pane",
+        fields: {
+          label: text({
+            label: "Pane Label",
+            required: true,
+            description: "Shown uppercase in the chrome bar.",
+          }),
+          filename: text({ label: "Filename" }),
+          language: select({
+            label: "Language",
+            options: [
+              { label: "TypeScript", value: "ts" },
+              { label: "TSX", value: "tsx" },
+              { label: "Shell", value: "bash" },
+              { label: "JSON", value: "json" },
+            ],
+            defaultValue: ["ts"],
+          }),
+          authored: select({
+            label: "Origin",
+            description:
+              "Hand-written panes carry the primary-coloured label — the only signal separating human input from generated output.",
+            options: [
+              { label: "Hand-written", value: "authored" },
+              { label: "Generated", value: "generated" },
+            ],
+            defaultValue: ["generated"],
+          }),
+          code: text({ label: "Code", required: true }),
+          caption: text({ label: "Caption" }),
+        },
+      }),
+    }),
+  },
+  admin: {
+    icon: "FileCode",
+  },
+})

package/templates/marketing-site/src/vexcms/blocks/CodeShowcase/index.tsx

@@ -0,0 +1,106 @@
+import type { BlockComponentProps } from "@vexcms/react"
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@vexcms/react"
+import { Fragment } from "react"
+
+import type { CodeShowcaseBlock } from "~/vex.types"
+
+import { CodePane } from "~/components/CodePane"
+import { Container } from "~/components/Container"
+import { SectionHeader } from "~/components/SectionHeader"
+
+export { codeShowcaseBlock } from "./config"
+
+
+
+/**
+ * CodeShowcase — the config, and the file it wrote.
+ *
+ * Two panes share one frame with a single seam, so the pairing reads as one
+ * artefact rather than two cards. Three or more become a tab set inside the
+ * same frame. Zero panes render nothing — an empty frame is worse than no
+ * section.
+ */
+export default function CodeShowcaseBlock({ block }: BlockComponentProps) {
+  const { heading, panes, subheading } = block as CodeShowcaseBlock
+  const items = panes ?? []
+
+  if (items.length === 0) {return null}
+
+  const hasCaption = items.some((pane) => Boolean(pane.caption))
+
+  return (
+    <section className="py-14 md:py-20 xl:py-28">
+      <Container>
+        <SectionHeader heading={heading} subheading={subheading} />
+
+        {items.length > 2 ? (
+          <Tabs className="overflow-hidden rounded-md border border-border" defaultValue="0">
+            <TabsList className="h-10 w-full justify-start rounded-none border-b border-border bg-card px-2">
+              {items.map((pane, index) => (
+                <TabsTrigger
+                  className="rounded-sm px-3 py-[5px] text-[13px] font-medium"
+                  key={`${pane.label}-${index}`}
+                  value={String(index)}
+                >
+                  {pane.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            {items.map((pane, index) => (
+              <TabsContent key={`${pane.label}-panel-${index}`} value={String(index)}>
+                <CodePane
+                  code={pane.code}
+                  filename={pane.filename}
+                  language={pane.language}
+                  tone={readTone(pane.authored)}
+                />
+              </TabsContent>
+            ))}
+          </Tabs>
+        ) : (
+          // The 1px middle track is the seam. `minmax(0,1fr)` on the pane
+          // columns is what lets the panes scroll instead of overflowing.
+          <div className="grid items-stretch overflow-hidden rounded-md border border-border xl:grid-cols-[minmax(0,1fr)_1px_minmax(0,1fr)]">
+            {items.map((pane, index) => (
+              // The keyed Fragment is what React needs: keys on the children
+              // inside a bare `<>` do not count, so this logged "Each child in
+              // a list should have a unique key prop" on every render.
+              <Fragment key={`${pane.label}-${index}`}>
+                {index > 0 ? (
+                  <div aria-hidden className="bg-border max-xl:h-px xl:w-px" />
+                ) : null}
+                <CodePane
+                  code={pane.code}
+                  filename={pane.filename}
+                  label={pane.label}
+                  language={pane.language}
+                  tone={readTone(pane.authored)}
+                />
+              </Fragment>
+            ))}
+          </div>
+        )}
+
+        {hasCaption ? (
+          <div className="mt-3 grid gap-3 xl:grid-cols-[minmax(0,1fr)_1px_minmax(0,1fr)]">
+            {items.map((pane, index) => (
+              <Fragment key={`caption-${pane.label}-${index}`}>
+                {index > 0 ? <div aria-hidden /> : null}
+                <p className="text-[13px] leading-[1.55] text-muted-foreground">
+                  {pane.caption ?? ""}
+                </p>
+              </Fragment>
+            ))}
+          </div>
+        ) : null}
+      </Container>
+    </section>
+  )
+}
+
+/** `select` stores an array; `[0]` with a literal fallback survives both. */
+function readTone(value: string | string[] | undefined): "authored" | "generated" {
+  const raw = Array.isArray(value) ? value[0] : value
+  return raw === "authored" ? "authored" : "generated"
+}

package/templates/marketing-site/src/vexcms/blocks/FAQ/config.ts

@@ -18,13 +18,14 @@ export const faqBlock = defineBlock({
     }),
     supportLink: text({
       label: "Support Link",
-      defaultValue: "https://github.com/vexcms/vex/issues",
+      defaultValue: "https://github.com/ianyimi/vex/issues",
       description: "URL to contact support page",
     }),
     items: array({
       label: "FAQ Items",
       required: true,
       items: group({
+        label: "Question",
         fields: {
           question: text({ label: "Question", required: true }),
           answer: text({ label: "Answer", required: true }),
@@ -34,7 +35,7 @@ export const faqBlock = defineBlock({
         {
           question: "What is Vex CMS?",
           answer:
-            "Vex CMS is a headless content management system built on Convex. It provides real-time data, type-safe schemas, draft/publish workflows, live preview, and a beautiful admin panel — all configured with TypeScript.",
+            "Vex CMS is a headless content management system built on Convex. It provides real-time data, type-safe schemas, database-driven theming, role-based access control, and a full admin panel — all configured in TypeScript. Versioning, drafts, and live preview are in progress; see the roadmap.",
         },
         {
           question: "How is Vex different from other headless CMS platforms?",
@@ -59,7 +60,7 @@ export const faqBlock = defineBlock({
         {
           question: "How do I get started?",
           answer:
-            "Run `npx create-vexcms@latest` to scaffold a new project with Vex CMS pre-configured. The CLI sets up your Next.js app, Convex backend, authentication, and admin panel in under a minute.",
+            "Run `npx create-vexcms@alpha` to scaffold a new project with Vex CMS pre-configured. The CLI sets up your Next.js app, Convex backend, authentication, and admin panel in under a minute.",
         },
       ],
     }),