create-vexcms 0.0.8 → 0.0.10

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

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"],
+  },
+})