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

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

@@ -2,91 +2,274 @@
 
 import type { BlockComponentProps } from "@vexcms/react"
 
-import { Check, Clock, Compass } from "lucide-react"
-import { cn } from "@vexcms/react"
+import { cn, ScrollArea, ScrollBar, Tabs, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipTrigger } from "@vexcms/react"
+import { Check } from "lucide-react"
+import { useState } from "react"
+
+import type { RoadmapBlock } from "~/vex.types"
+
+import { Container } from "~/components/Container"
+import { SectionHeader } from "~/components/SectionHeader"
 
 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"]
 
+
+/**
+ * Derived from the generated block type, never hand-written: `vex dev` emits
+ * the literal union straight from the `select` options, so adding a status to
+ * the config is a compile error here until this renderer handles it.
+ */
+type RoadmapItemStatus = RoadmapBlock["items"][number]["status"][number]
+
+/**
+ * Print order, and it is deliberately not the brief's Shipped-first order.
+ * In progress is the page's news; Shipped is 15 rows of reassurance people
+ * skim. Putting the reassurance first buries the news.
+ */
+const GROUP_ORDER: RoadmapItemStatus[] = ["in-progress", "planned", "future", "exploring", "shipped"]
+
+const GROUP_LABEL: Record<RoadmapItemStatus, string> = {
+  exploring: "Exploring",
+  future: "Future",
+  "in-progress": "In progress",
+  planned: "Planned",
+  shipped: "Shipped",
+}
+
+/** Below this many items the filter is noise — four short groups fit on one
+ *  screen and the tab row costs more than it saves. */
+const FILTER_MIN_ITEMS = 8
+
+/**
+ * Roadmap — four buckets of wildly different size, solved by giving each a
+ * different density rather than a different colour.
+ *
+ * Every group is rendered server-side and toggled with `hidden`, so filtering
+ * costs no request and the page is complete with JavaScript disabled.
+ */
 export default function RoadmapBlock({ block }: BlockComponentProps) {
-  const { heading, subheading, items } = block as unknown as {
-    heading: string
-    subheading?: string
-    items?: RoadmapItem[]
-  }
+  const { heading, items, subheading } = block as RoadmapBlock
+  const all = items ?? []
+  const [filter, setFilter] = useState<"all" | RoadmapItemStatus>("all")
+
+  if (all.length === 0) {return null}
 
-  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)
+  const grouped = GROUP_ORDER.map((status) => ({
+    entries: all.filter((item) => readStatus(item.status) === status),
+    status,
+  })).filter((group) => group.entries.length > 0)
+
+  const showFilter = all.length >= FILTER_MIN_ITEMS
 
   return (
-    <section className={cn("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="text-muted-foreground mt-4 text-balance">{subheading}</p>}
-        </div>
+    <section className="py-14 md:py-20 xl:py-24">
+      <Container>
+        <SectionHeader heading={heading} subheading={subheading} />
 
-        {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>
+        {showFilter ? (
+          <Tabs
+            className="mb-10"
+            onValueChange={(value) => setFilter(value as "all" | RoadmapItemStatus)}
+            value={filter}
+          >
+            <ScrollArea>
+              <TabsList className="h-10 w-full justify-start rounded-none border-b border-border bg-transparent p-0">
+                <TabsTrigger className="rounded-sm px-3 py-[5px] text-[13px] font-medium" value="all">
+                  All {all.length}
+                </TabsTrigger>
+                {grouped.map((group) => (
+                  <TabsTrigger
+                    className="rounded-sm px-3 py-[5px] text-[13px] font-medium"
+                    key={group.status}
+                    value={group.status}
+                  >
+                    {GROUP_LABEL[group.status]} {group.entries.length}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </Tabs>
+        ) : null}
+
+        <div className="flex flex-col gap-11">
+          {grouped.map((group) => (
+            <div
+              className={cn(filter !== "all" && filter !== group.status && "hidden")}
+              key={group.status}
+            >
+              <div className="flex items-center gap-3">
+                <h3 className="sr-only">{GROUP_LABEL[group.status]}</h3>
+                <StatusBadge status={group.status} />
+                <span className="font-mono text-xs text-muted-foreground">
+                  {group.entries.length}
+                </span>
+                <span aria-hidden className="h-px flex-1 bg-border" />
               </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>}
+
+              {group.status === "in-progress" ? (
+                <div
+                  className={cn(
+                    "mt-5 grid gap-4",
+                    // A single card should not sit in a half-empty row.
+                    group.entries.length >= 2 && "md:grid-cols-2"
+                  )}
+                >
+                  {group.entries.map((item, index) => (
+                    <div
+                      className="rounded-md border border-border bg-card p-5"
+                      key={`${item.feature}-${index}`}
+                    >
+                      <p className="text-[17px] font-semibold text-foreground">{item.feature}</p>
+                      {item.description ? (
+                        <p className="mt-2 text-sm leading-[1.6] text-muted-foreground">
+                          {item.description}
+                        </p>
+                      ) : null}
                     </div>
-                  )
-                })}
-              </div>
+                  ))}
+                </div>
+              ) : null}
+
+              {group.status === "planned" ? (
+                <ul className="mt-4 grid list-none md:grid-cols-2 md:gap-x-10">
+                  {group.entries.map((item, index) => (
+                    <li
+                      className="flex gap-3 border-b border-border py-[11px]"
+                      key={`${item.feature}-${index}`}
+                    >
+                      <span
+                        aria-hidden
+                        className="mt-[7px] size-[5px] shrink-0 rounded-4xl border border-muted-foreground"
+                      />
+                      <span>
+                        <span className="text-[15px] text-foreground">{item.feature}</span>
+                        {item.description ? (
+                          <span className="block text-[13.5px] leading-[1.55] text-muted-foreground">
+                            {item.description}
+                          </span>
+                        ) : null}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+
+              {group.status === "exploring" || group.status === "future" ? (
+                <ul className="mt-4 flex list-none flex-wrap gap-2">
+                  {group.entries.map((item, index) => {
+                    const chip = (
+                      <span
+                        className={cn(
+                          "inline-block rounded-sm border border-dashed border-border px-3 py-[7px] text-sm text-muted-foreground",
+                          item.description && "cursor-help"
+                        )}
+                      >
+                        {item.feature}
+                      </span>
+                    )
+                    return (
+                      <li key={`${item.feature}-${index}`}>
+                        {item.description ? (
+                          <Tooltip>
+                            <TooltipTrigger render={chip} />
+                            <TooltipContent>{item.description}</TooltipContent>
+                          </Tooltip>
+                        ) : (
+                          chip
+                        )}
+                      </li>
+                    )
+                  })}
+                </ul>
+              ) : null}
+
+              {group.status === "shipped" ? (
+                // Quieter than every other bucket on purpose: 15 rows of
+                // reassurance that people skim rather than read.
+                <ul className="mt-4 grid list-none md:grid-cols-2 md:gap-x-10">
+                  {group.entries.map((item, index) => (
+                    <li
+                      className="flex gap-3 border-b border-border/60 py-2"
+                      key={`${item.feature}-${index}`}
+                    >
+                      <Check aria-hidden className="mt-[3px] size-3.5 shrink-0 text-primary" />
+                      <span>
+                        <span className="text-[14.5px] text-muted-foreground">{item.feature}</span>
+                        {item.description ? (
+                          <span className="block text-[13px] leading-[1.5] text-muted-foreground/80">
+                            {item.description}
+                          </span>
+                        ) : null}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
             </div>
-          )
-        })}
-      </div>
+          ))}
+        </div>
+      </Container>
     </section>
   )
 }
+
+/**
+ * `select` stores an array; the first entry is the selection.
+ *
+ * No validation or casting: codegen emits the literal union straight from the
+ * config's options, so `status[0]` is already narrowed and an unhandled value
+ * is a compile error rather than a runtime fallback.
+ *
+ * @param status - The stored `status` value.
+ * @returns The selected status, defaulting to `planned` for an empty array.
+ */
+function readStatus(status: RoadmapItemStatus[]): RoadmapItemStatus {
+  return status[0] ?? "planned"
+}
+
+/**
+ * Status badge. All four share one geometry and differ only in border, fill,
+ * and leading glyph — no second accent hue is introduced, and status is never
+ * carried by colour alone.
+ */
+function StatusBadge({ status }: { status: RoadmapItemStatus }) {
+  const base =
+    "inline-flex items-center gap-1.5 rounded-4xl border px-2.5 py-[3px] text-xs font-medium tracking-[0.04em] uppercase"
+
+  if (status === "in-progress") {
+    return (
+      <span className={cn(base, "border-primary/40 bg-primary/12 text-primary")}>
+        {/* The one blessed decorative loop on the site. */}
+        <span aria-hidden className="live-dot size-[5px] rounded-4xl bg-primary" />
+        {GROUP_LABEL[status]}
+      </span>
+    )
+  }
+  if (status === "planned") {
+    return (
+      <span className={cn(base, "border-border text-muted-foreground")}>
+        <span
+          aria-hidden
+          className="size-[5px] rounded-4xl border border-current bg-transparent"
+        />
+        {GROUP_LABEL[status]}
+      </span>
+    )
+  }
+  if (status === "exploring") {
+    // Dashed is the "not committed" signal.
+    return (
+      <span className={cn(base, "border-dashed border-border text-muted-foreground")}>
+        {GROUP_LABEL[status]}
+      </span>
+    )
+  }
+  return (
+    <span className={cn(base, "border-border bg-card text-muted-foreground")}>
+      <Check aria-hidden className="size-3 text-primary" />
+      {GROUP_LABEL[status]}
+    </span>
+  )
+}

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

@@ -0,0 +1,62 @@
+import { array, defineBlock, group, select, text, upload } from "@vexcms/core"
+
+import { TABLE_SLUG_IMAGES } from "~/db/constants"
+
+import { BLOCK_SLUG_SPLIT } from "../constants"
+
+export const splitBlock = defineBlock({
+  slug: BLOCK_SLUG_SPLIT,
+  label: "Split",
+  fields: {
+    eyebrow: text({ label: "Eyebrow" }),
+    heading: text({ label: "Heading", required: true }),
+    body: text({ label: "Body", required: true }),
+    bullets: array({
+      label: "Bullets",
+      items: group({
+        label: "Bullet",
+        fields: {
+          icon: text({ label: "Icon", description: "Lucide icon name" }),
+          text: text({ label: "Text", required: true }),
+        },
+      }),
+    }),
+    media: select({
+      label: "Media",
+      description:
+        'Code is the variant the seed uses. Image falls back to None when no image is set, so a scaffold with an empty media library never shows a broken frame.',
+      options: [
+        { label: "Code", value: "code" },
+        { label: "Image", value: "image" },
+        { label: "None", value: "none" },
+      ],
+      defaultValue: ["code"],
+    }),
+    code: text({ label: "Code" }),
+    codeFilename: text({ label: "Code Filename" }),
+    codeLanguage: select({
+      label: "Code Language",
+      options: [
+        { label: "TypeScript", value: "ts" },
+        { label: "TSX", value: "tsx" },
+        { label: "Shell", value: "bash" },
+        { label: "JSON", value: "json" },
+      ],
+      defaultValue: ["ts"],
+    }),
+    image: upload({ label: "Image", to: TABLE_SLUG_IMAGES }),
+    mediaPosition: select({
+      label: "Media Position",
+      description:
+        "Consecutive Splits alternate by this field, not by an nth-child rule, so an editor can break the alternation.",
+      options: [
+        { label: "Right", value: "right" },
+        { label: "Left", value: "left" },
+      ],
+      defaultValue: ["right"],
+    }),
+  },
+  admin: {
+    icon: "Layers",
+  },
+})

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

@@ -0,0 +1,186 @@
+import type { BlockComponentProps } from "@vexcms/react"
+
+import { cn } from "@vexcms/react"
+import { icons } from "lucide-react"
+
+import type { SplitBlock } from "~/vex.types"
+
+import { CodePane } from "~/components/CodePane"
+import { Container } from "~/components/Container"
+import { MediaImage } from "~/components/MediaImage"
+
+export { splitBlock } from "./config"
+
+
+/** Above this many bullets the list splits into two columns inside the text
+ *  column rather than running to an unreadable length. */
+const BULLET_COLUMN_THRESHOLD = 8
+
+/**
+ * Split — argument left, evidence right. Then swap.
+ *
+ * `mediaPosition: "left"` is expressed with order classes rather than a
+ * reversed source order, so the reading order stays text-first for assistive
+ * technology no matter which side the media sits on.
+ */
+export default function SplitBlock({ block }: BlockComponentProps) {
+  const {
+    body,
+    bullets,
+    code,
+    codeFilename,
+    codeLanguage,
+    eyebrow,
+    heading,
+    image,
+    media,
+    mediaPosition,
+  } = block as SplitBlock
+
+  const requested = readOption(media, ["code", "image", "none"] as const, "code")
+  // A fresh scaffold has an empty media library. Rather than paint a
+  // placeholder box, an image variant with no image degrades to the prose
+  // layout, which is a legitimate quiet section.
+  const resolved =
+    requested === "code" && !code ? "none" : requested === "image" && !image ? "none" : requested
+  const position = readOption(mediaPosition, ["left", "right"] as const, "right")
+  const items = bullets ?? []
+
+  const bulletList =
+    items.length > 0 ? (
+      <ul
+        className={cn(
+          "flex list-none flex-col gap-3.5",
+          items.length >= BULLET_COLUMN_THRESHOLD && "md:grid md:grid-cols-2 md:gap-x-8"
+        )}
+      >
+        {items.map((bullet, index) => {
+          const Glyph = bullet.icon ? icons[bullet.icon as keyof typeof icons] : undefined
+          return (
+            <li className="flex items-start gap-3" key={`${bullet.text}-${index}`}>
+              <span className="mt-[3px] flex size-4 shrink-0 items-center justify-center">
+                {Glyph ? (
+                  <Glyph className="size-4 text-primary" />
+                ) : (
+                  // Keeps the 16px indent so mixed arrays stay aligned.
+                  <span className="size-1 rounded-4xl bg-primary" />
+                )}
+              </span>
+              <span className="text-[15px] leading-[1.6] text-foreground">{bullet.text}</span>
+            </li>
+          )
+        })}
+      </ul>
+    ) : null
+
+  const textColumn = (
+    <div className={cn("min-w-0", position === "left" && "xl:order-2")}>
+      {eyebrow ? (
+        <p className="text-xs font-medium tracking-[0.08em] text-muted-foreground uppercase">
+          {eyebrow}
+        </p>
+      ) : null}
+      <h2
+        className={cn(
+          "text-[26px] leading-[1.18] font-bold tracking-[-0.025em] text-balance text-foreground md:text-3xl xl:max-w-[20ch] xl:text-4xl",
+          eyebrow && "mt-4"
+        )}
+      >
+        {heading}
+      </h2>
+      <p className="mt-4 max-w-[46rem] text-base leading-[1.65] text-pretty text-muted-foreground">
+        {body}
+      </p>
+      {resolved !== "none" && bulletList ? <div className="mt-7">{bulletList}</div> : null}
+    </div>
+  )
+
+  if (resolved === "none") {
+    // No media: bullets move into their own column as a divided list. With no
+    // bullets either, the block collapses to a single prose measure.
+    return (
+      <section className="py-14 md:py-20 xl:py-28">
+        <Container>
+          {bulletList ? (
+            <div className="grid gap-8 xl:grid-cols-[7fr_5fr] xl:gap-14">
+              {textColumn}
+              <ul className="flex list-none flex-col border-border xl:border-l xl:pl-7">
+                {items.map((bullet, index) => {
+                  const Glyph = bullet.icon ? icons[bullet.icon as keyof typeof icons] : undefined
+                  return (
+                    <li
+                      className="flex items-start gap-3 border-b border-border py-3 last:border-b-0"
+                      key={`divided-${bullet.text}-${index}`}
+                    >
+                      <span className="mt-[3px] flex size-4 shrink-0 items-center justify-center">
+                        {Glyph ? (
+                          <Glyph className="size-4 text-primary" />
+                        ) : (
+                          <span className="size-1 rounded-4xl bg-primary" />
+                        )}
+                      </span>
+                      <span className="text-[15px] leading-[1.6] text-foreground">
+                        {bullet.text}
+                      </span>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          ) : (
+            <div className="max-w-[46rem]">{textColumn}</div>
+          )}
+        </Container>
+      </section>
+    )
+  }
+
+  return (
+    <section className="py-14 md:py-20 xl:py-28">
+      <Container>
+        <div
+          className={cn(
+            "grid items-start gap-8 md:grid-cols-2 md:gap-10 xl:items-center xl:gap-14",
+            position === "left" ? "xl:grid-cols-[6fr_5fr]" : "xl:grid-cols-[5fr_6fr]"
+          )}
+        >
+          {textColumn}
+
+          <div className={cn("min-w-0", position === "left" && "xl:order-1")}>
+            {resolved === "code" && code ? (
+              <div className="overflow-hidden rounded-md border border-border">
+                <CodePane
+                  bodyClassName="max-h-[360px] md:max-h-[460px]"
+                  code={code}
+                  filename={codeFilename}
+                  language={codeLanguage}
+                />
+              </div>
+            ) : null}
+
+            {resolved === "image" && image ? (
+              <div className="overflow-hidden rounded-md border border-border bg-card">
+                <MediaImage
+                  alt=""
+                  className="aspect-[4/3] w-full object-cover"
+                  height={720}
+                  value={image}
+                  width={960}
+                />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
+
+function readOption<T extends string>(
+  value: string | string[] | undefined,
+  allowed: readonly T[],
+  fallback: T
+): T {
+  const raw = Array.isArray(value) ? value[0] : value
+  return (allowed as readonly string[]).includes(raw ?? "") ? (raw as T) : fallback
+}

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

@@ -0,0 +1,35 @@
+import { array, defineBlock, group, text } from "@vexcms/core"
+
+import { BLOCK_SLUG_STATS } from "../constants"
+
+export const statsBlock = defineBlock({
+  slug: BLOCK_SLUG_STATS,
+  label: "Stats",
+  fields: {
+    heading: text({
+      label: "Heading",
+      description: "Optional. Leave blank to let the numbers be the whole section.",
+    }),
+    subheading: text({ label: "Subheading" }),
+    items: array({
+      label: "Stats",
+      required: true,
+      items: group({
+        label: "Stat",
+        fields: {
+          value: text({
+            label: "Value",
+            required: true,
+            description:
+              'Free text, not a number — "0", "12" and "~30s" all render. Any unit belongs in the string.',
+          }),
+          label: text({ label: "Label", required: true }),
+          description: text({ label: "Description" }),
+        },
+      }),
+    }),
+  },
+  admin: {
+    icon: "Gauge",
+  },
+})