@anthusai/papyrus 1.0.0-next.18 → 1.0.0-next.19

package/components/presentation-header.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { getEditionSectionPath } from "../lib/edition-routes";
+import { SITE_BRAND } from "../lib/site-brand";
+
+export type PresentationHeaderSection = {
+  key: string;
+  label: string;
+};
+
+export type PresentationHeaderProps = {
+  editionDate?: string;
+  title?: string;
+  description?: string;
+  sections?: PresentationHeaderSection[];
+  editionBasePath?: string;
+};
+
+export function PresentationHeader({
+  editionDate,
+  title: contentTitle,
+  description,
+  sections,
+  editionBasePath,
+}: PresentationHeaderProps) {
+  const title = SITE_BRAND.mastheadSource === "brand" ? SITE_BRAND.mastheadTitle : contentTitle;
+  const subtitle = SITE_BRAND.mastheadSource === "brand" ? SITE_BRAND.mastheadSubtitle : description;
+  const eyebrow = SITE_BRAND.mastheadEyebrow ?? null;
+  const tagline = SITE_BRAND.mastheadTagline ?? null;
+  const taglineLines = SITE_BRAND.mastheadTaglineLines ?? null;
+  const displayDate = editionDate
+    ? SITE_BRAND.mastheadDateFormat === "formatted"
+      ? formatMastheadDate(editionDate)
+      : editionDate
+    : null;
+
+  const eyebrowParts = eyebrow ? splitEyebrow(eyebrow) : null;
+
+  return (
+    <>
+      <header className="presentation-header">
+        <div className="presentation-header__copy-stack">
+          {eyebrowParts ? (
+            <span className="presentation-header__eyebrow">
+              <span className="presentation-header__eyebrow-strong">{eyebrowParts.lead}</span>
+              {eyebrowParts.rest ? (
+                <span className="presentation-header__eyebrow-muted">{eyebrowParts.rest}</span>
+              ) : null}
+            </span>
+          ) : null}
+          <h1>
+            {SITE_BRAND.mastheadWordSplit && title
+              ? title.split(/\s+/).map((word) => (
+                  <span className="presentation-header__word" key={word}>
+                    <span className="presentation-header__word-text">{word}</span>
+                  </span>
+                ))
+              : title}
+          </h1>
+          <div className="presentation-header__meta">
+            {subtitle && !eyebrow ? <span className="presentation-header__subtitle">{subtitle}</span> : null}
+            {displayDate ? <p className="presentation-header__date">{displayDate}</p> : null}
+          </div>
+        </div>
+        {tagline ? (
+          <span className="presentation-header__tagline">
+            {taglineLines && taglineLines.length > 0
+              ? taglineLines.map((line, index) => (
+                  <span className="presentation-header__tagline-line" key={index}>
+                    <span className="presentation-header__tagline-emphasis">{line.emphasis}</span>
+                    <span className="presentation-header__tagline-tail">{line.tail}</span>
+                    {index < taglineLines.length - 1 ? " " : null}
+                  </span>
+                ))
+              : tagline}
+          </span>
+        ) : null}
+      </header>
+      {sections && sections.length > 0 ? (
+        <nav className="presentation-section-nav" aria-label="Edition sections">
+          {sections.map((section) => (
+            <Link
+              href={getSectionHref(section, { editionBasePath, editionDate })}
+              key={section.key}
+            >
+              {section.label}
+            </Link>
+          ))}
+        </nav>
+      ) : null}
+    </>
+  );
+}
+
+function getSectionHref(
+  section: PresentationHeaderSection,
+  options: { editionBasePath?: string; editionDate?: string },
+): string {
+  if (SITE_BRAND.sectionLinkStrategy === "anchor") {
+    const anchor = `#${getSectionAnchorId(section.key)}`;
+    return options.editionBasePath ? `${options.editionBasePath}${anchor}` : anchor;
+  }
+  if (options.editionBasePath) {
+    return `${options.editionBasePath}/section/${encodeURIComponent(section.key)}`;
+  }
+  if (options.editionDate) {
+    const datedPath = getEditionSectionPath(options.editionDate, section.key);
+    return datedPath.startsWith("//") ? `#${getSectionAnchorId(section.key)}` : datedPath;
+  }
+  return `#${getSectionAnchorId(section.key)}`;
+}
+
+export function getSectionAnchorId(sectionKey: string): string {
+  return `section-${sectionKey}`;
+}
+
+function splitEyebrow(text: string): { lead: string; rest: string } {
+  const trimmed = text.trim();
+  const firstSpace = trimmed.indexOf(" ");
+  if (firstSpace === -1) return { lead: trimmed, rest: "" };
+  return { lead: trimmed.slice(0, firstSpace), rest: trimmed.slice(firstSpace + 1) };
+}
+
+export function formatMastheadDate(value: string): string {
+  const normalized = value?.trim();
+  if (!normalized) return value;
+  const date = new Date(`${normalized}T00:00:00`);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  }).format(date);
+}

package/components/presentation-rhythm-hrule.tsx

@@ -0,0 +1,17 @@
+type PresentationRhythmHRuleProps = {
+  /** Hide in wide 2-column secondary pairs (items 1+2 side-by-side). */
+  hideInSecondaryPair?: boolean;
+};
+
+export function PresentationRhythmHRule({ hideInSecondaryPair = false }: PresentationRhythmHRuleProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className="presentation-rhythm-hrule"
+      data-hide-in-secondary-pair={hideInSecondaryPair ? "true" : undefined}
+      role="presentation"
+    >
+      <div className="presentation-rhythm-hrule__line" />
+    </div>
+  );
+}

package/components/use-blog-header-obstacles.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from "react";
+import type { BlogHeaderObstacle } from "./blog-page-background";
+
+const HEADER_OBSTACLE_SELECTORS = [
+  ".presentation-header__eyebrow",
+  ".presentation-header__word",
+  ".presentation-header__meta",
+  ".presentation-header__subtitle",
+  ".presentation-header__date",
+  ".presentation-header__tagline",
+  ".presentation-section-nav a",
+];
+
+function measureObstacleRect(element: HTMLElement): DOMRect {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const contentRect = range.getBoundingClientRect();
+  range.detach();
+  if (contentRect.width > 0 && contentRect.height > 0) return contentRect;
+  return element.getBoundingClientRect();
+}
+
+/**
+ * Measures the rendered header text (eyebrow, masthead words, meta, tagline,
+ * section links) as rectangles in the coordinates of `.blog-page-background`,
+ * so a brand's background artwork can keep clear of them. Block-level header
+ * elements span the full page width even when their text ends mid-line, so
+ * the text range is measured instead of the element box.
+ */
+export function useBlogHeaderObstacles(
+  pageRef: RefObject<HTMLElement | null>,
+  paintBuffer: number,
+): BlogHeaderObstacle[] {
+  const [obstacles, setObstacles] = useState<BlogHeaderObstacle[]>([]);
+
+  useEffect(() => {
+    const page = pageRef.current;
+    if (!page) return;
+
+    const update = () => {
+      const background = page.querySelector<HTMLElement>(".blog-page-background");
+      const backgroundRect = background?.getBoundingClientRect();
+      if (!backgroundRect) return;
+
+      const next: BlogHeaderObstacle[] = [];
+      for (const selector of HEADER_OBSTACLE_SELECTORS) {
+        for (const element of Array.from(page.querySelectorAll<HTMLElement>(selector))) {
+          const rect = measureObstacleRect(element);
+          const intersectionTop = Math.max(rect.top, backgroundRect.top);
+          const intersectionBottom = Math.min(rect.bottom, backgroundRect.bottom);
+          const intersectionLeft = Math.max(rect.left, backgroundRect.left);
+          const intersectionRight = Math.min(rect.right, backgroundRect.right);
+          const width = intersectionRight - intersectionLeft;
+          const height = intersectionBottom - intersectionTop;
+          if (width <= 0 || height <= 0) continue;
+          next.push({
+            x: intersectionLeft - backgroundRect.left,
+            y: intersectionTop - backgroundRect.top,
+            width,
+            height: height + paintBuffer * 2,
+          });
+        }
+      }
+      setObstacles(next);
+    };
+
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(page);
+    window.addEventListener("resize", update);
+    void document.fonts?.ready.then(update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [pageRef, paintBuffer]);
+
+  return obstacles;
+}

package/components/use-brand-fonts-ready.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { listBrandFontFamilies } from "../lib/brand-fonts";
+import { SITE_BRAND } from "../lib/site-brand";
+
+/**
+ * Returns a number that increments once the brand's declared font families
+ * have loaded, so Pretext measurements taken with fallback metrics are
+ * re-run with the real glyph widths. Stays 0 for brands without a font slot.
+ */
+export function useBrandFontsReadyVersion(): number {
+  const [version, setVersion] = useState(0);
+
+  useEffect(() => {
+    const families = listBrandFontFamilies(SITE_BRAND.fonts);
+    if (families.length === 0 || !document.fonts) return;
+    let isCancelled = false;
+    void Promise.all(families.map((family) => document.fonts.load(`16px ${JSON.stringify(family)}`)))
+      .then(() => document.fonts.ready)
+      .then(() => {
+        if (!isCancelled) setVersion((current) => current + 1);
+      })
+      .catch(() => undefined);
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+
+  return version;
+}

package/components/use-rhythm-overlay.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useRhythmOverlay(): boolean {
+  const [showRhythmOverlay, setShowRhythmOverlay] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditableEventTarget(event.target)) return;
+      if ((event.key === "=" || event.code === "Equal") && event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        setShowRhythmOverlay((current) => !current);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return showRhythmOverlay;
+}
+
+function isEditableEventTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  const tagName = target.tagName.toLowerCase();
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") return true;
+  return target.isContentEditable || target.closest("[contenteditable='true']") !== null;
+}

package/lib/brand-fonts.ts

@@ -0,0 +1,112 @@
+export type SiteBrandFontFace = {
+  /** Public URL of the font file, e.g. `/fonts/acme-serif-regular.woff2`. */
+  src: string;
+  weight?: number | string;
+  style?: "normal" | "italic";
+};
+
+export type SiteBrandGoogleFontSource = {
+  weights: number[];
+  /** Also load the italic style of every listed weight. */
+  italics?: boolean;
+};
+
+/**
+ * One brand-declared font family. Declare exactly one source: `google` loads
+ * the family from the Google Fonts stylesheet API; `faces` self-hosts files
+ * with `@font-face`. The root layout exposes `cssVariable` as
+ * `"<family>", <fallback>` on `<html>`, so publication CSS writes
+ * `font-family: var(--font-masthead)`.
+ */
+export type SiteBrandFont = {
+  family: string;
+  cssVariable: string;
+  fallback?: string;
+  google?: SiteBrandGoogleFontSource;
+  faces?: SiteBrandFontFace[];
+};
+
+export type BrandFontAssets = {
+  preconnectOrigins: string[];
+  stylesheetHrefs: string[];
+  fontFaceCss: string;
+  rootStyle: Record<string, string>;
+  isEmpty: boolean;
+};
+
+const GOOGLE_STYLESHEET_ORIGIN = "https://fonts.googleapis.com";
+const GOOGLE_FILE_ORIGIN = "https://fonts.gstatic.com";
+const DEFAULT_FALLBACK = "sans-serif";
+const CSS_VARIABLE_PATTERN = /^--[a-z][a-z0-9-]*$/;
+
+export function validateBrandFonts(fonts: SiteBrandFont[]): void {
+  const seenVariables = new Set<string>();
+  for (const font of fonts) {
+    if (!font.family.trim()) throw new Error("A brand font needs a family name.");
+    if (!CSS_VARIABLE_PATTERN.test(font.cssVariable)) {
+      throw new Error(`Brand font "${font.family}" cssVariable must look like --font-name, got "${font.cssVariable}".`);
+    }
+    if (seenVariables.has(font.cssVariable)) {
+      throw new Error(`Brand font cssVariable ${font.cssVariable} is declared twice.`);
+    }
+    seenVariables.add(font.cssVariable);
+    const sourceCount = Number(Boolean(font.google)) + Number(Boolean(font.faces?.length));
+    if (sourceCount !== 1) {
+      throw new Error(`Brand font "${font.family}" must declare exactly one source: google or faces.`);
+    }
+    if (font.google && font.google.weights.length === 0) {
+      throw new Error(`Brand font "${font.family}" google source needs at least one weight.`);
+    }
+  }
+}
+
+function buildGoogleFamilyQuery(font: SiteBrandFont): string {
+  const google = font.google!;
+  const weights = [...new Set(google.weights)].sort((left, right) => left - right);
+  const familyName = font.family.trim().replace(/\s+/g, "+");
+  if (!google.italics) return `family=${familyName}:wght@${weights.join(";")}`;
+  const axisValues = [0, 1].flatMap((italic) => weights.map((weight) => `${italic},${weight}`));
+  return `family=${familyName}:ital,wght@${axisValues.join(";")}`;
+}
+
+export function buildGoogleFontsHref(fonts: SiteBrandFont[]): string | null {
+  const googleFonts = fonts.filter((font) => font.google);
+  if (googleFonts.length === 0) return null;
+  return `${GOOGLE_STYLESHEET_ORIGIN}/css2?${googleFonts.map(buildGoogleFamilyQuery).join("&")}&display=swap`;
+}
+
+function buildFontFaceCss(font: SiteBrandFont): string {
+  return (font.faces ?? [])
+    .map((face) => {
+      const declarations = [
+        `font-family:${JSON.stringify(font.family)}`,
+        `src:url(${JSON.stringify(face.src)})`,
+        `font-weight:${face.weight ?? 400}`,
+        `font-style:${face.style ?? "normal"}`,
+        "font-display:swap",
+      ];
+      return `@font-face{${declarations.join(";")}}`;
+    })
+    .join("");
+}
+
+export function resolveBrandFontAssets(fonts: SiteBrandFont[] | undefined): BrandFontAssets {
+  if (!fonts || fonts.length === 0) {
+    return { preconnectOrigins: [], stylesheetHrefs: [], fontFaceCss: "", rootStyle: {}, isEmpty: true };
+  }
+  validateBrandFonts(fonts);
+  const googleHref = buildGoogleFontsHref(fonts);
+  return {
+    preconnectOrigins: googleHref ? [GOOGLE_STYLESHEET_ORIGIN, GOOGLE_FILE_ORIGIN] : [],
+    stylesheetHrefs: googleHref ? [googleHref] : [],
+    fontFaceCss: fonts.map(buildFontFaceCss).join(""),
+    rootStyle: Object.fromEntries(
+      fonts.map((font) => [font.cssVariable, `${JSON.stringify(font.family)}, ${font.fallback ?? DEFAULT_FALLBACK}`]),
+    ),
+    isEmpty: false,
+  };
+}
+
+export function listBrandFontFamilies(fonts: SiteBrandFont[] | undefined): string[] {
+  return (fonts ?? []).map((font) => font.family);
+}

package/lib/content-types.ts

@@ -1,6 +1,7 @@
 import type { Article, ArticleVideoAsset } from "./articles";
 import type { EditionLayoutPlan } from "./layout-plan";
 import type { PublicationItem } from "./publication-items";
+import type { VideoScriptRef } from "./video-script";
 
 export type ContentSource = "scenario" | "graphql";
 
@@ -55,6 +56,8 @@ export type EditionContent = {
   scenarioId?: string;
   description?: string;
   editionVideo?: ArticleVideoAsset | null;
+  /** Video scripts by item slug (`"edition-overview"` for the edition video), for the VideoML preview. */
+  videoScripts?: Record<string, VideoScriptRef>;
 };
 
 export type EditionRouteSummary = {

package/lib/graphql-content-repository.ts

@@ -939,15 +939,20 @@ function parseAttachmentPointer(value: unknown): ContentAttachmentPointer | null
   };
 }
 
-function readInlineExcerpt(editorial: unknown): string | null {
+export function readInlineExcerpt(editorial: unknown): string | null {
   const parsed = parseObjectMetadata(editorial);
   if (!parsed) return null;
   const direct = parsed.excerpt;
   if (typeof direct === "string" && direct.trim()) return direct.trim();
+  const custom = parsed.customExcerpt;
+  if (typeof custom === "string" && custom.trim()) return custom.trim();
   const newsroom = parsed.newsroom;
   if (!newsroom || typeof newsroom !== "object" || Array.isArray(newsroom)) return null;
-  const nestedExcerpt = (newsroom as Record<string, unknown>).excerpt;
-  return typeof nestedExcerpt === "string" && nestedExcerpt.trim() ? nestedExcerpt.trim() : null;
+  const newsroomRecord = newsroom as Record<string, unknown>;
+  const nestedExcerpt = newsroomRecord.excerpt;
+  if (typeof nestedExcerpt === "string" && nestedExcerpt.trim()) return nestedExcerpt.trim();
+  const nestedCustom = newsroomRecord.customExcerpt;
+  return typeof nestedCustom === "string" && nestedCustom.trim() ? nestedCustom.trim() : null;
 }
 
 function normalizePublicationItemType(value: string): Exclude<PublicationItemType, "article"> | null {

package/lib/renderer.ts

@@ -4,6 +4,7 @@ import type { EditionContent } from "./content-types";
 import type { PretextLayout } from "./renderer-config";
 import type { PresentationFooterEntry } from "./presentation-footer";
 import type { PublicationItem } from "./publication-items";
+import type { VideoScriptRef } from "./video-script";
 
 /**
  * Renderer is the swappable render pipeline that turns standard content
@@ -36,6 +37,8 @@ export type RenderEditionProps = {
 export type ArticlePageEditionFooter = {
   editionBasePath: string;
   entries: PresentationFooterEntry[];
+  /** Section links for the rhythm blog layout's page header. Ignored by the classic layout. */
+  sections?: Array<{ key: string; label: string }>;
   subtitle: string;
   title?: string;
 };
@@ -46,6 +49,8 @@ export type RenderArticleProps = {
   backLabel?: string;
   editionFooter?: ArticlePageEditionFooter;
   editionDate?: string;
+  /** VideoML script for the preview player. */
+  videoScript?: VideoScriptRef | null;
 };
 
 export type RenderItemProps = {
@@ -54,6 +59,8 @@ export type RenderItemProps = {
   backLabel?: string;
   editionFooter?: ArticlePageEditionFooter;
   editionDate?: string;
+  /** VideoML script for the preview player. */
+  videoScript?: VideoScriptRef | null;
 };
 
 /**

package/lib/site-brand.ts

@@ -2,6 +2,7 @@ import type { ComponentType } from "react";
 import type { EditionPresentationFormat } from "./content-types";
 import type { Article, ArticleVideoAsset } from "./articles";
 import type { BlogPageBackgroundProps } from "../components/blog-page-background";
+import type { SiteBrandFont } from "./brand-fonts";
 import type { PictogramFigureProps } from "../components/pictogram-figure";
 import papyrusSite from "papyrus-site";
 import {
@@ -24,6 +25,23 @@ export type SiteBrandComponents = {
   BlogPageBackground?: ComponentType<BlogPageBackgroundProps>;
 };
 
+/**
+ * One line of a brand's header tagline: an emphasized lead and a plain tail,
+ * e.g. `{ emphasis: "Practical advice", tail: "for staying secure" }`.
+ */
+export type SiteBrandTaglineLine = {
+  emphasis: string;
+  tail: string;
+};
+
+/**
+ * Blog presentation layout. `"classic"` (the default) is the original blog
+ * layout. `"rhythm"` snaps every height and gap to the vertical rhythm grid,
+ * floats featured images on the grid, draws rhythm rules between items, adds
+ * the eyebrow/tagline header and the rhythm overlay hotkey (Ctrl+=).
+ */
+export type SiteBrandBlogLayout = "classic" | "rhythm";
+
 /** Default scenario content a brand supplies for the layout lab. */
 export type SiteBrandDemoEdition = {
   title: string;
@@ -53,6 +71,10 @@ export type SiteBrand = {
   mastheadTitle: string;
   mastheadSubtitle: string;
   mastheadTagline?: string;
+  /** Rhythm blog layout only: small line above the masthead title, e.g. "Acme Research". The first word is emphasized. */
+  mastheadEyebrow?: string;
+  /** Rhythm blog layout only: structured tagline; `mastheadTagline` stays the plain-text fallback. */
+  mastheadTaglineLines?: SiteBrandTaglineLine[];
   backToHomeLabel: string;
   articleTitleSuffix: string;
   placeholderByline: string;
@@ -89,6 +111,20 @@ export type SiteBrand = {
   analysisProfilesPath: string;
   publicationName: string;
   components?: SiteBrandComponents;
+  /**
+   * Video player chrome. `"native"` (default) is the browser's controls;
+   * `"framed"` wraps the media in `.article-video__media` and renders a
+   * "Play Video" button with a seek bar (`.article-video__cta*`), styled by the publication CSS.
+   */
+  videoPlayer?: "native" | "framed";
+  /** Blog presentation layout. Default `"classic"`. See `SiteBrandBlogLayout`. */
+  blogLayout?: SiteBrandBlogLayout;
+  /**
+   * Brand font slot: families the root layout loads (Google Fonts stylesheet
+   * or self-hosted files) and exposes as CSS custom properties. See
+   * `lib/brand-fonts.ts` and docs/brand-slots.md.
+   */
+  fonts?: SiteBrandFont[];
   demoEdition?: SiteBrandDemoEdition;
   video?: SiteBrandVideo;
 };

package/package.json

@@ -93,6 +93,8 @@
     "./components/papyrus-console-shell": "./components/papyrus-console-shell.tsx",
     "./components/pictogram-figure": "./components/pictogram-figure.tsx",
     "./components/presentation-footer": "./components/presentation-footer.tsx",
+    "./components/presentation-header": "./components/presentation-header.tsx",
+    "./components/presentation-rhythm-hrule": "./components/presentation-rhythm-hrule.tsx",
     "./components/reader-auth-control": "./components/reader-auth-control.tsx",
     "./components/reader-auth-state": "./components/reader-auth-state.ts",
     "./components/reader-settings": "./components/reader-settings.ts",
@@ -119,7 +121,10 @@
     "./components/ui/tabs": "./components/ui/tabs.tsx",
     "./components/ui/textarea": "./components/ui/textarea.tsx",
     "./components/ui/tooltip": "./components/ui/tooltip.tsx",
+    "./components/use-blog-header-obstacles": "./components/use-blog-header-obstacles.ts",
+    "./components/use-brand-fonts-ready": "./components/use-brand-fonts-ready.ts",
     "./components/use-resolved-papyrus-theme": "./components/use-resolved-papyrus-theme.ts",
+    "./components/use-rhythm-overlay": "./components/use-rhythm-overlay.ts",
     "./lib/amplify-outputs-guard": "./lib/amplify-outputs-guard.ts",
     "./lib/amplify-outputs-path": "./lib/amplify-outputs-path.ts",
     "./lib/amplify-server-runtime": "./lib/amplify-server-runtime.ts",
@@ -128,6 +133,7 @@
     "./lib/articles": "./lib/articles.ts",
     "./lib/blog-feature-solver": "./lib/blog-feature-solver.ts",
     "./lib/blog-rhythm": "./lib/blog-rhythm.ts",
+    "./lib/brand-fonts": "./lib/brand-fonts.ts",
     "./lib/cached-content-repository": "./lib/cached-content-repository.ts",
     "./lib/category-dashboard": "./lib/category-dashboard.ts",
     "./lib/category-repository": "./lib/category-repository.ts",
@@ -211,7 +217,11 @@
     "./renderers/pretext/article-page": "./renderers/pretext/article-page.tsx",
     "./renderers/pretext/index": "./renderers/pretext/index.ts",
     "./renderers/pretext/layouts": "./renderers/pretext/layouts.ts",
+    "./renderers/pretext/presentation-shared": "./renderers/pretext/presentation-shared.tsx",
     "./renderers/pretext/presentation-shell": "./renderers/pretext/presentation-shell.tsx",
+    "./renderers/pretext/rhythm-article-page": "./renderers/pretext/rhythm-article-page.tsx",
+    "./renderers/pretext/rhythm-blog-presentation": "./renderers/pretext/rhythm-blog-presentation.tsx",
+    "./renderers/pretext/rhythm-shell-style": "./renderers/pretext/rhythm-shell-style.ts",
     "./app/%5F_preview/[[...path]]/route": "./app/%5F_preview/[[...path]]/route.ts",
     "./app/[year]/[month]/[day]/[articleSlug]/page": "./app/[year]/[month]/[day]/[articleSlug]/page.tsx",
     "./app/[year]/[month]/[day]/page": "./app/[year]/[month]/[day]/page.tsx",
@@ -281,7 +291,7 @@
       "optional": true
     }
   },
-  "version": "1.0.0-next.18",
+  "version": "1.0.0-next.19",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-sdk/client-cognito-identity-provider": "3.1045.0",

package/renderers/pretext/article-page.tsx

@@ -9,6 +9,7 @@ import { SITE_BRAND } from "../../lib/site-brand";
 import { ArticleVideoFigure } from "../../components/article-video";
 import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
 import { PresentationFooter } from "../../components/presentation-footer";
+import { RhythmArticlePage } from "./rhythm-article-page";
 
 const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
 
@@ -16,7 +17,24 @@ export type { ArticlePageEditionFooter };
 
 type ArticlePageViewProps = RenderArticleProps;
 
-export function ArticlePageView({ article, backHref, backLabel = SITE_BRAND.backToHomeLabel, editionFooter, editionDate }: ArticlePageViewProps) {
+export function ArticlePageView({ article, backHref, backLabel = SITE_BRAND.backToHomeLabel, editionFooter, editionDate, videoScript = null }: ArticlePageViewProps) {
+  if (SITE_BRAND.blogLayout === "rhythm") {
+    return (
+      <RhythmArticlePage
+        body={article.body}
+        deck={article.deck}
+        editionDate={editionDate}
+        editionFooter={editionFooter}
+        headline={article.headline}
+        image={article.image ?? null}
+        section={article.section}
+        slug={article.slug}
+        video={article.video ?? null}
+        videoScript={videoScript}
+      />
+    );
+  }
+
   const articleDate = editionDate ? formatArticleDate(editionDate) : null;
 
   return (
@@ -55,9 +73,27 @@ export function ArticlePageView({ article, backHref, backLabel = SITE_BRAND.back
 
 type ItemPageViewProps = RenderItemProps;
 
-export function ItemPageView({ item, backHref, backLabel = "Back to edition", editionFooter, editionDate }: ItemPageViewProps) {
+export function ItemPageView({ item, backHref, backLabel = "Back to edition", editionFooter, editionDate, videoScript = null }: ItemPageViewProps) {
   if (item.type === "article") {
-    return <ArticlePageView article={item} backHref={backHref} backLabel={backLabel} editionFooter={editionFooter} editionDate={editionDate} />;
+    return <ArticlePageView article={item} backHref={backHref} backLabel={backLabel} editionFooter={editionFooter} editionDate={editionDate} videoScript={videoScript} />;
+  }
+
+  if (SITE_BRAND.blogLayout === "rhythm") {
+    return (
+      <RhythmArticlePage
+        body={item.body ?? []}
+        deck={item.deck}
+        editionDate={editionDate}
+        editionFooter={editionFooter}
+        headline={item.title}
+        image={item.image ?? null}
+        itemType={item.type}
+        section={item.section ?? item.type}
+        slug={item.slug}
+        video={getPublicationItemVideoAsset(item) ?? null}
+        videoScript={videoScript}
+      />
+    );
   }
 
   const itemDate = editionDate ? formatArticleDate(editionDate) : null;