Article Template

1import * as React from 'react';
2 
3// @interlace/article-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/article-template
5// What changed since: https://ds.interlace.tools/c/article-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — ArticleTemplate
10 *
11 * Full-page surface for long-form articles. Composes the header
12 * (title + AuthorByline), the body (Prose-wrapped MDX/HTML),
13 * the related-posts grid, prev/next navigation, and share buttons —
14 * each in its own `<SectionBoundary>` so the page streams section-by-
15 * section instead of blocking on the slowest data source.
16 *
17 * This is the canonical example of the 5-layer architecture in action:
18 *
19 *   • PRIMITIVES — Container, Prose, Typography (the chrome)
20 *   • PATTERNS   — AuthorByline, RelatedPosts, PrevNextPost, ShareButtons
21 *   • TEMPLATE   — composes the patterns inside SectionBoundaries
22 *
23 * A consumer drops:
24 *
25 *   <ArticleTemplate
26 *     header={await getArticleHeader(slug)}        ← async RSC suspends
27 *     body={<MDXRenderer source={await getBody(slug)} />}
28 *     related={await getRelatedArticles(slug)}      ← async, independent
29 *     prevNext={await getPrevNext(slug)}            ← async, independent
30 *     shareUrl={absoluteUrl(slug)}
31 *   />
32 *
33 * Each async prop suspends INSIDE its own SectionBoundary, so the page
34 * paints incrementally — header first (small payload), then body, then
35 * related/prev-next (the slowest queries).
36 *
37 * ## Anatomy
38 *
39 *   <article data-slot="article-template" data-min-viewport="320">
40 *     <Container size="prose">
41 *       <SectionBoundary name="article-header">
42 *         <Typography variant="h1">{title}</Typography>
43 *         <AuthorByline {...byline} />
44 *       </SectionBoundary>
45 *       <SectionBoundary name="article-body">
46 *         <Prose>{body}</Prose>
47 *       </SectionBoundary>
48 *       <SectionBoundary name="article-share">
49 *         <ShareButtons {...share} />
50 *       </SectionBoundary>
51 *       <SectionBoundary name="article-prev-next">
52 *         <PrevNextPost prev={...} next={...} />
53 *       </SectionBoundary>
54 *       <SectionBoundary name="article-related">
55 *         <RelatedPosts posts={...} />
56 *       </SectionBoundary>
57 *     </Container>
58 *   </article>
59 *
60 * ## MIN_VIEWPORT — 320
61 *
62 * Every composed primitive/pattern declares 320 (Container.prose,
63// … truncated