create-vexcms 0.1.0-alpha.2 → 0.1.0-alpha.21

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,73 @@
-"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 rawSegments =
+    per === "line" ? children.split("\n") : children.split(/(\s+)/).filter(Boolean)
+  const step = stagger ?? defaultStagger[per]
+
+  // Whitespace segments are re-emitted verbatim so words still wrap, but they
+  // must not consume a stagger slot. Both passes are pure: the React Compiler
+  // rejects a counter reassigned inside a render-scope closure, because a
+  // partially re-run render would resume from a stale count.
+  const gaps = rawSegments.map((text) => per === "word" && /^\s+$/.test(text))
+  const segments = rawSegments.map((text, index) => {
+    if (gaps[index]) {return { delay: null, text }}
+    const animatedBefore = gaps.slice(0, index).filter((isGap) => !isGap).length
+    return { delay: delay + animatedBefore * step, text }
+  })
 
   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>
+    <Tag className={className}>
+      {segments.map((segment, index) =>
+        segment.delay === null ? (
+          <React.Fragment key={index}>{segment.text}</React.Fragment>
+        ) : (
+          <span
+            className={cn(styles.item, per === "line" ? "block" : "inline-block")}
+            key={index}
+            style={{ "--reveal-delay": `${segment.delay}s` } as CSSProperties}
+          >
+            {segment.text}
+          </span>
+        )
       )}
-    </AnimatePresence>
+    </Tag>
   )
 }

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

@@ -0,0 +1,27 @@
+/**
+ * Stable key identifying one highlighted code pane.
+ *
+ * Client-safe by construction — this module imports nothing (shiki in
+ * particular), because both sides compute the key: the server when it builds
+ * the highlight map, and `CodePane` in the browser when it looks an entry up.
+ *
+ * A hash rather than the source text itself: the map is serialised into the
+ * RSC payload, and keying by the full code would ship every pane's source a
+ * second time.
+ *
+ * @param props.code - Source text exactly as authored.
+ * @param props.language - Resolved grammar name.
+ * @returns A short key, stable across server and client for identical input.
+ */
+export function codeHighlightKey(props: { code: string; language: string }): string {
+  const input = `${props.language}\u0000${props.code}`
+  // FNV-1a, 32-bit. Collisions only ever mean "render the wrong highlighted
+  // HTML for a pane", not a correctness or security problem, and the input
+  // space here is a handful of panes per page.
+  let hash = 0x811c9dc5
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i)
+    hash = Math.imul(hash, 0x01000193)
+  }
+  return `${props.language}-${(hash >>> 0).toString(36)}-${props.code.length}`
+}

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

@@ -0,0 +1,134 @@
+import { createHighlighter, type Highlighter } from "shiki"
+
+import { codeHighlightKey } from "./codeHighlightKey"
+
+/** Languages the `language` select on CodeShowcase and Split can produce. */
+export const CODE_LANGUAGES = ["bash", "json", "ts", "tsx"] as const
+
+export type CodeLanguage = (typeof CODE_LANGUAGES)[number]
+
+/**
+ * Shiki theme for every code pane, server and browser alike.
+ *
+ * Tokyo Night supplies the token colours only: `highlightCode` discards
+ * shiki's `<pre>` wrapper, which is where a theme's own background and
+ * default foreground live, so the pane keeps the Stark Ember surface from
+ * `--color-code-bg`/`--color-code-fg` and only the syntax colours change.
+ */
+export const CODE_THEME = "tokyo-night"
+
+/**
+ * Narrows an authored `language` value to one shiki is loaded for.
+ *
+ * The field is a `select`, so the value is an array and can also be a stale
+ * string left by a hand-edit. Anything unrecognised falls back to `ts`, which
+ * is what every pane in the seed uses.
+ *
+ * @param value - Raw field value.
+ * @returns A language shiki has a grammar loaded for.
+ */
+export function toCodeLanguage(value: string | string[] | undefined): CodeLanguage {
+  const raw = Array.isArray(value) ? value[0] : value
+  return (CODE_LANGUAGES as readonly string[]).includes(raw ?? "")
+    ? (raw as CodeLanguage)
+    : "ts"
+}
+
+let highlighterPromise: null | Promise<Highlighter> = null
+
+/**
+ * Renders source to highlighted HTML in a server component.
+ *
+ * Shiki's own `<pre>` wrapper is discarded — the pane supplies its own
+ * scrolling frame — so this returns only the inner markup.
+ *
+ * @param props - Input props.
+ * @param props.code - Source text, exactly as authored in the CMS.
+ * @param props.language - Grammar to highlight with.
+ * @returns Highlighted inner HTML, safe to inject.
+ */
+export async function highlightCode(props: {
+  code: string
+  language: CodeLanguage
+}): Promise<string> {
+  const highlighter = await getHighlighter()
+  const html = highlighter.codeToHtml(props.code, {
+    lang: props.language,
+    theme: CODE_THEME,
+  })
+  // `codeToHtml` returns `<pre …><code>…</code></pre>`; keep the inner code
+  // element's contents and let the pane own the scroll container.
+  const match = /<code[^>]*>([\s\S]*)<\/code>/.exec(html)
+  return match?.[1] ?? html
+}
+
+/**
+ * One process-wide highlighter, created lazily.
+ *
+ * Loaded with a single theme on purpose: code panes are fixed dark in both
+ * light and dark site themes (see the `--color-code-*` tokens in
+ * `globals.css`), so there is no second theme to switch between and the
+ * client ships no highlighter at all.
+ *
+ * @returns The shared shiki highlighter.
+ */
+function getHighlighter(): Promise<Highlighter> {
+  highlighterPromise ??= createHighlighter({
+    langs: [...CODE_LANGUAGES],
+    themes: [CODE_THEME],
+  })
+  return highlighterPromise
+}
+
+/**
+ * Map of {@link codeHighlightKey} to highlighted inner HTML, built on the
+ * server and handed to the client tree.
+ */
+export type CodeHighlightMap = Record<string, string>
+
+/**
+ * Pre-highlights every code pane a page's blocks contain.
+ *
+ * Exists because `PageContent` is a client component (live preview overlays
+ * its query result), so nothing below it can `await` shiki. The server walks
+ * the fetched document, highlights each pane, and passes plain strings across
+ * the boundary; `CodePane` then renders synchronously.
+ *
+ * The walk is structural rather than block-type-aware: any object carrying a
+ * string `code` is a pane, wherever a future block puts it, and its language
+ * comes from a sibling `language`/`codeLanguage` field.
+ *
+ * @param blocks - The document's `blocks` array, as fetched.
+ * @returns Highlighted HTML keyed by {@link codeHighlightKey}.
+ */
+export async function highlightPageBlocks(blocks: unknown): Promise<CodeHighlightMap> {
+  const panes: { code: string; language: CodeLanguage }[] = []
+
+  const collect = (node: unknown): void => {
+    if (Array.isArray(node)) {
+      node.forEach(collect)
+      return
+    }
+    if (node === null || typeof node !== "object") return
+
+    const record = node as Record<string, unknown>
+    if (typeof record.code === "string" && record.code.length > 0) {
+      panes.push({
+        code: record.code,
+        language: toCodeLanguage(
+          (record.language ?? record.codeLanguage) as string | string[] | undefined
+        ),
+      })
+    }
+    Object.values(record).forEach(collect)
+  }
+  collect(blocks)
+
+  const highlighted: CodeHighlightMap = {}
+  for (const pane of panes) {
+    const key = codeHighlightKey(pane)
+    if (highlighted[key] !== undefined) continue
+    highlighted[key] = await highlightCode(pane)
+  }
+  return highlighted
+}

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

@@ -0,0 +1,37 @@
+import type { Highlighter } from "shiki"
+
+import { createHighlighter } from "shiki"
+
+import type { CodeLanguage } from "./highlight"
+
+import { CODE_LANGUAGES, CODE_THEME } from "./highlight"
+
+let browserHighlighterPromise: null | Promise<Highlighter> = null
+
+/**
+ * Highlights code in the browser, for panes the server never saw.
+ *
+ * The only caller is `useCodeHighlight`'s miss branch — live preview, where
+ * the editor's unsaved source exists nowhere but this tab. Loaded through a
+ * dynamic import so shiki stays out of the page's main client chunk.
+ *
+ * @param props.code - Source text.
+ * @param props.language - Grammar to highlight with.
+ * @returns Highlighted inner HTML, matching `highlightCode`'s server output.
+ */
+export async function highlightCodeInBrowser(props: {
+  code: string
+  language: CodeLanguage
+}): Promise<string> {
+  browserHighlighterPromise ??= createHighlighter({
+    langs: [...CODE_LANGUAGES],
+    themes: [CODE_THEME],
+  })
+  const highlighter = await browserHighlighterPromise
+  const html = highlighter.codeToHtml(props.code, {
+    lang: props.language,
+    theme: CODE_THEME,
+  })
+  const match = /<code[^>]*>([\s\S]*)<\/code>/.exec(html)
+  return match?.[1] ?? html
+}