create-bearminion 1.0.1 → 1.2.0

package/template/src/components/sections/registry.ts

@@ -5,20 +5,26 @@ import Faq from './faq/Faq.astro'
 import Features from './features/Features.astro'
 import Hero from './hero/Hero.astro'
 import LogoStrip from './logo-strip/LogoStrip.astro'
+import Media from './media/Media.astro'
 import Pricing from './pricing/Pricing.astro'
 import Stats from './stats/Stats.astro'
+import Steps from './steps/Steps.astro'
 import Testimonials from './testimonials/Testimonials.astro'
 import TextImage from './text-image/TextImage.astro'
+import Video from './video/Video.astro'
 
 /** Maps a content section `type` to the component that renders it. Definitions live in `definitions.ts`. */
 export const sectionComponents = {
   hero: Hero,
   logoStrip: LogoStrip,
+  steps: Steps,
   features: Features,
   textImage: TextImage,
   stats: Stats,
   testimonials: Testimonials,
   pricing: Pricing,
+  video: Video,
+  media: Media,
   faq: Faq,
   cta: Cta,
   contact: Contact,

package/template/src/components/sections/steps/Steps.astro

@@ -0,0 +1,139 @@
+---
+import type { Section } from '../definitions'
+import Button from '../../atoms/Button.astro'
+import Typography from '../../atoms/Typography.astro'
+import SectionHeader from '../../molecules/SectionHeader.astro'
+import SectionShell from '../../molecules/SectionShell.astro'
+import { anchorAttrs, buttonLinkProps, buttonVariant } from '../../../lib/link-attrs'
+import { stepColumns, stepIconPaths } from './icons'
+
+interface Props {
+  section: Extract<Section, { type: 'steps' }>
+  index: number
+  motion?: boolean
+}
+
+const { section, index, motion = true } = Astro.props
+const props = section.props
+const field = (path: string) => `sections.${index}.props.${path}`
+const reveal = section.motion ?? motion
+const columns = stepColumns[props.steps.length] ?? ''
+const number = (itemIndex: number) => String(itemIndex + 1).padStart(2, '0')
+const textLink = 'inline-flex items-center gap-1.5 text-[0.9375rem] font-medium text-link underline-offset-4 hover:underline'
+---
+
+<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
+  {
+    section.variant === 'columns' && (
+      <div class="section-container flex flex-col gap-[clamp(2.5rem,5cqi,4rem)]">
+        <div class="flex flex-wrap items-end justify-between gap-x-16 gap-y-5">
+          <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} size="h2-md" field={field} headingClass="max-w-[16ch]" class="flex-[1_1_26rem] gap-5" />
+          {(props.body || props.link) && (
+            <div class="flex flex-[0_1_26rem] flex-col items-start gap-4">
+              {props.body && <Typography as="p" size="lead" color="muted" data-field={field('body')} markdown={props.body} />}
+              {props.link && (
+                <a {...anchorAttrs(props.link)} class={textLink}>
+                  <span data-field={field('link.label')}>{props.link.label}</span>
+                  <span aria-hidden="true">→</span>
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+        <ol class:list={['grid grid-cols-1 gap-4', columns]}>
+          {props.steps.map((step, itemIndex) => (
+            <li class="flex flex-col gap-4 rounded-card bg-surface p-[clamp(1.5rem,2.5cqi,2rem)] ring-line [&_code]:bg-bg">
+              <div class="flex items-center justify-between">
+                <span class="grid size-12 place-items-center rounded-[0.875rem] bg-accent text-on" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" class="size-[22px]" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <path d={stepIconPaths[step.icon]} />
+                  </svg>
+                </span>
+                {props.numbered && <span class="font-mono text-[0.75rem] tracking-[0.06em] text-muted">{number(itemIndex)}</span>}
+              </div>
+              <Typography as="h3" size="h3" class="mt-2 text-[1.375rem] leading-[1.15] tracking-[-0.025em]" data-field={field(`steps.${itemIndex}.title`)}>
+                {step.title}
+              </Typography>
+              {step.description && <Typography as="p" size="body" color="muted" data-field={field(`steps.${itemIndex}.description`)} markdown={step.description} />}
+            </li>
+          ))}
+        </ol>
+      </div>
+    )
+  }
+  {
+    section.variant === 'rail' && (
+      <div class="section-container flex flex-col items-center gap-[clamp(3rem,6cqi,5rem)]">
+        <SectionHeader
+          eyebrow={props.eyebrow}
+          heading={props.heading}
+          marks={props.marks}
+          intro={props.body}
+          introField="body"
+          align="center"
+          size="h2-md"
+          field={field}
+          headingClass="max-w-[18ch]"
+          class="gap-5 [&>[data-field-kind=rich]]:max-w-[34rem]"
+        />
+        <ol class:list={['grid w-full grid-cols-1 gap-x-8 gap-y-14', columns]}>
+          {props.steps.map((step, itemIndex) => (
+            <li class="relative flex flex-col gap-3.5 border-t border-line pt-9">
+              <span class="absolute -top-6 left-0 grid size-12 place-items-center rounded-full bg-bg text-fg ring-line" aria-hidden="true">
+                <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                  <path d={stepIconPaths[step.icon]} />
+                </svg>
+              </span>
+              {props.numbered && <span class="font-mono text-[0.75rem] tracking-[0.06em] text-link">Step {number(itemIndex)}</span>}
+              <Typography as="h3" size="h3" class="text-[1.375rem] leading-[1.15] tracking-[-0.025em]" data-field={field(`steps.${itemIndex}.title`)}>
+                {step.title}
+              </Typography>
+              {step.description && <Typography as="p" size="body" color="muted" data-field={field(`steps.${itemIndex}.description`)} markdown={step.description} />}
+            </li>
+          ))}
+        </ol>
+        {props.link && (
+          <Button {...buttonLinkProps(props.link)} variant={buttonVariant(props.link, 'secondary')} arrow data-field={field('link.label')}>
+            {props.link.label}
+          </Button>
+        )}
+      </div>
+    )
+  }
+  {
+    section.variant === 'list' && (
+      <div class="section-container grid grid-cols-[repeat(auto-fit,minmax(min(100%,22rem),1fr))] items-start gap-[clamp(2.5rem,6cqi,6rem)]">
+        <div class="sticky top-24 flex flex-col items-start gap-5">
+          <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} size="h2-md" field={field} class="gap-5" />
+          {props.body && <Typography as="p" size="lead" color="muted" data-field={field('body')} class="max-w-[30rem]" markdown={props.body} />}
+          {props.link && (
+            <a {...anchorAttrs(props.link)} class={textLink}>
+              <span data-field={field('link.label')}>{props.link.label}</span>
+              <span aria-hidden="true">→</span>
+            </a>
+          )}
+        </div>
+        <ol class="flex flex-col">
+          {props.steps.map((step, itemIndex) => (
+            <li class="grid grid-cols-[3rem_minmax(0,1fr)] gap-5 border-t border-line py-7">
+              <span class="grid size-12 place-items-center rounded-[0.875rem] bg-accent text-on" aria-hidden="true">
+                <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                  <path d={stepIconPaths[step.icon]} />
+                </svg>
+              </span>
+              <div class="flex flex-col gap-2">
+                <div class="flex items-baseline gap-3">
+                  {props.numbered && <span class="font-mono text-[0.75rem] text-muted">{number(itemIndex)}</span>}
+                  <Typography as="h3" size="h3" class="text-[1.25rem] leading-[1.2]" data-field={field(`steps.${itemIndex}.title`)}>
+                    {step.title}
+                  </Typography>
+                </div>
+                {step.description && <Typography as="p" size="body" color="muted" data-field={field(`steps.${itemIndex}.description`)} markdown={step.description} />}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    )
+  }
+</SectionShell>

package/template/src/components/sections/steps/Steps.stories.ts

@@ -0,0 +1,27 @@
+import { sectionArgTypes } from '../../../stories/options'
+import { steps } from './definition'
+import Steps from './Steps.astro'
+
+/** The sample pages hold no Steps section, so the stories start from its defaults. */
+const section = { id: 'steps', type: 'steps', variant: 'columns', tone: 'base', props: steps.defaults } as const
+const four = {
+  ...steps.defaults,
+  numbered: false,
+  steps: [
+    { icon: 'bolt', title: 'Quick', description: 'One command sets up the site and the editor.' },
+    { icon: 'cursor', title: 'Easy to use', description: 'Click the text on the page and type.' },
+    { icon: 'sliders', title: 'Customizable', description: 'Sections are Astro components with a schema.' },
+    { icon: 'terminal', title: 'Local', description: 'Run `npm run dev` and press `Ctrl+E`.' },
+  ],
+} as const
+
+export default {
+  title: 'Sections/Steps',
+  component: Steps,
+  parameters: { layout: 'fullscreen' },
+  argTypes: sectionArgTypes('steps'),
+}
+
+export const Columns = { args: { section, index: 0 } }
+export const Rail = { args: { section: { ...section, variant: 'rail', tone: 'subtle', props: four }, index: 0 } }
+export const List = { args: { section: { ...section, variant: 'list' }, index: 0 } }

package/template/src/components/sections/steps/definition.ts

@@ -0,0 +1,62 @@
+import { z } from 'zod'
+import { defineSection, linkSchema, richTextSchema, textSchema, withEmphasis, type CountRule } from 'bearminion'
+import { accent, eyebrow, heading } from '../shared'
+import { stepIconPaths } from './icons'
+import { stepsWireframe } from './wireframe'
+
+export const stepsVariants = ['columns', 'rail', 'list'] as const
+
+/** 24px stroke icons; the paths are in `icons.ts`. */
+export const stepIcons = ['terminal', 'edit', 'upload', 'moon', 'git', 'check', 'bolt', 'cursor', 'sliders', 'database'] as const
+
+export const stepsCounts = {
+  steps: { recommended: '3 or 4', min: 2, max: 6 },
+} as const satisfies Record<string, CountRule>
+
+export const stepItemSchema = z
+  .object({
+    icon: z.enum(stepIcons),
+    title: textSchema,
+    /** One sentence. Text in backticks shows as code. */
+    description: richTextSchema.optional(),
+  })
+  .strict()
+
+export const stepsSchema = withEmphasis({
+  eyebrow,
+  heading,
+  body: richTextSchema.optional(),
+  link: linkSchema.optional(),
+  /** Off: no "01" or "Step 01" over each item, for points that are not a sequence. */
+  numbered: z.boolean().default(true),
+  steps: z.array(stepItemSchema).min(stepsCounts.steps.min).max(stepsCounts.steps.max),
+})
+
+export type StepItem = z.infer<typeof stepItemSchema>
+export type StepsProps = z.infer<typeof stepsSchema>
+
+export const steps = defineSection({
+  type: 'steps',
+  label: 'Steps',
+  description: 'A few short points with an icon each: steps, or reasons.',
+  schema: stepsSchema,
+  defaults: {
+    eyebrow: 'How it works',
+    heading: 'Three steps to get going.',
+    marks: accent('Three steps to get going.', 'get going.'),
+    body: 'Say what the reader does first, then what happens next. Keep each step to one sentence.',
+    numbered: true,
+    steps: [
+      { icon: 'cursor', title: 'Pick', description: 'Name the first thing the reader does.' },
+      { icon: 'edit', title: 'Shape', description: 'Say what they change or decide next.' },
+      { icon: 'check', title: 'Done', description: 'End with what they have when they finish.' },
+    ],
+  },
+  variants: stepsVariants,
+  defaultVariant: 'columns',
+  options: [{ name: 'numbered', label: 'Show numbers', type: 'boolean', default: true }],
+  optional: { props: ['eyebrow', 'heading', 'body', 'link'], items: { steps: ['description'] } },
+  counts: stepsCounts,
+  icons: { 'steps[].icon': stepIconPaths },
+  wireframe: stepsWireframe,
+})

package/template/src/components/sections/steps/icons.ts

@@ -0,0 +1,27 @@
+import type { StepItem } from './definition'
+
+/** 24px, stroke 1.8, round caps and joins. */
+export const stepIconPaths: Record<StepItem['icon'], string> = {
+  terminal: 'M4 5h16v14H4zM8 10l2.5 2L8 14M12.5 14H16',
+  edit: 'M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4',
+  upload: 'M12 16V4M7 9l5-5 5 5M5 20h14',
+  moon: 'M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z',
+  git: 'M6 3v12M6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9c0 5-6 4-12 6',
+  check: 'M5 12.5l4.5 4.5L19 7',
+  bolt: 'M13 3L5 13.5h6L10 21l8-10.5h-6z',
+  cursor: 'M5 4l5.5 15 2.2-6.3L19 10.5zM13 13l5 5',
+  sliders: 'M4 7h9M17 7h3M4 17h3M11 17h9M15 5v4M9 15v4',
+  database: 'M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3zM4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3',
+}
+
+/**
+ * Columns for the step grid, by item count. A row never leaves an orphan: the count drops to the widest divisor that
+ * fits, with about 15.5rem per column (4 items: 4, then 2 × 2, then 1; 3 items: 3, then 1).
+ */
+export const stepColumns: Record<number, string> = {
+  2: '@min-[34rem]:grid-cols-2',
+  3: '@min-[49.5rem]:grid-cols-3',
+  4: '@min-[34rem]:grid-cols-2 @min-[65rem]:grid-cols-4',
+  5: '@min-[80.5rem]:grid-cols-5',
+  6: '@min-[34rem]:grid-cols-2 @min-[49.5rem]:grid-cols-3 @min-[96rem]:grid-cols-6',
+}

package/template/src/components/sections/steps/wireframe.ts

@@ -0,0 +1,16 @@
+import { defineWireframe } from 'bearminion'
+
+/** Add section picker thumbnail: [left %, top %, width %, height %, kind]. */
+export const stepsWireframe = defineWireframe([
+  [8, 12, 40, 8, 'title'],
+  [8, 25, 30, 4, 'text'],
+  [8, 40, 26, 46, 'card'],
+  [37, 40, 26, 46, 'card'],
+  [66, 40, 26, 46, 'card'],
+  [12, 46, 7, 9, 'highlight'],
+  [41, 46, 7, 9, 'highlight'],
+  [70, 46, 7, 9, 'highlight'],
+  [12, 62, 16, 4, 'text'],
+  [41, 62, 16, 4, 'text'],
+  [70, 62, 16, 4, 'text'],
+])

package/template/src/components/sections/text-image/TextImage.astro

@@ -37,7 +37,7 @@ const left = section.variant === 'left'
                       <span class="text-accent" aria-hidden="true">
                         ✓
                       </span>
-                      <span data-field={field(`points.${pointIndex}`)}>{point}</span>
+                      <Typography as="div" size="body" class="text-[0.9375rem]" data-field={field(`points.${pointIndex}`)} markdown={point} />
                     </li>
                   ))}
                 </ul>
@@ -95,9 +95,7 @@ const left = section.variant === 'left'
               {props.points.map((point, pointIndex) => (
                 <li class="border-t border-[var(--line)] py-6 @min-[700px]:border-t-0 @min-[700px]:border-l @min-[700px]:px-6 @min-[700px]:first:border-l-0 @min-[700px]:first:pl-0">
                   <span class="font-mono text-[0.75rem] tracking-[0.08em] text-muted">{String(pointIndex + 1).padStart(2, '0')}</span>
-                  <p class="mt-3 text-[0.9375rem] leading-[1.6]" data-field={field(`points.${pointIndex}`)}>
-                    {point}
-                  </p>
+                  <Typography as="div" size="body" class="mt-3" data-field={field(`points.${pointIndex}`)} markdown={point} />
                 </li>
               ))}
             </ol>

package/template/src/components/sections/text-image/definition.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { defineSection, imageSchema, linkSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
+import { defineSection, imageSchema, linkSchema, richTextSchema, withEmphasis } from 'bearminion'
 import { accent, eyebrow, heading } from '../shared'
 import { textImageWireframe } from './wireframe'
 
@@ -9,7 +9,8 @@ export const textImageSchema = withEmphasis({
   eyebrow,
   heading,
   body: richTextSchema.optional(),
-  points: z.array(textSchema),
+  /** Rich text: bold, italic, links and `code` in backticks. Plain strings render as before. */
+  points: z.array(richTextSchema),
   link: linkSchema.optional(),
   image: imageSchema,
 })

package/template/src/components/sections/video/Video.astro

@@ -0,0 +1,78 @@
+---
+import type { Section } from '../definitions'
+import Typography from '../../atoms/Typography.astro'
+import SectionHeader from '../../molecules/SectionHeader.astro'
+import SectionShell from '../../molecules/SectionShell.astro'
+import VideoFrame from './VideoFrame.astro'
+
+interface Props {
+  section: Extract<Section, { type: 'video' }>
+  index: number
+  motion?: boolean
+}
+
+const { section, index, motion = true } = Astro.props
+const props = section.props
+const field = (path: string) => `sections.${index}.props.${path}`
+const reveal = section.motion ?? motion
+const loop = props.playback === 'loop'
+const hasHeader = Boolean(props.eyebrow || props.heading || props.intro)
+// The empty frame is an editor hint. A built site leaves it out rather than show visitors an instruction.
+const showFrame = props.video !== 'placeholder' || import.meta.env.DEV
+---
+
+<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
+  {
+    section.variant === 'framed' && (
+      <div class="section-container flex flex-col items-center gap-10">
+        {hasHeader && (
+          <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.intro} align="center" field={field} />
+        )}
+        {showFrame && (<figure class="w-full max-w-5xl">
+          <VideoFrame src={props.video} poster={props.poster} label={props.label} loop={loop} class="shadow-[0_30px_80px_-40px_rgb(0_0_0/0.45)]" />
+          {props.caption && (
+            <Typography as="p" size="sm" color="muted" class="mt-3 text-center" data-field={field('caption')}>
+              {props.caption}
+            </Typography>
+          )}
+        </figure>)}
+      </div>
+    )
+  }
+  {
+    section.variant === 'wide' && (
+      <div class="flex flex-col gap-10">
+        {hasHeader && (
+          <div class="section-container">
+            <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.intro} field={field} />
+          </div>
+        )}
+        {showFrame && (<figure>
+          <VideoFrame src={props.video} poster={props.poster} label={props.label} loop={loop} roundedClass="rounded-none" />
+          {props.caption && (
+            <div class="section-container">
+              <Typography as="p" size="sm" color="muted" class="mt-3" data-field={field('caption')}>
+                {props.caption}
+              </Typography>
+            </div>
+          )}
+        </figure>)}
+      </div>
+    )
+  }
+  {
+    section.variant === 'split' && (
+      <div class="section-container grid items-center gap-12 @min-[860px]:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
+        {hasHeader && <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.intro} field={field} />}
+        {showFrame && (<figure class:list={[!hasHeader && '@min-[860px]:col-span-2']}>
+          <VideoFrame src={props.video} poster={props.poster} label={props.label} loop={loop} />
+          {props.caption && (
+            <Typography as="p" size="sm" color="muted" class="mt-3" data-field={field('caption')}>
+              {props.caption}
+            </Typography>
+          )}
+        </figure>)}
+      </div>
+    )
+  }
+</SectionShell>

package/template/src/components/sections/video/Video.stories.ts

@@ -0,0 +1,17 @@
+import { sectionArgTypes } from '../../../stories/options'
+import { video } from './definition'
+import Video from './Video.astro'
+
+/** The sample pages hold no video, so the stories use the section's defaults: an empty frame until a file is linked. */
+const section = { id: 'video', type: 'video', variant: 'framed', tone: 'base', props: video.defaults } as const
+
+export default {
+  title: 'Sections/Video',
+  component: Video,
+  parameters: { layout: 'fullscreen' },
+  argTypes: sectionArgTypes('video'),
+}
+
+export const Framed = { args: { section, index: 0 } }
+export const Wide = { args: { section: { ...section, variant: 'wide' }, index: 0 } }
+export const Split = { args: { section: { ...section, variant: 'split' }, index: 0 } }

package/template/src/components/sections/video/VideoFrame.astro

@@ -0,0 +1,60 @@
+---
+import type { Image } from 'bearminion'
+import { imageUrl } from '../../../lib/image-url'
+import { cn } from '../../../lib/cn'
+
+interface Props {
+  /** A video file URL, or `placeholder` for an empty frame. */
+  src: string
+  poster?: Image
+  label?: string
+  loop: boolean
+  roundedClass?: string
+  class?: string
+}
+
+const { src, poster, label, loop, roundedClass = 'rounded-card-lg', class: className } = Astro.props
+const placeholder = src === 'placeholder'
+
+const posterSrc = await imageUrl(poster)
+// A looping video starts muted and without controls once the page script sees it on screen. Until then, and without
+// JavaScript or with reduced motion, it keeps its controls so it can still be played.
+const playback = loop ? { muted: true, loop: true, controls: true, 'data-video-loop': '' } : { controls: true }
+---
+
+<div class={cn('relative overflow-hidden bg-surface', placeholder && 'placeholder-stripes aspect-video', roundedClass, className)}>
+  {
+    placeholder ? (
+      <div class="absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center">
+        <span class="flex size-14 items-center justify-center rounded-full bg-fg text-bg" aria-hidden="true">
+          <svg viewBox="0 0 16 16" class="ms-0.5 size-5" fill="currentColor"><path d="M4 2.5v11l9-5.5z" /></svg>
+        </span>
+        <span class="font-mono text-[0.6875rem] tracking-[0.04em] text-muted">Add a video link in the section settings</span>
+      </div>
+    ) : (
+      <video class="block h-auto w-full" src={src} poster={posterSrc} preload="metadata" playsinline aria-label={label} {...playback} />
+    )
+  }
+</div>
+
+<script>
+  /** Looping videos play while at least a quarter of them is on screen, and not at all with reduced motion. */
+  function bindLoopingVideos() {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    for (const video of document.querySelectorAll<HTMLVideoElement>('video[data-video-loop]')) {
+      if (video.dataset.bound === 'true') continue
+      video.dataset.bound = 'true'
+      if (reduced) continue
+      video.controls = false
+      new IntersectionObserver(
+        ([entry]) => {
+          if (entry?.isIntersecting) void video.play().catch(() => (video.controls = true))
+          else video.pause()
+        },
+        { threshold: 0.25 },
+      ).observe(video)
+    }
+  }
+  bindLoopingVideos()
+  document.addEventListener('bearminion:preview', bindLoopingVideos)
+</script>

package/template/src/components/sections/video/definition.ts

@@ -0,0 +1,58 @@
+import { z } from 'zod'
+import { defineSection, imageSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
+import { VIDEO_FILE } from '../media/source'
+import { accent, eyebrow, heading } from '../shared'
+import { videoWireframe } from './wireframe'
+
+export const videoVariants = ['framed', 'wide', 'split'] as const
+
+/** `controls`: the visitor presses play. `loop`: plays silently and on repeat while it is on screen, like a moving image. */
+export const videoPlayback = ['controls', 'loop'] as const
+
+/**
+ * A video file the browser can play: a path in the site's `public/` folder (`/videos/demo.webm`) or an `https://` link
+ * to the file. `placeholder` shows an empty frame. A page link such as YouTube does not play in a video element.
+ */
+export const videoSourceSchema = z
+  .string()
+  .min(1)
+  .refine((value) => value === 'placeholder' || VIDEO_FILE.test(value), {
+    message:
+      'Use a link to a video file ending in .mp4 or .webm, or a path in public/ such as /videos/demo.webm. YouTube and similar page links do not play here.',
+  })
+
+export const videoSchema = withEmphasis({
+  eyebrow,
+  heading,
+  intro: richTextSchema.optional(),
+  video: videoSourceSchema,
+  /** What the video shows, read out by screen readers. */
+  label: textSchema.optional(),
+  /** Shown before the video plays and while it loads. */
+  poster: imageSchema.optional(),
+  caption: textSchema.optional(),
+  playback: z.enum(videoPlayback).default('controls'),
+})
+
+export type VideoProps = z.infer<typeof videoSchema>
+
+export const video = defineSection({
+  type: 'video',
+  label: 'Video',
+  description: 'A video with a heading, a poster image and a caption.',
+  schema: videoSchema,
+  defaults: {
+    eyebrow: 'Watch',
+    heading: 'See it in action.',
+    marks: accent('See it in action.', 'in action.'),
+    intro: 'A short video says more than a page of text. Link an .mp4 or .webm file and add a poster image to show before it plays.',
+    video: 'placeholder',
+    label: 'Product walkthrough',
+    playback: 'controls',
+  },
+  variants: videoVariants,
+  defaultVariant: 'framed',
+  options: [{ name: 'playback', label: 'Playback', type: 'enum', choices: videoPlayback, default: 'controls' }],
+  optional: { props: ['eyebrow', 'heading', 'intro', 'label', 'poster', 'caption'] },
+  wireframe: videoWireframe,
+})

package/template/src/components/sections/video/wireframe.ts

@@ -0,0 +1,9 @@
+import { defineWireframe } from 'bearminion'
+
+/** Add section picker thumbnail: [left %, top %, width %, height %, kind]. */
+export const videoWireframe = defineWireframe([
+  [30, 10, 40, 8, 'title'],
+  [24, 22, 52, 4, 'text'],
+  [12, 32, 76, 58, 'dark'],
+  [45, 54, 10, 14, 'light'],
+])

package/template/src/layouts/Base.astro

@@ -59,7 +59,7 @@ const themeColor = site.theme.mode === 'dark' ? '#1c1e24' : '#f7f8f8'
               { threshold: 0.1 },
             )
       function revealMotion() {
-        document.querySelectorAll('[data-motion="true"]:not([data-revealed])').forEach((node) => {
+        document.querySelectorAll('[data-section-id][data-motion="true"]:not([data-revealed])').forEach((node) => {
           if (!observer) {
             node.setAttribute('data-revealed', 'true')
             return

package/template/src/lib/image-url.ts

@@ -0,0 +1,21 @@
+import { getImage } from 'astro:assets'
+import type { Image } from 'bearminion'
+import { isRemote, resolveLocalAsset } from './assets'
+
+/**
+ * An image as a plain URL, for attributes that take no `<img>`, such as a video's `poster`. A file in `src/assets` is
+ * optimized to WebP; a file uploaded in this dev session is served by the editor's dev route; a remote URL is used as
+ * it is. A missing file in `src/assets` fails the build, like a missing `<Image>`.
+ */
+export async function imageUrl(image: Image | undefined, maxWidth = 1920): Promise<string | undefined> {
+  if (!image || image.hidden || !image.src || image.src === 'placeholder') return undefined
+  if (isRemote(image.src)) return image.src
+  const path = image.src.replace(/^\//, '')
+  const asset = resolveLocalAsset(path)
+  if (asset) return (await getImage({ src: asset, width: Math.min(asset.width, maxWidth), format: 'webp' })).src
+  if (path.startsWith('src/assets/')) {
+    if (import.meta.env.DEV) return `/__bearminion/assets?src=${encodeURIComponent(path)}`
+    throw new Error(`No file in src/assets for the image "${image.src}". Restore the file, or choose another image in the editor and save.`)
+  }
+  return image.src
+}

package/template/src/styles/global.css

@@ -216,6 +216,19 @@
   [data-field-kind="rich"] li::marker {
     color: var(--muted);
   }
+  /* Inline code, written with backticks: a small mono chip that keeps its words together. */
+  [data-field-kind="rich"] code {
+    display: inline-block;
+    margin: 0.0625rem;
+    padding: 0.0625rem 0.4375rem;
+    border-radius: 6px;
+    background: var(--surface);
+    box-shadow: inset 0 0 0 1px var(--line);
+    font-family: var(--font-mono);
+    font-size: 0.84em;
+    color: var(--fg);
+    white-space: nowrap;
+  }
   blockquote[data-field-kind="rich"]::before {
     content: "“";
   }
@@ -331,14 +344,15 @@
   [data-open="true"] .menu-bar-2 {
     transform: translateY(-2.75px) rotate(-45deg);
   }
-  [data-motion="true"] [data-reveal] {
+  /* A section's own motion setting decides, not the page's: `<html>` carries data-motion too. */
+  [data-motion="true"] > [data-reveal] {
     opacity: 0;
     transform: translateY(28px);
   }
-  [data-motion="true"] [data-reveal="16"] {
+  [data-motion="true"] > [data-reveal="16"] {
     transform: translateY(16px);
   }
-  [data-motion="true"][data-revealed] [data-reveal] {
+  [data-motion="true"][data-revealed] > [data-reveal] {
     opacity: 1;
     transform: none;
     transition:
@@ -362,7 +376,7 @@
     color: var(--bg);
   }
   @media (prefers-reduced-motion: reduce) {
-    [data-motion="true"] [data-reveal] {
+    [data-motion="true"] > [data-reveal] {
       opacity: 1;
       transform: none;
     }