create-vexcms 0.0.8 → 0.0.10

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

@@ -0,0 +1,74 @@
+"use client"
+
+import type { BlockComponentProps } from "@vexcms/ui"
+
+import { icons } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+export { howItWorksBlock } from "./config"
+
+function LucideIcon({ name }: { name: string }) {
+  const Icon = icons[name as keyof typeof icons]
+  if (!Icon) return null
+  return <Icon className="size-5" />
+}
+
+export default function HowItWorksBlock({
+  block,
+  blockStyles,
+}: BlockComponentProps) {
+  const { heading, subheading, steps } = block as unknown as {
+    heading: string
+    subheading?: string
+    steps?: Array<{ icon?: string; title: string; description: string }>
+  }
+
+  return (
+    <section className={cn("py-16 md:py-32", blockStyles)}>
+      <div className="mx-auto max-w-3xl px-6">
+        <div className="text-center">
+          <h2 className="text-4xl font-semibold text-balance lg:text-5xl">
+            {heading}
+          </h2>
+          {subheading && (
+            <p className="text-muted-foreground mt-4 text-balance">
+              {subheading}
+            </p>
+          )}
+        </div>
+
+        <div className="mt-16">
+          {(steps ?? []).map((step, index) => {
+            const isLast = index === (steps?.length ?? 1) - 1
+
+            return (
+              <div key={index} className="flex flex-row gap-6">
+                <div className="flex flex-col items-center">
+                  <div className="bg-primary text-primary-foreground flex size-10 shrink-0 items-center justify-center rounded-full">
+                    {step.icon ? (
+                      <LucideIcon name={step.icon} />
+                    ) : (
+                      <span className="text-sm font-semibold">
+                        {index + 1}
+                      </span>
+                    )}
+                  </div>
+                  {!isLast && (
+                    <div className="bg-border w-px flex-1" />
+                  )}
+                </div>
+                <div className={cn("flex-1", !isLast && "pb-10")}>
+                  <h3 className="text-lg font-semibold">{step.title}</h3>
+                  <p className="text-muted-foreground mt-1">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,154 @@
+import { array, defineBlock, object, select, text } from "@vexcms/core"
+
+import { BLOCK_SLUG_ROADMAP } from "../constants"
+
+export const roadmapBlock = defineBlock({
+  slug: BLOCK_SLUG_ROADMAP,
+  label: "Roadmap",
+  fields: {
+    heading: text({
+      label: "Heading",
+      required: true,
+      defaultValue: "Roadmap",
+    }),
+    subheading: text({
+      label: "Subheading",
+      defaultValue:
+        "What we've shipped and what's coming next. Vex CMS is actively developed — here's where we're headed.",
+    }),
+    items: array({
+      label: "Roadmap Items",
+      required: true,
+      items: object({
+        fields: {
+          feature: text({ label: "Feature Name", required: true }),
+          description: text({ label: "Description" }),
+          status: select({
+            label: "Status",
+            required: true,
+            options: [
+              { label: "Shipped", value: "shipped" },
+              { label: "Coming Soon", value: "coming-soon" },
+              { label: "Planned", value: "planned" },
+            ],
+            defaultValue: "shipped",
+          }),
+        },
+      }),
+      defaultValue: [
+        {
+          feature: "16 Field Types",
+          description:
+            "Text, number, select, date, relationship, upload, richtext, blocks, color, tabs, and more.",
+          status: "shipped",
+        },
+        {
+          feature: "Admin Panel",
+          description:
+            "Full-featured admin UI with list views, edit forms, media library, and draft/publish workflow.",
+          status: "shipped",
+        },
+        {
+          feature: "Real-Time Queries",
+          description:
+            "Every query is live via Convex. Content updates appear instantly across all connected clients.",
+          status: "shipped",
+        },
+        {
+          feature: "Live Preview",
+          description:
+            "Side-by-side iframe preview with responsive breakpoints and real-time updates as you edit.",
+          status: "shipped",
+        },
+        {
+          feature: "Block System",
+          description:
+            "Compose pages from reusable content blocks with drag-and-drop reordering and inline editing.",
+          status: "shipped",
+        },
+        {
+          feature: "Authentication & RBAC",
+          description:
+            "Better Auth integration with role-based access control at the document and field level.",
+          status: "shipped",
+        },
+        {
+          feature: "Rich Text Editor",
+          description:
+            "Plate.js-powered editor with media uploads, links, tables, and custom elements.",
+          status: "shipped",
+        },
+        {
+          feature: "CLI & Scaffolding",
+          description:
+            "vex dev with watch/generate, and create-vexcms for instant project setup.",
+          status: "shipped",
+        },
+        {
+          feature: "Theme System",
+          description:
+            "Database-driven themes with light/dark mode, CSS variables, and OKLCH color support.",
+          status: "shipped",
+        },
+        {
+          feature: "Block Styles",
+          description:
+            "Per-block responsive styling with Tailwind presets — margin, padding, typography, layout, and more.",
+          status: "shipped",
+        },
+        {
+          feature: "Content Scheduling",
+          description:
+            "Set a publishAt timestamp and content goes live automatically via Convex scheduled functions.",
+          status: "coming-soon",
+        },
+        {
+          feature: "Team Management",
+          description:
+            "Invite users, assign roles, and manage pending invitations from the admin panel.",
+          status: "coming-soon",
+        },
+        {
+          feature: "API Keys",
+          description:
+            "Read-only API tokens for external integrations with configurable rate limiting.",
+          status: "coming-soon",
+        },
+        {
+          feature: "Audit Log",
+          description:
+            "Track who changed what and when across all collections and documents.",
+          status: "coming-soon",
+        },
+        {
+          feature: "Environments",
+          description:
+            "Project-level content branching with staging and production environments and atomic promotion.",
+          status: "planned",
+        },
+        {
+          feature: "Localization",
+          description:
+            "i18n field variants with per-locale versioning and content translation workflows.",
+          status: "planned",
+        },
+        {
+          feature: "Approval Workflows",
+          description:
+            "Review and sign-off steps before content goes live. Configurable multi-step approval chains.",
+          status: "planned",
+        },
+        {
+          feature: "Plugin System",
+          description:
+            "Extend VEX with community plugins for custom fields, integrations, and admin panel features.",
+          status: "planned",
+        },
+      ],
+    }),
+  },
+  admin: {
+    icon: "map",
+    blockStyles: ["container"],
+  },
+})

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

@@ -0,0 +1,122 @@
+"use client"
+
+import type { BlockComponentProps } from "@vexcms/ui"
+
+import { Check, Clock, Compass } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+export { roadmapBlock } from "./config"
+
+const statusConfig = {
+  shipped: {
+    label: "Shipped",
+    icon: Check,
+    badgeClass:
+      "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  },
+  "coming-soon": {
+    label: "Coming Soon",
+    icon: Clock,
+    badgeClass:
+      "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  },
+  planned: {
+    label: "Planned",
+    icon: Compass,
+    badgeClass:
+      "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
+  },
+} as const
+
+type RoadmapItem = {
+  feature: string
+  description?: string
+  status: "shipped" | "coming-soon" | "planned"
+}
+
+type StatusKey = keyof typeof statusConfig
+
+const statusOrder: StatusKey[] = ["shipped", "coming-soon", "planned"]
+
+export default function RoadmapBlock({
+  block,
+  blockStyles,
+}: BlockComponentProps) {
+  const { heading, subheading, items } = block as unknown as {
+    heading: string
+    subheading?: string
+    items?: RoadmapItem[]
+  }
+
+  const grouped = statusOrder
+    .map((status) => ({
+      status,
+      config: statusConfig[status],
+      items: (items ?? []).filter(
+        (item) => item.status === status && item.status in statusConfig
+      ),
+    }))
+    .filter((group) => group.items.length > 0)
+
+  return (
+    <section className={cn("py-16 md:py-32", blockStyles)}>
+      <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="text-muted-foreground mt-4 text-balance">
+              {subheading}
+            </p>
+          )}
+        </div>
+
+        {grouped.map((group, groupIndex) => {
+          const StatusIcon = group.config.icon
+
+          return (
+            <div key={group.status} className={groupIndex === 0 ? "mt-16" : "mt-12"}>
+              <div className="flex items-center gap-2">
+                <StatusIcon className="size-5" />
+                <h3 className="text-lg font-semibold">{group.config.label}</h3>
+              </div>
+
+              <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {group.items.map((item, itemIndex) => {
+                  const BadgeIcon = group.config.icon
+
+                  return (
+                    <div
+                      key={itemIndex}
+                      className="bg-card rounded-xl border p-5"
+                    >
+                      <div className="flex items-center justify-between gap-4">
+                        <span className="font-medium">{item.feature}</span>
+                        <span
+                          className={cn(
+                            "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium",
+                            group.config.badgeClass
+                          )}
+                        >
+                          <BadgeIcon className="size-3" />
+                          {group.config.label}
+                        </span>
+                      </div>
+                      {item.description && (
+                        <p className="text-muted-foreground mt-2 text-sm">
+                          {item.description}
+                        </p>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,40 @@
+// Block configs only — no React/motion dependencies
+// Safe to import from collections and server-side code
+import { heroBlock } from "./Hero/config"
+import { featuresBlock } from "./Features/config"
+import { ctaBlock } from "./CTA/config"
+import { faqBlock } from "./FAQ/config"
+import { headerBlock } from "./Header/config"
+import { footerBlock } from "./Footer/config"
+import { howItWorksBlock } from "./HowItWorks/config"
+import { roadmapBlock } from "./Roadmap/config"
+
+/** Page content block definitions */
+export const pageBlocks = [
+  heroBlock,
+  featuresBlock,
+  howItWorksBlock,
+  roadmapBlock,
+  ctaBlock,
+  faqBlock,
+]
+
+/** Header block definitions */
+export const headerBlocks = [headerBlock]
+
+/** Footer block definitions */
+export const footerBlocks = [footerBlock]
+
+/** All block definitions combined */
+export const allBlocks = [...pageBlocks, ...headerBlocks, ...footerBlocks]
+
+export {
+  heroBlock,
+  featuresBlock,
+  ctaBlock,
+  faqBlock,
+  headerBlock,
+  footerBlock,
+  howItWorksBlock,
+  roadmapBlock,
+}

package/templates/marketing-site/src/vexcms/blocks/constants.ts

@@ -0,0 +1,9 @@
+// Block slugs
+export const BLOCK_SLUG_HERO = "hero" as const
+export const BLOCK_SLUG_FEATURES = "features" as const
+export const BLOCK_SLUG_CTA = "cta" as const
+export const BLOCK_SLUG_FAQ = "faq" as const
+export const BLOCK_SLUG_HEADER = "header" as const
+export const BLOCK_SLUG_FOOTER = "footer" as const
+export const BLOCK_SLUG_HOW_IT_WORKS = "how_it_works" as const
+export const BLOCK_SLUG_ROADMAP = "roadmap" as const

package/templates/marketing-site/src/vexcms/blocks/index.ts

@@ -0,0 +1,39 @@
+import type { BlockComponentProps } from "@vexcms/ui"
+import type { ComponentType } from "react"
+
+import {
+  BLOCK_SLUG_CTA,
+  BLOCK_SLUG_FAQ,
+  BLOCK_SLUG_FEATURES,
+  BLOCK_SLUG_FOOTER,
+  BLOCK_SLUG_HEADER,
+  BLOCK_SLUG_HERO,
+  BLOCK_SLUG_HOW_IT_WORKS,
+  BLOCK_SLUG_ROADMAP,
+} from "./constants"
+import CTABlock from "./CTA"
+import FAQBlock from "./FAQ"
+import FeaturesBlock from "./Features"
+import FooterBlock from "./Footer"
+import HeaderBlock from "./Header"
+import HeroBlock from "./Hero"
+import HowItWorksBlock from "./HowItWorks"
+import RoadmapBlock from "./Roadmap"
+
+/** Block component map for use with RenderBlocks */
+export const blockComponents: Record<
+  string,
+  ComponentType<BlockComponentProps>
+> = {
+  [BLOCK_SLUG_CTA]: CTABlock,
+  [BLOCK_SLUG_FAQ]: FAQBlock,
+  [BLOCK_SLUG_FEATURES]: FeaturesBlock,
+  [BLOCK_SLUG_FOOTER]: FooterBlock,
+  [BLOCK_SLUG_HEADER]: HeaderBlock,
+  [BLOCK_SLUG_HERO]: HeroBlock,
+  [BLOCK_SLUG_HOW_IT_WORKS]: HowItWorksBlock,
+  [BLOCK_SLUG_ROADMAP]: RoadmapBlock,
+}
+
+// Re-export configs for convenience in client code
+export { allBlocks, footerBlocks, headerBlocks, pageBlocks } from "./config"

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

@@ -1,6 +1,7 @@
-import { defineCollection, richtext, text } from "@vexcms/core"
+import { blocks, defineCollection, text } from "@vexcms/core"
 
-import { TABLE_SLUG_FOOTERS, TABLE_SLUG_MEDIA } from "~/db/constants"
+import { TABLE_SLUG_FOOTERS } from "~/db/constants"
+import { footerBlocks } from "~/vexcms/blocks/config"
 
 export const footers = defineCollection({
   slug: TABLE_SLUG_FOOTERS,
@@ -13,12 +14,14 @@ export const footers = defineCollection({
       label: "Name",
       required: true,
     }),
-    content: richtext({
-      label: "Content",
-      mediaCollection: TABLE_SLUG_MEDIA,
-    }),
-    copyright: text({
-      label: "Copyright Text",
+    content: blocks({
+      blocks: footerBlocks,
+      label: "Footer",
+      max: 1,
+      labels: {
+        singular: "Footer",
+        plural: "Footers",
+      },
     }),
   },
   labels: {

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

@@ -1,6 +1,7 @@
-import { checkbox, defineCollection, text, upload } from "@vexcms/core"
+import { blocks, defineCollection, text } from "@vexcms/core"
 
-import { TABLE_SLUG_HEADERS, TABLE_SLUG_MEDIA } from "~/db/constants"
+import { TABLE_SLUG_HEADERS } from "~/db/constants"
+import { headerBlocks } from "~/vexcms/blocks/config"
 
 export const headers = defineCollection({
   slug: TABLE_SLUG_HEADERS,
@@ -13,19 +14,14 @@ export const headers = defineCollection({
       label: "Name",
       required: true,
     }),
-    logoText: text({
-      label: "Logo Text",
-    }),
-    logoUrl: upload({
-      admin: {
-        description: "URL for the header logo image",
+    content: blocks({
+      blocks: headerBlocks,
+      label: "Header",
+      max: 1,
+      labels: {
+        singular: "Header",
+        plural: "Headers",
       },
-      label: "Logo URL",
-      to: TABLE_SLUG_MEDIA,
-    }),
-    sticky: checkbox({
-      defaultValue: false,
-      label: "Sticky Header",
     }),
   },
   labels: {

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

@@ -2,6 +2,5 @@ export * from "./footers"
 export * from "./headers"
 export * from "./media"
 export * from "./pages"
-export * from "./site_settings"
 export * from "./themes"
 export * from "./users"

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

@@ -1,6 +1,7 @@
-import { defineCollection, richtext, text } from "@vexcms/core"
+import { blocks, defineCollection, imageUrl, text } from "@vexcms/core"
 
-import { TABLE_SLUG_MEDIA, TABLE_SLUG_PAGES } from "~/db/constants"
+import { TABLE_SLUG_PAGES } from "~/db/constants"
+import { pageBlocks } from "~/vexcms/blocks/config"
 
 export const pages = defineCollection({
   slug: TABLE_SLUG_PAGES,
@@ -25,9 +26,34 @@ export const pages = defineCollection({
       label: "Slug",
       required: true,
     }),
-    content: richtext({
+    content: blocks({
+      blocks: pageBlocks,
       label: "Content",
-      mediaCollection: TABLE_SLUG_MEDIA,
+      labels: {
+        singular: "Block",
+        plural: "Blocks",
+      },
+    }),
+    metaTitle: text({
+      label: "Meta Title",
+      admin: {
+        description: "Custom <title> tag. Falls back to page title if empty.",
+        position: "sidebar",
+      },
+    }),
+    metaDescription: text({
+      label: "Meta Description",
+      admin: {
+        description: "Custom meta description for search results.",
+        position: "sidebar",
+      },
+    }),
+    ogImage: imageUrl({
+      label: "OG Image",
+      admin: {
+        description: "Custom Open Graph image URL for social sharing.",
+        position: "sidebar",
+      },
     }),
   },
   labels: {