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

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

@@ -0,0 +1,77 @@
+import type { BlockComponentProps } from "@vexcms/react"
+
+import { cn } from "@vexcms/react"
+
+import type { StatsBlock } from "~/vex.types"
+
+import { Container } from "~/components/Container"
+import { SectionHeader } from "~/components/SectionHeader"
+
+export { statsBlock } from "./config"
+
+
+/** Beyond this length the value stops being a headline number and has to
+ *  step down a size to keep the cell from breaking. */
+const LONG_VALUE_CHARS = 6
+
+/**
+ * Stats — four numbers on a raised band.
+ *
+ * Shorter than a standard block on purpose: this is a caption on the hero,
+ * not a section. Cells are separated by 1px dividers rather than gaps, and
+ * values are top-aligned per cell rather than baseline-aligned to each other,
+ * so `"0"`, `"12"` and `"~30s"` all sit correctly next to one another.
+ */
+export default function StatsBlock({ block }: BlockComponentProps) {
+  const { heading, items, subheading } = block as StatsBlock
+  const stats = items ?? []
+
+  if (stats.length === 0) {return null}
+
+  return (
+    <section className="border-y border-border bg-card py-10 md:py-14 xl:py-16">
+      <Container>
+        <SectionHeader heading={heading} subheading={subheading} />
+
+        <dl
+          className={cn(
+            "grid grid-cols-1 divide-y divide-border md:divide-y-0",
+            stats.length > 1 && "md:grid-cols-2 md:divide-x xl:grid-cols-4"
+          )}
+        >
+          {stats.map((stat, index) => (
+            <div
+              className={cn(
+                "flex flex-col items-start py-6 md:px-8 md:py-0",
+                // The first cell of each row owns the left edge, so it must not
+                // draw a divider; at md that is every other cell, at xl every
+                // fourth. Rows after the first take a top rule instead.
+                "md:[&:nth-child(odd)]:border-l-0 xl:[&:nth-child(odd)]:border-l xl:[&:nth-child(4n+1)]:border-l-0",
+                index >= 2 && "md:border-t md:border-border xl:border-t-0",
+                index >= 4 && "xl:border-t xl:border-border"
+              )}
+              key={`${stat.label}-${index}`}
+            >
+              <dd
+                className={cn(
+                  "font-extrabold tracking-[-0.04em] tabular-nums text-foreground",
+                  stat.value.length > LONG_VALUE_CHARS
+                    ? "text-3xl md:text-4xl"
+                    : "text-[40px] leading-none md:text-5xl xl:text-[56px]"
+                )}
+              >
+                {stat.value}
+              </dd>
+              <dt className="mt-3.5 text-[15px] font-semibold text-foreground">{stat.label}</dt>
+              {stat.description ? (
+                <p className="mt-2 max-w-[30ch] text-[13.5px] leading-[1.55] text-muted-foreground">
+                  {stat.description}
+                </p>
+              ) : null}
+            </div>
+          ))}
+        </dl>
+      </Container>
+    </section>
+  )
+}

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

@@ -1,25 +1,41 @@
+import { codeShowcaseBlock } from "./CodeShowcase/config"
+import { ctaBlock } from "./CTA/config"
+import { faqBlock } from "./FAQ/config"
+import { featuresBlock } from "./Features/config"
+import { footerBlock } from "./Footer/config"
+import { headerBlock } from "./Header/config"
 // Block configs only — no React/motion dependencies. Safe to import from
 // collections, vex.config.ts, and convex/seed.ts.
 import { heroBlock } from "./Hero/config"
-import { featuresBlock } from "./Features/config"
 import { howItWorksBlock } from "./HowItWorks/config"
 import { roadmapBlock } from "./Roadmap/config"
-import { ctaBlock } from "./CTA/config"
-import { faqBlock } from "./FAQ/config"
-import { headerBlock } from "./Header/config"
-import { footerBlock } from "./Footer/config"
-
-export const pageBlocks = [heroBlock, featuresBlock, howItWorksBlock, roadmapBlock, ctaBlock, faqBlock]
-export const headerBlocks = [headerBlock]
-export const footerBlocks = [footerBlock]
+import { splitBlock } from "./Split/config"
+import { statsBlock } from "./Stats/config"
 
-export {
+export const pageBlocks = [
   heroBlock,
+  statsBlock,
   featuresBlock,
+  codeShowcaseBlock,
+  splitBlock,
   howItWorksBlock,
   roadmapBlock,
+  faqBlock,
+  ctaBlock,
+]
+export const headerBlocks = [headerBlock]
+export const footerBlocks = [footerBlock]
+
+export {
+  codeShowcaseBlock,
   ctaBlock,
   faqBlock,
-  headerBlock,
+  featuresBlock,
   footerBlock,
+  headerBlock,
+  heroBlock,
+  howItWorksBlock,
+  roadmapBlock,
+  splitBlock,
+  statsBlock,
 }

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

@@ -6,3 +6,6 @@ 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_CODE_SHOWCASE = "code_showcase" as const
+export const BLOCK_SLUG_STATS = "stats" as const
+export const BLOCK_SLUG_SPLIT = "split" as const

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

@@ -1,7 +1,9 @@
 import type { BlockComponentProps } from "@vexcms/react"
 import type { ComponentType } from "react"
 
+import CodeShowcaseBlock from "./CodeShowcase"
 import {
+  BLOCK_SLUG_CODE_SHOWCASE,
   BLOCK_SLUG_CTA,
   BLOCK_SLUG_FAQ,
   BLOCK_SLUG_FEATURES,
@@ -10,6 +12,8 @@ import {
   BLOCK_SLUG_HERO,
   BLOCK_SLUG_HOW_IT_WORKS,
   BLOCK_SLUG_ROADMAP,
+  BLOCK_SLUG_SPLIT,
+  BLOCK_SLUG_STATS,
 } from "./constants"
 import CTABlock from "./CTA"
 import FAQBlock from "./FAQ"
@@ -19,6 +23,8 @@ import HeaderBlock from "./Header"
 import HeroBlock from "./Hero"
 import HowItWorksBlock from "./HowItWorks"
 import RoadmapBlock from "./Roadmap"
+import SplitBlock from "./Split"
+import StatsBlock from "./Stats"
 
 /**
  * Block component map for `RenderBlocks` (Contract 1). Loosely typed as
@@ -27,6 +33,7 @@ import RoadmapBlock from "./Roadmap"
  * against this config, so this file can't reference it.
  */
 export const blockComponents: Record<string, ComponentType<BlockComponentProps>> = {
+  [BLOCK_SLUG_CODE_SHOWCASE]: CodeShowcaseBlock,
   [BLOCK_SLUG_CTA]: CTABlock,
   [BLOCK_SLUG_FAQ]: FAQBlock,
   [BLOCK_SLUG_FEATURES]: FeaturesBlock,
@@ -35,6 +42,8 @@ export const blockComponents: Record<string, ComponentType<BlockComponentProps>>
   [BLOCK_SLUG_HERO]: HeroBlock,
   [BLOCK_SLUG_HOW_IT_WORKS]: HowItWorksBlock,
   [BLOCK_SLUG_ROADMAP]: RoadmapBlock,
+  [BLOCK_SLUG_SPLIT]: SplitBlock,
+  [BLOCK_SLUG_STATS]: StatsBlock,
 }
 
 export { footerBlocks, headerBlocks, pageBlocks } from "./config"

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

@@ -7,6 +7,7 @@ export const footers = defineCollection({
   slug: TABLE_SLUG_FOOTERS,
   admin: {
     useAsTitle: "name",
+    icon: "PanelBottom",
   },
   fields: {
     name: text({

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

@@ -7,6 +7,7 @@ export const headers = defineCollection({
   slug: TABLE_SLUG_HEADERS,
   admin: {
     useAsTitle: "name",
+    icon: "PanelTop",
   },
   fields: {
     name: text({

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

@@ -1,5 +1,8 @@
-import { blocks, defineCollection, text, upload } from "@vexcms/core"
+import type { DataModel } from "@convex/_generated/dataModel"
 
+import { blocks, defineCollection, text, textValidator, upload } from "@vexcms/core"
+
+import { resolvePagePath } from "~/lib/resolvePagePath"
 import { TABLE_SLUG_IMAGES, TABLE_SLUG_PAGES } from "~/db/constants"
 import { pageBlocks } from "~/vexcms/blocks/config"
 
@@ -8,6 +11,10 @@ export const pages = defineCollection({
   admin: {
     table: { defaultColumns: ["title", "slug", "_id"] },
     useAsTitle: "title",
+    icon: "FileText",
+    livePreview: {
+      url: (doc) => resolvePagePath(doc.slug),
+    },
   },
   fields: {
     title: text({
@@ -19,8 +26,23 @@ export const pages = defineCollection({
       index: "by_slug",
       label: "Slug",
       required: true,
+      validate: textValidator<typeof TABLE_SLUG_PAGES, DataModel>(
+        TABLE_SLUG_PAGES,
+        async ({ value, doc, ctx }) => {
+          const existing = await ctx.db
+            .query("pages")
+            .withIndex("by_slug", (q) => q.eq("slug", value))
+            .first()
+          if (existing && existing._id !== doc._id) {
+            return `This slug is already in use by the page '${existing.title}'.`
+          }
+        },
+      ),
     }),
     blocks: blocks({
+      admin: {
+        defaultCollapsed: true,
+      },
       blocks: pageBlocks,
       interfaceName: "PageBlock",
       label: "Content",

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

@@ -1,7 +1,7 @@
 import {
   color,
-  THEME_COLOR_TOKENS,
   type ColorField,
+  THEME_COLOR_TOKENS,
   type ThemeColorTokenKey,
 } from "@vexcms/core";
 
@@ -81,19 +81,6 @@ const EMBER: Record<"dark" | "light", Record<ThemeColorTokenKey, string>> = {
   },
 };
 
-/**
- * Derives a human label from a token key: `"cardForeground"` → `"Card
- * Foreground"`, `"chart1"` → `"Chart 1"`.
- *
- * @param props - Input props.
- * @param props.key - The camelCase token key.
- * @returns The admin form label.
- */
-function tokenLabel(props: { key: string }): string {
-  const spaced = props.key.replace(/([A-Z])/g, " $1").replace(/(\d+)/g, " $1");
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
-}
-
 /**
  * The shadcn design-token set as `color()` fields for one colour scheme.
  *
@@ -116,3 +103,16 @@ export function themeColors(mode: "dark" | "light"): Record<ThemeColorTokenKey,
   }
   return fields;
 }
+
+/**
+ * Derives a human label from a token key: `"cardForeground"` → `"Card
+ * Foreground"`, `"chart1"` → `"Chart 1"`.
+ *
+ * @param props - Input props.
+ * @param props.key - The camelCase token key.
+ * @returns The admin form label.
+ */
+function tokenLabel(props: { key: string }): string {
+  const spaced = props.key.replace(/([A-Z])/g, " $1").replace(/(\d+)/g, " $1");
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}

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

@@ -0,0 +1,20 @@
+import { defineCollection, text } from "@vexcms/core"
+
+import { TABLE_SLUG_USERS } from "~/db/constants"
+
+export const users = defineCollection({
+  slug: TABLE_SLUG_USERS,
+  admin: {
+    useAsTitle: "name",
+    icon: "Users",
+  },
+  labels: {
+    singular: "User",
+    plural: "Users",
+  },
+  fields: {
+    name: text({ label: "Name", required: true }),
+    // Add custom user fields here — the auth adapter already contributes
+    // name/email/roles/etc. from Better Auth's schema.
+  },
+})