create-vexcms 0.0.7 → 0.0.9

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

@@ -0,0 +1,52 @@
+import { defineBlock, text } from "@vexcms/core"
+
+import { BLOCK_SLUG_HERO } from "../constants"
+
+export const heroBlock = defineBlock({
+  slug: BLOCK_SLUG_HERO,
+  label: "Hero Section",
+  fields: {
+    badgeText: text({
+      label: "Badge Text",
+      defaultValue: "Now in public beta",
+      admin: { description: "Small text shown in the announcement badge" },
+    }),
+    badgeLink: text({
+      label: "Badge Link",
+      defaultValue: "/docs",
+      admin: { description: "URL the badge links to" },
+    }),
+    heading: text({
+      label: "Heading",
+      required: true,
+      defaultValue: "The CMS built for Convex",
+    }),
+    subheading: text({
+      label: "Subheading",
+      defaultValue:
+        "Vex CMS gives you a full-featured content management system powered by Convex — real-time data, type-safe schemas, and a beautiful admin panel out of the box.",
+    }),
+    primaryCtaLabel: text({
+      label: "Primary CTA Label",
+      required: true,
+      defaultValue: "Get Started",
+    }),
+    primaryCtaHref: text({
+      label: "Primary CTA Link",
+      required: true,
+      defaultValue: "/docs",
+    }),
+    secondaryCtaLabel: text({
+      label: "Secondary CTA Label",
+      defaultValue: "View on GitHub",
+    }),
+    secondaryCtaHref: text({
+      label: "Secondary CTA Link",
+      defaultValue: "https://github.com/vexcms/vex",
+    }),
+  },
+  admin: {
+    icon: "sparkles",
+    blockStyles: ["container", "text"],
+  },
+})

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

@@ -0,0 +1,152 @@
+"use client"
+
+import type { BlockComponentProps } from "@vexcms/ui"
+
+import { ArrowRight } from "lucide-react"
+import Link from "next/link"
+
+import { cn } from "~/lib/utils"
+import { AnimatedGroup } from "~/components/motion-primitives/animated-group"
+import { TextEffect } from "~/components/motion-primitives/text-effect"
+import { buttonVariants } from "~/components/ui/button"
+
+export { heroBlock } from "./config"
+
+const transitionVariants = {
+  item: {
+    hidden: {
+      filter: "blur(12px)",
+      opacity: 0,
+      y: 12,
+    },
+    visible: {
+      filter: "blur(0px)",
+      opacity: 1,
+      transition: {
+        type: "spring",
+        bounce: 0.3,
+        duration: 1.5,
+      },
+      y: 0,
+    },
+  },
+}
+
+export default function HeroBlock({ block, blockStyles }: BlockComponentProps) {
+  const {
+    badgeText,
+    badgeLink,
+    heading,
+    subheading,
+    primaryCtaLabel,
+    primaryCtaHref,
+    secondaryCtaLabel,
+    secondaryCtaHref,
+  } = block as Record<string, string>
+
+  return (
+    <div className={cn("overflow-hidden", blockStyles)}>
+      <div
+        aria-hidden
+        className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
+      >
+        <div className="absolute top-0 left-0 h-320 w-140 -translate-y-87.5 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
+        <div className="absolute top-0 left-0 h-320 w-60 [translate:5%_-50%] -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
+        <div className="absolute top-0 left-0 h-320 w-60 -translate-y-87.5 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
+      </div>
+      <section>
+        <div className="relative min-h-[90vh] flex flex-col items-center justify-center">
+          <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]" />
+          <div className="mx-auto max-w-7xl px-6">
+            <div className="text-center sm:mx-auto lg:mr-auto">
+              {badgeText && badgeLink && (
+                <AnimatedGroup
+                  // @ts-expect-error variant type mismatch
+                  variants={transitionVariants}
+                >
+                  <Link
+                    className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
+                    href={badgeLink}
+                  >
+                    <span className="text-foreground text-sm">
+                      {badgeText}
+                    </span>
+                    <span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700" />
+                    <div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
+                      <div className="flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
+                        <span className="flex size-6">
+                          <ArrowRight className="m-auto size-3" />
+                        </span>
+                        <span className="flex size-6">
+                          <ArrowRight className="m-auto size-3" />
+                        </span>
+                      </div>
+                    </div>
+                  </Link>
+                </AnimatedGroup>
+              )}
+
+              <TextEffect
+                as="h1"
+                className="mt-8 text-6xl text-balance md:text-7xl lg:mt-16 xl:text-[5.25rem]"
+                preset="fade-in-blur"
+                speedSegment={0.3}
+              >
+                {heading ?? ""}
+              </TextEffect>
+              <TextEffect
+                as="p"
+                className="mx-auto mt-8 max-w-2xl text-lg text-balance text-muted-foreground"
+                delay={0.5}
+                per="line"
+                preset="fade-in-blur"
+                speedSegment={0.3}
+              >
+                {subheading ?? ""}
+              </TextEffect>
+
+              <AnimatedGroup
+                className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
+                // @ts-expect-error variant type mismatch
+                variants={{
+                  container: {
+                    visible: {
+                      transition: {
+                        delayChildren: 0.75,
+                        staggerChildren: 0.05,
+                      },
+                    },
+                  },
+                  ...transitionVariants,
+                }}
+              >
+                <div className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5">
+                  <Link
+                    href={primaryCtaHref ?? "/"}
+                    className={cn(
+                      buttonVariants({ size: "lg" }),
+                      "rounded-xl px-5 text-base"
+                    )}
+                  >
+                    <span className="text-nowrap">{primaryCtaLabel}</span>
+                  </Link>
+                </div>
+                {secondaryCtaLabel && (
+                  <Link
+                    href={secondaryCtaHref ?? "/"}
+                    className={cn(
+                      buttonVariants({ variant: "ghost", size: "lg" }),
+                      "h-10.5 rounded-xl px-5"
+                    )}
+                  >
+                    <span className="text-nowrap">{secondaryCtaLabel}</span>
+                  </Link>
+                )}
+              </AnimatedGroup>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,68 @@
+import { array, defineBlock, object, text } from "@vexcms/core"
+
+import IconPickerField from "~/components/admin/IconPickerField"
+import { BLOCK_SLUG_HOW_IT_WORKS } from "../constants"
+
+export const howItWorksBlock = defineBlock({
+  slug: BLOCK_SLUG_HOW_IT_WORKS,
+  label: "How It Works",
+  fields: {
+    heading: text({
+      label: "Heading",
+      required: true,
+      defaultValue: "Get started in minutes",
+    }),
+    subheading: text({
+      label: "Subheading",
+      defaultValue:
+        "From zero to a fully functional CMS in four steps. No boilerplate, no config files to wrestle with.",
+    }),
+    steps: array({
+      label: "Steps",
+      required: true,
+      items: object({
+        fields: {
+          icon: text({
+            label: "Icon",
+            admin: {
+              description: "Lucide icon name",
+              components: { Field: IconPickerField },
+            },
+          }),
+          title: text({ label: "Title", required: true }),
+          description: text({ label: "Description", required: true }),
+        },
+      }),
+      defaultValue: [
+        {
+          icon: "Terminal",
+          title: "Scaffold your project",
+          description:
+            "Run npx create-vexcms@latest to get a Next.js app with Convex, authentication, and the admin panel pre-configured.",
+        },
+        {
+          icon: "Code",
+          title: "Define your schema",
+          description:
+            "Use defineCollection() and field helpers to declare your content model in TypeScript. Vex generates your Convex schema, types, and queries automatically.",
+        },
+        {
+          icon: "LayoutGrid",
+          title: "Build with blocks",
+          description:
+            "Compose pages from reusable content blocks. Each block is a React component with a typed config — drag, drop, and edit inline from the admin panel.",
+        },
+        {
+          icon: "Rocket",
+          title: "Deploy and go live",
+          description:
+            "Push to Convex and deploy your Next.js app. Real-time content updates flow to every connected client instantly — no cache invalidation needed.",
+        },
+      ],
+    }),
+  },
+  admin: {
+    icon: "list-ordered",
+    blockStyles: ["container", "text"],
+  },
+})

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