@getvitops/emdash 1.0.0 → 2.0.0-alpha.1

package/src/astro/blocks/Form.astro

@@ -0,0 +1,195 @@
+---
+/**
+ * A contact / enquiry form that posts to the site's conversion endpoint.
+ *
+ * Tier 1 first: a real `<form method="post">` of real `<label>`s, styled by the framework's
+ * `forms.css` vocabulary, that works with no JavaScript. It posts to `createConversionRoute()`
+ * (default `/api/track`, which the emdash template ships), which applies the honeypot, origin,
+ * size and rate checks, verifies Turnstile, then writes the CRM and emails the notification.
+ * The block itself decides none of that: it only emits markup the route understands.
+ *
+ * The no-JS round trip. The route answers a form post with a 303 back to the `_next` hidden
+ * field (this page's path, a same-site path only) plus `?sent=1#form-sent` or
+ * `?error=1#form-error`. The page is prerendered and cannot know which happened, so both
+ * messages are always in the markup and `.form-notice--target:not(:target)` hides whichever the
+ * URL fragment does not name. They carry `tabindex="-1"` so following the fragment moves focus
+ * to the message. One form per page: the fragment ids are fixed.
+ *
+ * Spam protection, in layers: a honeypot field named per the route's default, the route's own
+ * origin/rate/size checks, and Cloudflare Turnstile when `site.security.turnstile.siteKey`
+ * exists (the siteKey comes from the build's `virtual:getvitops/head`). Turnstile is emitted as
+ * `<wc-turnstile>`, which loads Cloudflare's script only on first interaction with the form.
+ * Its slotted paragraph is the no-JS explanation. With no site key there is no widget and no
+ * third-party reference at all.
+ *
+ * Field names go through `form.ts`, which keeps them clear of the names the route reserves
+ * (`phone`, `event`, the honeypots), and a phone field submits as `tel`.
+ */
+import head from 'virtual:getvitops/head';
+import { resolveTone, joinStyle } from './tone.ts';
+import { HONEYPOT_NAME, resolveFields, safeAction, safeNext } from './form.ts';
+import { headingTag, resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  heading?: string;
+  level?: string | number;
+  intro?: string;
+  fields?: unknown;
+  submitLabel?: string;
+  successMessage?: string;
+  errorMessage?: string;
+  noJsMessage?: string;
+  action?: string;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const fields = resolveFields(rows(value.fields));
+const heading = text(value.heading);
+const intro = text(value.intro);
+const Heading = headingTag(value.level, 2);
+const submitLabel = text(value.submitLabel) || 'Send';
+const successMessage = text(value.successMessage) || 'Thanks. Your message has been sent.';
+const errorMessage =
+  text(value.errorMessage) ||
+  'Sorry, your message could not be sent. Please try again, or contact us another way.';
+const noJsMessage =
+  text(value.noJsMessage) ||
+  'The spam check on this form needs JavaScript. If it is turned off, please contact us by email or phone instead.';
+const action = safeAction(value.action);
+const next = safeNext(Astro.url.pathname) ?? '/';
+const siteKey = typeof head?.turnstileSiteKey === 'string' ? head.turnstileSiteKey : null;
+const tone = resolveTone(value.tone, value.color);
+const successTone = resolveTone('success', '');
+const errorTone = resolveTone('danger', '');
+const hasForm = fields.length > 0;
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  hasForm && (
+    <div {...rootAttrs(value, ['form-block', 'rhythm', tone.className], joinStyle(tone.style))}>
+      {heading && <Heading class="font-heading">{heading}</Heading>}
+      {intro && <p>{intro}</p>}
+
+      <div
+        id="form-sent"
+        class:list={['callout', 'form-notice--target', successTone.className]}
+        style={joinStyle(successTone.style)}
+        role="status"
+        tabindex="-1"
+      >
+        <div class="callout__body">
+          <p class="callout__text">{successMessage}</p>
+        </div>
+      </div>
+      <div
+        id="form-error"
+        class:list={['callout', 'form-notice--target', errorTone.className]}
+        style={joinStyle(errorTone.style)}
+        role="alert"
+        tabindex="-1"
+      >
+        <div class="callout__body">
+          <p class="callout__text">{errorMessage}</p>
+        </div>
+      </div>
+
+      <form method="post" action={action} class="rhythm">
+        <input type="hidden" name="_next" value={next} />
+        {fields.map((f) => {
+          const describedby = f.help ? `${f.id}-help` : undefined;
+          const requiredMark = f.required ? { required: true, 'aria-required': 'true' } : {};
+          return f.type === 'checkbox' ? (
+            <div class="form-group">
+              <label class="custom-check">
+                <input
+                  type="checkbox"
+                  id={f.id}
+                  name={f.name}
+                  value="yes"
+                  aria-describedby={describedby}
+                  {...requiredMark}
+                />
+                <span class="custom-check__box">
+                  <span class="custom-check__indicator custom-check__indicator--check" />
+                </span>
+                <span>{f.label}</span>
+              </label>
+              {f.help && (
+                <p id={`${f.id}-help`} class="form-group__helper">
+                  {f.help}
+                </p>
+              )}
+            </div>
+          ) : (
+            <div class="form-group">
+              <label class="form-group__label" for={f.id}>
+                {f.label}
+                {!f.required && <span class="form-group__optional">(optional)</span>}
+              </label>
+              {f.type === 'textarea' ? (
+                <textarea
+                  id={f.id}
+                  name={f.name}
+                  rows="5"
+                  placeholder={f.placeholder || undefined}
+                  aria-describedby={describedby}
+                  {...requiredMark}
+                />
+              ) : f.type === 'select' ? (
+                <div class="custom-select">
+                  <select id={f.id} name={f.name} aria-describedby={describedby} {...requiredMark}>
+                    <option value="">Choose one</option>
+                    {f.options.map((o) => (
+                      <option value={o}>{o}</option>
+                    ))}
+                  </select>
+                </div>
+              ) : (
+                <input
+                  type={f.type}
+                  id={f.id}
+                  name={f.name}
+                  placeholder={f.placeholder || undefined}
+                  autocomplete={f.autocomplete}
+                  aria-describedby={describedby}
+                  {...requiredMark}
+                />
+              )}
+              {f.help && (
+                <p id={`${f.id}-help`} class="form-group__helper">
+                  {f.help}
+                </p>
+              )}
+            </div>
+          );
+        })}
+
+        {/* Honeypot: named per createConversionRoute's default list. Positioned off-screen rather than
+            display:none (which simple bots skip), and hidden from assistive tech and the tab order. */}
+        <div class="sr-only" aria-hidden="true">
+          <label>
+            Leave this field empty
+            <input type="text" name={HONEYPOT_NAME} tabindex="-1" autocomplete="off" />
+          </label>
+        </div>
+
+        {siteKey && (
+          <wc-turnstile sitekey={siteKey}>
+            <p class="form-group__helper" data-turnstile-fallback>
+              {noJsMessage}
+            </p>
+          </wc-turnstile>
+        )}
+
+        <p>
+          <button type="submit" class="cta">
+            {submitLabel}
+          </button>
+        </p>
+      </form>
+    </div>
+  )
+}

package/src/astro/blocks/Gallery.astro

@@ -25,6 +25,7 @@ const images = rows<{ src?: unknown; alt?: unknown; caption?: unknown }>(value.i
     return src ? [{ src, alt: text(row.alt), ...(caption ? { caption } : {}) }] : [];
   },
 );
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
@@ -33,6 +34,7 @@ const images = rows<{ src?: unknown; alt?: unknown; caption?: unknown }>(value.i
       label={text(value.label) || 'Gallery'}
       images={images}
       id={id}
+      {...rootAttrs(value)}
       aspect={text(value.aspect) || undefined}
       loop={Boolean(value.loop)}
     />

package/src/astro/blocks/Hero.astro

@@ -1,15 +1,27 @@
 ---
 /**
  * A page opener built from the layout primitives: `.centered` for a single column, `.split`
- * for text beside an image. The heading is a real `<h1>` only when the editor chooses nothing
- * else — a page has one, and EmDash renders the page title elsewhere, so this uses `<h2>`.
+ * for text beside an image. The heading defaults to `<h2>` — a page has one `<h1>`, and
+ * EmDash renders the page title elsewhere — and an editor can change the level. Words wrapped
+ * in `*stars*` render as `<em class="accent">` (accent marks, no raw HTML in the field).
+ * An optional row of option cards sits under the buttons, as the framework's `.card` list.
  * Flat fields, because a block cannot contain other blocks.
  */
-import { resolveBlockValue, safeHref, text } from './value.ts';
+import RichText from './RichText.astro';
+import { joinStyle, resolveTone } from './tone.ts';
+import {
+  accentRuns,
+  headingTag,
+  resolveBlockValue,
+  rows,
+  safeHref,
+  text,
+} from './value.ts';
 
 interface Value {
   eyebrow?: string;
   heading?: string;
+  level?: string | number;
   body?: string;
   primaryLabel?: string;
   primaryHref?: string;
@@ -18,11 +30,16 @@ interface Value {
   image?: string;
   imageAlt?: string;
   layout?: string;
+  tone?: string;
+  color?: string;
+  cards?: unknown;
 }
 
 const value = resolveBlockValue<Value>(Astro.props);
 const eyebrow = text(value.eyebrow);
 const heading = text(value.heading);
+const headingRuns = accentRuns(heading);
+const Heading = headingTag(value.level, 2);
 const body = text(value.body);
 const primaryLabel = text(value.primaryLabel);
 const primaryHref = safeHref(value.primaryHref);
@@ -31,31 +48,69 @@ const secondaryHref = safeHref(value.secondaryHref);
 const image = safeHref(value.image);
 const imageAlt = text(value.imageAlt);
 const split = value.layout === 'split' && Boolean(image);
+const tone = resolveTone(value.tone, value.color);
+const cards = rows<Record<string, unknown>>(value.cards)
+  .map((row) => ({
+    title: text(row.title),
+    body: text(row.body),
+    href: safeHref(row.href),
+    linkLabel: text(row.linkLabel) || 'Learn more',
+  }))
+  .filter((card) => card.title || card.body);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   (heading || body) && (
-    <section class={split ? 'split split-1-2' : 'centered'}>
-      <div class="rhythm">
-        {eyebrow && <p class="font-eyebrow">{eyebrow}</p>}
-        {heading && <h2 class="font-display">{heading}</h2>}
-        {body && <p class="font-lead">{body}</p>}
-        {(primaryLabel && primaryHref) || (secondaryLabel && secondaryHref) ? (
-          <p class="cluster">
-            {primaryLabel && primaryHref && (
-              <a class="cta" href={primaryHref}>
-                {primaryLabel}
-              </a>
-            )}
-            {secondaryLabel && secondaryHref && (
-              <a class="link" href={secondaryHref}>
-                {secondaryLabel}
-              </a>
-            )}
-          </p>
-        ) : null}
+    <section {...rootAttrs(value, [tone.style && tone.className], joinStyle(tone.style))}>
+      <div class={split ? 'split split-1-2' : 'centered'}>
+        <div class="rhythm">
+          {eyebrow && <p class="font-eyebrow">{eyebrow}</p>}
+          {heading && (
+            <Heading class="font-display">
+              {headingRuns.map((run) =>
+                run.accent ? <em class="accent">{run.text}</em> : run.text,
+              )}
+            </Heading>
+          )}
+          {body && <p class="font-lead">{body}</p>}
+          {(primaryLabel && primaryHref) || (secondaryLabel && secondaryHref) ? (
+            <p class="cluster">
+              {primaryLabel && primaryHref && (
+                <a class="cta" href={primaryHref}>
+                  {primaryLabel}
+                </a>
+              )}
+              {secondaryLabel && secondaryHref && (
+                <a class="link" href={secondaryHref}>
+                  {secondaryLabel}
+                </a>
+              )}
+            </p>
+          ) : null}
+        </div>
+        {split && <img src={image} alt={imageAlt} loading="eager" />}
       </div>
-      {split && <img src={image} alt={imageAlt} loading="eager" />}
+      {cards.length > 0 && (
+        <ul class="subgrid centered" role="list" style={`--subgrid-cols: ${Math.min(4, cards.length)}`}>
+          {cards.map((card) => (
+            <li class="card subgrid-card">
+              {card.title && <h3 class="font-heading">{card.title}</h3>}
+              {card.body && (
+                <p>
+                  <RichText text={card.body} />
+                </p>
+              )}
+              {card.href && (
+                <a class="link stretched-link" href={card.href}>
+                  {card.linkLabel}
+                  {card.title && <span class="sr-only">: {card.title}</span>}
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
     </section>
   )
 }

package/src/astro/blocks/ImageCompare.astro

@@ -15,10 +15,11 @@ const { beforeAlt = '', beforeLabel = 'Before', afterAlt = '', afterLabel = 'Aft
 // A `javascript:`/`data:` src is dropped, so the block renders nothing rather than that image.
 const before = safeHref(value.before);
 const after = safeHref(value.after);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {before && after && (
-  <wc-image-compare before-label={beforeLabel} after-label={afterLabel}>
+  <wc-image-compare {...rootAttrs(value)} before-label={beforeLabel} after-label={afterLabel}>
     <img slot="before" src={before} alt={beforeAlt} loading="lazy" />
     <img slot="after" src={after} alt={afterAlt} loading="lazy" />
   </wc-image-compare>

package/src/astro/blocks/Logos.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * A still row of partner/client marks on the framework's `.logos` pattern. `vitops.marquee`
+ * is the scrolling version; this one holds still. A list, so the count is announced, and
+ * each mark is an image with the editor's name as its alt text — a logo with no alt is a
+ * link or a fact the page silently drops.
+ */
+import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+
+interface Value {
+  label?: string;
+  logos?: unknown;
+  grayscale?: boolean;
+  size?: string;
+}
+
+const HEIGHTS: Record<string, string> = { sm: '1.75rem', md: '2.5rem', lg: '3.5rem' };
+
+const value = resolveBlockValue<Value>(Astro.props);
+const label = text(value.label) || 'Partners';
+const logos = rows<Record<string, unknown>>(value.logos)
+  .map((row) => ({ image: safeHref(row.image), alt: text(row.alt), href: safeHref(row.href) }))
+  .filter((logo) => logo.image);
+const height = HEIGHTS[text(value.size)];
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  logos.length > 0 && (
+    <ul
+      {...rootAttrs(value, ['logos', value.grayscale && 'logos--grayscale'], height ? `--logos-height: ${height}` : undefined)}
+      role="list"
+      aria-label={label}
+    >
+      {logos.map((logo) => (
+        <li class="logos__item">
+          {logo.href ? (
+            <a href={logo.href}>
+              <img src={logo.image} alt={logo.alt} loading="lazy" />
+            </a>
+          ) : (
+            <img src={logo.image} alt={logo.alt} loading="lazy" />
+          )}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/astro/blocks/Marquee.astro

@@ -21,11 +21,12 @@ const items = rows<Record<string, unknown>>(value.items)
     alt: text(row.alt),
   }))
   .filter((item) => item.text || item.image);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
-    <Marquee pauseOnHover={Boolean(value.pauseOnHover)} reverse={Boolean(value.reverse)}>
+    <Marquee pauseOnHover={Boolean(value.pauseOnHover)} reverse={Boolean(value.reverse)} {...rootAttrs(value)}>
       {items.map((item) =>
         item.image ? (
           <img src={item.image} alt={item.alt} loading="lazy" />

package/src/astro/blocks/Nav.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * An EmDash menu inside page content — a site map, a section's link list, a set of footer-style
+ * columns. **Not the site header:** that is `<SiteNav>` in the layout, which owns the drawer,
+ * the dropdowns and the breakpoints. The `sitenav` variant exists for the rare page that wants
+ * that navbar in the body, and renders `<SiteNav>` itself rather than a copy of it.
+ *
+ * Tier-3, no runtime JS. The menu is fetched with EmDash's `getMenu()` at render time (so at
+ * build time on a prerendered page). **A missing menu, an empty one, or a name that is not a
+ * slug renders nothing** — never an error; a deleted menu must not take the page down.
+ *
+ * Accessibility: a `<nav>` landmark with a name that is unique on the page — the header is
+ * "Primary" and the footer "Site map" / "Legal", so `navLabel()` never hands this block one of
+ * those — and `aria-current="page"` on the current item. An optional visible heading is a real
+ * heading at the editor's `level` (default `h2`), kept outside the `<nav>` so the landmark's
+ * name is the `aria-label`, not a duplicate of the heading text.
+ *
+ * The menu-tree helpers (`trimDepth`, `isCurrent`, `linkRel`) are `@getvitops/astro`'s
+ * `sitenav.ts`; only the selection rules live in `nav.ts`.
+ */
+import { getMenu } from 'emdash';
+import SiteNav from '@getvitops/astro/components/SiteNav.astro';
+import { menuItems, trimDepth } from '@getvitops/astro/components/sitenav.ts';
+import NavTree from './NavTree.astro';
+import { menuName, navDepth, navId, navLabel, navVariant } from './nav.ts';
+import { joinStyle, resolveTone } from './tone.ts';
+import { headingTag, resolveBlockValue, text } from './value.ts';
+
+interface Value {
+  _key?: string;
+  menu?: string;
+  label?: string;
+  heading?: string;
+  level?: string | number;
+  variant?: string;
+  depth?: string | number;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const name = menuName(value.menu);
+let menu: Awaited<ReturnType<typeof getMenu>> = null;
+if (name) {
+  try {
+    menu = await getMenu(name);
+  } catch {
+    // No database or request context: the same quiet nothing as a missing menu.
+    menu = null;
+  }
+}
+
+const variant = navVariant(value.variant);
+const depth = navDepth(value.depth);
+const items = menuItems(menu);
+const label = navLabel(value.label, value.heading, menu?.label, name ?? '');
+const heading = text(value.heading);
+const Heading = headingTag(value.level, 2);
+const tone = resolveTone(value.tone, value.color);
+const toned = Boolean(value.tone || value.color);
+const trimmed = trimDepth(items, depth);
+const current = Astro.url.pathname;
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  items.length > 0 && (
+    <div
+      {...rootAttrs(value, ['navblock', toned && tone.className], toned ? joinStyle(tone.style) : undefined)}
+    >
+      {heading && <Heading class="font-heading">{heading}</Heading>}
+      {variant === 'sitenav' ? (
+        <SiteNav primary={trimmed} label={label} depth={depth} id={navId(value._key, name ?? '')} />
+      ) : (
+        <nav aria-label={label}>
+          <NavTree
+            items={trimmed}
+            current={current}
+            modifiers={variant === 'list' ? [] : [`navlist--${variant}`]}
+          />
+        </nav>
+      )}
+    </div>
+  )
+}

package/src/astro/blocks/NavTree.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * One `<ul class="navlist">` level of `vitops.nav`, recursing for sub-links. Internal — import
+ * `Nav.astro`. Plain nested lists, no disclosure widgets: a page-body menu is read, not
+ * collapsed, so there is no state to manage and no runtime JS. The `.navlist` pattern is
+ * `patterns/sitenav.css`'s (all formats).
+ */
+import { isCurrent, linkRel, type NavItem } from '@getvitops/astro/components/sitenav.ts';
+import { safeHref } from './value.ts';
+
+interface Props {
+  items: NavItem[];
+  current: string;
+  /** Modifier classes on the top-level list (`navlist--inline`, …); empty for sub-levels. */
+  modifiers?: string[];
+  top?: boolean;
+}
+
+const { items, current, modifiers = [], top = true } = Astro.props;
+---
+
+<ul class:list={[top ? 'navlist' : 'navlist__sub', ...modifiers]} role="list">
+  {
+    items.map((item) => {
+      const href = safeHref(item.url);
+      const kids = item.children ?? [];
+      return (
+        <li class="navlist__item">
+          {href ? (
+            <a
+              class:list={['navlist__link', item.cssClasses]}
+              href={href}
+              target={item.target || undefined}
+              rel={linkRel(item)}
+              aria-current={isCurrent(item.url, current) ? 'page' : undefined}
+            >
+              {item.label}
+            </a>
+          ) : (
+            // A heading-only item (no or an unsafe URL) is a label, not a dead link.
+            <span class="navlist__label">{item.label}</span>
+          )}
+          {kids.length > 0 && <Astro.self items={kids} current={current} top={false} />}
+        </li>
+      );
+    })
+  }
+</ul>

package/src/astro/blocks/Pricing.astro

@@ -0,0 +1,66 @@
+---
+/**
+ * Plan cards on the framework's `.pricing-grid` / `.pricing-card` pattern (patterns/
+ * subgrid.css): each card is a subgrid over four shared rows — header, price, features,
+ * button — so features and buttons line up across plans whatever each holds.
+ *
+ * `--pricing-card-rows` must name those four rows or the cards do not span them; it is set
+ * here rather than left to the pattern's `auto`, which is not a valid `span`.
+ */
+import { headingTag, lines, resolveBlockValue, rows, safeHref, text } from './value.ts';
+
+interface Value {
+  plans?: unknown;
+  level?: string | number;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const plans = rows<Record<string, unknown>>(value.plans)
+  .map((row) => ({
+    name: text(row.name),
+    price: text(row.price),
+    period: text(row.period),
+    features: lines(row.features),
+    ctaLabel: text(row.ctaLabel),
+    ctaHref: safeHref(row.ctaHref),
+    featured: row.featured === true,
+  }))
+  .filter((plan) => plan.name || plan.price);
+const Heading = headingTag(value.level, 3);
+const columns = Math.min(4, Math.max(1, plans.length));
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  plans.length > 0 && (
+    <ul
+      {...rootAttrs(value, ['pricing-grid'], `--pricing-columns: ${columns}; --pricing-card-rows: 4`)}
+      role="list"
+    >
+      {plans.map((plan) => (
+        <li class:list={['pricing-card', plan.featured && 'pricing-card--featured']}>
+          <div class="pricing-card__header">
+            {plan.name && <Heading class="font-title">{plan.name}</Heading>}
+          </div>
+          <p class="pricing-card__price">
+            {plan.price}
+            {plan.period && <small class="font-caption"> {plan.period}</small>}
+          </p>
+          <ul class="pricing-card__features" role="list">
+            {plan.features.map((feature) => (
+              <li class="pricing-card__feature">{feature}</li>
+            ))}
+          </ul>
+          <div class="pricing-card__cta">
+            {plan.ctaLabel && plan.ctaHref && (
+              <a class:list={[plan.featured ? 'cta' : 'btn']} href={plan.ctaHref}>
+                {plan.ctaLabel}
+                <span class="sr-only"> — {plan.name}</span>
+              </a>
+            )}
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}