@decocms/apps-blog 8.0.0 → 8.1.0-next.0

package/src/manifest.gen.ts

@@ -1,26 +1,94 @@
-// AUTO-GENERATED by scripts/generate-manifests.ts — DO NOT EDIT
-// This file is checked into source control and updated via: npm run generate:manifests
+// AUTO-GENERATED shape, HAND-MAINTAINED file.
+// `scripts/generate-manifests.ts` was never ported into this repo (deferred in
+// docs/apps-monorepo-migration-plan.md); until it is, add new loaders/actions/
+// sections here by hand. Checked into source control (see .gitignore's
+// `!packages/apps-*/src/manifest.gen.ts` negation).
+import * as actions_submitRating from "./actions/submitRating";
+import * as actions_submitReview from "./actions/submitReview";
+import * as actions_submitView from "./actions/submitView";
 import * as loaders_Author from "./loaders/Author";
+import * as loaders_BlogPostItem from "./loaders/BlogPostItem";
 import * as loaders_BlogPostPage from "./loaders/BlogPostPage";
 import * as loaders_Blogpost from "./loaders/Blogpost";
+import * as loaders_BlogpostList from "./loaders/BlogpostList";
 import * as loaders_BlogpostListing from "./loaders/BlogpostListing";
 import * as loaders_BlogRelatedPosts from "./loaders/BlogRelatedPosts";
 import * as loaders_Category from "./loaders/Category";
+import * as loaders_ext_BlogpostList_ratings from "./loaders/extensions/BlogpostList/ratings";
+import * as loaders_ext_BlogpostList_reviews from "./loaders/extensions/BlogpostList/reviews";
+import * as loaders_ext_BlogpostListing_ratings from "./loaders/extensions/BlogpostListing/ratings";
+import * as loaders_ext_BlogpostListing_reviews from "./loaders/extensions/BlogpostListing/reviews";
+import * as loaders_ext_BlogpostPage_ratings from "./loaders/extensions/BlogpostPage/ratings";
+import * as loaders_ext_BlogpostPage_reviews from "./loaders/extensions/BlogpostPage/reviews";
 import * as loaders_GetCategories from "./loaders/GetCategories";
 
+const sections_Seo_SeoBlogPost = () => import("./sections/Seo/SeoBlogPost");
+const sections_Seo_SeoBlogPostListing = () => import("./sections/Seo/SeoBlogPostListing");
+const sections_Template = () => import("./sections/Template");
+const sections_blocks_BlockImage = () => import("./sections/blocks/BlockImage");
+const sections_blocks_Callout = () => import("./sections/blocks/Callout");
+const sections_blocks_CardGroup = () => import("./sections/blocks/CardGroup");
+const sections_blocks_Checklist = () => import("./sections/blocks/Checklist");
+const sections_blocks_Code = () => import("./sections/blocks/Code");
+const sections_blocks_Comparison = () => import("./sections/blocks/Comparison");
+const sections_blocks_Cta = () => import("./sections/blocks/Cta");
+const sections_blocks_Divider = () => import("./sections/blocks/Divider");
+const sections_blocks_Heading = () => import("./sections/blocks/Heading");
+const sections_blocks_List = () => import("./sections/blocks/List");
+const sections_blocks_Paragraph = () => import("./sections/blocks/Paragraph");
+const sections_blocks_Quote = () => import("./sections/blocks/Quote");
+const sections_blocks_Stat = () => import("./sections/blocks/Stat");
+const sections_blocks_StatGroup = () => import("./sections/blocks/StatGroup");
+const sections_blocks_Steps = () => import("./sections/blocks/Steps");
+const sections_blocks_Table = () => import("./sections/blocks/Table");
+const sections_blocks_Video = () => import("./sections/blocks/Video");
+
 const manifest = {
-	name: "blog",
-	loaders: {
-		"blog/loaders/Author": loaders_Author,
-		"blog/loaders/Blogpost": loaders_Blogpost,
-		"blog/loaders/BlogPostPage": loaders_BlogPostPage,
-		"blog/loaders/BlogpostListing": loaders_BlogpostListing,
-		"blog/loaders/BlogRelatedPosts": loaders_BlogRelatedPosts,
-		"blog/loaders/Category": loaders_Category,
-		"blog/loaders/GetCategories": loaders_GetCategories,
-	},
-	actions: {},
-	sections: {},
+  name: "blog",
+  loaders: {
+    "blog/loaders/Author": loaders_Author,
+    "blog/loaders/Blogpost": loaders_Blogpost,
+    "blog/loaders/BlogPostItem": loaders_BlogPostItem,
+    "blog/loaders/BlogPostPage": loaders_BlogPostPage,
+    "blog/loaders/BlogpostList": loaders_BlogpostList,
+    "blog/loaders/BlogpostListing": loaders_BlogpostListing,
+    "blog/loaders/BlogRelatedPosts": loaders_BlogRelatedPosts,
+    "blog/loaders/Category": loaders_Category,
+    "blog/loaders/GetCategories": loaders_GetCategories,
+    "blog/loaders/extensions/BlogpostList/ratings": loaders_ext_BlogpostList_ratings,
+    "blog/loaders/extensions/BlogpostList/reviews": loaders_ext_BlogpostList_reviews,
+    "blog/loaders/extensions/BlogpostListing/ratings": loaders_ext_BlogpostListing_ratings,
+    "blog/loaders/extensions/BlogpostListing/reviews": loaders_ext_BlogpostListing_reviews,
+    "blog/loaders/extensions/BlogpostPage/ratings": loaders_ext_BlogpostPage_ratings,
+    "blog/loaders/extensions/BlogpostPage/reviews": loaders_ext_BlogpostPage_reviews,
+  },
+  actions: {
+    "blog/actions/submitRating": actions_submitRating,
+    "blog/actions/submitReview": actions_submitReview,
+    "blog/actions/submitView": actions_submitView,
+  },
+  sections: {
+    "blog/sections/Seo/SeoBlogPost": sections_Seo_SeoBlogPost,
+    "blog/sections/Seo/SeoBlogPostListing": sections_Seo_SeoBlogPostListing,
+    "blog/sections/Template": sections_Template,
+    "blog/sections/blocks/BlockImage": sections_blocks_BlockImage,
+    "blog/sections/blocks/Callout": sections_blocks_Callout,
+    "blog/sections/blocks/CardGroup": sections_blocks_CardGroup,
+    "blog/sections/blocks/Checklist": sections_blocks_Checklist,
+    "blog/sections/blocks/Code": sections_blocks_Code,
+    "blog/sections/blocks/Comparison": sections_blocks_Comparison,
+    "blog/sections/blocks/Cta": sections_blocks_Cta,
+    "blog/sections/blocks/Divider": sections_blocks_Divider,
+    "blog/sections/blocks/Heading": sections_blocks_Heading,
+    "blog/sections/blocks/List": sections_blocks_List,
+    "blog/sections/blocks/Paragraph": sections_blocks_Paragraph,
+    "blog/sections/blocks/Quote": sections_blocks_Quote,
+    "blog/sections/blocks/Stat": sections_blocks_Stat,
+    "blog/sections/blocks/StatGroup": sections_blocks_StatGroup,
+    "blog/sections/blocks/Steps": sections_blocks_Steps,
+    "blog/sections/blocks/Table": sections_blocks_Table,
+    "blog/sections/blocks/Video": sections_blocks_Video,
+  },
 } as const;
 
 export type Manifest = typeof manifest;

package/src/mod.ts

@@ -2,14 +2,17 @@
  * Blog app module — standard autoconfig contract.
  *
  * Exports `configure` following the AppModContract pattern.
- * Provides blog post, category, and author loaders for the site.
+ * Provides blog post, category, and author loaders, the SEO sections, and the
+ * post-content section blocks for the site.
  */
 
-import type {
-	AppDefinition,
-	ResolveSecretFn,
-} from "@decocms/apps-commerce/app-types";
+import type { AppDefinition, AppHandler, ResolveSecretFn } from "@decocms/apps-commerce/app-types";
+import submitRating from "./actions/submitRating";
+import submitReview from "./actions/submitReview";
+import submitView from "./actions/submitView";
+import { type BlogConfig, type BlogSeoDefaults, configureBlog } from "./client";
 import manifest from "./manifest.gen";
+import type { Publisher } from "./types";
 
 // -------------------------------------------------------------------------
 // CMS Props
@@ -17,33 +20,83 @@ import manifest from "./manifest.gen";
 
 /** @title Deco Blog */
 export interface Props {
-	/**
-	 * @title Page Slug
-	 * @description The slug of the BlogPostPage to embed. Use :category and :slug.
-	 */
-	pageSlug?: string;
+  /**
+   * @title Category Slug
+   * @description The slug of the Categories of the blogposts. Use :category.
+   * Categories can nest, so the route must be a catch-all for subcategories to
+   * resolve.
+   * @example /blog/:category*
+   */
+  categorySlug?: string;
+  /**
+   * @title Page Slug
+   * @description The slug of the BlogPostPage to embed. Use :category and :slug.
+   * @example /blog/:category*\/:slug
+   */
+  pageSlug?: string;
+  /**
+   * @title Canonical Base URL
+   * @description Overrides the origin of the url/mainEntityOfPage emitted in the JSON-LD by the SEO sections, which otherwise use the request host.
+   * @example https://www.mysite.com
+   */
+  canonicalBaseUrl?: string;
+  /**
+   * @title Publisher
+   * @description Emitted as the publisher of the blog posts in the JSON-LD.
+   */
+  publisher?: Publisher;
+  /**
+   * @title SEO defaults
+   * @description Title/description templates folded into the output of the blog's SEO sections.
+   */
+  seo?: BlogSeoDefaults;
 }
 
 export type BlogState = Props;
 
+/**
+ * Action entrypoints, exposed under both key forms the resolver may use.
+ * Mirrors `@decocms/apps-resend`'s `handlers` map.
+ */
+export const handlers: Record<string, AppHandler> = {
+  "blog/actions/submitRating": (props) => submitRating(props),
+  "blog/actions/submitRating.ts": (props) => submitRating(props),
+  "blog/actions/submitReview": (props) => submitReview(props),
+  "blog/actions/submitReview.ts": (props) => submitReview(props),
+  "blog/actions/submitView": (props) => submitView(props),
+  "blog/actions/submitView.ts": (props) => submitView(props),
+};
+
 // -------------------------------------------------------------------------
 // Configure
 // -------------------------------------------------------------------------
 
 /**
  * Configure the Blog app from CMS block data.
- * Always returns an AppDefinition (no required fields).
+ * Always returns an AppDefinition — every field is optional, so a blog with no
+ * block configured still resolves and renders.
  */
 export async function configure(
-	// biome-ignore lint/suspicious/noExplicitAny: block data comes from CMS with no fixed schema
-	_block: any,
-	_resolveSecret: ResolveSecretFn,
+  block: any,
+  _resolveSecret: ResolveSecretFn,
 ): Promise<AppDefinition<BlogState>> {
-	return {
-		name: "blog",
-		manifest,
-		state: { pageSlug: _block?.pageSlug },
-	};
+  const config: BlogConfig = {
+    categorySlug: block?.categorySlug,
+    pageSlug: block?.pageSlug,
+    canonicalBaseUrl: block?.canonicalBaseUrl,
+    publisher: block?.publisher,
+    seo: block?.seo,
+  };
+
+  // Bridge: the loaders and sections read this singleton in place of the Deno
+  // app's `ctx`, which has no equivalent here.
+  configureBlog(config);
+
+  return {
+    name: "blog",
+    manifest,
+    state: config,
+  };
 }
 
 /** Placeholder preview for CMS editor. */
@@ -51,5 +104,5 @@ export const preview = undefined;
 
 /** Default export for schema generation and Deno-style app bridges. */
 export default function Blog(state: Props) {
-	return { state };
+  return { state };
 }

package/src/registry.ts

@@ -1,9 +1,9 @@
 import type { AppRegistryEntry } from "@decocms/apps-commerce/registry";
 
 export const BLOG_REGISTRY_ENTRY: AppRegistryEntry = {
-	blockKey: "deco-blog",
-	module: () => import("./mod"),
-	displayName: "Blog",
-	category: "content",
-	description: "Blog posts, categories, and authors from CMS collections",
+  blockKey: "deco-blog",
+  module: () => import("./mod"),
+  displayName: "Blog",
+  category: "content",
+  description: "Blog posts, categories, and authors from CMS collections",
 };

package/src/sections/Seo/SeoBlogPost.tsx

@@ -0,0 +1,77 @@
+import SeoComponent, {
+  renderTemplateString,
+  type SEOSection,
+} from "@decocms/apps-website/components/Seo";
+import { type BlogSeoDefaults, getBlogConfig } from "../../client";
+import type { BlogPostPage } from "../../types";
+import { toBlogPosting, toBreadcrumbList, withCanonicalBase } from "../../utils/jsonLD";
+
+export type Props = {
+  /** @title Data Source */
+  jsonLD: BlogPostPage | null;
+  /** @title Title Override */
+  title?: string;
+  /** @title Description Override */
+  description?: string;
+};
+
+/**
+ * @title Blog Post details
+ *
+ * Mirrors `SeoV2`'s contract in `@decocms/apps-website`: the site-level SEO
+ * defaults arrive as the third argument when the framework threads them
+ * through, and otherwise come from the blog app's own config.
+ */
+export function loader(props: Props, req?: Request, seo?: BlogSeoDefaults) {
+  const rawSeo: BlogSeoDefaults = seo ?? getBlogConfig().seo ?? {};
+  const titleTemplate = typeof rawSeo.titleTemplate === "string" ? rawSeo.titleTemplate : "%s";
+  const descriptionTemplate =
+    typeof rawSeo.descriptionTemplate === "string" ? rawSeo.descriptionTemplate : "%s";
+  const { titleTemplate: _tt, descriptionTemplate: _dt, ...seoSiteProps } = rawSeo;
+
+  const { title: titleProp, description: descriptionProp, jsonLD } = props;
+
+  const title = renderTemplateString(titleTemplate, titleProp || jsonLD?.seo?.title || "");
+  const description = renderTemplateString(
+    descriptionTemplate,
+    descriptionProp || jsonLD?.seo?.description || "",
+  );
+
+  const image = jsonLD?.post?.seo?.image || jsonLD?.seo?.image || jsonLD?.post?.image;
+  const { canonicalBaseUrl, publisher } = getBlogConfig();
+  const requestUrl = req?.url ?? canonicalBaseUrl ?? "http://localhost/";
+  // Configured canonicals may be relative; resolve against the request URL
+  const canonical = jsonLD?.seo?.canonical
+    ? withCanonicalBase(new URL(jsonLD.seo.canonical, requestUrl).href, canonicalBaseUrl)
+    : undefined;
+  const noIndexing = !jsonLD || jsonLD.seo?.noIndexing;
+
+  const pageUrl = canonical ?? withCanonicalBase(requestUrl, canonicalBaseUrl);
+  const jsonLDs = jsonLD?.post
+    ? [
+        toBlogPosting(jsonLD.post, pageUrl, publisher),
+        toBreadcrumbList(pageUrl, {
+          currentName: jsonLD.post.title,
+          // The ancestor chain, so every category segment of the canonical path
+          // resolves to its real name instead of a humanized slug.
+          categories: jsonLD.categories ?? jsonLD.post.categories,
+        }),
+      ]
+    : [];
+
+  return {
+    ...seoSiteProps,
+    title,
+    description,
+    image,
+    canonical,
+    noIndexing,
+    jsonLDs,
+  };
+}
+
+function Section(props: Props): SEOSection {
+  return <SeoComponent {...props} />;
+}
+
+export default Section;

package/src/sections/Seo/SeoBlogPostListing.tsx

@@ -0,0 +1,80 @@
+import SeoComponent, {
+  renderTemplateString,
+  type SEOSection,
+} from "@decocms/apps-website/components/Seo";
+import { type BlogSeoDefaults, getBlogConfig } from "../../client";
+import type { BlogPostListingPage } from "../../types";
+import {
+  toBlogPosting,
+  toBreadcrumbList,
+  toOrganization,
+  withCanonicalBase,
+} from "../../utils/jsonLD";
+
+export type Props = {
+  /** @title Data Source */
+  jsonLD: BlogPostListingPage | null;
+  /** @title Title Override */
+  title?: string;
+  /** @title Description Override */
+  description?: string;
+};
+
+/** @title Blog Post listing */
+export function loader(props: Props, req?: Request, seo?: BlogSeoDefaults) {
+  const rawSeo: BlogSeoDefaults = seo ?? getBlogConfig().seo ?? {};
+  const titleTemplate = typeof rawSeo.titleTemplate === "string" ? rawSeo.titleTemplate : "%s";
+  const descriptionTemplate =
+    typeof rawSeo.descriptionTemplate === "string" ? rawSeo.descriptionTemplate : "%s";
+  const { titleTemplate: _tt, descriptionTemplate: _dt, ...seoSiteProps } = rawSeo;
+
+  const { title: titleProp, description: descriptionProp, jsonLD } = props;
+
+  const title = renderTemplateString(titleTemplate, titleProp || jsonLD?.seo?.title || "");
+  const description = renderTemplateString(
+    descriptionTemplate,
+    descriptionProp || jsonLD?.seo?.description || "",
+  );
+
+  const { canonicalBaseUrl, publisher } = getBlogConfig();
+  const requestUrl = req?.url ?? canonicalBaseUrl ?? "http://localhost/";
+  // Configured canonicals may be relative; resolve against the request URL
+  const canonical = jsonLD?.seo?.canonical
+    ? withCanonicalBase(new URL(jsonLD.seo.canonical, requestUrl).href, canonicalBaseUrl)
+    : undefined;
+  const noIndexing = !jsonLD || jsonLD.seo?.noIndexing;
+
+  const url = canonical ?? withCanonicalBase(requestUrl, canonicalBaseUrl);
+  const jsonLDs = jsonLD
+    ? [
+        {
+          "@type": "Blog" as const,
+          ...(title ? { name: title } : {}),
+          ...(description ? { description } : {}),
+          url,
+          mainEntityOfPage: { "@type": "WebPage" as const, "@id": url },
+          ...(publisher?.name ? { publisher: toOrganization(publisher) } : {}),
+          blogPost: jsonLD.posts?.map((post) => toBlogPosting(post)) ?? [],
+        },
+        toBreadcrumbList(url, {
+          currentName: jsonLD.category?.name || title || undefined,
+          categories: jsonLD.categories ?? undefined,
+        }),
+      ]
+    : [];
+
+  return {
+    ...seoSiteProps,
+    title,
+    description,
+    canonical,
+    noIndexing,
+    jsonLDs,
+  };
+}
+
+function Section(props: Props): SEOSection {
+  return <SeoComponent {...props} />;
+}
+
+export default Section;

package/src/sections/Template.tsx

@@ -0,0 +1,106 @@
+import { getSyncComponent } from "@decocms/blocks/cms/client";
+import { getBlogConfig } from "../client";
+import { CSS } from "../static/css";
+import type { BlogPost, Section } from "../types";
+
+export type Props = {
+  post: BlogPost | null;
+};
+
+const iframeStyle: React.CSSProperties = {
+  width: "100%",
+  border: "none",
+  height: "100vh",
+};
+
+/**
+ * Renders one CMS-authored section reference (`{ __resolveType, ...props }`).
+ *
+ * The Deno app used `renderSection` from `website/pages/Page.tsx`; here the
+ * equivalent is the section registry's synchronous component lookup. An
+ * unregistered `__resolveType` renders nothing rather than throwing — this is a
+ * preview surface, and a single unknown section should not blank the whole post.
+ */
+function renderSection(section: Section, index: number) {
+  const resolveType: string | undefined = section?.__resolveType;
+  if (!resolveType) return null;
+
+  const Component =
+    getSyncComponent(resolveType) ?? getSyncComponent(resolveType.replace(/\.tsx?$/, ""));
+  if (!Component) return null;
+
+  const { __resolveType: _drop, ...props } = section;
+  return <Component key={`${resolveType}-${index}`} {...props} />;
+}
+
+/**
+ * CMS preview for a single blog post record.
+ *
+ * When the app is configured with a `pageSlug`/`categorySlug` route pattern the
+ * preview delegates to the real site route in an iframe, so what the editor sees
+ * is the actual page. Without one it falls back to rendering the record itself.
+ */
+export default function Template({ post }: Props) {
+  if (!post) return null;
+
+  const { pageSlug, categorySlug } = getBlogConfig();
+
+  const {
+    title = "Title",
+    content = "Content",
+    excerpt = "Excerpt",
+    date,
+    image,
+    mobileImage,
+    alt,
+    sections,
+    slug,
+    categories,
+  } = post;
+
+  // Only the leaf slug, not the ancestor path: resolving the chain needs
+  // `getRecordsByPath`, which pulls the server-only `@decocms/blocks/cms`
+  // entry into this client-reachable section. The preview iframe lands on the
+  // flat URL, which still renders.
+  const postCategorySlug = categories?.[0]?.slug ?? "";
+
+  if (pageSlug) {
+    const resolvedUrl = pageSlug.replace(/:category\*?/, postCategorySlug).replace(":slug", slug);
+
+    return <iframe src={resolvedUrl} style={iframeStyle} title={title} />;
+  }
+
+  if (categorySlug) {
+    const resolvedUrl = categorySlug.replace(/:category\*?/, postCategorySlug);
+
+    return <iframe src={resolvedUrl} style={iframeStyle} title={title} />;
+  }
+
+  return (
+    <>
+      <link href="/styles.css" rel="stylesheet" />
+      <style dangerouslySetInnerHTML={{ __html: CSS }} />
+      <div className="deco-post-preview">
+        <h1>{title}</h1>
+        <p className="text-xl">{excerpt}</p>
+        <p>
+          {date
+            ? new Date(`${date}T00:00:00`).toLocaleDateString("en-US", {
+                month: "long",
+                day: "numeric",
+                year: "numeric",
+              })
+            : ""}
+        </p>
+        {image && (
+          <picture>
+            {mobileImage && <source media="(max-width: 767px)" srcSet={mobileImage} />}
+            <img className="w-full rounded-2xl bg-cover" src={image} alt={alt ?? title} />
+          </picture>
+        )}
+        <div dangerouslySetInnerHTML={{ __html: content as string }} />
+        <div className="content-sections">{sections?.map(renderSection)}</div>
+      </div>
+    </>
+  );
+}

package/src/sections/blocks/BlockImage.tsx

@@ -0,0 +1,42 @@
+export type Props = {
+  url: string;
+  /** @description Optional mobile-optimized image. Served below 768px. */
+  mobileUrl?: string;
+  alt?: string;
+  caption?: string;
+  size?: "full" | "normal";
+  /** @description Loads eagerly with high fetch priority. Use for above-the-fold images. */
+  highPriority?: boolean;
+};
+
+export default function BlockImage({
+  url,
+  mobileUrl,
+  alt,
+  caption,
+  size,
+  highPriority = false,
+}: Props) {
+  const wrapperClass = size === "full" ? "my-8 -mx-[var(--gutter)]" : "my-8";
+
+  return (
+    <figure className={wrapperClass}>
+      <div className="overflow-hidden bg-alt">
+        <picture>
+          {mobileUrl && <source media="(max-width: 767px)" srcSet={mobileUrl} />}
+          <img
+            src={url}
+            alt={alt ?? ""}
+            {...(highPriority
+              ? { loading: "eager" as const, fetchPriority: "high" as const }
+              : { loading: "lazy" as const, decoding: "async" as const })}
+            className="w-full h-auto block"
+          />
+        </picture>
+      </div>
+      {caption && (
+        <figcaption className="text-sm text-tertiary text-center mt-3 italic">{caption}</figcaption>
+      )}
+    </figure>
+  );
+}

package/src/sections/blocks/Callout.tsx

@@ -0,0 +1,64 @@
+import { sanitizeHtml } from "../../utils/sanitizeHtml";
+
+const ICONS: Record<string, string> = {
+  info: "ℹ",
+  tip: "✓",
+  warning: "⚠",
+  product: "★",
+};
+
+type VariantStyle = { wrapper: string; header: string; icon: string };
+
+const VARIANT: Record<string, VariantStyle> = {
+  info: {
+    wrapper: "border-blue-500 bg-blue-50",
+    header: "text-blue-600",
+    icon: "text-blue-500",
+  },
+  tip: {
+    wrapper: "border-green-500 bg-green-50",
+    header: "text-green-700",
+    icon: "text-green-600",
+  },
+  warning: {
+    wrapper: "border-amber-400 bg-amber-50",
+    header: "text-amber-700",
+    icon: "text-amber-500",
+  },
+  product: {
+    wrapper: "border-accent bg-accent/[0.06]",
+    header: "text-accent",
+    icon: "text-accent",
+  },
+};
+
+export type Props = {
+  title?: string;
+  body?: string;
+  variant?: "info" | "tip" | "warning" | "product";
+};
+
+export default function Callout({ title, body, variant = "info" }: Props) {
+  const v = VARIANT[variant] ?? VARIANT.info;
+
+  return (
+    <div className={`py-5 px-7 border-l-[3px] rounded-brand-sm my-6 ${v.wrapper}`}>
+      {(title || variant) && (
+        <div className={`flex items-center gap-2 mb-2.5 ${v.header}`}>
+          <span className={`text-sm font-bold leading-none ${v.icon}`} aria-hidden="true">
+            {ICONS[variant] ?? "ℹ"}
+          </span>
+          {title && (
+            <strong className="text-xs font-semibold tracking-caps uppercase">{title}</strong>
+          )}
+        </div>
+      )}
+      {body && (
+        <div
+          className="text-[1.0625rem] leading-normal [&>*+*]:mt-2 [&_a]:text-accent [&_a]:underline [&_strong]:font-semibold [&_strong]:text-base"
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(body) }}
+        />
+      )}
+    </div>
+  );
+}