@softure-ai/blog 0.0.0-stage → 0.1.5

package/src/server/options.ts

@@ -0,0 +1,62 @@
+// The blog options, routes and copy of the running app, read from the configuration.
+import { getModule, getSiteUrls, type AnySoftureModule, type SoftureConfig } from "@softure-ai/core";
+import type { BlogMessages } from "../messages/index.js";
+import type { BlogOptions } from "../options.js";
+import { getReservedSlugs, normalizeRoute, type BlogRoutes } from "../pages/paths.js";
+import { resolveQualitySettings, type QualitySettings } from "../quality/settings.js";
+
+const MODULE_ID = "blog";
+
+/** The enabled module. Throws when the app did not enable it: calling its functions then is a bug. */
+function getBlogModule(config: SoftureConfig): AnySoftureModule {
+  const module = getModule(config, MODULE_ID);
+  if (module === undefined) {
+    throw new Error("@softure-ai/blog: the module is not enabled; add blog() to modules in softure.config.ts");
+  }
+  return module;
+}
+
+export function getBlogOptions(config: SoftureConfig): BlogOptions {
+  // The module factory parsed these options with blogOptionsSchema.
+  return getBlogModule(config).options as BlogOptions;
+}
+
+/** The module's copy in the app's locale, with the app's overrides applied. */
+export function getBlogMessages(config: SoftureConfig): BlogMessages {
+  // The module factory merged the dictionaries; their shape is the module's own.
+  return getBlogModule(config).messages[config.locale] as BlogMessages;
+}
+
+/** The module's routes with the app's overrides applied, without trailing slashes. */
+export function getBlogRoutes(config: SoftureConfig): BlogRoutes {
+  const routes = getBlogModule(config).routes;
+  const read = (name: keyof BlogRoutes): string => {
+    const path = routes[name];
+    // The manifest declares every route, so a missing one means a broken module definition.
+    if (path === undefined) throw new Error(`@softure-ai/blog: route "${name}" is missing from the module manifest`);
+    return normalizeRoute(path);
+  };
+  return { index: read("index"), glossary: read("glossary"), method: read("method"), rss: read("rss") };
+}
+
+/** The path of the cache refresh route (`refreshBlogCache`), outside the pages' routes. */
+export function getBlogRefreshPath(config: SoftureConfig): string {
+  const path = getBlogModule(config).routes.refresh;
+  // The manifest declares the route, so a missing one means a broken module definition.
+  if (path === undefined) throw new Error('@softure-ai/blog: route "refresh" is missing from the module manifest');
+  return normalizeRoute(path);
+}
+
+/** The slugs no article may take: the app's `reservedSlugs` and the static pages under the listing. */
+export function getBlogReservedSlugs(config: SoftureConfig): string[] {
+  const options = getBlogOptions(config);
+  return getReservedSlugs(getBlogRoutes(config), options);
+}
+
+/** The quality gate's settings, or `null` when the app turned the gate off (`quality: false`). */
+export function getQualitySettings(config: SoftureConfig): QualitySettings | null {
+  const { quality, images } = getBlogOptions(config);
+  if (quality === false) return null;
+  const site = { appOrigin: config.appOrigin, siteOrigin: getSiteUrls(config).origin, timezone: config.timezone };
+  return resolveQualitySettings(quality, site, images ?? null);
+}

package/src/sitemap.ts

@@ -0,0 +1,36 @@
+// The sitemap contributor for `@softure-ai/seo`, in the root entry because `softure.config.ts` imports
+// it. That file also loads in plain Node and in bundles made outside Next (`softure migrate`, the blog
+// command, a container's migrate script), so nothing here may reach `next/*`: the entries come from
+// one query on the shared database, not from the pages' Next cache. Crawlers read a sitemap rarely.
+import { systemClock, type SoftureConfig } from "@softure-ai/core";
+import { getSoftureConfig } from "@softure-ai/core/next";
+import { getSharedDatabase } from "@softure-ai/db";
+import { listArticles } from "./db/articles.js";
+import { getBlogSitemapEntries, type BlogSitemapEntry } from "./discovery/sitemap.js";
+import { getBlogOptions, getBlogRoutes } from "./server/options.js";
+
+/** The listing, the articles, the glossary, its terms and the method page, each dated by its last content change. */
+export async function readBlogSitemap(config: SoftureConfig): Promise<BlogSitemapEntry[]> {
+  if (config.database === null) {
+    // Unreachable for a validated config: the module has a database schema.
+    throw new Error("@softure-ai/blog: softure.config.ts has no database; the blog sitemap needs one");
+  }
+  const { db } = await getSharedDatabase(config.database.url);
+  const texts = await listArticles({ db, clock: systemClock, config });
+  const routes = getBlogRoutes(config);
+  return getBlogSitemapEntries({
+    articles: texts.filter((text) => text.kind === "article"),
+    terms: texts.filter((text) => text.kind === "term"),
+    routes,
+    methodPath: getBlogOptions(config).methodPage ? routes.method : null,
+  });
+}
+
+/**
+ * `seo({ sitemap: { contributors: [blogSitemap()] } })`. The config is read when the sitemap is
+ * requested (it is still being defined when this is called); pass one to read another. A failed read
+ * throws; seo logs it and serves the rest. Mount `app/sitemap.ts` with `dynamic = "force-dynamic"`.
+ */
+export function blogSitemap(config?: SoftureConfig): () => Promise<BlogSitemapEntry[]> {
+  return () => readBlogSitemap(config ?? getSoftureConfig());
+}

package/src/ui/blog-article.tsx

@@ -0,0 +1,186 @@
+// The article page, answer first: crumbs, title, description and dates; then the "in short" box, the
+// contents (from two level-2 headings up), the body, questions and answers, sources, the signature
+// and the disclaimer; then the app's slots. Everything is server HTML: a crawler without JavaScript
+// gets the whole text.
+import { formatMessage } from "@softure-ai/core";
+import type { ReactNode } from "react";
+import type { BlogArticle, BlogSource } from "../contract.js";
+import { formatDay, type ArticleDates } from "../pages/dates.js";
+import type { Crumb } from "../pages/listing.js";
+import { getArticlePath } from "../pages/paths.js";
+import type { ArticleHeading, ArticleSegment } from "../render/render-article.js";
+import { BlogFooterNote, BlogLayout, JsonLdScript } from "./blog-layout.js";
+import type { BlogPageContext } from "./page-context.js";
+
+export interface RenderedBody {
+  readonly segments: readonly ArticleSegment<ReactNode>[];
+  readonly headings: readonly ArticleHeading[];
+  readonly readingMinutes: number;
+}
+
+export interface BlogArticleViewProps {
+  readonly context: BlogPageContext;
+  readonly article: BlogArticle;
+  readonly dates: ArticleDates;
+  readonly body: RenderedBody;
+  readonly crumbs: readonly Crumb[];
+  /** From `serializeJsonLd(getArticleJsonLd(…))`. */
+  readonly jsonLd: string;
+  /** The app's call to action, right after the text. */
+  readonly cta?: ReactNode;
+  /** The app's block under the article, e.g. `<Waitlist placement="blog" />`. */
+  readonly afterArticle?: ReactNode;
+  /** "Read next" (`getRelatedArticles`); none or empty: no section. */
+  readonly related?: readonly Pick<BlogArticle, "id" | "slug" | "title" | "description">[];
+}
+
+/** The body in order: HTML segments from the renderer, node segments (the app's block plugins) as they are. */
+export function ArticleBody({ segments }: { readonly segments: readonly ArticleSegment<ReactNode>[] }) {
+  return (
+    <div className="blog-body">
+      {segments.map((segment, index) =>
+        segment.kind === "html" ? (
+          // The renderer's output is the security boundary: raw HTML escaped, unsafe links dropped.
+          <div key={index} className="blog-segment" dangerouslySetInnerHTML={{ __html: segment.html }} />
+        ) : (
+          <div key={index} className="blog-segment" data-block={segment.type}>
+            {segment.node}
+          </div>
+        ),
+      )}
+    </div>
+  );
+}
+
+function DateItem({ label, day, context }: { readonly label: string; readonly day: string; readonly context: BlogPageContext }) {
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd>
+        <time dateTime={day}>{formatDay(day, context.locale)}</time>
+      </dd>
+    </div>
+  );
+}
+
+export function ArticleDatesList({ dates, readingMinutes, context }: { readonly dates: ArticleDates; readonly readingMinutes?: number; readonly context: BlogPageContext }) {
+  const copy = context.messages.pages;
+  return (
+    <dl className="blog-dates">
+      <DateItem label={copy.published} day={dates.published} context={context} />
+      {dates.updated === null ? null : <DateItem label={copy.updated} day={dates.updated} context={context} />}
+      <DateItem label={copy.currentAsOf} day={dates.currentAsOf} context={context} />
+      {readingMinutes === undefined ? null : (
+        <div>
+          <dt className="blog-visually-hidden">{copy.readingTimeLabel}</dt>
+          <dd>{formatMessage(copy.readingTime, { minutes: readingMinutes })}</dd>
+        </div>
+      )}
+    </dl>
+  );
+}
+
+export function SourceList({ sources, heading }: { readonly sources: readonly BlogSource[]; readonly heading: string }) {
+  if (sources.length === 0) return null;
+  return (
+    <section aria-labelledby="blog-sources" className="blog-section blog-sources">
+      <h2 id="blog-sources">{heading}</h2>
+      <ul>
+        {sources.map((source) => (
+          <li key={source.url}>
+            <a href={source.url} rel="noopener noreferrer" target="_blank">
+              {source.name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+/**
+ * "Read next": texts of the same cluster, then of others, chosen without manual lists. After the app's
+ * call to action: the text has just made its point, so the app's next step comes first, this second.
+ */
+export function RelatedList({ articles, context }: { readonly articles: readonly Pick<BlogArticle, "id" | "slug" | "title" | "description">[]; readonly context: BlogPageContext }) {
+  if (articles.length === 0) return null;
+  return (
+    <section aria-labelledby="blog-related" className="blog-section blog-related">
+      <h2 id="blog-related">{context.messages.pages.readNext}</h2>
+      <ul>
+        {articles.map((article) => (
+          <li key={article.id}>
+            <h3>
+              <a href={getArticlePath(context.routes, article.slug)}>{article.title}</a>
+            </h3>
+            <p>{article.description}</p>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function Contents({ headings, label }: { readonly headings: readonly ArticleHeading[]; readonly label: string }) {
+  const sections = headings.filter((heading) => heading.level === 2);
+  if (sections.length < 2) return null;
+  return (
+    <nav aria-labelledby="blog-contents" className="blog-contents">
+      <p id="blog-contents" className="blog-contents-title">
+        {label}
+      </p>
+      <ol>
+        {sections.map((heading) => (
+          <li key={heading.id}>
+            <a href={`#${heading.id}`}>{heading.text}</a>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+export function BlogArticleView({ context, article, dates, body, crumbs, jsonLd, cta, afterArticle, related = [] }: BlogArticleViewProps) {
+  const copy = context.messages.pages;
+  return (
+    <BlogLayout
+      context={context}
+      title={article.title}
+      lead={article.description}
+      crumbs={crumbs}
+      meta={<ArticleDatesList dates={dates} readingMinutes={body.readingMinutes} context={context} />}
+    >
+      <JsonLdScript json={jsonLd} />
+      <div className="blog-article-layout">
+        <Contents headings={body.headings} label={copy.contents} />
+        <article className="blog-article">
+          {article.summary === null ? null : (
+            <aside aria-labelledby="blog-summary" className="blog-summary">
+              <h2 id="blog-summary">{copy.summary}</h2>
+              <p>{article.summary}</p>
+            </aside>
+          )}
+          <ArticleBody segments={body.segments} />
+          {article.faq.length === 0 ? null : (
+            <section aria-labelledby="blog-faq" className="blog-section blog-faq">
+              <h2 id="blog-faq">{copy.faq}</h2>
+              <dl>
+                {article.faq.map((entry) => (
+                  <div key={entry.question}>
+                    <dt>{entry.question}</dt>
+                    <dd>{entry.answer}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          )}
+          <SourceList sources={article.sources} heading={copy.sources} />
+          <BlogFooterNote context={context} />
+        </article>
+      </div>
+      {cta === undefined ? null : <div className="blog-slot">{cta}</div>}
+      <RelatedList articles={related} context={context} />
+      {afterArticle === undefined ? null : <div className="blog-slot">{afterArticle}</div>}
+    </BlogLayout>
+  );
+}

package/src/ui/blog-glossary.tsx

@@ -0,0 +1,104 @@
+// The glossary: the index (terms in alphabetical order with their definitions) and a term page
+// (definition first, the body, sources, the articles that expand on the term).
+import type { ReactNode } from "react";
+import type { BlogArticle } from "../contract.js";
+import { formatDay, type ArticleDates } from "../pages/dates.js";
+import type { Crumb } from "../pages/listing.js";
+import { getArticlePath, getTermPath } from "../pages/paths.js";
+import { ArticleBody, SourceList, type RenderedBody } from "./blog-article.js";
+import { BlogFooterNote, BlogLayout, JsonLdScript } from "./blog-layout.js";
+import type { BlogPageContext } from "./page-context.js";
+
+export interface GlossaryIndexViewProps {
+  readonly context: BlogPageContext;
+  /** Already sorted (`sortTerms`). */
+  readonly terms: readonly BlogArticle[];
+  /** `null` with no terms: an empty set says nothing. */
+  readonly jsonLd: string | null;
+}
+
+export function GlossaryIndexView({ context, terms, jsonLd }: GlossaryIndexViewProps) {
+  const copy = context.messages.glossary;
+  const crumbs: Crumb[] = [
+    { name: context.messages.pages.blogTitle, path: context.routes.index },
+    { name: copy.title, path: context.routes.glossary },
+  ];
+  return (
+    <BlogLayout context={context} title={copy.title} lead={copy.description} crumbs={crumbs}>
+      {jsonLd === null ? null : <JsonLdScript json={jsonLd} />}
+      {terms.length === 0 ? (
+        <p className="blog-empty">{copy.empty}</p>
+      ) : (
+        <dl className="blog-terms">
+          {terms.map((term) => (
+            <div key={term.id}>
+              <dt>
+                <a href={getTermPath(context.routes, term.slug)}>{term.title}</a>
+              </dt>
+              <dd>{term.description}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+      <BlogFooterNote context={context} />
+    </BlogLayout>
+  );
+}
+
+export interface GlossaryTermViewProps {
+  readonly context: BlogPageContext;
+  readonly term: BlogArticle;
+  readonly dates: ArticleDates;
+  readonly body: RenderedBody;
+  readonly crumbs: readonly Crumb[];
+  readonly jsonLd: string;
+  /** Published articles whose text links this term. */
+  readonly articles: readonly BlogArticle[];
+  readonly cta?: ReactNode;
+}
+
+export function GlossaryTermView({ context, term, dates, body, crumbs, jsonLd, articles, cta }: GlossaryTermViewProps) {
+  const pages = context.messages.pages;
+  const copy = context.messages.glossary;
+  const meta = (
+    <dl className="blog-dates">
+      <div>
+        <dt>{pages.currentAsOf}</dt>
+        <dd>
+          <time dateTime={dates.currentAsOf}>{formatDay(dates.currentAsOf, context.locale)}</time>
+        </dd>
+      </div>
+      {dates.updated === null ? null : (
+        <div>
+          <dt>{pages.updated}</dt>
+          <dd>
+            <time dateTime={dates.updated}>{formatDay(dates.updated, context.locale)}</time>
+          </dd>
+        </div>
+      )}
+    </dl>
+  );
+  return (
+    <BlogLayout context={context} title={term.title} lead={term.description} crumbs={crumbs} meta={meta}>
+      <JsonLdScript json={jsonLd} />
+      <article className="blog-article">
+        <ArticleBody segments={body.segments} />
+        <SourceList sources={term.sources} heading={pages.sources} />
+        {articles.length === 0 ? null : (
+          <section aria-labelledby="blog-explained-in" className="blog-section blog-explained-in">
+            <h2 id="blog-explained-in">{copy.explainedIn}</h2>
+            <ul>
+              {articles.map((article) => (
+                <li key={article.id}>
+                  <a href={getArticlePath(context.routes, article.slug)}>{article.title}</a>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+        <BlogFooterNote context={context} extraLink={{ href: context.routes.glossary, label: copy.allTerms }} />
+      </article>
+      {cta === undefined ? null : <div className="blog-slot">{cta}</div>}
+    </BlogLayout>
+  );
+}

package/src/ui/blog-layout.tsx

@@ -0,0 +1,89 @@
+// The frame of every blog page: crumbs, the title with its lead, an optional line under it (dates),
+// then the content. Links are plain anchors: the pages render on the server and need no client router.
+import { formatMessage } from "@softure-ai/core";
+import type { ReactNode } from "react";
+import type { Crumb } from "../pages/listing.js";
+import type { BlogPageContext } from "./page-context.js";
+
+export interface BlogLayoutProps {
+  readonly context: BlogPageContext;
+  readonly title: string;
+  readonly lead?: string;
+  /** Crumbs up to the page itself; the last one is announced, not shown. */
+  readonly crumbs?: readonly Crumb[];
+  /** Under the title: dates, reading time. */
+  readonly meta?: ReactNode;
+  readonly children: ReactNode;
+}
+
+export function Breadcrumbs({ crumbs, label }: { readonly crumbs: readonly Crumb[]; readonly label: string }) {
+  return (
+    <nav aria-label={label} className="blog-crumbs">
+      <ol>
+        {crumbs.map((crumb, index) =>
+          index === crumbs.length - 1 ? (
+            <li key={crumb.path} className="blog-visually-hidden" aria-current="page">
+              {crumb.name}
+            </li>
+          ) : (
+            <li key={crumb.path}>
+              <a href={crumb.path}>{crumb.name}</a>
+              <span aria-hidden="true" className="blog-crumbs-separator">
+                {"›"}
+              </span>
+            </li>
+          ),
+        )}
+      </ol>
+    </nav>
+  );
+}
+
+export function BlogLayout({ context, title, lead, crumbs, meta, children }: BlogLayoutProps) {
+  return (
+    <main className="blog-page">
+      <header className="blog-header">
+        {crumbs !== undefined && crumbs.length > 1 ? <Breadcrumbs crumbs={crumbs} label={context.messages.pages.breadcrumbs} /> : null}
+        <h1 className="blog-title">{title}</h1>
+        {lead === undefined ? null : <p className="blog-lead">{lead}</p>}
+        {meta}
+      </header>
+      {children}
+    </main>
+  );
+}
+
+/** The signature and the method link under a text, then the disclaimer. */
+export function BlogFooterNote({ context, extraLink }: { readonly context: BlogPageContext; readonly extraLink?: { readonly href: string; readonly label: string } }) {
+  const copy = context.messages.pages;
+  const links = [
+    ...(extraLink === undefined ? [] : [extraLink]),
+    ...(context.methodPath === null ? [] : [{ href: context.methodPath, label: copy.methodLink }]),
+  ];
+  const hasSignature = context.brand !== null;
+  return (
+    <footer className="blog-footer-note">
+      {hasSignature || links.length > 0 ? (
+        <p className="blog-signature">
+          {context.brand === null ? null : <strong>{formatMessage(copy.signature, { brand: context.brand })}</strong>}
+          {links.map((link, index) => (
+            <span key={link.href}>
+              {hasSignature || index > 0 ? <span aria-hidden="true">{" · "}</span> : null}
+              <a href={link.href}>{link.label}</a>
+            </span>
+          ))}
+        </p>
+      ) : null}
+      {context.disclaimer === null ? null : (
+        <aside aria-label={copy.disclaimerLabel} className="blog-disclaimer">
+          <p>{context.disclaimer}</p>
+        </aside>
+      )}
+    </footer>
+  );
+}
+
+/** Structured data for search engines and assistants; `json` comes from `serializeJsonLd`. */
+export function JsonLdScript({ json }: { readonly json: string }) {
+  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: json }} />;
+}

package/src/ui/blog-listing.tsx

@@ -0,0 +1,95 @@
+// The listing: articles as cards in groups by cluster, the pillar of a cluster as a lead card before
+// the grid. A whole card is one link (its title's anchor stretches over the card in CSS), so a screen
+// reader hears one link named after the text and a finger can hit anywhere.
+import { formatMessage } from "@softure-ai/core";
+import type { ReactNode } from "react";
+import type { BlogArticle } from "../contract.js";
+import { formatDay, getArticleDates } from "../pages/dates.js";
+import { getClusterAnchor, type ClusterGroup } from "../pages/listing.js";
+import { getArticlePath } from "../pages/paths.js";
+import { getReadingMinutes } from "../render/reading-time.js";
+import { BlogFooterNote, BlogLayout } from "./blog-layout.js";
+import type { BlogPageContext } from "./page-context.js";
+
+export interface BlogListingViewProps {
+  readonly context: BlogPageContext;
+  readonly groups: readonly ClusterGroup<BlogArticle>[];
+  /** Published glossary terms; the glossary link shows when there is at least one. */
+  readonly termCount: number;
+  readonly timezone: string;
+  /** The app's call to action under the cards. */
+  readonly cta?: ReactNode;
+}
+
+function CardMeta({ article, context, timezone }: { readonly article: BlogArticle; readonly context: BlogPageContext; readonly timezone: string }) {
+  const copy = context.messages.pages;
+  const dates = getArticleDates(article, timezone);
+  const shownDay = dates.updated ?? dates.published;
+  const date = formatDay(shownDay, context.locale);
+  return (
+    <p className="blog-card-meta">
+      <time dateTime={shownDay}>{dates.updated === null ? date : formatMessage(copy.updatedOn, { date })}</time>
+      <span aria-hidden="true">{" · "}</span>
+      <span>{formatMessage(copy.readingTime, { minutes: getReadingMinutes(article.bodyMarkdown) })}</span>
+    </p>
+  );
+}
+
+function ArticleCard({ article, context, timezone, isLead }: { readonly article: BlogArticle; readonly context: BlogPageContext; readonly timezone: string; readonly isLead: boolean }) {
+  return (
+    <article className={isLead ? "blog-card blog-card-lead" : "blog-card"} data-slug={article.slug}>
+      {isLead ? <p className="blog-badge">{context.messages.pages.startHere}</p> : null}
+      <h3 className="blog-card-title">
+        <a className="blog-card-link" href={getArticlePath(context.routes, article.slug)}>
+          {article.title}
+        </a>
+      </h3>
+      <p className="blog-card-description">{article.description}</p>
+      <CardMeta article={article} context={context} timezone={timezone} />
+    </article>
+  );
+}
+
+export function BlogListingView({ context, groups, termCount, timezone, cta }: BlogListingViewProps) {
+  const copy = context.messages.pages;
+  return (
+    <BlogLayout context={context} title={copy.blogTitle} lead={copy.blogDescription}>
+      {groups.length === 0 ? (
+        <p className="blog-empty">{copy.empty}</p>
+      ) : (
+        <div className="blog-groups">
+          {groups.map((group) => {
+            const id = group.cluster === null ? undefined : getClusterAnchor(group.cluster);
+            const headingId = `${id ?? "cluster-other"}-heading`;
+            return (
+              <section key={group.cluster ?? ""} id={id} aria-labelledby={headingId} className="blog-group">
+                <h2 id={headingId} className="blog-group-title">
+                  {group.label}
+                </h2>
+                {group.lead === null ? null : <ArticleCard article={group.lead} context={context} timezone={timezone} isLead />}
+                {group.rest.length === 0 ? null : (
+                  <ul className="blog-cards">
+                    {group.rest.map((article) => (
+                      <li key={article.id}>
+                        <ArticleCard article={article} context={context} timezone={timezone} isLead={false} />
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </section>
+            );
+          })}
+        </div>
+      )}
+      {cta === undefined ? null : <div className="blog-slot">{cta}</div>}
+      {termCount > 0 ? (
+        <p className="blog-glossary-teaser">
+          <a href={context.routes.glossary}>{copy.glossaryLink}</a>
+          {": "}
+          {copy.glossaryTeaser}
+        </p>
+      ) : null}
+      <BlogFooterNote context={context} />
+    </BlogLayout>
+  );
+}

package/src/ui/blog-method.tsx

@@ -0,0 +1,34 @@
+// "How our texts are made": who writes, where facts come from, sources, checks and corrections. The
+// copy is the module's default in `messages.method`; an app states its own method through
+// `blog({ messages: { en: { method: { … } } } })`.
+import { BlogFooterNote, BlogLayout } from "./blog-layout.js";
+import type { BlogPageContext } from "./page-context.js";
+
+const SECTIONS = [
+  ["who", "whoTitle", "whoBody"],
+  ["facts", "factsTitle", "factsBody"],
+  ["sources", "sourcesTitle", "sourcesBody"],
+  ["checks", "checksTitle", "checksBody"],
+  ["corrections", "correctionsTitle", "correctionsBody"],
+] as const;
+
+export function BlogMethodView({ context }: { readonly context: BlogPageContext }) {
+  const copy = context.messages.method;
+  const crumbs = [
+    { name: context.messages.pages.blogTitle, path: context.routes.index },
+    { name: copy.title, path: context.methodPath ?? context.routes.index },
+  ];
+  return (
+    <BlogLayout context={context} title={copy.title} lead={copy.description} crumbs={crumbs}>
+      <div className="blog-article">
+        {SECTIONS.map(([id, title, body]) => (
+          <section key={id} id={id} aria-labelledby={`${id}-heading`} className="blog-section">
+            <h2 id={`${id}-heading`}>{copy[title]}</h2>
+            <p>{copy[body]}</p>
+          </section>
+        ))}
+        <BlogFooterNote context={{ ...context, methodPath: null }} />
+      </div>
+    </BlogLayout>
+  );
+}

package/src/ui/index.ts

@@ -0,0 +1,8 @@
+// Server components of the blog's pages. They take ready data and copy and import nothing from Next,
+// so an app can compose its own page from them; `@softure-ai/blog/next` wires them to the config.
+export { ArticleBody, ArticleDatesList, BlogArticleView, SourceList, type BlogArticleViewProps, type RenderedBody } from "./blog-article.js";
+export { GlossaryIndexView, GlossaryTermView, type GlossaryIndexViewProps, type GlossaryTermViewProps } from "./blog-glossary.js";
+export { BlogFooterNote, BlogLayout, Breadcrumbs, JsonLdScript, type BlogLayoutProps } from "./blog-layout.js";
+export { BlogListingView, type BlogListingViewProps } from "./blog-listing.js";
+export { BlogMethodView } from "./blog-method.js";
+export type { BlogPageContext } from "./page-context.js";

package/src/ui/page-context.ts

@@ -0,0 +1,17 @@
+// What every blog component needs besides its own data: the copy, the locale, the paths and the
+// app's brand and disclaimer. The Next adapter builds it once per request from the config.
+import type { Locale } from "@softure-ai/core";
+import type { BlogMessages } from "../messages/index.js";
+import type { BlogRoutes } from "../pages/paths.js";
+
+export interface BlogPageContext {
+  readonly messages: BlogMessages;
+  readonly locale: Locale;
+  readonly routes: BlogRoutes;
+  /** The method page's path; `null` when the app does not mount it (nothing links to it then). */
+  readonly methodPath: string | null;
+  /** The site's name for the signature; `null` without a brand. */
+  readonly brand: string | null;
+  /** The note under every text in the locale; `null` without one. */
+  readonly disclaimer: string | null;
+}