create-vexcms 0.0.20 → 0.1.0-alpha.3

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

@@ -1,138 +1,62 @@
-"use client"
+import React, { type ComponentPropsWithRef, type CSSProperties } from "react"
 
-import { motion, type Variants } from "motion/react"
-import React, { type ComponentPropsWithRef } from "react"
+import { cn } from "~/lib/utils"
 
-export type PresetType =
-  | "blur"
-  | "blur-slide"
-  | "bounce"
-  | "fade"
-  | "flip"
-  | "rotate"
-  | "scale"
-  | "slide"
-  | "swing"
-  | "zoom"
+import styles from "./reveal.module.css"
 
 export type AnimatedGroupProps = ComponentPropsWithRef<"div"> & {
   as?: React.ElementType
-  asChild?: React.ElementType
-  className?: string
-  preset?: PresetType
-  variants?: {
-    container?: Variants
-    item?: Variants
-  }
+  /** Seconds before the first child starts animating. */
+  delay?: number
+  /** Seconds between each child's start. */
+  stagger?: number
 }
 
-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",
+/**
+ * Staggers a blur + fade + rise entrance across its direct children using a
+ * pure-CSS keyframe (see `reveal.module.css`) — no animation-library
+ * dependency. Each child is wrapped in a div carrying the animation with an
+ * incremented `animation-delay`.
+ */
+export function AnimatedGroup({
+  as: Tag = "div",
   children,
   className,
-  preset,
-  variants,
+  delay = 0,
+  stagger = 0.05,
   ...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.create(as)
-  const MotionChild = motion.create(asChild)
-
   return (
-    <MotionComponent
-      animate="visible"
-      className={className}
-      initial="hidden"
-      variants={containerVariants}
-      {...divProps}
-    >
+    <Tag className={className} {...divProps}>
       {React.Children.map(children, (child, index) => (
-        <MotionChild key={index} variants={itemVariants}>
+        <div
+          className={styles.item}
+          style={{ "--reveal-delay": `${delay + index * stagger}s` } as CSSProperties}
+        >
           {child}
-        </MotionChild>
+        </div>
       ))}
-    </MotionComponent>
+    </Tag>
   )
 }
 
-export { AnimatedGroup }
+/**
+ * Applies the same reveal animation to a single element without adding a
+ * wrapper div — for callers that only need one animated child.
+ */
+export function AnimatedItem({
+  children,
+  className,
+  delay = 0,
+  ...divProps
+}: ComponentPropsWithRef<"div"> & { delay?: number }) {
+  return (
+    <div
+      className={cn(styles.item, className)}
+      style={{ "--reveal-delay": `${delay}s` } as CSSProperties}
+      {...divProps}
+    >
+      {children}
+    </div>
+  )
+}

package/templates/marketing-site/src/components/motion-primitives/reveal.module.css

@@ -0,0 +1,32 @@
+/*
+ * Shared "reveal" animation for AnimatedGroup and TextEffect — the
+ * blur + fade + rise entrance the hero uses, implemented in pure CSS so the
+ * template carries no animation-library dependency.
+ *
+ * `both` fill-mode keeps elements hidden until their delay elapses, which is
+ * what makes the stagger read as a sequence. Delay per element arrives via
+ * the `--reveal-delay` custom property.
+ */
+@keyframes reveal {
+  from {
+    opacity: 0;
+    filter: blur(12px);
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
+.item {
+  animation: reveal 1.1s cubic-bezier(0.25, 1, 0.5, 1) both;
+  animation-delay: var(--reveal-delay, 0s);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    animation: none;
+  }
+}

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

@@ -1,292 +1,66 @@
-"use client"
-
-import {
-  AnimatePresence,
-  motion,
-  type TargetAndTransition,
-  type Transition,
-  type Variant,
-  type Variants,
-} from "motion/react"
-import React from "react"
+import React, { type CSSProperties } from "react"
 
 import { cn } from "~/lib/utils"
 
-export type PerType = "char" | "line" | "word"
-export type PresetType = "blur" | "fade" | "fade-in-blur" | "scale" | "slide"
+import styles from "./reveal.module.css"
+
+export type PerType = "line" | "word"
 
 export type TextEffectProps = {
   as?: keyof React.JSX.IntrinsicElements
   children: string
   className?: string
-  containerTransition?: Transition
+  /** Seconds before the first segment starts animating. */
   delay?: number
-  onAnimationComplete?: () => void
-  onAnimationStart?: () => void
+  /** Split granularity for the stagger. Lines split on `\n`. */
   per?: PerType
-  preset?: PresetType
-  segmentTransition?: Transition
-  segmentWrapperClassName?: string
-  speedReveal?: number
-  speedSegment?: number
-  style?: React.CSSProperties
-  trigger?: boolean
-  variants?: {
-    container?: Variants
-    item?: Variants
-  }
+  /** Seconds between each segment's start. */
+  stagger?: number
 }
 
-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,
-      },
-    },
-  }
+const defaultStagger: Record<PerType, number> = {
+  line: 0.15,
+  word: 0.04,
 }
 
+/**
+ * Staggered blur + fade + rise text entrance, split per word or per line —
+ * pure CSS (see `reveal.module.css`), no animation-library dependency.
+ * Word segments keep their trailing space inside the animated span so text
+ * still wraps naturally.
+ */
 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,
+  stagger,
 }: 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,
-    }),
-  }
+  const Tag = as as React.ElementType
+  const segments =
+    per === "line" ? children.split("\n") : children.split(/(\s+)/).filter(Boolean)
+  const step = stagger ?? defaultStagger[per]
 
+  let animatedIndex = 0
   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>
+    <Tag className={className}>
+      {segments.map((segment, index) => {
+        if (per === "word" && /^\s+$/.test(segment)) {
+          return <React.Fragment key={index}>{segment}</React.Fragment>
+        }
+        const segmentDelay = delay + animatedIndex * step
+        animatedIndex += 1
+        return (
+          <span
+            className={cn(styles.item, per === "line" ? "block" : "inline-block")}
+            key={index}
+            style={{ "--reveal-delay": `${segmentDelay}s` } as CSSProperties}
+          >
+            {segment}
+          </span>
+        )
+      })}
+    </Tag>
   )
 }

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

@@ -1,99 +1,78 @@
 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"
 
+const TITLE_SUFFIX = " | Vex CMS"
+
+/**
+ * Resolves an `upload()` field's stored media id to a public URL via the
+ * Convex file storage adapter. Returns `undefined` when the media document
+ * no longer exists or the deployment is unreachable.
+ */
+async function resolveMediaUrl(mediaId: string): Promise<string | undefined> {
+  try {
+    const result = (await fetchQuery(anyApi.vex.media.getUrl, {
+      adapter: "convex",
+      mediaId,
+    })) as { url?: string; error?: string }
+    return result.url
+  } catch {
+    return undefined
+  }
+}
+
 /**
  * Generate Next.js Metadata for a page.
- * Fetches site settings and optionally a page document,
- * merges with buildSiteMetadata, and returns Next.js Metadata format.
+ *
+ * Fetches site settings and, when a slug is given, the matching page
+ * document, then merges them — page-level `metaTitle`/`metaDescription`/
+ * `ogImage` win over the site's defaults from `siteSettings`.
  *
  * @param props.slug - Optional page slug to fetch per-page SEO overrides
  */
-export async function generatePageMetadata(props: {
-  slug?: string
-}): Promise<Metadata> {
+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
-
+    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
+    let pageData: Record<string, unknown> | undefined
     if (props.slug) {
-      pageData = await fetchQuery(api.pages.getBySlug, {
-        slug: props.slug,
-        _vexDrafts: false,
-      })
+      const pages = (await fetchQuery(api.pages.getBySlug, { slug: props.slug })) as
+        | Record<string, unknown>[]
+        | undefined
+      pageData = pages?.[0]
     }
 
-    // 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",
-    })
+    const pageTitle = (pageData?.metaTitle as string | undefined) ?? (pageData?.title as string | undefined)
+    const siteName = settings.name as string | undefined
+    const title = (pageTitle ?? (settings.metaTitle as string | undefined) ?? siteName ?? "Untitled") + TITLE_SUFFIX
+    const description =
+      (pageData?.metaDescription as string | undefined) ??
+      (settings.metaDescription as string | undefined) ??
+      (settings.description as string | undefined)
 
-    // Map to Next.js Metadata
-    const metadata: Metadata = {
-      title: meta.title,
-      description: meta.description,
-    }
+    // `upload()` fields always store an array of media ids — the first entry
+    // is the selection. Page-level ogImage wins over the site default.
+    const pageOgImageId = (pageData?.ogImage as string[] | undefined)?.[0]
+    const siteOgImageId = (settings.ogImage as string[] | undefined)?.[0]
+    const ogImageId = pageOgImageId ?? siteOgImageId
+    const ogImageUrl = ogImageId ? await resolveMediaUrl(ogImageId) : undefined
+
+    const twitterHandle = settings.twitterHandle as string | undefined
+
+    const metadata: Metadata = { title, description }
 
-    if (meta.ogImage) {
-      metadata.openGraph = {
-        title: meta.title,
-        description: meta.description,
-        images: [{ url: meta.ogImage }],
-      }
+    if (ogImageUrl) {
+      metadata.openGraph = { title, description, images: [{ url: ogImageUrl }] }
     }
 
-    if (meta.twitterHandle) {
-      metadata.twitter = {
-        card: "summary_large_image",
-        site: meta.twitterHandle,
-      }
+    if (twitterHandle) {
+      metadata.twitter = { card: "summary_large_image", site: twitterHandle }
     }
 
     return metadata