@highjumpdigitalsoftware/blog-kit 0.6.0

package/react/ScoreBar.tsx

@@ -0,0 +1,27 @@
+/* blog-kit React adapter — ScoreBar
+   Thin wrapper: all styling lives in core/css/components.css (.bk-score-bar).
+   A single labelled rating row — uppercase label, a numeric score, and a
+   gradient-filled progress track whose width reflects score / maxScore. */
+
+export interface ScoreBarProps {
+  label: string;
+  score: number;
+  /** Denominator the score is out of (default 10). */
+  maxScore?: number;
+}
+
+export function ScoreBar({ label, score, maxScore = 10 }: ScoreBarProps) {
+  const percentage = Math.max(0, Math.min(100, (score / maxScore) * 100));
+
+  return (
+    <div className="bk-score-bar">
+      <div className="bk-score-bar__head">
+        <span className="bk-score-bar__label">{label}</span>
+        <span className="bk-score-bar__score">{score}</span>
+      </div>
+      <div className="bk-score-bar__track">
+        <div className="bk-score-bar__fill" style={{ width: `${percentage}%` }} />
+      </div>
+    </div>
+  );
+}

package/react/SerpPreview.tsx

@@ -0,0 +1,59 @@
+/* blog-kit React adapter — SerpPreview
+   Thin wrapper: all styling lives in core/css/components.css (.bk-serp-preview).
+   A mock search-engine results page: a rounded search bar showing the query,
+   followed by a stack of result rows (URL breadcrumb, blue heading, snippet),
+   with an optional "Sponsored" tag for ad results. Ported from hjd's b-serp
+   (cyan/dark mapped to neutral --blog-* tokens; the Google-blue link colour
+   maps to --blog-info). */
+import { ICONS } from "../core/icons";
+
+export interface SerpResult {
+  /** Result title (the blue clickable heading). Plain text. */
+  title: string;
+  /** URL breadcrumb line. HTML allowed — wrap the domain in <strong>. */
+  url: string;
+  /** Snippet/description. HTML allowed — <em> bolds the matched terms. */
+  description: string;
+  /** When true, the row is flagged with a "Sponsored" tag. */
+  ad?: boolean;
+}
+
+export interface SerpPreviewProps {
+  /** The text shown in the search bar. */
+  query: string;
+  /** The list of result rows. */
+  results?: SerpResult[];
+}
+
+export function SerpPreview({ query, results = [] }: SerpPreviewProps) {
+  return (
+    <div className="bk-serp-preview">
+      <div className="bk-serp-preview__bar">
+        <span
+          className="bk-serp-preview__bar-icon"
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: ICONS["search"] }}
+        />
+        <input className="bk-serp-preview__input" defaultValue={query} readOnly />
+      </div>
+      <div className="bk-serp-preview__results">
+        {results.map((r, i) => (
+          <div key={i} className="bk-serp-preview__result">
+            {r.ad && (
+              <span className="bk-serp-preview__tag bk-serp-preview__tag--ad">Sponsored</span>
+            )}
+            <span
+              className="bk-serp-preview__url"
+              dangerouslySetInnerHTML={{ __html: r.url }}
+            />
+            <h4 className="bk-serp-preview__heading">{r.title}</h4>
+            <p
+              className="bk-serp-preview__desc"
+              dangerouslySetInnerHTML={{ __html: r.description }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/react/ServicePromoCard.tsx

@@ -0,0 +1,43 @@
+/* blog-kit React adapter — ServicePromoCard
+   Thin wrapper: all styling lives in core/css/components.css (.bk-service-promo-card).
+   A linked promo row: an icon tile, a title + optional sub-line, and a
+   brand-coloured uppercase arrow label. The whole card is a single link.
+   Ported from hjd ServicePromoCard (.b-svc). Cyan accents → --blog-brand
+   and the brand tint/soft tokens; greys → ink/mute tokens. */
+import { ICONS } from "../core/icons";
+
+export interface ServicePromoCardProps {
+  /** Title line, rendered bold uppercase. */
+  title: string;
+  /** Optional sub-line below the title. */
+  sub?: string;
+  /** Link target for the whole card. */
+  href?: string;
+  /** Optional raw SVG string for the icon tile; defaults to a search glyph. */
+  icon?: string;
+  /** Brand-coloured arrow label on the right. */
+  arrowLabel?: string;
+}
+
+export function ServicePromoCard({
+  title,
+  sub,
+  href = "#",
+  icon,
+  arrowLabel = "Learn more →",
+}: ServicePromoCardProps) {
+  return (
+    <a className="bk-service-promo-card" href={href}>
+      <span
+        className="bk-service-promo-card__icon"
+        aria-hidden="true"
+        dangerouslySetInnerHTML={{ __html: icon || ICONS["search"] }}
+      />
+      <span className="bk-service-promo-card__body">
+        <span className="bk-service-promo-card__title">{title}</span>
+        {sub && <span className="bk-service-promo-card__sub">{sub}</span>}
+      </span>
+      <span className="bk-service-promo-card__arrow">{arrowLabel}</span>
+    </a>
+  );
+}

package/react/StatCard.tsx

@@ -0,0 +1,62 @@
+/* blog-kit React adapter — StatCard
+   Thin wrapper: all styling lives in core/css/components.css (.bk-stat-card).
+   A single highlighted metric — big brand-coloured number (+ optional unit),
+   an uppercase label, optional description, and an optional dashed-divider
+   "SOURCE" attribution row (links out when sourceUrl is set). */
+import { ICONS } from "../core/icons";
+
+export interface StatCardProps {
+  value: string;
+  label: string;
+  description?: string;
+  /** Optional unit rendered slightly smaller after the value, e.g. "×" or "s". */
+  unit?: string;
+  /** Optional source attribution, shown below in a dashed-divider row. */
+  source?: string;
+  /** Optional URL — when set alongside `source`, the row becomes a link. */
+  sourceUrl?: string;
+}
+
+/** Split a raw value like "3.2×" into its numeric head and trailing unit. */
+function splitValue(raw: string): { num: string; unit: string } {
+  const m = raw.match(/^([\d.,\-+]+)(.*)$/);
+  if (!m) return { num: raw, unit: "" };
+  return { num: m[1], unit: m[2].trim() };
+}
+
+export function StatCard({ value, label, description, unit, source, sourceUrl }: StatCardProps) {
+  const parts = unit !== undefined ? { num: value, unit } : splitValue(value);
+
+  return (
+    <div className="bk-stat-card">
+      <div className="bk-stat-card__value">
+        <span className="bk-stat-card__num">{parts.num}</span>
+        {parts.unit && <span className="bk-stat-card__unit">{parts.unit}</span>}
+      </div>
+      <div className="bk-stat-card__label">{label}</div>
+      {description && <div className="bk-stat-card__desc">{description}</div>}
+      {source &&
+        (sourceUrl ? (
+          <a
+            className="bk-stat-card__source bk-stat-card__source--link"
+            href={sourceUrl}
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            <span className="bk-stat-card__source-kicker">Source</span>
+            {source}
+            <span
+              className="bk-stat-card__source-icon"
+              aria-hidden="true"
+              dangerouslySetInnerHTML={{ __html: ICONS["external"] }}
+            />
+          </a>
+        ) : (
+          <div className="bk-stat-card__source">
+            <span className="bk-stat-card__source-kicker">Source</span>
+            {source}
+          </div>
+        ))}
+    </div>
+  );
+}

package/react/StepBlock.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export interface StepBlockProps { stepNumber?: number | string; title?: string; children?: ReactNode; }
+export function StepBlock({ stepNumber, title, children }: StepBlockProps) {
+  return (<div className="bk-step"><div className="bk-step__num">{stepNumber}</div><div className="bk-step__main">{title ? <h3 className="bk-step__title">{title}</h3> : null}<div className="bk-step__body">{children}</div></div></div>);
+}

package/react/TableOfContents.tsx

@@ -0,0 +1,27 @@
+export interface TableOfContentsProps {
+  /** Heading rendered above the list. Defaults to "In this article". */
+  heading?: string;
+  /** CSS selector for the element whose <h2>s become entries. Defaults to "article". */
+  scope?: string;
+}
+
+/**
+ * Sticky-friendly "in this article" navigation. The list is built at runtime
+ * by the toc behaviour, which scans the article for <h2> headings, numbers
+ * them, smooth-scrolls on click, and runs a scrollspy that flags the heading
+ * in view. The container hides itself when the article has no <h2>s.
+ */
+export function TableOfContents({ heading, scope }: TableOfContentsProps) {
+  const label = heading ?? "In this article";
+  return (
+    <nav
+      className="bk-toc"
+      data-bk-toc
+      data-bk-toc-scope={scope ?? "article"}
+      aria-label={label}
+    >
+      <p className="bk-toc__heading">{label}</p>
+      <ul className="bk-toc__list" />
+    </nav>
+  );
+}

package/react/TimelineBlock.tsx

@@ -0,0 +1,35 @@
+/* blog-kit React adapter — TimelineBlock
+   Thin wrapper: all styling lives in core/css/components.css (.bk-timeline).
+   Emits the SAME markup/classes as the Astro adapter. */
+import type { ReactNode } from "react";
+
+export interface TimelineEvent {
+  date: string;
+  title: string;
+  description: string;
+}
+
+export interface TimelineBlockProps {
+  /** Chronological events, oldest → newest. */
+  events?: TimelineEvent[];
+  children?: ReactNode;
+}
+
+/** Vertical timeline / recap — dated milestones connected by a rail. */
+export function TimelineBlock({ events = [], children }: TimelineBlockProps) {
+  if (!events.length) return children ? <div className="bk-timeline">{children}</div> : null;
+
+  return (
+    <div className="bk-timeline">
+      <span className="bk-timeline__rail" aria-hidden="true" />
+      {events.map((event, i) => (
+        <div className="bk-timeline__item" key={i}>
+          <span className="bk-timeline__dot" aria-hidden="true" />
+          <div className="bk-timeline__date">{event.date}</div>
+          <h4 className="bk-timeline__title">{event.title}</h4>
+          <p className="bk-timeline__desc">{event.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

package/react/TipBox.tsx

@@ -0,0 +1,16 @@
+export interface TipBoxProps {
+  tip: string;
+  context?: string;
+}
+
+export function TipBox({ tip, context }: TipBoxProps) {
+  return (
+    <div className="bk-tip">
+      <span className="bk-tip__badge">Pro tip</span>
+      <p className="bk-tip__body">
+        <strong className="bk-tip__lead">{tip}</strong>
+        {context ? <span className="bk-tip__context"> {context}</span> : null}
+      </p>
+    </div>
+  );
+}

package/react/TrafficChart.tsx

@@ -0,0 +1,79 @@
+/* blog-kit React adapter — TrafficChart
+   Thin wrapper: all styling lives in core/css/components.css (.bk-traffic-chart).
+   A compact SVG line chart for a metric over time — an uppercase title + a
+   two-item legend (this period / previous period), then an inline <svg> with
+   two axis lines, a solid brand line for the current series (with point
+   markers), a dashed neutral line for the previous series, and mono-font
+   x-axis labels. Colours come entirely from .bk-traffic-chart CSS classes
+   (no literal colours in markup); only geometry is computed inline.
+   Ported from hjd-website's blog TrafficChart (cyan #10C8F0 → --blog-brand,
+   greys → the mute/border tokens). */
+
+export interface TrafficChartSeries {
+  /** Current-period values; rendered as the solid brand line + markers. */
+  current?: number[];
+  /** Previous-period values; rendered as the dashed neutral line. */
+  previous?: number[];
+}
+
+export interface TrafficChartProps {
+  /** Uppercase heading (defaults to "Organic sessions · 6 months"). */
+  title?: string;
+  /** The two comparable series. */
+  series?: TrafficChartSeries;
+  /** X-axis tick labels, one per data point. */
+  labels?: string[];
+}
+
+const W = 600;
+const H = 220;
+const PAD = 40;
+
+export function TrafficChart({
+  title = "Organic sessions · 6 months",
+  series = {},
+  labels = [],
+}: TrafficChartProps) {
+  const current = series.current || [];
+  const previous = series.previous || [];
+  const max = Math.max(...current, ...previous, 1);
+  const xs = (i: number, len: number) =>
+    PAD + 20 + ((W - PAD - 30) * i) / Math.max(len - 1, 1);
+  const ys = (v: number) => H - 30 - ((H - 50) * v) / max;
+  const points = (arr: number[]) =>
+    arr.map((v, i) => `${xs(i, arr.length)},${ys(v)}`).join(" ");
+
+  return (
+    <div className="bk-traffic-chart">
+      <div className="bk-traffic-chart__head">
+        <div className="bk-traffic-chart__title">{title}</div>
+        <div className="bk-traffic-chart__legend">
+          <span className="bk-traffic-chart__item">
+            <span className="bk-traffic-chart__dot" />This period
+          </span>
+          <span className="bk-traffic-chart__item">
+            <span className="bk-traffic-chart__dot bk-traffic-chart__dot--prev" />Previous period
+          </span>
+        </div>
+      </div>
+      <svg className="bk-traffic-chart__svg" viewBox={`0 0 ${W} ${H}`} role="img">
+        <line className="bk-traffic-chart__axis" x1={PAD} y1={20} x2={PAD} y2={H - 30} />
+        <line className="bk-traffic-chart__axis" x1={PAD} y1={H - 30} x2={W - 10} y2={H - 30} />
+        {previous.length > 0 && (
+          <polyline className="bk-traffic-chart__line bk-traffic-chart__line--prev" points={points(previous)} />
+        )}
+        {current.length > 0 && (
+          <polyline className="bk-traffic-chart__line" points={points(current)} />
+        )}
+        {current.map((v, i) => (
+          <circle key={i} className="bk-traffic-chart__pt" cx={xs(i, current.length)} cy={ys(v)} r={4} />
+        ))}
+        <g className="bk-traffic-chart__labels">
+          {labels.map((l, i) => (
+            <text key={i} x={xs(i, labels.length) - 10} y={H - 10}>{l}</text>
+          ))}
+        </g>
+      </svg>
+    </div>
+  );
+}

package/react/VerdictCard.tsx

@@ -0,0 +1,60 @@
+/* blog-kit React adapter — VerdictCard
+   Thin wrapper: all styling lives in core/css/components.css (.bk-verdict-card).
+   A dark, brand-bordered "verdict" panel: an uppercase kicker + optional /10
+   score in the header, then an optional winner pill, a big verdict headline,
+   a summary line, and optional bullet chips. */
+import type { ReactNode } from "react";
+
+export interface VerdictCardProps {
+  verdict: string;
+  score?: number;
+  summary: string;
+  /** Short uppercase kicker above the verdict. Defaults to "The verdict". */
+  kicker?: string;
+  /** Optional bullet chips shown under the summary. */
+  bullets?: string[];
+  /** Legacy — renders as a leading pill if supplied. */
+  winner?: string;
+  children?: ReactNode;
+}
+
+export function VerdictCard({
+  verdict,
+  score,
+  summary,
+  kicker = "The verdict",
+  bullets,
+  winner,
+}: VerdictCardProps) {
+  return (
+    <div className="bk-verdict-card">
+      <div className="bk-verdict-card__header">
+        <span className="bk-verdict-card__kicker">{kicker}</span>
+        {score !== undefined && (
+          <span className="bk-verdict-card__score">
+            {score}
+            <span className="bk-verdict-card__score-max">/10</span>
+          </span>
+        )}
+      </div>
+      <div className="bk-verdict-card__body">
+        {winner && (
+          <div className="bk-verdict-card__winner">
+            Winner: <span className="bk-verdict-card__winner-name">{winner}</span>
+          </div>
+        )}
+        <h3 className="bk-verdict-card__verdict">{verdict}</h3>
+        <p className="bk-verdict-card__summary">{summary}</p>
+        {bullets && bullets.length > 0 && (
+          <div className="bk-verdict-card__bullets">
+            {bullets.map((b, i) => (
+              <span key={i} className="bk-verdict-card__chip">
+                {b}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/react/components-map.ts

@@ -0,0 +1,122 @@
+/* ============================================================
+   blog-kit React component MAPS — Next-free.
+   ------------------------------------------------------------
+   The presentational React components are framework-neutral, but
+   the sibling `react/index.ts` barrel ALSO re-exports
+   <BlogBehaviors>, which imports `next/navigation`. Evaluating that
+   barrel therefore pulls Next, so it cannot be imported under raw
+   Node / Astro SSR (no Next).
+
+   This module re-exports ONLY the component MAPS (no BlogBehaviors),
+   so the runtime-MDX render path (Next OR Astro) can import the map
+   without dragging Next in. `react/index.ts` re-exports these maps so
+   the maps stay single-source — edit the imports here, not in two
+   places.
+   ============================================================ */
+import { AdPreview } from "./AdPreview";
+import { AdPreviewPair } from "./AdPreviewPair";
+import { AuditFindings } from "./AuditFindings";
+import { AuditScores } from "./AuditScores";
+import { AuthorCard } from "./AuthorCard";
+import { BeforeAfter } from "./BeforeAfter";
+import { CTABanner } from "./CTABanner";
+import { CalloutBox } from "./CalloutBox";
+import { CaseStudyHero } from "./CaseStudyHero";
+import { ChannelMixBars } from "./ChannelMixBars";
+import { Checklist } from "./Checklist";
+import { ChecklistItem } from "./ChecklistItem";
+import { CodeSnippet } from "./CodeSnippet";
+import { ComparisonTable } from "./ComparisonTable";
+import { Definition } from "./Definition";
+import { DeliveryComparison } from "./DeliveryComparison";
+import { FAQList } from "./FAQList";
+import { FurtherReading } from "./FurtherReading";
+import { ImageFeature } from "./ImageFeature";
+import { Infographic } from "./Infographic";
+import { KeyMetric } from "./KeyMetric";
+import { KeywordTable } from "./KeywordTable";
+import { List } from "./List";
+import { MetricHighlight } from "./MetricHighlight";
+import { NewsletterCTA } from "./NewsletterCTA";
+import { NumberedCard } from "./NumberedCard";
+import { ProConBlock } from "./ProConBlock";
+import { ProseList } from "./ProseList";
+import { QuoteBlock } from "./QuoteBlock";
+import { RegionCallout } from "./RegionCallout";
+import { RelatedPosts } from "./RelatedPosts";
+import { ResultsStrip } from "./ResultsStrip";
+import { ScoreBar } from "./ScoreBar";
+import { SerpPreview } from "./SerpPreview";
+import { ServicePromoCard } from "./ServicePromoCard";
+import { StatCard } from "./StatCard";
+import { StepBlock } from "./StepBlock";
+import { TableOfContents } from "./TableOfContents";
+import { TimelineBlock } from "./TimelineBlock";
+import { TipBox } from "./TipBox";
+import { TrafficChart } from "./TrafficChart";
+import { VerdictCard } from "./VerdictCard";
+
+export const kitComponents = {
+  AdPreview,
+  AdPreviewPair,
+  AuditFindings,
+  AuditScores,
+  AuthorCard,
+  BeforeAfter,
+  CTABanner,
+  CalloutBox,
+  CaseStudyHero,
+  ChannelMixBars,
+  Checklist,
+  ChecklistItem,
+  CodeSnippet,
+  ComparisonTable,
+  Definition,
+  DeliveryComparison,
+  FAQList,
+  FurtherReading,
+  ImageFeature,
+  Infographic,
+  KeyMetric,
+  KeywordTable,
+  List,
+  MetricHighlight,
+  NewsletterCTA,
+  NumberedCard,
+  ProConBlock,
+  ProseList,
+  QuoteBlock,
+  RegionCallout,
+  RelatedPosts,
+  ResultsStrip,
+  ScoreBar,
+  SerpPreview,
+  ServicePromoCard,
+  StatCard,
+  StepBlock,
+  TableOfContents,
+  TimelineBlock,
+  TipBox,
+  TrafficChart,
+  VerdictCard,
+};
+
+/** Old MDX names kept renderable during migration → canonical component. */
+export const aliasComponents: Record<string, unknown> = {
+  AuditTable: AuditFindings,
+  CaseStudy: CaseStudyHero,
+  CaseStudyBanner: CaseStudyHero,
+  FindingsList: AuditFindings,
+  GoogleResult: SerpPreview,
+  IssueList: AuditFindings,
+  LineChart: TrafficChart,
+  OfficeGrid: RegionCallout,
+  ProsCons: ProConBlock,
+  PullQuote: QuoteBlock,
+  RegionContacts: RegionCallout,
+  SearchPreview: SerpPreview,
+  TimelineRecap: TimelineBlock,
+  TrendChart: TrafficChart,
+};
+
+export const blogComponents = { ...kitComponents, ...aliasComponents };

package/react/index.ts

@@ -0,0 +1,13 @@
+/* blog-kit React adapter — barrel (generated by assembler).
+   blogComponents is the map passed to <MDXRemote components={...} />.
+   Per-site custom components merge on top in the site's /blog route.
+
+   The component MAPS now live in ./components-map (Next-free) so the
+   Astro runtime-MDX render path can import the map WITHOUT pulling
+   <BlogBehaviors> (which imports next/navigation). This barrel keeps
+   its full public surface — maps + BlogBehaviors — for the Next path. */
+export { kitComponents, aliasComponents, blogComponents } from "./components-map";
+
+/** Client-side activator for interactive components — render once inside
+    the post route's `.blog-root`. See react/BlogBehaviors.tsx. */
+export { BlogBehaviors } from "./BlogBehaviors";

package/templates/blogkit/app/api/blogkit/revalidate/route.ts.tmpl

@@ -0,0 +1,32 @@
+// blog-kit on-demand revalidation route. Scaffolded by `npx @highjumpdigitalsoftware/blog-kit`.
+// High Jump Digital POSTs here on publish to bust the ISR cache instantly
+// (otherwise the ISR timer picks the new post up within `revalidate` seconds).
+//
+// Auth: a shared secret in BLOGKIT_REVALIDATE_SECRET. The caller sends it as
+// the `x-blogkit-secret` header. Without the secret set, the route refuses
+// (so an un-provisioned site can't be cache-poisoned).
+import { NextRequest, NextResponse } from "next/server";
+import { revalidatePath, revalidateTag } from "next/cache";
+
+export async function POST(req: NextRequest) {
+  const secret = process.env.BLOGKIT_REVALIDATE_SECRET;
+  if (!secret) {
+    return NextResponse.json({ ok: false, error: "not_configured" }, { status: 503 });
+  }
+  if (req.headers.get("x-blogkit-secret") !== secret) {
+    return NextResponse.json({ ok: false, error: "unauthorized" }, { status: 401 });
+  }
+
+  let body: { slug?: string } = {};
+  try {
+    body = await req.json();
+  } catch {
+    /* empty body = revalidate everything */
+  }
+
+  revalidateTag("blogkit");
+  revalidatePath("/blog");
+  if (body.slug) revalidatePath(`/blog/${body.slug}`);
+
+  return NextResponse.json({ ok: true, revalidated: body.slug ?? "all" });
+}

package/templates/blogkit/app/blog/[slug]/page.tsx.tmpl

@@ -0,0 +1,41 @@
+// blog-kit article route (/blog/[slug]) — ISR. Scaffolded by `npx @highjumpdigitalsoftware/blog-kit`.
+import "@highjumpdigitalsoftware/blog-kit/styles.css";
+import { notFound } from "next/navigation";
+import { Article, getArticle, createSource, resolveConfig } from "@highjumpdigitalsoftware/blog-kit";
+import rawConfig from "../../blogkit.config";
+
+const config = resolveConfig(rawConfig);
+
+// Static HTML per slug, revalidated in the background. New posts appear
+// without a redeploy: dynamicParams lets unknown slugs render on demand.
+export const revalidate = 60;
+export const dynamicParams = true;
+
+export async function generateStaticParams() {
+  const source = createSource(config);
+  const slugs = await source.listSlugs();
+  return slugs.map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = await getArticle(config, slug);
+  if (!post) return { title: "Not found" };
+  return {
+    title: `${post.title} · ${config.brand.name}`,
+    description: post.description,
+  };
+}
+
+export default async function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = await getArticle(config, slug);
+  if (!post) notFound();
+  return (
+    <main style={{ maxWidth: 900, margin: "0 auto", padding: "120px 20px 80px" }}>
+      <h1 style={{ marginBottom: 24 }}>{post.title}</h1>
+      {/* @ts-expect-error async server component */}
+      <Article config={config} slug={slug} />
+    </main>
+  );
+}

package/templates/blogkit/app/blog/page.tsx.tmpl

@@ -0,0 +1,18 @@
+// blog-kit listing route (/blog) — ISR. Scaffolded by `npx @highjumpdigitalsoftware/blog-kit`.
+import "@highjumpdigitalsoftware/blog-kit/styles.css";
+import { BlogIndex, resolveConfig } from "@highjumpdigitalsoftware/blog-kit";
+import rawConfig from "../blogkit.config";
+
+const config = resolveConfig(rawConfig);
+
+// Static HTML, revalidated in the background — SEO-correct, no redeploy.
+export const revalidate = 60;
+
+export const metadata = {
+  title: `Blog · ${config.brand.name}`,
+};
+
+export default async function BlogIndexPage() {
+  // @ts-expect-error async server component
+  return <BlogIndex config={config} page={1} />;
+}