@anthusai/papyrus 1.0.0-next.9 → 1.1.0

package/renderers/pretext/rhythm-blog-presentation.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { solveFeaturedItem } from "../../lib/blog-feature-solver";
+import { createDefaultBlogTextStyle, getMeasuredTextHeight, reserveRhythmRows } from "../../lib/blog-rhythm";
+import type { ArticleVideoAsset } from "../../lib/articles";
+import type { EditionContent, EditionSection } from "../../lib/content-types";
+import { getEditionSectionItems } from "../../lib/edition-sections";
+import { layoutAllTextLines, prepareWithSegments } from "../../lib/pretext-layout";
+import { buildPresentationFooterEntries } from "../../lib/presentation-footer";
+import {
+  getPublicationItemImageAssets,
+  getPublicationItemVideoAsset,
+  type PublicationItem,
+} from "../../lib/publication-items";
+import { SITE_BRAND } from "../../lib/site-brand";
+import { EDITION_OVERVIEW_VIDEO_KEY, 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 { getSectionAnchorId, PresentationHeader } from "../../components/presentation-header";
+import { PresentationRhythmHRule } from "../../components/presentation-rhythm-hrule";
+import { useBlogHeaderObstacles } from "../../components/use-blog-header-obstacles";
+import { useBrandFontsReadyVersion } from "../../components/use-brand-fonts-ready";
+import { useRhythmOverlay } from "../../components/use-rhythm-overlay";
+import {
+  getBlogFooterSectionHref,
+  getPresentationBodyText,
+  getPresentationItemRole,
+  getPresentationTitle,
+  handleBlogFooterSectionClick,
+  MeasuredPresentationLines,
+  useMeasuredWidth,
+  usePresentationTargetScroll,
+} from "./presentation-shared";
+import { BLOG_RHYTHM, getFeaturedLayoutStyle, getRhythmShellStyle } from "./rhythm-shell-style";
+
+const BlogPageBackground = SITE_BRAND.components?.BlogPageBackground ?? GenericBlogPageBackground;
+const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
+const BLOG_TEXT_STYLE = createDefaultBlogTextStyle(SITE_BRAND.textFont);
+const SECONDARY_PAIR_ITEM_INDEX = 2;
+
+type PapyrusTestWindow = Window & typeof globalThis & {
+  __PAPYRUS_SCENARIO__?: string;
+};
+
+export function RhythmBlogPresentation({
+  content,
+  editionBasePath,
+  targetSection,
+}: {
+  content: EditionContent;
+  editionBasePath?: string;
+  targetSection?: EditionSection;
+}) {
+  const footerEntries = useMemo(() => buildPresentationFooterEntries(content), [content]);
+  const footerSubtitle = SITE_BRAND.id === "papyrus" ? (content.description?.trim() || "Inside Papyrus") : SITE_BRAND.mastheadSubtitle;
+  const pageRef = useRef<HTMLElement | null>(null);
+  const showRhythmOverlay = useRhythmOverlay();
+  const headerObstacles = useBlogHeaderObstacles(pageRef, BLOG_RHYTHM.paintBuffer);
+  usePresentationTargetScroll(targetSection);
+  useEffect(() => {
+    (window as PapyrusTestWindow).__PAPYRUS_SCENARIO__ = content.scenarioId;
+    return () => {
+      delete (window as PapyrusTestWindow).__PAPYRUS_SCENARIO__;
+    };
+  }, [content.scenarioId]);
+
+  return (
+    <main
+      className="presentation-page presentation-page--blog blog-rhythm-shell"
+      data-presentation-engine="blog"
+      data-rhythm-overlay={showRhythmOverlay ? "true" : "false"}
+      ref={pageRef}
+      style={getRhythmShellStyle(BLOG_RHYTHM)}
+    >
+      <BlogPageBackground headerObstacles={headerObstacles} pageRef={pageRef} rhythm={BLOG_RHYTHM} />
+      <PresentationHeader
+        description={content.description}
+        editionBasePath={editionBasePath}
+        editionDate={content.editionDate}
+        sections={content.sections}
+        title={content.title}
+      />
+      <div className="blog-sections">
+        {content.sections.map((section, sectionIndex) => (
+          <section className="blog-section" data-edition-section={section.key} id={getSectionAnchorId(section.key)} key={section.key}>
+            {sectionIndex === 0 && content.editionVideo ? (
+              <EditionOverviewVideo
+                editionVideo={content.editionVideo}
+                videoScript={content.videoScripts?.[EDITION_OVERVIEW_VIDEO_KEY] ?? null}
+              />
+            ) : null}
+            <header className="presentation-section-header">
+              <div className="presentation-section-header__band">
+                <p>{section.label}</p>
+              </div>
+              {section.description ? <span>{section.description}</span> : null}
+            </header>
+            {getEditionSectionItems(section, content.items).flatMap((item, index) => [
+              ...(index > 0
+                ? [
+                    <PresentationRhythmHRule
+                      hideInSecondaryPair={index === SECONDARY_PAIR_ITEM_INDEX}
+                      key={`hrule-before-${item.slug}`}
+                    />,
+                  ]
+                : []),
+              <RhythmPresentationItem
+                editionBasePath={editionBasePath}
+                index={index}
+                item={item}
+                key={item.slug}
+                videoScript={content.videoScripts?.[item.slug] ?? null}
+              />,
+            ])}
+          </section>
+        ))}
+      </div>
+      <PresentationFooter
+        editionBasePath={editionBasePath}
+        entries={footerEntries}
+        onSectionClick={handleBlogFooterSectionClick}
+        resolveSectionHref={(entry) => getBlogFooterSectionHref(entry, editionBasePath)}
+        subtitle={SITE_BRAND.footerSubtitleOverride ?? footerSubtitle}
+        title={SITE_BRAND.footerTitle}
+      />
+    </main>
+  );
+}
+
+function EditionOverviewVideo({
+  editionVideo,
+  videoScript,
+}: {
+  editionVideo: ArticleVideoAsset;
+  videoScript: VideoScriptRef | null;
+}) {
+  return (
+    <section className="presentation-edition-video" aria-label={editionVideo.alt}>
+      <ArticleVideoFigure
+        figureClassName="presentation-edition-video__figure article-video"
+        slug={EDITION_OVERVIEW_VIDEO_KEY}
+        video={editionVideo}
+        videoScript={videoScript}
+      />
+    </section>
+  );
+}
+
+function RhythmPresentationItem({
+  editionBasePath,
+  index,
+  item,
+  videoScript,
+}: {
+  editionBasePath?: string;
+  index: number;
+  item: PublicationItem;
+  videoScript: VideoScriptRef | null;
+}) {
+  const articleRef = useRef<HTMLElement | null>(null);
+  const frameRef = useRef<HTMLDivElement | null>(null);
+  const containerWidth = useMeasuredWidth(articleRef);
+  const frameWidth = useMeasuredWidth(frameRef);
+  const viewportWidth = useViewportWidth();
+  const fontsReadyVersion = useBrandFontsReadyVersion();
+  const textStyle = useMemo(() => ({ ...BLOG_TEXT_STYLE, fontsReadyVersion }), [fontsReadyVersion]);
+  const image = getPublicationItemImageAssets(item)[0];
+  const video = getPublicationItemVideoAsset(item);
+  const text = getPresentationBodyText(item, "blog");
+  const hasImage = Boolean(image);
+  const featuredLayout = useMemo(() => {
+    if (!hasImage || !containerWidth || !image) return null;
+    return solveFeaturedItem({
+      text,
+      containerWidth,
+      viewportWidth,
+      rhythm: BLOG_RHYTHM,
+      textStyle,
+      imageAsset: image,
+      itemIndex: index,
+    });
+  }, [containerWidth, hasImage, image, index, text, textStyle, viewportWidth]);
+  const lines = useMemo(() => {
+    if (featuredLayout) return featuredLayout.textLines;
+    const maxWidth = frameWidth || containerWidth;
+    if (!maxWidth || !text.trim()) return [];
+    return layoutAllTextLines({
+      prepared: prepareWithSegments(text, `${textStyle.fontSize}px ${textStyle.fontFamily}`, { whiteSpace: "pre-wrap" }),
+      maxWidth,
+      ...textStyle,
+    });
+  }, [containerWidth, featuredLayout, frameWidth, text, textStyle]);
+  const textHeight = featuredLayout?.textFrameHeight ?? reserveRhythmRows(getMeasuredTextHeight(lines), BLOG_RHYTHM);
+  const layoutMode = featuredLayout?.mode ?? "stacked";
+  const directHref = editionBasePath ? `${editionBasePath}/${encodeURIComponent(item.slug)}` : `/articles/${encodeURIComponent(item.slug)}`;
+
+  return (
+    <article
+      className="presentation-item presentation-item--blog"
+      data-feature-layout={hasImage ? layoutMode : undefined}
+      data-has-image={hasImage ? "true" : "false"}
+      data-has-video={video ? "true" : "false"}
+      data-item-id={item.slug}
+      data-item-index={index}
+      data-item-role={getPresentationItemRole("blog", index)}
+      data-item-type={item.type}
+      id={item.slug}
+      ref={articleRef}
+      style={featuredLayout ? getFeaturedLayoutStyle(featuredLayout) : undefined}
+    >
+      <div className="presentation-item__copy">
+        <header className="presentation-item__header">
+          <p>{item.section ?? "General"}</p>
+          <h2>
+            <Link href={directHref}>{getPresentationTitle(item)}</Link>
+          </h2>
+          {item.deck ? <span>{item.deck}</span> : null}
+        </header>
+        <div className="presentation-item__body">
+          {image ? (
+            <div className="presentation-item__media">
+              <PictogramFigure
+                alt={image.alt}
+                caption={image.caption}
+                credit={image.credit}
+                figureClassName="presentation-item__image"
+                frameHeight={featuredLayout?.imageHeight}
+                frameWidth={featuredLayout?.imageWidth}
+                height={760}
+                layout={image.layout}
+                sizes="(max-width: 900px) 100vw, 760px"
+                slug={item.slug}
+                src={image.src}
+                themeVariants={image.themeVariants}
+                width={1200}
+              />
+            </div>
+          ) : null}
+          <div
+            className="presentation-item__text-frame"
+            data-layout-mode={layoutMode}
+            ref={frameRef}
+            style={{ height: textHeight }}
+          >
+            <MeasuredPresentationLines lines={lines} />
+          </div>
+          <Link className="presentation-item__cta" href={directHref}>
+            Read Article
+          </Link>
+        </div>
+      </div>
+      {video ? (
+        <div className="presentation-item__video">
+          <ArticleVideoFigure
+            figureClassName="presentation-item__video-figure article-video"
+            slug={item.slug}
+            video={video}
+            videoScript={videoScript}
+          />
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+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;
+}

package/renderers/pretext/rhythm-shell-style.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties } from "react";
+import {
+  BLOG_COPY_ROW_MULTIPLE,
+  createDefaultBlogVerticalRhythm,
+  type VerticalRhythm,
+} from "../../lib/blog-rhythm";
+
+export const BLOG_RHYTHM: VerticalRhythm = createDefaultBlogVerticalRhythm();
+
+export function getRhythmShellStyle(rhythm: VerticalRhythm): CSSProperties {
+  return {
+    "--blog-rhythm": `${rhythm.rowHeight / BLOG_COPY_ROW_MULTIPLE}px`,
+    "--blog-row-height": `${rhythm.rowHeight}px`,
+    "--blog-paint-buffer": `${rhythm.paintBuffer}px`,
+    "--blog-paint-height": `${rhythm.paintHeight}px`,
+  } as CSSProperties;
+}
+
+export function getFeaturedLayoutStyle(layout: {
+  copyWidth: number;
+  imageWidth: number;
+  imageHeight: number;
+  gap: number;
+  mediaHeight?: number;
+  textFrameHeight?: number;
+}): CSSProperties {
+  return {
+    "--feature-copy-width": `${layout.copyWidth}px`,
+    "--feature-image-width": `${layout.imageWidth}px`,
+    "--feature-image-height": `${layout.imageHeight}px`,
+    "--feature-layout-gap": `${layout.gap}px`,
+    ...(layout.mediaHeight === undefined ? {} : { "--feature-media-height": `${layout.mediaHeight}px` }),
+    ...(layout.textFrameHeight === undefined ? {} : { "--feature-text-frame-height": `${layout.textFrameHeight}px` }),
+  } as CSSProperties;
+}

package/routes.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-next.9",
+  "version": "1.1.0",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",
@@ -13,38 +13,47 @@
     },
     {
       "file": "app/[year]/[month]/[day]/[articleSlug]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
-        "generateMetadata"
+        "generateMetadata",
+        "generateStaticParams"
       ],
       "config": {
-        "revalidate": "3600"
+        "revalidate": "60"
       }
     },
     {
       "file": "app/[year]/[month]/[day]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
         "generateStaticParams"
       ],
       "config": {
-        "revalidate": "3600"
+        "revalidate": "60"
       }
     },
     {
       "file": "app/[year]/[month]/[day]/page/[pageNumber]/page.tsx",
+      "reader": true,
       "hasDefault": true,
-      "exports": [],
+      "exports": [
+        "generateStaticParams"
+      ],
       "config": {
-        "revalidate": "3600"
+        "revalidate": "60"
       }
     },
     {
       "file": "app/[year]/[month]/[day]/section/[sectionKey]/page.tsx",
+      "reader": true,
       "hasDefault": true,
-      "exports": [],
+      "exports": [
+        "generateStaticParams"
+      ],
       "config": {
-        "revalidate": "3600"
+        "revalidate": "60"
       }
     },
     {
@@ -54,9 +63,72 @@
         "GET"
       ],
       "config": {
-        "revalidate": "3600"
+        "revalidate": "60"
+      }
+    },
+    {
+      "file": "app/api/auth/prospectus/callback/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "GET"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\"",
+        "runtime": "\"nodejs\""
+      }
+    },
+    {
+      "file": "app/api/auth/prospectus/selection/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "POST"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\"",
+        "runtime": "\"nodejs\""
+      }
+    },
+    {
+      "file": "app/api/auth/prospectus/session/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "GET"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\"",
+        "runtime": "\"nodejs\""
+      }
+    },
+    {
+      "file": "app/api/auth/prospectus/sign-in/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "GET"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\"",
+        "runtime": "\"nodejs\""
+      }
+    },
+    {
+      "file": "app/api/auth/prospectus/sign-out/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "POST"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\"",
+        "runtime": "\"nodejs\""
       }
     },
+    {
+      "file": "app/api/cyclotron/priming-proof/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "GET"
+      ],
+      "config": {}
+    },
     {
       "file": "app/api/media/[...path]/route.ts",
       "hasDefault": false,
@@ -79,23 +151,33 @@
     },
     {
       "file": "app/archive/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [],
       "config": {
-        "revalidate": "3600"
+        "revalidate": "60"
       }
     },
     {
       "file": "app/articles/[slug]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
         "generateMetadata",
         "generateStaticParams"
       ],
       "config": {
-        "revalidate": "3600"
+        "revalidate": "60"
       }
     },
+    {
+      "file": "app/cyclotron/page.tsx",
+      "hasDefault": true,
+      "exports": [
+        "metadata"
+      ],
+      "config": {}
+    },
     {
       "file": "app/layout.tsx",
       "hasDefault": true,
@@ -182,8 +264,35 @@
         "dynamic": "\"force-dynamic\""
       }
     },
+    {
+      "file": "app/newsroom/settings/page.tsx",
+      "hasDefault": true,
+      "exports": [
+        "metadata"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\""
+      }
+    },
+    {
+      "file": "app/newsroom/work/page.tsx",
+      "hasDefault": true,
+      "exports": [],
+      "config": {
+        "dynamic": "\"force-dynamic\""
+      }
+    },
     {
       "file": "app/page.tsx",
+      "reader": true,
+      "hasDefault": true,
+      "exports": [],
+      "config": {
+        "dynamic": "\"force-dynamic\""
+      }
+    },
+    {
+      "file": "app/robots.ts",
       "hasDefault": true,
       "exports": [],
       "config": {
@@ -192,6 +301,7 @@
     },
     {
       "file": "app/settings/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
         "metadata"
@@ -203,6 +313,7 @@
   ],
   "middleware": {
     "file": "middleware.ts",
-    "matcher": "[\"/((?!_next/static|_next/image|favicon.ico|icon).*)\"]"
+    "matcher": "[\"/((?!_next/static|_next/image|favicon.ico|icon).*)\"]",
+    "runtime": "nodejs"
   }
 }

package/src/sync.mjs

@@ -37,18 +37,42 @@ function shimFor(route) {
   return lines.join("\n") + "\n";
 }
 
-function middlewareShim(manifest) {
+export function middlewareShim(manifest) {
   const matcher = manifest.middleware.matcher ?? '["/((?!_next/static|_next/image|favicon.ico|icon).*)"]';
   return [
     MARKER,
     `export { middleware } from "${PKG}/middleware";`,
-    `export const config = { matcher: ${matcher} };`,
+    `export const config = { ${manifest.middleware.runtime ? `runtime: ${JSON.stringify(manifest.middleware.runtime)}, ` : ""}matcher: ${matcher} };`,
     "",
   ].join("\n");
 }
 
-export function sync({ root = process.cwd(), log = console.log } = {}) {
-  const manifest = JSON.parse(fs.readFileSync(path.join(pkgRoot, "routes.manifest.json"), "utf8"));
+const RESERVED_FIRST_SEGMENTS = new Set(["newsroom", "api", "_next", "_preview", "%5F_preview"]);
+
+export function normalizeReaderBasePath(value) {
+  const trimmed = (value ?? "").trim().replace(/\/+$/, "");
+  if (!trimmed) return "";
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+}
+
+export function readReaderBasePath(root) {
+  let text;
+  try {
+    text = fs.readFileSync(path.join(root, "papyrus.config.ts"), "utf8");
+  } catch {
+    return "";
+  }
+  const match = text.match(/\breaderBasePath\s*:\s*(["'`])([^"'`]*)\1/);
+  return normalizeReaderBasePath(match ? match[2] : "");
+}
+
+export function sync({ root = process.cwd(), log = console.log, manifest: manifestOverride, readerBasePath: readerBasePathOverride } = {}) {
+  const manifest = manifestOverride ?? JSON.parse(fs.readFileSync(path.join(pkgRoot, "routes.manifest.json"), "utf8"));
+  const readerBasePath = normalizeReaderBasePath(readerBasePathOverride ?? readReaderBasePath(root));
+  if (readerBasePath && RESERVED_FIRST_SEGMENTS.has(readerBasePath.split("/")[1])) {
+    throw new Error(`readerBasePath "${readerBasePath}" collides with a Papyrus-owned route (newsroom, api, _preview)`);
+  }
+  const readerRouteFile = (file) => (readerBasePath ? file.replace(/^app\//, `app${readerBasePath}/`) : file);
   const generated = [];
   const skipped = [];
   const write = (relPath, content) => {
@@ -61,7 +85,7 @@ export function sync({ root = process.cwd(), log = console.log } = {}) {
     fs.writeFileSync(dest, content);
     generated.push(relPath);
   };
-  for (const route of manifest.routes) write(route.file, shimFor(route));
+  for (const route of manifest.routes) write(route.reader ? readerRouteFile(route.file) : route.file, shimFor(route));
   write("middleware.ts", middlewareShim(manifest));
 
   // Remove shims that are no longer in the manifest (e.g. after an upgrade).
@@ -81,7 +105,7 @@ export function sync({ root = process.cwd(), log = console.log } = {}) {
   const re = new RegExp(`${GITIGNORE_BEGIN.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[\\s\\S]*?${GITIGNORE_END}`);
   fs.writeFileSync(giFile, re.test(gi) ? gi.replace(re, block) : `${gi}${gi.endsWith("\n") || !gi ? "" : "\n"}${block}\n`);
 
-  log(`papyrus-app sync: ${generated.length} shim(s) written, ${skipped.length} site-owned file(s) kept (${PKG}@${manifest.version})`);
+  log(`papyrus-app sync: ${generated.length} shim(s) written, ${skipped.length} site-owned file(s) kept (${PKG}@${manifest.version})${readerBasePath ? `, reader mounted at ${readerBasePath}` : ""}`);
   for (const rel of skipped) log(`  site-owned: ${rel}`);
   return { generated, skipped };
 }

package/src/with-papyrus.d.mts

@@ -1,2 +1,11 @@
 import type { NextConfig } from "next";
 export function withPapyrus(nextConfig?: NextConfig, options?: { root?: string }): NextConfig;
+export const READER_EXPIRE_TIME_SECONDS: number;
+export const DEFAULT_STATIC_GENERATION_WORKERS: number;
+export const DEFAULT_STATIC_GENERATION_CONCURRENCY: number;
+export const DEFAULT_STATIC_GENERATION_RETRY_COUNT: number;
+export function staticGenerationSettings(): {
+  cpus: number;
+  staticGenerationMaxConcurrency: number;
+  staticGenerationRetryCount: number;
+};