@anthusai/papyrus 1.0.0-next.51 → 1.0.0-next.53

package/app/[year]/[month]/[day]/[articleSlug]/page.tsx

@@ -4,9 +4,14 @@ import { getCachedEditionItem, loadCachedEditionContent } from "../../../../../l
 import { getEditionDatePath, parseEditionArticleRoute } from "../../../../../lib/edition-routes";
 import { buildPresentationFooterEntries } from "../../../../../lib/presentation-footer";
 import { SITE_BRAND } from "../../../../../lib/site-brand";
+import { generateEditionItemStaticParams } from "../../../../../lib/reader-static-params";
 // Keep in sync with READER_REVALIDATE_SECONDS in lib/reader-route-config.ts
 export const revalidate = 60;
 
+export async function generateStaticParams() {
+  return generateEditionItemStaticParams();
+}
+
 type DateScopedArticlePageProps = {
   params: Promise<{
     year: string;

package/app/[year]/[month]/[day]/page/[pageNumber]/page.tsx

@@ -2,9 +2,14 @@ import { notFound, redirect } from "next/navigation";
 import { EditionRoutePage } from "../../edition-route-page";
 import { parseEditionPageRoute } from "../../../../../../lib/edition-routes";
 import { getDefaultPretextLayout, getForcedPresentation } from "../../../../../../lib/site-brand";
+import { generateEditionPageStaticParams } from "../../../../../../lib/reader-static-params";
 // Keep in sync with READER_REVALIDATE_SECONDS in lib/reader-route-config.ts
 export const revalidate = 60;
 
+export async function generateStaticParams() {
+  return generateEditionPageStaticParams();
+}
+
 type EditionPageRouteProps = {
   params: Promise<{
     year: string;

package/app/[year]/[month]/[day]/section/[sectionKey]/page.tsx

@@ -2,9 +2,14 @@ import { notFound, redirect } from "next/navigation";
 import { EditionRoutePage } from "../../edition-route-page";
 import { createSectionKey } from "../../../../../../lib/edition-sections";
 import { parseEditionSectionRoute } from "../../../../../../lib/edition-routes";
+import { generateEditionSectionStaticParams } from "../../../../../../lib/reader-static-params";
 // Keep in sync with READER_REVALIDATE_SECONDS in lib/reader-route-config.ts
 export const revalidate = 60;
 
+export async function generateStaticParams() {
+  return generateEditionSectionStaticParams();
+}
+
 type EditionSectionRouteProps = {
   params: Promise<{
     year: string;

package/app/api/revalidate/route.ts

@@ -10,6 +10,7 @@ import {
   editionItemCacheTag,
 } from "../../../lib/cached-content-repository";
 import { isAuthorizedRevalidateRequest } from "../../../lib/revalidate-secret";
+import { prewarmPaths, resolvePrewarmOrigin } from "../../../lib/revalidate-prewarm";
 import { getEditionArticlePath, getEditionDatePath } from "../../../lib/edition-routes";
 
 export const dynamic = "force-dynamic";
@@ -20,6 +21,7 @@ type RevalidateRequestBody = {
   itemSlugs?: string[];
   paths?: string[];
   tags?: string[];
+  prewarm?: boolean;
 };
 
 export async function POST(request: Request) {
@@ -87,9 +89,14 @@ export async function POST(request: Request) {
     revalidatedPaths.add(normalized);
   }
 
+  const prewarmed = body.prewarm === false
+    ? []
+    : await prewarmPaths(resolvePrewarmOrigin(request.url), [...revalidatedPaths]);
+
   return NextResponse.json({
     ok: true,
     revalidatedTags: [...revalidatedTags],
     revalidatedPaths: [...revalidatedPaths],
+    prewarmed,
   });
 }

package/app/page.tsx

@@ -2,6 +2,7 @@ import { getSiteRenderer } from "../lib/site-renderer";
 import { contentRepository, getScenarioIdParam } from "../lib/content-repository";
 import type { EditionContent } from "../lib/content-types";
 import { createEditionSectionPlan } from "../lib/edition-sections";
+import { getCachedLatestPublishedEdition, loadCachedEditionContent } from "../lib/cached-content-repository";
 import { getEditionDatePath } from "../lib/edition-routes";
 import {
   EMPTY_EDITION_PLACEHOLDER_SLUG,
@@ -77,7 +78,7 @@ export default async function Home({ searchParams }: HomePageProps) {
       );
     }
 
-    const latestEdition = await contentRepository.getLatestPublishedEdition();
+    const latestEdition = await getCachedLatestPublishedEdition();
     if (latestEdition) redirect(getEditionDatePath(latestEdition.editionDate));
     return <siteRenderer.renderEdition content={createEmptyGraphQLEdition()} />;
   }
@@ -88,9 +89,9 @@ export default async function Home({ searchParams }: HomePageProps) {
 }
 
 async function loadLatestGraphQLEdition(): Promise<EditionContent | null> {
-  const latestEdition = await contentRepository.getLatestPublishedEdition();
+  const latestEdition = await getCachedLatestPublishedEdition();
   if (!latestEdition) return null;
-  return contentRepository.loadEditionContent({ editionDate: latestEdition.editionDate });
+  return loadCachedEditionContent({ editionDate: latestEdition.editionDate });
 }
 
 async function loadFirstPublishedEditionPath(): Promise<string | undefined> {

package/components/article-video.tsx

@@ -7,6 +7,8 @@ import { resolveThemedVideoSrc } from "../lib/themed-image";
 import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
 import { getSiteBrand } from "../lib/site-brand";
 import { normalizeDevPreviewDsl, type VideoScriptRef } from "../lib/video-script";
+import { useNearViewport } from "./use-near-viewport";
+import { planVideoLoading, videoElementKey } from "../lib/video-loading";
 import { resolveVideoMode, resolveVideoModeFromEnv, type VideoMode } from "../lib/video-mode";
 
 type ArticleVideoFigureProps = {
@@ -18,6 +20,7 @@ type ArticleVideoFigureProps = {
 };
 
 const PREVIEW_STORAGE_PREFIX = "papyrus-video-preview:";
+const VIDEO_LOAD_ROOT_MARGIN = "200px 0px";
 
 export function ArticleVideoFigure({
   video,
@@ -34,6 +37,8 @@ export function ArticleVideoFigure({
   const [previewReady, setPreviewReady] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
+  const figureRef = useRef<HTMLElement>(null);
+  const isNearViewport = useNearViewport(figureRef, VIDEO_LOAD_ROOT_MARGIN);
   const isFramed = getSiteBrand().videoPlayer === "framed";
 
   useEffect(() => {
@@ -44,6 +49,12 @@ export function ArticleVideoFigure({
   // Match SSR to the default dark MP4 in `video.src` until after hydration.
   const resolvedTheme = hasHydrated ? theme : "dark";
   const src = resolveThemedVideoSrc(video.src, video.themeVariants, resolvedTheme);
+  const loadingPlan = planVideoLoading({
+    hasHydrated,
+    isNearViewport,
+    hasPoster: Boolean(video.posterSrc),
+  });
+  const videoKey = videoElementKey(loadingPlan.attachSource, src);
   const usePreview = videoMode === "preview" && Boolean(videoScript?.dsl);
   const previewDsl = videoScript?.dsl
     ? normalizeDevPreviewDsl(videoScript.dsl, getSiteBrand().video?.sceneComponents)
@@ -191,6 +202,7 @@ export function ArticleVideoFigure({
   if (isFramed) {
     return (
       <figure
+        ref={figureRef}
         className={`${figureClassName} article-video--framed`}
         data-media-type="video"
         data-video-theme={resolvedTheme}
@@ -200,11 +212,11 @@ export function ArticleVideoFigure({
           <video
             ref={videoRef}
             playsInline
-            preload="metadata"
+            preload={loadingPlan.preload}
             poster={video.posterSrc}
             aria-label={video.alt}
             className="article-video__player"
-            key={hasHydrated ? src : "ssr"}
+            key={videoKey}
             onPlay={() => setIsPlaying(true)}
             onPause={() => setIsPlaying(false)}
             onEnded={() => setIsPlaying(false)}
@@ -214,7 +226,7 @@ export function ArticleVideoFigure({
               if (Number.isFinite(nextDuration) && nextDuration > 0) setDuration(nextDuration);
             }}
           >
-            <source src={src} type="video/mp4" />
+            {loadingPlan.attachSource ? <source src={src} type="video/mp4" /> : null}
           </video>
         </div>
         {framedControls}
@@ -226,17 +238,17 @@ export function ArticleVideoFigure({
   }
 
   return (
-    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
+    <figure ref={figureRef} className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
       <video
         controls
         playsInline
-        preload="metadata"
+        preload={loadingPlan.preload}
         poster={video.posterSrc}
         aria-label={video.alt}
         className="article-video__player"
-        key={hasHydrated ? src : "ssr"}
+        key={videoKey}
       >
-        <source src={src} type="video/mp4" />
+        {loadingPlan.attachSource ? <source src={src} type="video/mp4" /> : null}
       </video>
       {video.caption ? <figcaption>{video.caption}</figcaption> : null}
       {video.credit ? <p className="article-video__credit">{video.credit}</p> : null}

package/components/use-near-viewport.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from "react";
+
+export function useNearViewport(targetRef: RefObject<Element | null>, rootMargin: string): boolean {
+  const [isNearViewport, setIsNearViewport] = useState(false);
+
+  useEffect(() => {
+    if (isNearViewport) return;
+    const target = targetRef.current;
+    if (!target) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsNearViewport(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setIsNearViewport(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin },
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [isNearViewport, rootMargin, targetRef]);
+
+  return isNearViewport;
+}

package/lib/reader-static-params.ts

@@ -1,3 +1,4 @@
+import type { ContentRepository, EditionContent } from "./content-types";
 import { graphqlContentRepository } from "./graphql-content-repository";
 import { SITE_BRAND } from "./site-brand";
 import { getContentSource } from "./site-env";
@@ -32,11 +33,23 @@ type EditionDateStaticParam = {
   day: string;
 };
 
-export async function generateEditionDateStaticParams(): Promise<EditionDateStaticParam[]> {
-  if (process.env.NODE_ENV === "development") return [];
-  if (!siteEnumeratesReaderRoutesAtBuild()) return [];
+const PUBLISHED_EDITION_ENUMERATION_LIMIT = 100;
+const DEEP_ROUTE_EDITION_LIMIT = 10;
+const RESERVED_DATE_CHILD_SEGMENTS = new Set(["page", "section"]);
+
+type EnumerationRepository = Pick<ContentRepository, "listPublishedEditions" | "loadEditionContent">;
+
+function shouldEnumerateAtBuild(): boolean {
+  if (process.env.NODE_ENV === "development") return false;
+  return siteEnumeratesReaderRoutesAtBuild();
+}
+
+export async function generateEditionDateStaticParams(
+  repository: EnumerationRepository = graphqlContentRepository,
+): Promise<EditionDateStaticParam[]> {
+  if (!shouldEnumerateAtBuild()) return [];
 
-  const { editions } = await graphqlContentRepository.listPublishedEditions({ limit: 100 });
+  const { editions } = await repository.listPublishedEditions({ limit: PUBLISHED_EDITION_ENUMERATION_LIMIT });
   const params: EditionDateStaticParam[] = [];
   for (const edition of editions) {
     const route = editionDateToStaticParam(edition.editionDate);
@@ -45,6 +58,61 @@ export async function generateEditionDateStaticParams(): Promise<EditionDateStat
   return params;
 }
 
+async function loadRecentEditionContents(repository: EnumerationRepository): Promise<EditionContent[]> {
+  const { editions } = await repository.listPublishedEditions({ limit: PUBLISHED_EDITION_ENUMERATION_LIMIT });
+  const recent = [...editions]
+    .sort((left, right) => right.editionDate.localeCompare(left.editionDate))
+    .slice(0, DEEP_ROUTE_EDITION_LIMIT);
+  return Promise.all(recent.map((edition) => repository.loadEditionContent({ editionDate: edition.editionDate })));
+}
+
+export async function generateEditionItemStaticParams(
+  repository: EnumerationRepository = graphqlContentRepository,
+): Promise<Array<EditionDateStaticParam & { articleSlug: string }>> {
+  if (!shouldEnumerateAtBuild()) return [];
+
+  const params: Array<EditionDateStaticParam & { articleSlug: string }> = [];
+  for (const content of await loadRecentEditionContents(repository)) {
+    const date = editionDateToStaticParam(content.editionDate);
+    if (!date) continue;
+    for (const item of content.items) {
+      if (RESERVED_DATE_CHILD_SEGMENTS.has(item.slug.toLowerCase())) continue;
+      params.push({ ...date, articleSlug: item.slug });
+    }
+  }
+  return params;
+}
+
+export async function generateEditionPageStaticParams(
+  repository: EnumerationRepository = graphqlContentRepository,
+): Promise<Array<EditionDateStaticParam & { pageNumber: string }>> {
+  if (!shouldEnumerateAtBuild()) return [];
+
+  const params: Array<EditionDateStaticParam & { pageNumber: string }> = [];
+  for (const content of await loadRecentEditionContents(repository)) {
+    const date = editionDateToStaticParam(content.editionDate);
+    if (!date) continue;
+    for (let pageNumber = 2; pageNumber <= content.layoutPlan.pages.length; pageNumber += 1) {
+      params.push({ ...date, pageNumber: String(pageNumber) });
+    }
+  }
+  return params;
+}
+
+export async function generateEditionSectionStaticParams(
+  repository: EnumerationRepository = graphqlContentRepository,
+): Promise<Array<EditionDateStaticParam & { sectionKey: string }>> {
+  if (!shouldEnumerateAtBuild()) return [];
+
+  const params: Array<EditionDateStaticParam & { sectionKey: string }> = [];
+  for (const content of await loadRecentEditionContents(repository)) {
+    const date = editionDateToStaticParam(content.editionDate);
+    if (!date) continue;
+    for (const section of content.sections) params.push({ ...date, sectionKey: section.key });
+  }
+  return params;
+}
+
 export async function generateArticleStaticParams(): Promise<Array<{ slug: string }>> {
   if (process.env.NODE_ENV === "development") return [];
   if (!siteEnumeratesReaderRoutesAtBuild()) return [];
@@ -64,6 +132,6 @@ function editionDateToStaticParam(editionDate: string): EditionDateStaticParam |
   return {
     year: match[1],
     month: monthName,
-    day: String(Number(match[3])),
+    day: match[3],
   };
 }

package/lib/revalidate-prewarm.ts

@@ -0,0 +1,53 @@
+export const PREWARM_ORIGIN_ENV = "PAPYRUS_PREWARM_ORIGIN";
+export const PREWARM_CONCURRENCY = 4;
+export const PREWARM_MAX_PATHS = 40;
+export const PREWARM_TIMEOUT_MILLISECONDS = 25_000;
+export const PREWARM_REQUEST_HEADER = "x-papyrus-prewarm";
+
+export type PrewarmFetch = (url: string, init: { headers: Record<string, string>; signal: AbortSignal; redirect: "manual" }) => Promise<{ status: number }>;
+
+export type PrewarmResult = {
+  path: string;
+  status: number | null;
+  milliseconds: number;
+};
+
+export function resolvePrewarmOrigin(requestUrl: string, environment: Record<string, string | undefined> = process.env): string {
+  const configured = environment[PREWARM_ORIGIN_ENV]?.trim();
+  if (configured) return configured.replace(/\/+$/, "");
+  return new URL(requestUrl).origin;
+}
+
+export async function prewarmPaths(
+  origin: string,
+  paths: string[],
+  options: { fetchPage?: PrewarmFetch; now?: () => number } = {},
+): Promise<PrewarmResult[]> {
+  const fetchPage = options.fetchPage ?? (fetch as unknown as PrewarmFetch);
+  const now = options.now ?? Date.now;
+  const queue = [...new Set(paths)].filter((path) => path.startsWith("/")).slice(0, PREWARM_MAX_PATHS);
+  const results: PrewarmResult[] = [];
+
+  async function worker(): Promise<void> {
+    for (let path = queue.shift(); path !== undefined; path = queue.shift()) {
+      const startedAt = now();
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), PREWARM_TIMEOUT_MILLISECONDS);
+      try {
+        const response = await fetchPage(`${origin}${path}`, {
+          headers: { [PREWARM_REQUEST_HEADER]: "1" },
+          signal: controller.signal,
+          redirect: "manual",
+        });
+        results.push({ path, status: response.status, milliseconds: now() - startedAt });
+      } catch {
+        results.push({ path, status: null, milliseconds: now() - startedAt });
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+  }
+
+  await Promise.all(Array.from({ length: Math.min(PREWARM_CONCURRENCY, queue.length) }, worker));
+  return results;
+}

package/lib/video-loading.ts

@@ -0,0 +1,22 @@
+export type VideoPreload = "none" | "metadata";
+
+export type VideoLoadingPlan = {
+  attachSource: boolean;
+  preload: VideoPreload;
+};
+
+export type VideoLoadingInput = {
+  hasHydrated: boolean;
+  isNearViewport: boolean;
+  hasPoster: boolean;
+};
+
+export function planVideoLoading({ hasHydrated, isNearViewport, hasPoster }: VideoLoadingInput): VideoLoadingPlan {
+  const attachSource = hasHydrated && isNearViewport;
+  const preload: VideoPreload = attachSource && !hasPoster ? "metadata" : "none";
+  return { attachSource, preload };
+}
+
+export function videoElementKey(attachSource: boolean, resolvedSource: string): string {
+  return attachSource ? resolvedSource : "unattached";
+}

package/package.json

@@ -127,6 +127,7 @@
     "./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-near-viewport": "./components/use-near-viewport.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",
@@ -209,6 +210,7 @@
     "./lib/renderer-config": "./lib/renderer-config.ts",
     "./lib/renderer": "./lib/renderer.ts",
     "./lib/reporting-story-budget": "./lib/reporting-story-budget.ts",
+    "./lib/revalidate-prewarm": "./lib/revalidate-prewarm.ts",
     "./lib/revalidate-secret": "./lib/revalidate-secret.ts",
     "./lib/robots-policy": "./lib/robots-policy.ts",
     "./lib/root-route-redirect": "./lib/root-route-redirect.ts",
@@ -224,6 +226,7 @@
     "./lib/staging-preview-object": "./lib/staging-preview-object.ts",
     "./lib/themed-image": "./lib/themed-image.ts",
     "./lib/utils": "./lib/utils.ts",
+    "./lib/video-loading": "./lib/video-loading.ts",
     "./lib/video-mode": "./lib/video-mode.ts",
     "./lib/video-script": "./lib/video-script.ts",
     "./renderers/markus/index": "./renderers/markus/index.ts",
@@ -306,7 +309,7 @@
       "optional": true
     }
   },
-  "version": "1.0.0-next.51",
+  "version": "1.0.0-next.53",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-sdk/client-cognito-identity-provider": "3.1045.0",

package/routes.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-next.51",
+  "version": "1.0.0-next.53",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",
@@ -16,7 +16,8 @@
       "reader": true,
       "hasDefault": true,
       "exports": [
-        "generateMetadata"
+        "generateMetadata",
+        "generateStaticParams"
       ],
       "config": {
         "revalidate": "60"
@@ -37,7 +38,9 @@
       "file": "app/[year]/[month]/[day]/page/[pageNumber]/page.tsx",
       "reader": true,
       "hasDefault": true,
-      "exports": [],
+      "exports": [
+        "generateStaticParams"
+      ],
       "config": {
         "revalidate": "60"
       }
@@ -46,7 +49,9 @@
       "file": "app/[year]/[month]/[day]/section/[sectionKey]/page.tsx",
       "reader": true,
       "hasDefault": true,
-      "exports": [],
+      "exports": [
+        "generateStaticParams"
+      ],
       "config": {
         "revalidate": "60"
       }