create-vexcms 0.0.8 → 0.0.10

package/templates/marketing-site/src/lib/colorConvert.ts

@@ -0,0 +1,171 @@
+// @ts-expect-error culori/fn lacks type declarations in v4
+import { parse, formatHex, formatHsl, converter } from "culori/fn"
+
+const toOklch = converter("oklch")
+
+/**
+ * Convert a color string to the specified format.
+ *
+ * @param props.color - Input color in any CSS-parseable format
+ * @param props.format - Target format: "hex", "hsl", or "oklch"
+ * @returns Formatted color string, or the original if parsing fails
+ */
+export function convertColor(props: {
+  color: string
+  format: "hex" | "hsl" | "oklch"
+}): string {
+  if (!props.color || props.color.startsWith("var(")) return props.color
+
+  const parsed = parse(props.color)
+  if (!parsed) return props.color
+
+  switch (props.format) {
+    case "hex":
+      return formatHex(parsed) ?? props.color
+    case "hsl":
+      return formatHsl(parsed) ?? props.color
+    case "oklch": {
+      const oklch = toOklch(parsed)
+      if (!oklch) return props.color
+      const l = (oklch.l ?? 0).toFixed(3)
+      const c = (oklch.c ?? 0).toFixed(3)
+      const h = (oklch.h ?? 0).toFixed(1)
+      return `oklch(${l} ${c} ${h})`
+    }
+    default:
+      return props.color
+  }
+}
+
+/**
+ * Known CSS custom property names that represent colors.
+ * These are the standard shadcn/Tailwind CSS variables.
+ */
+const COLOR_VAR_NAMES = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+]
+
+/**
+ * Extract color CSS custom properties from the document's stylesheets.
+ * Returns light and dark values for each known color variable.
+ */
+export function getThemeColorsFromDOM(): {
+  name: string
+  lightValue: string
+  darkValue: string | null
+}[] {
+  if (typeof document === "undefined") return []
+
+  const results: { name: string; lightValue: string; darkValue: string | null }[] = []
+
+  // Get computed styles for :root (light mode)
+  const rootStyles = getComputedStyle(document.documentElement)
+
+  // Try to get dark mode values by reading stylesheets
+  const darkValues = new Map<string, string>()
+  try {
+    for (const sheet of document.styleSheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          if (rule instanceof CSSStyleRule && rule.selectorText?.includes(".dark")) {
+            for (const varName of COLOR_VAR_NAMES) {
+              const value = rule.style.getPropertyValue(`--${varName}`).trim()
+              if (value) darkValues.set(varName, value)
+            }
+          }
+        }
+      } catch {
+        // Cross-origin stylesheet — skip
+      }
+    }
+  } catch {
+    // No stylesheet access
+  }
+
+  for (const varName of COLOR_VAR_NAMES) {
+    const lightValue = rootStyles.getPropertyValue(`--${varName}`).trim()
+    if (!lightValue) continue
+
+    results.push({
+      name: varName,
+      lightValue,
+      darkValue: darkValues.get(varName) ?? null,
+    })
+  }
+
+  return results
+}
+
+/**
+ * Parse CSS text containing :root and .dark variable declarations.
+ * Used by the theme import feature to extract color values from pasted CSS.
+ *
+ * @param props.css - Raw CSS text containing :root { } and optionally .dark { }
+ * @returns Parsed light and dark color maps
+ */
+export function parseThemeCSS(props: { css: string }): {
+  light: Record<string, string>
+  dark: Record<string, string>
+} {
+  const light: Record<string, string> = {}
+  const dark: Record<string, string> = {}
+
+  // Match :root { ... } block
+  const rootMatch = props.css.match(/:root\s*\{([\s\S]+?)\}/)
+  if (rootMatch) {
+    const vars = rootMatch[1].matchAll(/--([a-z-]+)\s*:\s*([^;]+)/g)
+    for (const match of vars) {
+      const name = match[1].trim()
+      const value = match[2].trim()
+      if (COLOR_VAR_NAMES.includes(name)) {
+        light[name] = value
+      }
+    }
+  }
+
+  // Match .dark { ... } block
+  const darkMatch = props.css.match(/\.dark\s*\{([\s\S]+?)\}/)
+  if (darkMatch) {
+    const vars = darkMatch[1].matchAll(/--([a-z-]+)\s*:\s*([^;]+)/g)
+    for (const match of vars) {
+      const name = match[1].trim()
+      const value = match[2].trim()
+      if (COLOR_VAR_NAMES.includes(name)) {
+        dark[name] = value
+      }
+    }
+  }
+
+  return { light, dark }
+}

package/templates/marketing-site/src/lib/metadata.ts

@@ -0,0 +1,104 @@
+import type { Metadata } from "next"
+
+import { buildSiteMetadata } from "@vexcms/core"
+import { fetchQuery } from "convex/nextjs"
+
+import { api } from "@convex/_generated/api"
+import { anyApi } from "convex/server"
+
+/**
+ * Generate Next.js Metadata for a page.
+ * Fetches site settings and optionally a page document,
+ * merges with buildSiteMetadata, and returns Next.js Metadata format.
+ *
+ * @param props.slug - Optional page slug to fetch per-page SEO overrides
+ */
+export async function generatePageMetadata(props: {
+  slug?: string
+}): Promise<Metadata> {
+  try {
+    // Fetch site settings
+    const settings = (await fetchQuery(api.siteSettings.get)) as Record<
+      string,
+      unknown
+    > | null
+
+    if (!settings) {
+      return { title: "Untitled" }
+    }
+
+    // Resolve the ogImage URL from site settings (upload ID → URL)
+    let siteOgImageUrl: string | undefined
+    const ogImageId = settings.ogImage as string | undefined
+    if (ogImageId) {
+      try {
+        const mediaDoc = (await fetchQuery(
+          anyApi.vex.collections.getDocument,
+          {
+            collectionSlug: "media",
+            documentId: ogImageId,
+          }
+        )) as Record<string, unknown> | null
+        siteOgImageUrl = (mediaDoc?.url as string) || undefined
+      } catch {
+        // Media document not found — skip ogImage
+      }
+    }
+
+    // Fetch page data for per-page overrides
+    let pageData: Record<string, unknown> | null = null
+    if (props.slug) {
+      pageData = await fetchQuery(api.pages.getBySlug, {
+        slug: props.slug,
+        _vexDrafts: false,
+      })
+    }
+
+    // Build framework-agnostic metadata
+    const meta = buildSiteMetadata({
+      site: {
+        name: settings.name as string | undefined,
+        metaTitle: settings.metaTitle as string | undefined,
+        metaDescription: settings.metaDescription as string | undefined,
+        description: settings.description as string | undefined,
+        ogImage: siteOgImageUrl,
+        twitterHandle: settings.twitterHandle as string | undefined,
+      },
+      page: pageData
+        ? {
+            title: pageData.title as string | undefined,
+            metaTitle: pageData.metaTitle as string | undefined,
+            metaDescription: pageData.metaDescription as string | undefined,
+            ogImage: pageData.ogImage as string | undefined,
+          }
+        : undefined,
+      titleSuffix: " | Vex CMS",
+    })
+
+    // Map to Next.js Metadata
+    const metadata: Metadata = {
+      title: meta.title,
+      description: meta.description,
+    }
+
+    if (meta.ogImage) {
+      metadata.openGraph = {
+        title: meta.title,
+        description: meta.description,
+        images: [{ url: meta.ogImage }],
+      }
+    }
+
+    if (meta.twitterHandle) {
+      metadata.twitter = {
+        card: "summary_large_image",
+        site: meta.twitterHandle,
+      }
+    }
+
+    return metadata
+  } catch {
+    // Convex not available — return minimal metadata
+    return { title: "Vex CMS" }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { defineAccess } from "@vexcms/core"
+
+import { TABLE_SLUG_USERS, USER_ROLES } from "~/db/constants"
+import { users } from "~/vexcms/collections"
+
+export const access = defineAccess({
+  permissions: {
+    admin: {
+      admin: true,
+      user: true,
+    },
+    user: {
+      [TABLE_SLUG_USERS]: {
+        create: false,
+        delete: false,
+        read: ({ data: targetUser, user }) => {
+          return targetUser._id === user._id
+        },
+        update: ({ data: targetUser, user }) => {
+          return targetUser._id === user._id
+        },
+      },
+    },
+  },
+  resources: [users],
+  roles: [USER_ROLES.user, USER_ROLES.admin],
+  userCollection: users,
+})

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

@@ -0,0 +1,36 @@
+import { array, defineBlock, object, text } from "@vexcms/core"
+
+import { BLOCK_SLUG_CTA } from "../constants"
+
+export const ctaBlock = defineBlock({
+  slug: BLOCK_SLUG_CTA,
+  label: "Call to Action",
+  fields: {
+    heading: text({
+      label: "Heading",
+      required: true,
+      defaultValue: "Ready to build with Vex CMS?",
+    }),
+    subheading: text({
+      label: "Subheading",
+      defaultValue:
+        "Get started in minutes with create-vexcms. Real-time content management powered by Convex.",
+    }),
+    actions: array({
+      label: "Actions",
+      items: object({
+        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" },
+      ],
+    }),
+  },
+  admin: {
+    icon: "megaphone",
+  },
+})

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

@@ -0,0 +1,46 @@
+import type { BlockComponentProps } from "@vexcms/ui"
+
+import Link from "next/link"
+
+import { cn } from "~/lib/utils"
+import { buttonVariants } from "~/components/ui/button"
+
+export { ctaBlock } from "./config"
+
+export default function CTABlock({ block }: BlockComponentProps) {
+  const { heading, subheading, actions } = block as unknown as {
+    heading: string
+    subheading?: string
+    actions?: Array<{ label: string; href: string }>
+  }
+
+  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) => (
+              <Link
+                key={index}
+                href={action.href ?? "/"}
+                className={cn(
+                  buttonVariants({
+                    size: "lg",
+                    variant: index % 2 === 1 ? "outline" : "default",
+                  })
+                )}
+              >
+                <span>{action.label}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { array, defineBlock, object, text } from "@vexcms/core"
+
+import { BLOCK_SLUG_FAQ } from "../constants"
+
+export const faqBlock = defineBlock({
+  slug: BLOCK_SLUG_FAQ,
+  label: "FAQ",
+  fields: {
+    heading: text({
+      label: "Heading",
+      required: true,
+      defaultValue: "Frequently Asked Questions",
+    }),
+    subheading: text({
+      label: "Subheading",
+      defaultValue:
+        "Everything you need to know about Vex CMS and building with Convex.",
+    }),
+    supportLink: text({
+      label: "Support Link",
+      defaultValue: "https://github.com/vexcms/vex/issues",
+      admin: { description: "URL to contact support page" },
+    }),
+    items: array({
+      label: "FAQ Items",
+      required: true,
+      items: object({
+        fields: {
+          question: text({ label: "Question", required: true }),
+          answer: text({ label: "Answer", required: true }),
+        },
+      }),
+      defaultValue: [
+        {
+          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.",
+        },
+        {
+          question: "How is Vex different from other headless CMS platforms?",
+          answer:
+            "Unlike traditional headless CMS platforms that use REST or GraphQL APIs, Vex is powered by Convex's real-time database. This means content updates are instant across all clients, with no polling or webhooks needed. Your schema is defined in code, giving you full type safety from database to frontend.",
+        },
+        {
+          question: "Do I need to know Convex to use Vex CMS?",
+          answer:
+            "Basic familiarity with Convex helps, but Vex handles most of the complexity for you. The CLI generates your Convex schema, queries, and types automatically from your collection definitions. You just define your fields and Vex does the rest.",
+        },
+        {
+          question: "Can I use Vex with any frontend framework?",
+          answer:
+            "Vex CMS is framework-agnostic at the data layer — any app that can use Convex can use Vex. The admin panel and UI components are built for Next.js, but the core package and generated queries work with any Convex-compatible frontend.",
+        },
+        {
+          question: "Is Vex CMS free?",
+          answer:
+            "Yes, Vex CMS is open source and free to use. You only pay for your Convex usage, which has a generous free tier for most projects.",
+        },
+        {
+          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.",
+        },
+      ],
+    }),
+  },
+  admin: {
+    icon: "help-circle",
+  },
+})

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

@@ -0,0 +1,71 @@
+import type { BlockComponentProps } from "@vexcms/ui"
+
+import Link from "next/link"
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion"
+
+export { faqBlock } from "./config"
+
+export default function FAQBlock({ block }: BlockComponentProps) {
+  const { heading, subheading, supportLink, items } = block as unknown as {
+    heading: string
+    subheading?: string
+    supportLink?: string
+    items?: Array<{ question: string; answer: string }>
+  }
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="mx-auto max-w-5xl px-4 md:px-6">
+        <div className="mx-auto max-w-xl text-center">
+          <h2 className="text-3xl font-bold text-balance md:text-4xl lg:text-5xl">
+            {heading}
+          </h2>
+          {subheading && (
+            <p className="text-muted-foreground mt-4 text-balance">
+              {subheading}
+            </p>
+          )}
+        </div>
+
+        <div className="mx-auto mt-12 max-w-xl">
+          <Accordion className="bg-muted dark:bg-muted/50 w-full rounded-2xl p-1">
+            {(items ?? []).map((faq, index) => (
+              <div className="group" key={index}>
+                <AccordionItem
+                  className="data-open:bg-card dark:data-open:bg-muted rounded-xl border-none px-7 py-1 data-open:border-none data-open:shadow-sm"
+                  value={`${index}`}
+                >
+                  <AccordionTrigger className="cursor-pointer text-base hover:no-underline">
+                    {faq.question}
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <p className="text-base">{faq.answer}</p>
+                  </AccordionContent>
+                </AccordionItem>
+                <hr className="mx-7 border-dashed group-last:hidden" />
+              </div>
+            ))}
+          </Accordion>
+
+          {supportLink && (
+            <p className="text-muted-foreground mt-6 px-8">
+              {"Can't find what you're looking for? Contact our "}
+              <Link
+                className="text-primary font-medium hover:underline"
+                href={supportLink}
+              >
+                support team
+              </Link>
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { array, defineBlock, object, text } from "@vexcms/core"
+
+import IconPickerField from "~/components/admin/IconPickerField"
+import { BLOCK_SLUG_FEATURES } from "../constants"
+
+export const featuresBlock = defineBlock({
+  slug: BLOCK_SLUG_FEATURES,
+  label: "Features",
+  fields: {
+    heading: text({
+      label: "Heading",
+      required: true,
+      defaultValue: "Everything you need to manage content",
+    }),
+    subheading: text({
+      label: "Subheading",
+      defaultValue:
+        "Built on Convex's real-time infrastructure with a developer experience that doesn't compromise on power.",
+    }),
+    features: array({
+      label: "Features",
+      required: true,
+      items: object({
+        fields: {
+          title: text({ label: "Title", required: true }),
+          description: text({ label: "Description", required: true }),
+          icon: text({
+            label: "Icon",
+            admin: {
+              description: "Lucide icon name",
+              components: { Field: IconPickerField },
+            },
+          }),
+        },
+      }),
+      defaultValue: [
+        {
+          title: "Real-Time by Default",
+          description:
+            "Every query is live. Content updates appear instantly across all connected clients — no polling, no webhooks.",
+          icon: "Zap",
+        },
+        {
+          title: "Type-Safe Schemas",
+          description:
+            "Define your collections with TypeScript. Vex generates Convex schemas, Zod validators, and typed queries automatically.",
+          icon: "Shield",
+        },
+        {
+          title: "Developer First",
+          description:
+            "Code-first configuration, CLI tooling, and a clean API. Build with the tools you already know and love.",
+          icon: "Code",
+        },
+      ],
+    }),
+  },
+  admin: {
+    icon: "layout-grid",
+  },
+})

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

@@ -0,0 +1,73 @@
+import type { BlockComponentProps } from "@vexcms/ui"
+import type { ComponentPropsWithRef } from "react"
+
+import { icons } from "lucide-react"
+
+import { Card, CardContent, CardHeader } from "~/components/ui/card"
+
+export { featuresBlock } from "./config"
+
+function LucideIcon({ name }: { name: string }) {
+  const Icon = icons[name as keyof typeof icons]
+  if (!Icon) return null
+  return <Icon className="size-4" />
+}
+
+function CardDecorator({ children, ...divProps }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]"
+      {...divProps}
+    >
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
+      />
+      <div
+        aria-hidden
+        className="to-background absolute inset-0 bg-radial from-transparent to-75%"
+      />
+      <div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-t border-l">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default function FeaturesBlock({ block }: BlockComponentProps) {
+  const { heading, subheading, features } = block as unknown as {
+    heading: string
+    subheading?: string
+    features?: Array<{ title: string; description: string; icon?: string }>
+  }
+
+  return (
+    <section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
+      <div className="@container 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>
+        <Card className="mx-auto mt-8 grid max-w-sm divide-y overflow-hidden shadow-zinc-950/5 *:text-center md:mt-16 @min-4xl:max-w-full @min-4xl:grid-cols-3 @min-4xl:divide-x @min-4xl:divide-y-0">
+          {(features ?? []).map((feature, index) => (
+            <div className="group shadow-zinc-950/5" key={index}>
+              <CardHeader className="pb-3">
+                {feature.icon && (
+                  <CardDecorator>
+                    <LucideIcon name={feature.icon} />
+                  </CardDecorator>
+                )}
+                <h3 className="mt-6 font-medium">{feature.title}</h3>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm">{feature.description}</p>
+              </CardContent>
+            </div>
+          ))}
+        </Card>
+      </div>
+    </section>
+  )
+}