create-vexcms 0.0.7 → 0.0.9

package/templates/marketing-site/src/components/motion-primitives/animated-group.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import { motion, type Variants } from "motion/react"
+import React, { type ComponentPropsWithRef } from "react"
+
+export type PresetType =
+  | "blur"
+  | "blur-slide"
+  | "bounce"
+  | "fade"
+  | "flip"
+  | "rotate"
+  | "scale"
+  | "slide"
+  | "swing"
+  | "zoom"
+
+export type AnimatedGroupProps = ComponentPropsWithRef<"div"> & {
+  as?: React.ElementType
+  asChild?: React.ElementType
+  className?: string
+  preset?: PresetType
+  variants?: {
+    container?: Variants
+    item?: Variants
+  }
+}
+
+const defaultContainerVariants: Variants = {
+  visible: {
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+}
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+}
+
+const presetVariants: Record<PresetType, Variants> = {
+  "blur-slide": {
+    hidden: { filter: "blur(4px)", y: 20 },
+    visible: { filter: "blur(0px)", y: 0 },
+  },
+  slide: {
+    hidden: { y: 20 },
+    visible: { y: 0 },
+  },
+  blur: {
+    hidden: { filter: "blur(4px)" },
+    visible: { filter: "blur(0px)" },
+  },
+  bounce: {
+    hidden: { y: -50 },
+    visible: {
+      transition: { type: "spring", damping: 10, stiffness: 400 },
+      y: 0,
+    },
+  },
+  fade: {},
+  flip: {
+    hidden: { rotateX: -90 },
+    visible: {
+      rotateX: 0,
+      transition: { type: "spring", damping: 20, stiffness: 300 },
+    },
+  },
+  rotate: {
+    hidden: { rotate: -180 },
+    visible: {
+      rotate: 0,
+      transition: { type: "spring", damping: 15, stiffness: 200 },
+    },
+  },
+  scale: {
+    hidden: { scale: 0.8 },
+    visible: { scale: 1 },
+  },
+  swing: {
+    hidden: { rotate: -10 },
+    visible: {
+      rotate: 0,
+      transition: { type: "spring", damping: 8, stiffness: 300 },
+    },
+  },
+  zoom: {
+    hidden: { scale: 0.5 },
+    visible: {
+      scale: 1,
+      transition: { type: "spring", damping: 20, stiffness: 300 },
+    },
+  },
+}
+
+const addDefaultVariants = (variants: Variants) => ({
+  hidden: { ...defaultItemVariants.hidden, ...variants.hidden },
+  visible: { ...defaultItemVariants.visible, ...variants.visible },
+})
+
+function AnimatedGroup({
+  as = "div",
+  asChild = "div",
+  children,
+  className,
+  preset,
+  variants,
+  ...divProps
+}: AnimatedGroupProps) {
+  const selectedVariants = {
+    container: addDefaultVariants(defaultContainerVariants),
+    item: addDefaultVariants(preset ? presetVariants[preset] : {}),
+  }
+  const containerVariants = variants?.container ?? selectedVariants.container
+  const itemVariants = variants?.item ?? selectedVariants.item
+
+  const MotionComponent = motion(as)
+  const MotionChild = motion(asChild)
+
+  return (
+    <MotionComponent
+      animate="visible"
+      className={className}
+      initial="hidden"
+      variants={containerVariants}
+      {...divProps}
+    >
+      {React.Children.map(children, (child, index) => (
+        <MotionChild key={index} variants={itemVariants}>
+          {child}
+        </MotionChild>
+      ))}
+    </MotionComponent>
+  )
+}
+
+export { AnimatedGroup }

package/templates/marketing-site/src/components/motion-primitives/text-effect.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import {
+  AnimatePresence,
+  motion,
+  type TargetAndTransition,
+  type Transition,
+  type Variant,
+  type Variants,
+} from "motion/react"
+import React from "react"
+
+import { cn } from "~/lib/utils"
+
+export type PerType = "char" | "line" | "word"
+export type PresetType = "blur" | "fade" | "fade-in-blur" | "scale" | "slide"
+
+export type TextEffectProps = {
+  as?: keyof React.JSX.IntrinsicElements
+  children: string
+  className?: string
+  containerTransition?: Transition
+  delay?: number
+  onAnimationComplete?: () => void
+  onAnimationStart?: () => void
+  per?: PerType
+  preset?: PresetType
+  segmentTransition?: Transition
+  segmentWrapperClassName?: string
+  speedReveal?: number
+  speedSegment?: number
+  style?: React.CSSProperties
+  trigger?: boolean
+  variants?: {
+    container?: Variants
+    item?: Variants
+  }
+}
+
+const defaultStaggerTimes: Record<PerType, number> = {
+  char: 0.03,
+  line: 0.1,
+  word: 0.05,
+}
+
+const defaultContainerVariants: Variants = {
+  hidden: { opacity: 0 },
+  exit: {
+    transition: { staggerChildren: 0.05, staggerDirection: -1 },
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+}
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  exit: { opacity: 0 },
+  visible: {
+    opacity: 1,
+  },
+}
+
+const presetVariants: Record<
+  PresetType,
+  { container: Variants; item: Variants }
+> = {
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      exit: { opacity: 0, y: 20 },
+      visible: { opacity: 1, y: 0 },
+    },
+  },
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { filter: "blur(12px)", opacity: 0 },
+      exit: { filter: "blur(12px)", opacity: 0 },
+      visible: { filter: "blur(0px)", opacity: 1 },
+    },
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      exit: { opacity: 0 },
+      visible: { opacity: 1 },
+    },
+  },
+  "fade-in-blur": {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { filter: "blur(12px)", opacity: 0, y: 20 },
+      exit: { filter: "blur(12px)", opacity: 0, y: 20 },
+      visible: { filter: "blur(0px)", opacity: 1, y: 0 },
+    },
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0 },
+      exit: { opacity: 0, scale: 0 },
+      visible: { opacity: 1, scale: 1 },
+    },
+  },
+}
+
+const AnimationComponent: React.FC<{
+  per: "char" | "line" | "word"
+  segment: string
+  segmentWrapperClassName?: string
+  variants: Variants
+}> = React.memo(({ per, segment, segmentWrapperClassName, variants }) => {
+  const content =
+    per === "line" ? (
+      <motion.span className="block" variants={variants}>
+        {segment}
+      </motion.span>
+    ) : per === "word" ? (
+      <motion.span
+        aria-hidden="true"
+        className="inline-block whitespace-pre"
+        variants={variants}
+      >
+        {segment}
+      </motion.span>
+    ) : (
+      <motion.span className="inline-block whitespace-pre">
+        {segment.split("").map((char, charIndex) => (
+          <motion.span
+            aria-hidden="true"
+            className="inline-block whitespace-pre"
+            key={`char-${charIndex}`}
+            variants={variants}
+          >
+            {char}
+          </motion.span>
+        ))}
+      </motion.span>
+    )
+
+  if (!segmentWrapperClassName) {
+    return content
+  }
+
+  const defaultWrapperClassName = per === "line" ? "block" : "inline-block"
+
+  return (
+    <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
+      {content}
+    </span>
+  )
+})
+
+AnimationComponent.displayName = "AnimationComponent"
+
+const splitText = (text: string, per: "char" | "line" | "word") => {
+  if (per === "line") return text.split("\n")
+  return text.split(/(\s+)/)
+}
+
+const hasTransition = (
+  variant: Variant,
+): variant is TargetAndTransition & { transition?: Transition } => {
+  return (
+    typeof variant === "object" && variant !== null && "transition" in variant
+  )
+}
+
+const createVariantsWithTransition = (
+  baseVariants: Variants,
+  transition?: Transition & { exit?: Transition },
+): Variants => {
+  if (!transition) return baseVariants
+
+  const { ...mainTransition } = transition
+
+  return {
+    ...baseVariants,
+    exit: {
+      ...baseVariants.exit,
+      transition: {
+        ...(hasTransition(baseVariants.exit)
+          ? baseVariants.exit.transition
+          : {}),
+        ...mainTransition,
+        staggerDirection: -1,
+      },
+    },
+    visible: {
+      ...baseVariants.visible,
+      transition: {
+        ...(hasTransition(baseVariants.visible)
+          ? baseVariants.visible.transition
+          : {}),
+        ...mainTransition,
+      },
+    },
+  }
+}
+
+export function TextEffect({
+  as = "p",
+  children,
+  className,
+  containerTransition,
+  delay = 0,
+  onAnimationComplete,
+  onAnimationStart,
+  per = "word",
+  preset = "fade",
+  segmentTransition,
+  segmentWrapperClassName,
+  speedReveal = 1,
+  speedSegment = 1,
+  style,
+  trigger = true,
+  variants,
+}: TextEffectProps) {
+  const segments = splitText(children, per)
+  const MotionTag = motion[as as keyof typeof motion] as typeof motion.div
+
+  const baseVariants = preset
+    ? presetVariants[preset]
+    : { container: defaultContainerVariants, item: defaultItemVariants }
+
+  const stagger = defaultStaggerTimes[per] / speedReveal
+
+  const baseDuration = 0.3 / speedSegment
+
+  const customStagger = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+        ?.staggerChildren
+    : undefined
+
+  const customDelay = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+        ?.delayChildren
+    : undefined
+
+  const computedVariants = {
+    container: createVariantsWithTransition(
+      variants?.container ?? baseVariants.container,
+      {
+        delayChildren: customDelay ?? delay,
+        staggerChildren: customStagger ?? stagger,
+        ...containerTransition,
+        exit: {
+          staggerChildren: customStagger ?? stagger,
+          staggerDirection: -1,
+        },
+      },
+    ),
+    item: createVariantsWithTransition(variants?.item ?? baseVariants.item, {
+      duration: baseDuration,
+      ...segmentTransition,
+    }),
+  }
+
+  return (
+    <AnimatePresence mode="popLayout">
+      {trigger && (
+        <MotionTag
+          animate="visible"
+          className={className}
+          exit="exit"
+          initial="hidden"
+          onAnimationComplete={onAnimationComplete}
+          onAnimationStart={onAnimationStart}
+          style={style}
+          variants={computedVariants.container}
+        >
+          {per !== "line" ? <span className="sr-only">{children}</span> : null}
+          {segments.map((segment, index) => (
+            <AnimationComponent
+              key={`${per}-${index}-${segment}`}
+              per={per}
+              segment={segment}
+              segmentWrapperClassName={segmentWrapperClassName}
+              variants={computedVariants.item}
+            />
+          ))}
+        </MotionTag>
+      )}
+    </AnimatePresence>
+  )
+}

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