@sarimarcus/content-sites-ui 0.32.0 → 0.32.1

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.32.1 (2026-10-09)
+
+- `./editorial` `EventPage` takes `audiences` (one sr-only `audience:` Pagefind filter span per entry inside the hero wrapper), and `article`/`highlights` take `id`, an extra `class` and `section` (a bare `data-<section>-section` attribute). `bodyHtml` and `backLink` are optional. New slots: `back` (replaces the back link), `before-body`, `body` (replaces the `<article>`), `after-highlights` and `website` (replaces the official-website button). Default output is unchanged (render-diff 3/3; Dark Skies 0 of 687 pages). Site adoption: `scripts/platform/migrations/event-page.mjs` (17 Córdoba event pages, block-level whitespace; 12 Granada event pages, also `shrink-0` on heading and practical-row icons) and, for Granada walks, `scripts/platform/migrations/walk-pagefind.mjs` (8 pages indexed as `type:walk`) (SLA-3025).
+
 ## 0.32.0 (2026-10-09)
 
 - Optional label props, so every reader-visible string can come from the site: Pagination `ariaLabel`, `previousLabel`, `nextLabel`, `pageLabel`, `currentPageLabel`; TableOfContents `jumpLabel`, `stickyLabel`; CardCarousel `regionLabel`, `previousLabel`, `nextLabel`; SiteFooter `rightsLabel`, `legalAriaLabel`; NotFoundPage `searchShortcut`; VisitTiming `labels`. Optional `routes` on ArticleCategoryNav and on `toArticleAuthor` (4th argument). English defaults move from the templates into an internal labels module; output is byte-identical (render-diff 48/48) (SLA-2991).

package/package.json

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

package/src/editorial/EventPage.astro

@@ -2,12 +2,19 @@
 /**
  * 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.
+ *   breadcrumb       — the site Breadcrumb, in the band under the header.
+ *   hero             — the site hero, inside the Pagefind body with `type:<pagefindType>` meta, after one sr-only
+ *                      `audience:<a>` filter span per `audiences` entry.
+ *   back             — replaces the `backLink` anchor.
+ *   before-body      — site blocks between the back link and the description (chips, ToC, metadata).
+ *   body             — replaces the built-in `<article>` (a route that renders its own sections).
+ *   after-body       — site blocks between the description and the shared boxes.
+ *   after-highlights — site blocks between the highlights and the practical information.
+ *   website          — replaces the `officialWebsite` block.
+ *   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. `article` and `highlights`
+ * take an `id`, extra classes and a `section` name, which emits `data-<section>-section` (a ToC scroll-spy target).
  */
 import Container from '../layout/Container.astro';
 import Badge from '../primitives/Badge.astro';
@@ -16,22 +23,35 @@ import { newTab } from '../primitives/newTab';
 import type { TrustedHtml } from '../types';
 import type { EventInfoRow } from './event';
 
+interface Section {
+  id?: string;
+  /** Appended to the block's own classes. */
+  class?: string;
+  /** Emits `data-<section>-section`. */
+  section?: string;
+}
+
 interface Props {
-  bodyHtml: TrustedHtml;
+  /** Required unless the `body` slot replaces the article. */
+  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[] };
+  article?: Section;
+  /** Required unless the `back` slot replaces it. */
+  backLink?: { href: string; label: string };
+  highlights?: { heading: string; items: string[] } & Section;
   practicalInfo?: { heading: string; rows: EventInfoRow[] };
   price?: { label: string; value: string };
   officialWebsite?: { href: string; label: string };
   tags?: { heading: string; items: string[] };
   pagefindType?: string;
+  audiences?: readonly string[];
 }
 
 const {
   bodyHtml,
   proseClass = 'prose-lg',
+  article,
   backLink,
   highlights,
   practicalInfo,
@@ -39,9 +59,12 @@ const {
   officialWebsite,
   tags,
   pagefindType = 'event',
+  audiences = [],
 } = Astro.props;
 
 const toneText = { primary: 'text-primary', secondary: 'text-secondary', accent: 'text-accent' };
+const sectionAttr = (s?: Section) => (s?.section ? { [`data-${s.section}-section`]: '' } : {});
+const withClass = (base: string, s?: Section) => (s?.class ? `${base} ${s.class}` : base);
 ---
 
 <BreadcrumbBand>
@@ -49,12 +72,12 @@ const toneText = { primary: 'text-primary', secondary: 'text-secondary', accent:
 </BreadcrumbBand>
 
 <div data-pagefind-body data-pagefind-meta={`type:${pagefindType}`}>
-  <slot name="hero" />
+  {audiences.map((a) => <span class="sr-only" data-pagefind-filter={`audience:${a}`}>{a}</span>)}<slot name="hero" />
 </div>
 
 <main class="pt-6 pb-12 lg:pt-8 lg:pb-20">
   <Container size="measure">
-    <a
+    <slot name="back">{backLink && (<a
       href={backLink.href}
       class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors mb-8"
     >
@@ -62,16 +85,16 @@ const toneText = { primary: 'text-primary', secondary: 'text-secondary', accent:
         <path d="m12 19-7-7 7-7" /><path d="M19 12H5" />
       </svg>
       {backLink.label}
-    </a>
+    </a>)}</slot>
 
-    <article class={`prose ${proseClass} max-w-none`} data-pagefind-body>
+    <slot name="before-body" /><slot name="body"><article id={article?.id} {...sectionAttr(article)} class={withClass(`prose ${proseClass} max-w-none`, article)} data-pagefind-body>
       <div set:html={bodyHtml} />
-    </article>
+    </article></slot>
 
     <slot name="after-body" />
 
     {highlights && highlights.items.length > 0 && (
-      <div class="mt-12 p-6 bg-primary/5 rounded-xl border border-primary/20">
+      <div id={highlights.id} {...sectionAttr(highlights)} class={withClass('mt-12 p-6 bg-primary/5 rounded-xl border border-primary/20', highlights)}>
         <h2
           class="text-xl font-medium mb-6 flex items-center gap-2 font-display"
         >
@@ -93,7 +116,7 @@ const toneText = { primary: 'text-primary', secondary: 'text-secondary', accent:
       </div>
     )}
 
-    {practicalInfo && (
+    <slot name="after-highlights" />{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"
@@ -141,7 +164,7 @@ const toneText = { primary: 'text-primary', secondary: 'text-secondary', accent:
       </div>
     )}
 
-    {officialWebsite && (
+    <slot name="website">{officialWebsite && (
       <div class="mt-8">
         <a
           href={officialWebsite.href}
@@ -154,9 +177,7 @@ const toneText = { primary: 'text-primary', secondary: 'text-secondary', accent:
           {officialWebsite.label}
         </a>
       </div>
-    )}
-
-    {tags && tags.items.length > 0 && (
+    )}</slot>{tags && tags.items.length > 0 && (
       <div class="mt-8">
         <h3 class="text-sm font-medium text-muted-foreground mb-3">
           {tags.heading}