Blog Home Template

1import * as React from 'react';
2 
3// @interlace/blog-home-template v1.2.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/blog-home-template
5// What changed since: https://ds.interlace.tools/c/blog-home-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — BlogHomeTemplate
10 *
11 * Blog index surface. Topbar + hero (greeting / about) + ArticleListGrid
12 * (featured + recent) + optional NewsletterForm + Footer. The shape every
13 * personal / company blog reaches for.
14 *
15 * ## MIN_VIEWPORT — 320
16 */
17 
18import { cn } from '@/lib/utils';
19import { SectionBoundary } from '@/components/ui/section-boundary';
20import { Topbar } from '@/components/ui/patterns/topbar';
21import { Footer } from '@/components/ui/patterns/footer';
22import { Skeleton } from '@/components/ui/skeleton';
23import { Stack } from '@/components/ui/stack';
24import { Container } from '@/components/ui/container';
25 
26export const MIN_VIEWPORT = 320 as const;
27 
28interface BlogHomeTemplateProps extends React.ComponentProps<'div'> {
29  topbar: React.ComponentProps<typeof Topbar>;
30  /** Page header / hero. */
31  hero?: React.ReactNode;
32  /** Article list grid (typically <ArticleListGrid /> with featured + posts). */
33  articles: React.ReactNode;
34  /** Optional newsletter signup. */
35  newsletter?: React.ReactNode;
36  footer: React.ComponentProps<typeof Footer>;
37}
38 
39function BlogHomeTemplate({
40  topbar,
41  hero,
42  articles,
43  newsletter,
44  footer,
45  className,
46  ...props
47}: BlogHomeTemplateProps) {
48  return (
49    <div
50      data-slot="blog-home-template"
51      data-min-viewport={String(MIN_VIEWPORT)}
52      className={cn('bg-background text-foreground', className)}
53      {...props}
54    >
55      <Topbar {...topbar} />
56 
57      {/* <main> is the skip-link's destination and the only landmark wrapping
58          the page body. Topbar emits <header>, Footer emits <footer>, and
59          SectionBoundary renders `display: contents` — so without this the
60          articles list belonged to no landmark at all. */}
61      <main id="main">
62        {hero ? (
63          <SectionBoundary name="blog-hero" skeletonVariant="page-header">
64            {hero}
65          </SectionBoundary>
66        ) : null}
67 
68        <SectionBoundary name="blog-articles" skeletonVariant="article-card">
69          {articles}
70        </SectionBoundary>
71 
72        {newsletter ? (
73          <SectionBoundary
74            name="blog-newsletter"
75// … truncated