create-vexcms 0.0.7 → 0.0.9

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>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { array, defineBlock, object, text, upload } from "@vexcms/core"
+
+import IconPickerField from "~/components/admin/IconPickerField"
+import { TABLE_SLUG_MEDIA } from "~/db/constants"
+import { BLOCK_SLUG_FOOTER } from "../constants"
+
+export const footerBlock = defineBlock({
+  slug: BLOCK_SLUG_FOOTER,
+  label: "Footer",
+  fields: {
+    logoText: text({
+      label: "Logo Text",
+      defaultValue: "Vex CMS",
+    }),
+    logoImage: upload({
+      label: "Logo Image",
+      to: TABLE_SLUG_MEDIA,
+    }),
+    copyright: text({
+      label: "Copyright Text",
+      defaultValue: "Vex CMS. All rights reserved.",
+    }),
+    links: array({
+      label: "Links",
+      items: object({
+        fields: {
+          label: text({ label: "Label", required: true }),
+          href: text({ label: "Link", required: true }),
+        },
+      }),
+      defaultValue: [
+        { label: "Features", href: "/features" },
+        { label: "Pricing", href: "/pricing" },
+        { label: "Roadmap", href: "/roadmap" },
+        { label: "Documentation", href: "/docs" },
+        { label: "GitHub", href: "https://github.com/vexcms/vex" },
+        { label: "npm", href: "https://www.npmjs.com/package/@vexcms/core" },
+        { label: "Convex", href: "https://convex.dev" },
+      ],
+    }),
+    socialLinks: array({
+      label: "Social Links",
+      items: object({
+        fields: {
+          platform: text({ label: "Platform", required: true }),
+          href: text({ label: "URL", required: true }),
+          icon: text({
+            label: "Icon",
+            admin: {
+              description: "Lucide icon name",
+              components: { Field: IconPickerField },
+            },
+          }),
+        },
+      }),
+      defaultValue: [
+        { platform: "GitHub", href: "https://github.com/vexcms/vex", icon: "Github" },
+        { platform: "X", href: "https://x.com/vexcms", icon: "Twitter" },
+      ],
+    }),
+  },
+  admin: {
+    icon: "panel-bottom",
+  },
+})

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

@@ -0,0 +1,71 @@
+import type { BlockComponentProps } from "@vexcms/ui"
+
+import { icons } from "lucide-react"
+import Link from "next/link"
+
+export { footerBlock } from "./config"
+
+function SocialIcon({ name }: { name: string }) {
+  const Icon = icons[name as keyof typeof icons]
+  if (!Icon) return null
+  return <Icon className="size-5" />
+}
+
+export default function FooterBlock({ block }: BlockComponentProps) {
+  const { logoText, copyright, links, socialLinks } = block as {
+    logoText?: string
+    logoImage?: string
+    copyright?: string
+    links?: Array<{ label: string; href: string }>
+    socialLinks?: Array<{ platform: string; href: string; icon?: string }>
+  }
+
+  return (
+    <footer>
+      <div className="mx-auto max-w-5xl px-6 py-8 md:py-16">
+        <Link
+          aria-label="go home"
+          className="mx-auto block w-fit text-lg font-semibold"
+          href="/"
+        >
+          {logoText ?? "Vex CMS"}
+        </Link>
+
+        <div className="mt-6 flex flex-wrap justify-center gap-6 text-sm">
+          {(links ?? []).map((link, index) => (
+            <Link
+              className="text-muted-foreground hover:text-primary block duration-150"
+              href={link.href}
+              key={index}
+            >
+              <span>{link.label}</span>
+            </Link>
+          ))}
+        </div>
+
+        {socialLinks && socialLinks.length > 0 && (
+          <div className="my-8 flex flex-wrap justify-center gap-6 text-sm">
+            {socialLinks.map((social, index) => (
+              <Link
+                key={index}
+                href={social.href}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+                aria-label={social.platform}
+              >
+                {social.icon ? (
+                  <SocialIcon name={social.icon} />
+                ) : (
+                  <span className="text-sm">{social.platform}</span>
+                )}
+              </Link>
+            ))}
+          </div>
+        )}
+
+        <span className="text-muted-foreground block text-center text-sm">
+          &copy; {new Date().getFullYear()} {copyright ?? "All rights reserved"}
+        </span>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { array, defineBlock, object, select, text, upload } from "@vexcms/core"
+
+import { TABLE_SLUG_MEDIA } from "~/db/constants"
+import { BLOCK_SLUG_HEADER } from "../constants"
+
+export const headerBlock = defineBlock({
+  slug: BLOCK_SLUG_HEADER,
+  label: "Header",
+  fields: {
+    logoText: text({
+      label: "Logo Text",
+      defaultValue: "Vex CMS",
+      admin: { description: "Text to display as the logo" },
+    }),
+    logoImage: upload({
+      label: "Logo Image",
+      to: TABLE_SLUG_MEDIA,
+      admin: { description: "Image to display as the logo (overrides text)" },
+    }),
+    logoHref: text({
+      label: "Logo Link",
+      defaultValue: "/",
+    }),
+    menuItems: array({
+      label: "Menu Items",
+      items: object({
+        fields: {
+          label: text({ label: "Label", required: true }),
+          href: text({ label: "Link", required: true }),
+        },
+      }),
+      defaultValue: [
+        { label: "Features", href: "/features" },
+        { label: "Pricing", href: "/pricing" },
+        { label: "Roadmap", href: "/roadmap" },
+        { label: "Docs", href: "/docs" },
+      ],
+    }),
+    actionButtons: array({
+      label: "Action Buttons",
+      items: object({
+        fields: {
+          label: text({ label: "Button Label", required: true }),
+          href: text({ label: "Button Link", required: true }),
+          variant: select({
+            label: "Variant",
+            options: [
+              { label: "Default", value: "default" },
+              { label: "Outline", value: "outline" },
+              { label: "Ghost", value: "ghost" },
+            ],
+            defaultValue: "default",
+          }),
+        },
+      }),
+      defaultValue: [
+        { label: "GitHub", href: "https://github.com/vexcms/vex", variant: "ghost" },
+        { label: "Get Started", href: "/docs", variant: "default" },
+      ],
+    }),
+  },
+  admin: {
+    icon: "panel-top",
+  },
+})

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

@@ -0,0 +1,174 @@
+"use client"
+
+import type { BlockComponentProps } from "@vexcms/ui"
+
+import { Menu, Settings, X } from "lucide-react"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+
+import { useSession } from "~/auth/client"
+import { cn } from "~/lib/utils"
+import { buttonVariants } from "~/components/ui/button"
+
+export { headerBlock } from "./config"
+
+export default function HeaderBlock({ block }: BlockComponentProps) {
+  const {
+    logoText,
+    logoHref = "/",
+    menuItems,
+    actionButtons,
+  } = block as {
+    logoText?: string
+    logoImage?: string
+    logoHref?: string
+    menuItems?: Array<{ label: string; href: string }>
+    actionButtons?: Array<{ label: string; href: string; variant?: string }>
+  }
+
+  const { data: session } = useSession()
+  const isAdmin = session?.user?.role === "admin" ||
+    (Array.isArray((session?.user as any)?.role) && (session?.user as any)?.role?.includes("admin"))
+
+  const [menuState, setMenuState] = useState(false)
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50)
+    }
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  return (
+    <header>
+      <nav
+        className="fixed z-20 w-full px-2"
+        data-state={menuState ? "active" : undefined}
+      >
+        <div
+          className={cn(
+            "mx-auto mt-2 max-w-6xl px-6 transition-all duration-300 lg:px-12",
+            isScrolled &&
+              "bg-background/50 max-w-4xl rounded-2xl border backdrop-blur-lg lg:px-5"
+          )}
+        >
+          <div className="relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
+            <div className="flex w-full justify-between lg:w-auto">
+              <Link
+                aria-label="home"
+                className="flex items-center gap-2 text-lg font-semibold"
+                href={logoHref}
+              >
+                {logoText ?? "Vex CMS"}
+              </Link>
+
+              <button
+                aria-label={menuState ? "Close Menu" : "Open Menu"}
+                className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
+                onClick={() => setMenuState(!menuState)}
+              >
+                <Menu className="m-auto size-6 duration-200 in-data-[state=active]:scale-0 in-data-[state=active]:rotate-180 in-data-[state=active]:opacity-0" />
+                <X className="absolute inset-0 m-auto size-6 scale-0 -rotate-180 opacity-0 duration-200 in-data-[state=active]:scale-100 in-data-[state=active]:rotate-0 in-data-[state=active]:opacity-100" />
+              </button>
+
+              <div className="absolute inset-0 m-auto hidden size-fit lg:block">
+                <ul className="flex gap-8 text-sm">
+                  {(menuItems ?? []).map((item, index) => (
+                    <li key={index}>
+                      <Link
+                        className="text-muted-foreground hover:text-accent-foreground block duration-150"
+                        href={item.href}
+                      >
+                        <span>{item.label}</span>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+
+            <div className="hidden lg:flex lg:gap-3">
+              {(actionButtons ?? []).map((button, index) => (
+                <Link
+                  key={index}
+                  href={button.href}
+                  className={cn(
+                    buttonVariants({
+                      size: "sm",
+                      variant: (button.variant as "default" | "outline" | "ghost") ?? "default",
+                    })
+                  )}
+                >
+                  <span>{button.label}</span>
+                </Link>
+              ))}
+              {isAdmin && (
+                <Link
+                  href="/admin"
+                  className={cn(
+                    buttonVariants({ size: "sm", variant: "outline" }),
+                    "gap-1.5"
+                  )}
+                >
+                  <Settings className="size-3.5" />
+                  <span>Admin</span>
+                </Link>
+              )}
+            </div>
+
+            {/* Mobile menu */}
+            <div className="bg-background absolute top-[125%] z-10 mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 in-data-[state=active]:block md:flex-nowrap lg:m-0 lg:w-fit lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
+              <div className="lg:hidden">
+                <ul className="space-y-6 text-base">
+                  {(menuItems ?? []).map((item, index) => (
+                    <li key={index}>
+                      <Link
+                        className="text-muted-foreground hover:text-accent-foreground block duration-150"
+                        href={item.href}
+                      >
+                        <span>{item.label}</span>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+
+                {(actionButtons && actionButtons.length > 0 || isAdmin) && (
+                  <div className="mt-6 flex flex-col space-y-3">
+                    {(actionButtons ?? []).map((button, index) => (
+                      <Link
+                        key={index}
+                        href={button.href}
+                        className={cn(
+                          buttonVariants({
+                            size: "sm",
+                            variant: (button.variant as "default" | "outline" | "ghost") ?? "default",
+                          })
+                        )}
+                      >
+                        <span>{button.label}</span>
+                      </Link>
+                    ))}
+                    {isAdmin && (
+                      <Link
+                        href="/admin"
+                        className={cn(
+                          buttonVariants({ size: "sm", variant: "outline" }),
+                          "gap-1.5"
+                        )}
+                      >
+                        <Settings className="size-3.5" />
+                        <span>Admin</span>
+                      </Link>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </header>
+  )
+}