@getvitops/emdash 1.0.0-alpha.0 → 2.0.0-alpha.0

package/src/astro/blocks/Marquee.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * Thin adapter over `@getvitops/astro`'s `<Marquee />`, which emits `<wc-marquee>` itself
+ * and duplicates the slot (the copies are `aria-hidden`) for the seamless loop. Without
+ * JS the row still scrolls from CSS alone; `prefers-reduced-motion` is handled there.
+ */
+import Marquee from '@getvitops/astro/components/Marquee.astro';
+import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+
+interface Value {
+  items?: unknown;
+  pauseOnHover?: boolean;
+  reverse?: boolean;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const items = rows<Record<string, unknown>>(value.items)
+  .map((row) => ({
+    text: text(row.text),
+    image: safeHref(row.image),
+    alt: text(row.alt),
+  }))
+  .filter((item) => item.text || item.image);
+---
+
+{
+  items.length > 0 && (
+    <Marquee pauseOnHover={Boolean(value.pauseOnHover)} reverse={Boolean(value.reverse)}>
+      {items.map((item) =>
+        item.image ? (
+          <img src={item.image} alt={item.alt} loading="lazy" />
+        ) : (
+          <span>{item.text}</span>
+        ),
+      )}
+    </Marquee>
+  )
+}

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;
+---
+
+{
+  items.length > 0 && (
+    <div
+      class:list={['navblock', toned && tone.className]}
+      style={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));
+---
+
+{
+  plans.length > 0 && (
+    <ul
+      class="pricing-grid"
+      role="list"
+      style={`--pricing-columns: ${columns}; --pricing-card-rows: 4`}
+    >
+      {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>
+  )
+}

package/src/astro/blocks/Reviews.astro

@@ -0,0 +1,122 @@
+---
+/**
+ * Google reviews on the framework's `.review` pattern, from the committed
+ * `.vitops/reviews.json` cache (`vitops reviews`).
+ *
+ * **The data is a build-time import, never a filesystem read.** This renders in a Worker (and,
+ * with pages prerendered, inside the Cloudflare adapter's local workerd), where there is no
+ * `fs`. `virtual:getvitops/reviews` is served by the `vitops()` Astro integration from the
+ * project's `.vitops/reviews.json`; with no file it is an empty cache, so a fresh scaffold
+ * builds and this block renders nothing. A new review therefore reaches the page on the next
+ * rebuild after `vitops reviews` is re-run and committed — not when an editor saves.
+ *
+ * **Which reviews show is `selectReviews()`**, `@getvitops/utils`' one decision (featured ids
+ * first, then `minRating` / `sort` / `limit`). The block's fields are its
+ * `ReviewLocationConfig`; nothing is re-implemented here.
+ *
+ * The cards are the Astro `<ReviewCard>`, in a grid (`<Subgrid>`), a `<Carousel>` or a
+ * `<Marquee>`. Both of those emit their own `<wc-*>`, so there is no wrapper here, and each
+ * works with no JS. Reviewer photos are Google-hosted and default OFF (a third-party request
+ * for every visitor); the source link carries `rel="nofollow"`; review JSON-LD is not offered
+ * — Google treats a business marking up reviews of itself as ineligible for rich results.
+ * `tone` colours the surrounding band, never the cards, so `.tone` and the card's own
+ * background cannot fight over one element.
+ *
+ * With nothing to show the public page gets nothing; `astro dev` gets a note saying why, since
+ * "the block is blank" is otherwise indistinguishable from "the block is broken".
+ */
+import reviewCache from 'virtual:getvitops/reviews';
+import { selectReviews, type Review, type ReviewCache } from '@getvitops/utils/reviews/select';
+import Carousel from '@getvitops/astro/components/Carousel.astro';
+import Marquee from '@getvitops/astro/components/Marquee.astro';
+import ReviewCard from '@getvitops/astro/components/ReviewCard.astro';
+import Subgrid from '@getvitops/astro/components/Subgrid.astro';
+import { joinStyle, resolveTone } from './tone.ts';
+import { resolveBlockValue, splitLines, text } from './value.ts';
+
+interface Value {
+  label?: string;
+  location?: string;
+  layout?: string;
+  columns?: string | number;
+  limit?: string | number;
+  minRating?: string | number;
+  sort?: string;
+  featured?: string;
+  avatars?: boolean;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const cache = reviewCache as unknown as ReviewCache;
+
+// A blank location means "every location in the cache" — the common case is one, and a
+// multi-location site that wants one location names it.
+const key = text(value.location);
+const pool: Review[] = (key ? [cache.locations[key]] : Object.values(cache.locations)).flatMap(
+  (l) => l?.reviews ?? [],
+);
+
+const limit = Math.round(Number(value.limit));
+const minRating = Math.round(Number(value.minRating));
+const reviews = selectReviews(pool, {
+  featured: splitLines(value.featured),
+  ...(minRating >= 1 && minRating <= 5 ? { minRating } : {}),
+  sort: value.sort === 'rating' ? 'rating' : 'recent',
+  // 0 / blank = no cap, the same as leaving `limit` unset in `site.reviews`.
+  ...(limit > 0 ? { limit } : {}),
+});
+
+const label = text(value.label) || 'Customer reviews';
+const layout = ['carousel', 'marquee'].includes(text(value.layout)) ? text(value.layout) : 'grid';
+const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns)) || 3));
+const avatar = Boolean(value.avatars);
+const tone = resolveTone(value.tone, value.color);
+const toned = Boolean(value.tone || value.color);
+const dev = import.meta.env.DEV;
+---
+
+{
+  reviews.length > 0 ? (
+    <div
+      class:list={['reviews', toned && tone.className]}
+      style={toned ? joinStyle(tone.style) : undefined}
+    >
+      {layout === 'carousel' ? (
+        <Carousel label={label}>
+          {reviews.map((review) => (
+            <li class="carousel__slide">
+              <ReviewCard review={review} avatar={avatar} />
+            </li>
+          ))}
+        </Carousel>
+      ) : layout === 'marquee' ? (
+        <Marquee pauseOnHover aria-label={label} role="group">
+          {reviews.map((review) => (
+            <ReviewCard review={review} avatar={avatar} />
+          ))}
+        </Marquee>
+      ) : (
+        <Subgrid
+          aria-label={label}
+          style={`--subgrid-cols: ${columns}; --subgrid-row-span: 1`}
+        >
+          {reviews.map((review) => (
+            <li>
+              <ReviewCard review={review} avatar={avatar} />
+            </li>
+          ))}
+        </Subgrid>
+      )}
+    </div>
+  ) : (
+    dev && (
+      <p class="reviews__empty" role="note">
+        vitops.reviews: no reviews to show
+        {key ? ` for location "${key}"` : ''}. Run <code>vitops reviews</code> and commit
+        <code>.vitops/reviews.json</code>, or lower the rating filter. (Shown in dev only.)
+      </p>
+    )
+  )
+}

package/src/astro/blocks/RichText.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * Inline text with `[label](url)` links, rendered from `linkRuns()` runs — no `set:html`,
+ * so editor text can never inject markup. Internal to the block adapters.
+ */
+import { linkRuns } from './value.ts';
+
+interface Props {
+  text: unknown;
+}
+const runs = linkRuns(Astro.props.text);
+---
+
+{runs.map((run) => (run.href ? <a class="link" href={run.href}>{run.text}</a> : run.text))}

package/src/astro/blocks/Section.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * `vitops_section` — the editorial wrapper: kicker, heading, lead-in, then a body of other
+ * blocks. It renders a block TYPE (a `blocks` field entry), not a Portable Text block — see
+ * `block-types.ts` for why — so it is mapped through `blockTypeComponents`, not
+ * `blockComponents`.
+ *
+ * Composed from the framework's layout primitives: `.region` for vertical rhythm, `.centered`
+ * for the tracks (the `width` field picks `breakout`/`spotlight`/`fullbleed`), `.section` for
+ * the head and the heading-left `split` layout, `.tone` for the backdrop. The heading is a
+ * real heading at the editor's `level`.
+ *
+ * The body is rendered by EmDash's `<PortableText>`, which merges this plugin's
+ * `blockComponents`, so a `vitops.cards` or `vitops.actionLink` placed in it renders with its
+ * web component. Class names never come from field values (Tailwind could not see them): the
+ * width and layout are looked up in closed tables, colour is `--tone-*` custom properties.
+ */
+import { PortableText } from 'emdash/ui';
+import { joinStyle, resolveTone } from './tone.ts';
+import { headingTag, resolveBlockValue, text } from './value.ts';
+
+interface Value {
+  kicker?: string;
+  heading?: string;
+  level?: string | number;
+  sub?: string;
+  body?: unknown;
+  layout?: string;
+  width?: string;
+  tone?: string;
+  color?: string;
+  solid?: boolean;
+}
+
+const WIDTHS: Record<string, string> = {
+  breakout: 'breakout',
+  spotlight: 'spotlight',
+  fullbleed: 'fullbleed',
+};
+
+const value = resolveBlockValue<Value>(Astro.props);
+const kicker = text(value.kicker);
+const heading = text(value.heading);
+const sub = text(value.sub);
+const body = Array.isArray(value.body) ? value.body : [];
+const Heading = headingTag(value.level, 2);
+const tone = resolveTone(value.tone, value.color);
+const layout = text(value.layout);
+const width = WIDTHS[text(value.width)];
+const hasHead = Boolean(kicker || heading || sub);
+---
+
+{
+  (hasHead || body.length > 0) && (
+    <section
+      class:list={[
+        'section',
+        'region',
+        tone.style && tone.className,
+        tone.style && value.solid && 'tone--solid',
+        layout === 'split' && 'section--split',
+        layout === 'center' && 'section--center',
+      ]}
+      style={joinStyle(tone.style)}
+    >
+      <div class="centered">
+        <div class:list={['section__inner', width]}>
+          {hasHead && (
+            <header class="section__head">
+              {kicker && <p class="section__kicker font-eyebrow">{kicker}</p>}
+              {heading && <Heading class="section__title font-title">{heading}</Heading>}
+              {sub && <p class="section__sub font-lead">{sub}</p>}
+            </header>
+          )}
+          {body.length > 0 && (
+            <div class="section__body">
+              <PortableText value={body} />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/astro/blocks/Stats.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * Headline figures on the framework's `.stats` pattern, each figure the existing
+ * `<Counter>` (which emits its own `<wc-counter>` — no wrapper here). `variant: tiles` is
+ * the generic kernel of a dashboard mock: a group line, the figure, its label and a
+ * delta whose `state` (`up`/`down`) colours it through the site's success/danger roles.
+ * The delta's words stay in the text, so colour is never the only carrier.
+ *
+ * `animate: false` renders the plain fragment (`enhance={false}`) — no count-up.
+ */
+import Counter from '@getvitops/astro/components/Counter.astro';
+import { resolveTone, joinStyle } from './tone.ts';
+import { resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  stats?: unknown;
+  variant?: string;
+  animate?: boolean;
+  tone?: string;
+  color?: string;
+}
+
+const STATES = new Set(['up', 'down']);
+
+const value = resolveBlockValue<Value>(Astro.props);
+const stats = rows<Record<string, unknown>>(value.stats)
+  .map((row) => ({
+    value: text(row.value),
+    label: text(row.label),
+    group: text(row.group),
+    delta: text(row.delta),
+    state: STATES.has(text(row.state)) ? text(row.state) : undefined,
+  }))
+  .filter((stat) => stat.value);
+const tiles = value.variant === 'tiles';
+const animate = value.animate !== false;
+const tone = resolveTone(value.tone, value.color);
+---
+
+{
+  stats.length > 0 && (
+    <ul
+      class:list={['stats', tone.className, tiles && 'stats--tiles']}
+      role="list"
+      style={joinStyle(tone.style)}
+    >
+      {stats.map((stat) => (
+        <li class="stats__item" data-state={stat.state}>
+          {tiles && stat.group && <p class="stats__group font-eyebrow">{stat.group}</p>}
+          <p class="stats__figure font-display">
+            <Counter value={stat.value} enhance={animate} />
+          </p>
+          {stat.label && <p class="stats__label">{stat.label}</p>}
+          {tiles && stat.delta && <p class="stats__delta">{stat.delta}</p>}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/astro/blocks/Steps.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * A numbered sequence on the framework's `.steps` pattern: an `<ol>` (so the order is
+ * semantic with no CSS), a CSS-counter marker and a connector line. Each step's title is a
+ * real heading at the editor's `level`, so the outline survives. Colour is the shared tone
+ * convention — see `tone.ts`.
+ */
+import RichText from './RichText.astro';
+import { resolveTone, joinStyle } from './tone.ts';
+import { headingTag, resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  steps?: unknown;
+  level?: string | number;
+  layout?: string;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const steps = rows<Record<string, unknown>>(value.steps)
+  .map((row) => ({ title: text(row.title), text: text(row.text) }))
+  .filter((step) => step.title || step.text);
+const Heading = headingTag(value.level, 3);
+const tone = resolveTone(value.tone, value.color);
+---
+
+{
+  steps.length > 0 && (
+    <ol
+      class:list={['steps', tone.className, value.layout === 'row' && 'steps--row']}
+      style={joinStyle(tone.style)}
+    >
+      {steps.map((step) => (
+        <li class="steps__item">
+          <div class="steps__body">
+            {step.title && <Heading class="steps__title font-heading">{step.title}</Heading>}
+            {step.text && (
+              <p class="steps__text">
+                <RichText text={step.text} />
+              </p>
+            )}
+          </div>
+        </li>
+      ))}
+    </ol>
+  )
+}

package/src/astro/blocks/embed.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { resolveEmbed } from './embed.ts';
+
+describe('resolveEmbed', () => {
+  it('rewrites YouTube addresses to the no-cookie embed', () => {
+    for (const url of [
+      'https://www.youtube.com/watch?v=abc_123-Z',
+      'https://youtu.be/abc_123-Z',
+      'https://www.youtube.com/shorts/abc_123-Z',
+    ])
+      expect(resolveEmbed('youtube', url)?.src).toBe(
+        'https://www.youtube-nocookie.com/embed/abc_123-Z',
+      );
+  });
+
+  it('rewrites Vimeo addresses and asks for do-not-track', () => {
+    expect(resolveEmbed('vimeo', 'https://vimeo.com/123456')?.src).toBe(
+      'https://player.vimeo.com/video/123456?dnt=1',
+    );
+  });
+
+  it('accepts only the framing endpoints of a map provider', () => {
+    expect(resolveEmbed('map', 'https://www.google.com/maps/embed?pb=!1m1')?.provider).toBe(
+      'Google Maps',
+    );
+    expect(resolveEmbed('map', 'https://www.google.com/maps/place/Ottawa')).toBeNull();
+    expect(
+      resolveEmbed('map', 'https://www.openstreetmap.org/export/embed.html?bbox=1')?.src,
+    ).toContain('openstreetmap.org/export/embed');
+  });
+
+  it('refuses anything that is not https, and a named provider’s foreign hosts', () => {
+    expect(resolveEmbed('custom', 'javascript:alert(1)')).toBeNull();
+    expect(resolveEmbed('custom', 'http://example.com/x')).toBeNull();
+    expect(resolveEmbed('youtube', 'https://evil.example/watch?v=abc')).toBeNull();
+    expect(resolveEmbed('vimeo', 'https://evil.example/123')).toBeNull();
+    expect(resolveEmbed('custom', undefined)).toBeNull();
+  });
+
+  it('treats an unknown provider as custom https', () => {
+    expect(resolveEmbed('nope', 'https://example.com/w')?.src).toBe('https://example.com/w');
+  });
+});