@anthusai/papyrus 1.0.0-next.9 → 1.1.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;

package/renderers/pretext/presentation-shared.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import type { CSSProperties, MouseEvent as ReactMouseEvent, RefObject } from "react";
+import { useEffect, useState } from "react";
+import type { EditionSection } from "../../lib/content-types";
+import { truncateWords } from "../../lib/excerpts";
+import type { PresentationFooterEntry } from "../../lib/presentation-footer";
+import type { PublicationItem } from "../../lib/publication-items";
+import type { TextLine } from "../../lib/pretext-layout";
+
+export type PresentationItemMode = "blog" | "magazine" | "magazine-feature";
+
+export function MeasuredPresentationLines({ lines }: { lines: TextLine[] }) {
+  return (
+    <div className="presentation-measured-lines">
+      {lines.map((line, index) => (
+        <span
+          className="presentation-measured-line"
+          key={`${index}-${line.text}`}
+          style={{
+            "--line-font-family": line.fontFamily,
+            "--line-font-size": `${line.fontSize}px`,
+            "--line-height": `${line.lineHeight}px`,
+            "--line-paint-height": `${line.paintHeight}px`,
+            left: line.x,
+            top: line.y,
+          } as CSSProperties}
+        >
+          {line.text}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function useMeasuredWidth(ref: RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setWidth(Math.max(1, Math.floor(node.getBoundingClientRect().width)));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [ref]);
+  return width;
+}
+
+export function usePresentationTargetScroll(targetSection: EditionSection | undefined) {
+  useEffect(() => {
+    const scrollToCurrentTarget = () => {
+      const hashTarget = parseItemAnchorHash(window.location.hash);
+      const targetId = hashTarget ?? (targetSection ? getSectionAnchorId(targetSection.key) : null);
+      if (!targetId) return;
+      document.getElementById(targetId)?.scrollIntoView({ block: "start" });
+    };
+    requestAnimationFrame(scrollToCurrentTarget);
+    window.addEventListener("hashchange", scrollToCurrentTarget);
+    return () => window.removeEventListener("hashchange", scrollToCurrentTarget);
+  }, [targetSection]);
+}
+
+export function getSectionAnchorId(sectionKey: string): string {
+  return `section-${sectionKey}`;
+}
+
+export function getPresentationTitle(item: PublicationItem): string {
+  return item.type === "article" ? item.headline : item.title;
+}
+
+export function getPresentationBodyText(item: PublicationItem, mode: PresentationItemMode): string {
+  const body = item.type === "article" ? item.body.join("\n\n") : (item.body ?? []).join("\n\n");
+  if (mode !== "blog") return body;
+  const excerpt = String(item.excerpt ?? "").trim();
+  if (excerpt) return excerpt;
+  return truncateWords(body, 80);
+}
+
+export function parseItemAnchorHash(hash: string): string | null {
+  if (!hash) return null;
+  try {
+    const value = decodeURIComponent(hash.slice(1)).trim();
+    return /^[a-z0-9][a-z0-9-]*$/i.test(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+export function getBlogFooterSectionHref(entry: PresentationFooterEntry, editionBasePath?: string): string {
+  const anchor = `#${getSectionAnchorId(entry.sectionKey)}`;
+  return editionBasePath ? `${editionBasePath}${anchor}` : anchor;
+}
+
+export function handleBlogFooterSectionClick(
+  event: ReactMouseEvent<HTMLAnchorElement>,
+  entry: PresentationFooterEntry,
+  href: string,
+) {
+  event.preventDefault();
+  window.history.pushState(null, "", href);
+  document.getElementById(getSectionAnchorId(entry.sectionKey))?.scrollIntoView({ block: "start" });
+}
+
+export function getPresentationItemRole(mode: PresentationItemMode, index?: number): "lead" | "secondary" {
+  if (mode === "magazine-feature") return "lead";
+  if (mode === "blog" && index === 0) return "lead";
+  return "secondary";
+}

package/renderers/pretext/presentation-shell.tsx

@@ -23,6 +23,18 @@ import { Newspaper } from "../../components/newspaper";
 import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
 import { PresentationFooter } from "../../components/presentation-footer";
 import { readLocalReaderSettings, resolveReaderSettings, subscribeReaderSettingsChanges } from "../../components/reader-settings";
+import { RhythmBlogPresentation } from "./rhythm-blog-presentation";
+import {
+  getBlogFooterSectionHref,
+  getPresentationBodyText,
+  getPresentationItemRole,
+  getPresentationTitle,
+  getSectionAnchorId,
+  handleBlogFooterSectionClick,
+  MeasuredPresentationLines,
+  useMeasuredWidth,
+  usePresentationTargetScroll,
+} from "./presentation-shared";
 
 const BlogPageBackground = SITE_BRAND.components?.BlogPageBackground ?? GenericBlogPageBackground;
 const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
@@ -94,7 +106,9 @@ export function PresentationShell({
 
   return (
     <PresentationFrame>
-      {activePresentation === "blog" ? (
+      {activePresentation === "blog" && SITE_BRAND.blogLayout === "rhythm" ? (
+        <RhythmBlogPresentation {...presentationProps} />
+      ) : activePresentation === "blog" ? (
         <BlogPresentation {...presentationProps} />
       ) : (
         <MagazinePresentation {...presentationProps} />
@@ -340,67 +354,6 @@ function PresentationItem({
   );
 }
 
-function getPresentationItemRole(mode: "blog" | "magazine" | "magazine-feature", index?: number): "lead" | "secondary" {
-  if (mode === "magazine-feature") return "lead";
-  if (mode === "blog" && index === 0) return "lead";
-  return "secondary";
-}
-
-function MeasuredPresentationLines({ lines }: { lines: TextLine[] }) {
-  return (
-    <div className="presentation-measured-lines">
-      {lines.map((line, index) => (
-        <span
-          className="presentation-measured-line"
-          key={`${index}-${line.text}`}
-          style={{
-            "--line-font-family": line.fontFamily,
-            "--line-font-size": `${line.fontSize}px`,
-            "--line-height": `${line.lineHeight}px`,
-            "--line-paint-height": `${line.paintHeight}px`,
-            left: line.x,
-            top: line.y,
-          } as CSSProperties}
-        >
-          {line.text}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function useMeasuredWidth(ref: RefObject<HTMLElement | null>): number {
-  const [width, setWidth] = useState(0);
-  useEffect(() => {
-    const node = ref.current;
-    if (!node) return;
-    const update = () => setWidth(Math.max(1, Math.floor(node.getBoundingClientRect().width)));
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(node);
-    window.addEventListener("resize", update);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("resize", update);
-    };
-  }, [ref]);
-  return width;
-}
-
-function usePresentationTargetScroll(targetSection: EditionSection | undefined) {
-  useEffect(() => {
-    const scrollToCurrentTarget = () => {
-      const hashTarget = parseItemAnchorHash(window.location.hash);
-      const targetId = hashTarget ?? (targetSection ? getSectionAnchorId(targetSection.key) : null);
-      if (!targetId) return;
-      document.getElementById(targetId)?.scrollIntoView({ block: "start" });
-    };
-    requestAnimationFrame(scrollToCurrentTarget);
-    window.addEventListener("hashchange", scrollToCurrentTarget);
-    return () => window.removeEventListener("hashchange", scrollToCurrentTarget);
-  }, [targetSection]);
-}
-
 function getSectionHref(content: EditionContent, section: EditionSection, editionBasePath?: string): string {
   if (SITE_BRAND.sectionLinkStrategy === "anchor") {
     const anchor = `#${getSectionAnchorId(section.key)}`;
@@ -411,37 +364,11 @@ function getSectionHref(content: EditionContent, section: EditionSection, editio
   return datedPath.startsWith("//") ? `#${getSectionAnchorId(section.key)}` : datedPath;
 }
 
-function getSectionAnchorId(sectionKey: string): string {
-  return `section-${sectionKey}`;
-}
-
 function getMeasuredTextHeight(lines: TextLine[]): number {
   const last = lines[lines.length - 1];
   return last ? last.y + last.paintHeight : 0;
 }
 
-function getPresentationTitle(item: PublicationItem): string {
-  return item.type === "article" ? item.headline : item.title;
-}
-
-function getPresentationBodyText(item: PublicationItem, mode: "blog" | "magazine" | "magazine-feature"): string {
-  const body = item.type === "article" ? item.body.join("\n\n") : (item.body ?? []).join("\n\n");
-  if (mode !== "blog") return body;
-  const excerpt = String(item.excerpt ?? "").trim();
-  if (excerpt) return excerpt;
-  return truncateWords(body, 80);
-}
-
-function parseItemAnchorHash(hash: string): string | null {
-  if (!hash) return null;
-  try {
-    const value = decodeURIComponent(hash.slice(1)).trim();
-    return /^[a-z0-9][a-z0-9-]*$/i.test(value) ? value : null;
-  } catch {
-    return null;
-  }
-}
-
 function formatMastheadDate(value: string): string {
   const normalized = value?.trim();
   if (!normalized) return value;
@@ -454,17 +381,3 @@ function formatMastheadDate(value: string): string {
   }).format(date);
 }
 
-function getBlogFooterSectionHref(entry: PresentationFooterEntry, editionBasePath?: string): string {
-  const anchor = `#${getSectionAnchorId(entry.sectionKey)}`;
-  return editionBasePath ? `${editionBasePath}${anchor}` : anchor;
-}
-
-function handleBlogFooterSectionClick(
-  event: ReactMouseEvent<HTMLAnchorElement>,
-  entry: PresentationFooterEntry,
-  href: string,
-) {
-  event.preventDefault();
-  window.history.pushState(null, "", href);
-  document.getElementById(getSectionAnchorId(entry.sectionKey))?.scrollIntoView({ block: "start" });
-}

package/renderers/pretext/rhythm-article-page.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import type { ArticleImage, ArticleVideoAsset } from "../../lib/articles";
+import { solveFeaturedFloatGeometry } from "../../lib/blog-feature-solver";
+import type { ArticlePageEditionFooter } from "../../lib/renderer";
+import { SITE_BRAND } from "../../lib/site-brand";
+import type { VideoScriptRef } from "../../lib/video-script";
+import { ArticleVideoFigure } from "../../components/article-video";
+import { BlogPageBackground as GenericBlogPageBackground } from "../../components/blog-page-background";
+import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
+import { PresentationFooter } from "../../components/presentation-footer";
+import { PresentationHeader } from "../../components/presentation-header";
+import { useBlogHeaderObstacles } from "../../components/use-blog-header-obstacles";
+import { useRhythmOverlay } from "../../components/use-rhythm-overlay";
+import { BLOG_RHYTHM, getFeaturedLayoutStyle, getRhythmShellStyle } from "./rhythm-shell-style";
+
+const BlogPageBackground = SITE_BRAND.components?.BlogPageBackground ?? GenericBlogPageBackground;
+const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
+
+export type RhythmArticlePageProps = {
+  body: string[];
+  deck?: string;
+  editionDate?: string;
+  editionFooter?: ArticlePageEditionFooter;
+  headline: string;
+  image: ArticleImage | null;
+  itemType?: string;
+  section: string;
+  slug: string;
+  video: ArticleVideoAsset | null;
+  videoScript: VideoScriptRef | null;
+};
+
+export function RhythmArticlePage({
+  body,
+  deck,
+  editionDate,
+  editionFooter,
+  headline,
+  image,
+  itemType,
+  section,
+  slug,
+  video,
+  videoScript,
+}: RhythmArticlePageProps) {
+  const articleRef = useRef<HTMLElement | null>(null);
+  const pageRef = useRef<HTMLElement | null>(null);
+  const containerWidth = useMeasuredWidth(articleRef);
+  const viewportWidth = useViewportWidth();
+  const showRhythmOverlay = useRhythmOverlay();
+  const headerObstacles = useBlogHeaderObstacles(pageRef, BLOG_RHYTHM.paintBuffer);
+  const floatGeometry = useMemo(() => {
+    if (!image || !containerWidth) return null;
+    return solveFeaturedFloatGeometry({
+      containerWidth,
+      viewportWidth,
+      rhythm: BLOG_RHYTHM,
+      imageAsset: image,
+      itemIndex: 0,
+    });
+  }, [containerWidth, image, viewportWidth]);
+
+  const hasImage = Boolean(image);
+  const articleClassName = hasImage ? "article-page article-float-grid" : "article-page";
+
+  return (
+    <main
+      className={`${editionFooter ? "article-shell article-shell--edition" : "article-shell"} blog-rhythm-shell`}
+      data-rhythm-overlay={showRhythmOverlay ? "true" : "false"}
+      ref={pageRef}
+      style={getRhythmShellStyle(BLOG_RHYTHM)}
+    >
+      <BlogPageBackground headerObstacles={headerObstacles} pageRef={pageRef} rhythm={BLOG_RHYTHM} />
+      <PresentationHeader
+        editionBasePath={editionFooter?.editionBasePath}
+        editionDate={editionDate}
+        sections={editionFooter?.sections}
+      />
+      <article
+        className={articleClassName}
+        data-feature-layout={hasImage ? (floatGeometry?.mode ?? "float") : undefined}
+        data-has-image={hasImage ? "true" : "false"}
+        data-item-type={itemType}
+        ref={articleRef}
+        style={floatGeometry ? getFeaturedLayoutStyle(floatGeometry) : undefined}
+      >
+        {video ? (
+          <div className="article-page__hero-video">
+            <ArticleVideoFigure slug={slug} video={video} videoScript={videoScript} />
+          </div>
+        ) : null}
+        <header className={hasImage ? "article-float-grid__header" : undefined}>
+          <p className="story-label">{section}</p>
+          <h1>{headline}</h1>
+          {deck ? <p className="article-deck">{deck}</p> : null}
+        </header>
+        {image ? (
+          <div className="presentation-item__media article-float-grid__media">
+            <PictogramFigure
+              alt={image.alt}
+              caption={image.caption}
+              credit={image.credit}
+              figureClassName="presentation-item__image"
+              frameHeight={floatGeometry?.imageHeight}
+              frameWidth={floatGeometry?.imageWidth}
+              height={760}
+              layout={image.layout}
+              priority
+              sizes="(max-width: 900px) 100vw, 760px"
+              slug={slug}
+              src={image.src}
+              themeVariants={image.themeVariants}
+              width={1200}
+            />
+          </div>
+        ) : null}
+        <div className={hasImage ? "article-body article-float-grid__body" : "article-body"}>
+          {body.map((paragraph) => (
+            <p key={paragraph}>{paragraph}</p>
+          ))}
+        </div>
+      </article>
+      {editionFooter ? (
+        <PresentationFooter
+          editionBasePath={editionFooter.editionBasePath}
+          entries={editionFooter.entries}
+          resolveSectionHref={(entry) => `${editionFooter.editionBasePath}#section-${entry.sectionKey}`}
+          subtitle={editionFooter.subtitle}
+          title={editionFooter.title}
+        />
+      ) : null}
+    </main>
+  );
+}
+
+function useMeasuredWidth(ref: RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setWidth(Math.max(1, Math.floor(node.getBoundingClientRect().width)));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [ref]);
+  return width;
+}
+
+function useViewportWidth(): number {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const update = () => setWidth(Math.max(1, Math.floor(window.innerWidth)));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  return width;
+}