@sarimarcus/content-sites-ui 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.13.0 (2026-10-01)
+
+- New `./editorial`: `EditorialGuidePage` (breadcrumb band, hero and body slots; owns the Pagefind markers, `pagefindType`, `breadcrumbIgnore`) and `EventPage` (back link, rendered body as `TrustedHtml`, highlights, practical information, price, official website and tags as props; `breadcrumb`, `hero`, `after-body`, `after-details` and `tail` slots), plus `BeforeYouGo` and `NumberedStep`. `./layout`: `BreadcrumbBand` (SLA-2819).
+
 ## 0.12.1 (2026-10-01)
 
 - No changes; lockstep release with tourism (SLA-2739).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -42,6 +42,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.12.1"
+    "@sarimarcus/content-sites-core": "0.13.0"
   }
 }

package/src/editorial/BeforeYouGo.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * BeforeYouGo — the boxed checklist that opens a planning guide: a heading with an info glyph and a list of
+ * `label` + `text` pairs. Labels carry their own punctuation.
+ */
+import Icon from '../primitives/Icon.astro';
+
+interface Props {
+  heading: string;
+  items: { label: string; text: string }[];
+  class?: string;
+}
+
+const { heading, items, class: className = 'mb-16' } = Astro.props;
+---
+
+<div class:list={['max-w-measure mx-auto', className]}>
+  <div class="p-6 bg-accent/10 border border-accent/20 rounded-xl">
+    <h2 class="font-semibold mb-3 flex items-center gap-2 font-display">
+      <Icon name="info" class="w-5 h-5 text-accent-strong" />
+      {heading}
+    </h2>
+    <ul class="text-sm text-muted-foreground space-y-2">
+      {items.map((item) => <li><strong>{item.label}</strong> {item.text}</li>)}
+    </ul>
+  </div>
+</div>

package/src/editorial/EditorialGuidePage.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * EditorialGuidePage — the shell of a long-form planning guide. The route keeps data, SEO and schema, and renders
+ * the site Layout around this template. It passes the site Breadcrumb in `breadcrumb`, its hero in `hero`, and the
+ * page body (byline, intro, sections, FAQ, sources, related blocks, each in its own Container) as default-slot
+ * children. The template owns the Pagefind markers: the hero and the body are indexed, the breadcrumb band is not.
+ */
+import BreadcrumbBand from '../layout/BreadcrumbBand.astro';
+
+interface Props {
+  /** Pagefind `type` meta on the hero. */
+  pagefindType?: string;
+  /** Keep the breadcrumb band out of the Pagefind body. */
+  breadcrumbIgnore?: boolean;
+}
+
+const { pagefindType = 'guide', breadcrumbIgnore = true } = Astro.props;
+---
+
+<BreadcrumbBand ignore={breadcrumbIgnore}>
+  <slot name="breadcrumb" />
+</BreadcrumbBand>
+
+<div data-pagefind-body data-pagefind-meta={`type:${pagefindType}`}>
+  <slot name="hero" />
+</div>
+
+<main class="py-12 lg:py-20">
+  <div data-pagefind-body>
+    <slot />
+  </div>
+</main>

package/src/editorial/EventPage.astro

@@ -0,0 +1,178 @@
+---
+/**
+ * EventPage — the shell and shared body of an event page. The route keeps paths, data, SEO and schema, and renders
+ * the site Layout around this template. Slots:
+ *   breadcrumb    — the site Breadcrumb, in the band under the header.
+ *   hero          — the site hero, inside the Pagefind body with `type:<pagefindType>` meta.
+ *   after-body    — site blocks between the description and the shared boxes.
+ *   after-details — site blocks after the tags, inside the measure column (affiliate, FAQ, onward links).
+ *   tail          — full-width blocks after the column (related events, related content).
+ * Every string arrives as a prop; the route renders markdown and passes it as TrustedHtml.
+ */
+import Container from '../layout/Container.astro';
+import Badge from '../primitives/Badge.astro';
+import BreadcrumbBand from '../layout/BreadcrumbBand.astro';
+import { newTab } from '../primitives/newTab';
+import type { TrustedHtml } from '../types';
+import type { EventInfoRow } from './event';
+
+interface Props {
+  bodyHtml: TrustedHtml;
+  /** Prose modifiers after `prose`, e.g. the site's prose theme and size. */
+  proseClass?: string;
+  backLink: { href: string; label: string };
+  highlights?: { heading: string; items: string[] };
+  practicalInfo?: { heading: string; rows: EventInfoRow[] };
+  price?: { label: string; value: string };
+  officialWebsite?: { href: string; label: string };
+  tags?: { heading: string; items: string[] };
+  pagefindType?: string;
+}
+
+const {
+  bodyHtml,
+  proseClass = 'prose-lg',
+  backLink,
+  highlights,
+  practicalInfo,
+  price,
+  officialWebsite,
+  tags,
+  pagefindType = 'event',
+} = Astro.props;
+
+const toneText = { primary: 'text-primary', secondary: 'text-secondary', accent: 'text-accent' };
+---
+
+<BreadcrumbBand>
+  <slot name="breadcrumb" />
+</BreadcrumbBand>
+
+<div data-pagefind-body data-pagefind-meta={`type:${pagefindType}`}>
+  <slot name="hero" />
+</div>
+
+<main class="pt-6 pb-12 lg:pt-8 lg:pb-20">
+  <Container size="measure">
+    <a
+      href={backLink.href}
+      class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors mb-8"
+    >
+      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="m12 19-7-7 7-7" /><path d="M19 12H5" />
+      </svg>
+      {backLink.label}
+    </a>
+
+    <article class={`prose ${proseClass} max-w-none`} data-pagefind-body>
+      <div set:html={bodyHtml} />
+    </article>
+
+    <slot name="after-body" />
+
+    {highlights && highlights.items.length > 0 && (
+      <div class="mt-12 p-6 bg-primary/5 rounded-xl border border-primary/20">
+        <h2
+          class="text-xl font-medium mb-6 flex items-center gap-2 font-display"
+        >
+          <svg class="w-5 h-5 shrink-0 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+          </svg>
+          {highlights.heading}
+        </h2>
+        <ul class="space-y-3">
+          {highlights.items.map((highlight) => (
+            <li class="flex items-start gap-3">
+              <svg class="w-5 h-5 text-primary shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+              <span class="text-foreground">{highlight}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
+
+    {practicalInfo && (
+      <div class="mt-12 p-6 bg-muted/50 rounded-xl border border-border">
+        <h2
+          class="text-xl font-medium mb-6 flex items-center gap-2 font-display"
+        >
+          <svg class="w-5 h-5 shrink-0 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+          </svg>
+          {practicalInfo.heading}
+        </h2>
+
+        <div class="space-y-4">
+          {practicalInfo.rows.map((row) => (
+            <div class="flex items-start gap-3">
+              <div class="w-10 h-10 rounded-lg bg-background flex items-center justify-center shrink-0">
+                <svg class={`w-5 h-5 shrink-0 ${toneText[row.tone]}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  {row.icon === 'clock' && <Fragment><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></Fragment>}
+                  {row.icon === 'sun' && <Fragment><circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" /></Fragment>}
+                  {row.icon === 'pen' && <Fragment><path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" /></Fragment>}
+                  {row.icon === 'bus' && <Fragment><path d="M8 6v6" /><path d="M15 6v6" /><path d="M2 12h19.6" /><path d="M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3" /><circle cx="7" cy="18" r="2" /><path d="M9 18h5" /><circle cx="16" cy="18" r="2" /></Fragment>}
+                </svg>
+              </div>
+              <div>
+                <span class="text-sm font-medium text-foreground">{row.label}</span>
+                {row.html !== undefined
+                  ? <div class="text-sm text-muted-foreground mt-0.5 whitespace-pre-line" set:html={row.html} />
+                  : <p class="text-sm text-muted-foreground mt-0.5">{row.text}</p>}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )}
+
+    {price && (
+      <div class="mt-8 p-4 bg-accent/10 rounded-lg border border-accent/20">
+        <div class="flex items-center gap-3">
+          <svg class="w-6 h-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M4 10h12"/><path d="M4 14h9"/><path d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/>
+          </svg>
+          <div>
+            <span class="text-sm font-medium">{price.label}</span>
+            <p class="text-lg text-accent font-medium">{price.value}</p>
+          </div>
+        </div>
+      </div>
+    )}
+
+    {officialWebsite && (
+      <div class="mt-8">
+        <a
+          href={officialWebsite.href}
+          {...newTab(officialWebsite.href, '_blank')}
+          class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary-strong transition-colors"
+        >
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
+          </svg>
+          {officialWebsite.label}
+        </a>
+      </div>
+    )}
+
+    {tags && tags.items.length > 0 && (
+      <div class="mt-8">
+        <h3 class="text-sm font-medium text-muted-foreground mb-3">
+          {tags.heading}
+        </h3>
+        <div class="flex flex-wrap gap-2">
+          {tags.items.map((tag) => (
+            <Badge tone="custom" toneClass="bg-muted text-muted-foreground" size="lg" lines={0} class="capitalize !py-1 ![font-weight:inherit]">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      </div>
+    )}
+
+    <slot name="after-details" />
+  </Container>
+
+  <slot name="tail" />
+</main>

package/src/editorial/NumberedStep.astro

@@ -0,0 +1,34 @@
+---
+/**
+ * NumberedStep — one stage of a multi-stage plan: a round marker, a title and a subtitle, then the stage's prose in
+ * a card (default slot). `tone` colours the marker and the card; the accent tone tints the card too.
+ */
+interface Props {
+  marker: string;
+  title: string;
+  subtitle: string;
+  tone?: 'primary' | 'accent' | 'secondary';
+}
+
+const { marker, title, subtitle, tone = 'primary' } = Astro.props;
+
+const [markerBg, markerText] = {
+  primary: ['bg-primary', 'text-primary-foreground'],
+  accent: ['bg-accent', 'text-accent-foreground'],
+  secondary: ['bg-secondary', 'text-secondary-foreground'],
+}[tone];
+const cardClass = tone === 'accent' ? 'bg-accent/10 rounded-xl border border-accent/20' : 'bg-card rounded-xl border border-border';
+---
+
+<div>
+  <div class="flex items-center gap-4 mb-4">
+    <div class={`w-14 h-14 rounded-full ${markerBg} flex items-center justify-center ${markerText} font-bold text-xl shrink-0`}>{marker}</div>
+    <div>
+      <h3 class="text-xl font-semibold font-display">{title}</h3>
+      <p class="text-muted-foreground text-sm">{subtitle}</p>
+    </div>
+  </div>
+  <div class={`p-6 ${cardClass}`}>
+    <slot />
+  </div>
+</div>

package/src/editorial/event.ts

@@ -0,0 +1,13 @@
+import type { TrustedHtml } from '../types';
+
+export type EventInfoIcon = 'clock' | 'sun' | 'pen' | 'bus';
+
+/** One row of an EventPage practical-information box. */
+export interface EventInfoRow {
+  icon: EventInfoIcon;
+  tone: 'primary' | 'secondary' | 'accent';
+  label: string;
+  /** Plain text, or `html` for rendered markdown. */
+  text?: string;
+  html?: TrustedHtml;
+}

package/src/editorial/index.ts

@@ -1,2 +1,6 @@
-// Public surface of @sarimarcus/content-sites-ui/editorial. Components land here from SLA-2742 on.
-export {};
+// Public surface of @sarimarcus/content-sites-ui/editorial.
+export { default as EditorialGuidePage } from './EditorialGuidePage.astro';
+export { default as EventPage } from './EventPage.astro';
+export { default as BeforeYouGo } from './BeforeYouGo.astro';
+export { default as NumberedStep } from './NumberedStep.astro';
+export type { EventInfoRow, EventInfoIcon } from './event';

package/src/layout/BreadcrumbBand.astro

@@ -0,0 +1,19 @@
+---
+/**
+ * BreadcrumbBand — the muted strip under the fixed header that holds a page's breadcrumb trail (default slot).
+ * `ignore` keeps it out of the Pagefind body.
+ */
+import Container from './Container.astro';
+
+interface Props {
+  ignore?: boolean;
+}
+
+const { ignore = true } = Astro.props;
+---
+
+<div class="pt-16 bg-muted/50 border-b border-border" data-pagefind-ignore={ignore ? '' : undefined}>
+  <Container class="py-3">
+    <slot />
+  </Container>
+</div>

package/src/layout/index.ts

@@ -1,2 +1,3 @@
 // Public surface of @sarimarcus/content-sites-ui/layout.
 export { default as Container } from './Container.astro';
+export { default as BreadcrumbBand } from './BreadcrumbBand.astro';