@decocms/apps-blog 7.52.0 → 7.53.0

package/src/loaders/extensions/BlogpostListing/ratings.ts

@@ -0,0 +1,38 @@
+import { getRatings } from "../../../core/records";
+import type { BlogPostListingPage, Ignore } from "../../../types";
+import type { ExtensionOf } from "../types";
+
+export interface Props {
+  /**
+   * @description Ignore ratings in the aggregateRating calc
+   */
+  ignoreRatings?: Ignore;
+  /**
+   * @description Return only aggregate rating object
+   */
+  onlyAggregate?: boolean;
+}
+
+/**
+ * @title ExtensionOf BlogPostListing: Ratings
+ * @description It can harm performance. Use wisely
+ */
+export default function ratingsExt({
+  ignoreRatings,
+  onlyAggregate,
+}: Props): ExtensionOf<BlogPostListingPage | null> {
+  return async (blogpostListingPage: BlogPostListingPage | null) => {
+    if (!blogpostListingPage) {
+      return null;
+    }
+
+    const posts = await Promise.all(
+      blogpostListingPage.posts.map(async (post) => {
+        const ratings = await getRatings({ post, onlyAggregate, ignoreRatings });
+        return { ...post, ...ratings };
+      }),
+    );
+
+    return { ...blogpostListingPage, posts };
+  };
+}

package/src/loaders/extensions/BlogpostListing/reviews.ts

@@ -0,0 +1,38 @@
+import { getReviews } from "../../../core/records";
+import type { BlogPostListingPage, Ignore } from "../../../types";
+import type { ExtensionOf } from "../types";
+
+export interface Props {
+  /**
+   * @description Ignore specific reviews
+   */
+  ignoreReviews?: Ignore;
+  /**
+   * @description Order By
+   */
+  orderBy?: "date_asc" | "date_desc";
+}
+
+/**
+ * @title ExtensionOf BlogPostListing: Reviews
+ * @description It can harm performance. Use wisely
+ */
+export default function reviewsExt({
+  ignoreReviews,
+  orderBy,
+}: Props): ExtensionOf<BlogPostListingPage | null> {
+  return async (blogpostListingPage: BlogPostListingPage | null) => {
+    if (!blogpostListingPage) {
+      return null;
+    }
+
+    const posts = await Promise.all(
+      blogpostListingPage.posts.map(async (post) => {
+        const reviews = await getReviews({ post, ignoreReviews, orderBy });
+        return { ...post, ...reviews };
+      }),
+    );
+
+    return { ...blogpostListingPage, posts };
+  };
+}

package/src/loaders/extensions/BlogpostPage/ratings.ts

@@ -0,0 +1,24 @@
+import { getRatings } from "../../../core/records";
+import type { BlogPostPage, Ignore } from "../../../types";
+import type { ExtensionOf } from "../types";
+
+export interface Props {
+  /**
+   * @description Ignore ratings in the aggregateRating calc
+   */
+  ignoreRatings?: Ignore;
+}
+
+/**
+ * @title ExtensionOf BlogPostPage: Ratings
+ * @description It can harm performance. Use wisely
+ */
+export default function ratingsExt({ ignoreRatings }: Props): ExtensionOf<BlogPostPage | null> {
+  return async (blogpostPage: BlogPostPage | null) => {
+    if (!blogpostPage) {
+      return null;
+    }
+    const post = await getRatings({ post: blogpostPage.post, ignoreRatings });
+    return { ...blogpostPage, post };
+  };
+}

package/src/loaders/extensions/BlogpostPage/reviews.ts

@@ -0,0 +1,31 @@
+import { getReviews } from "../../../core/records";
+import type { BlogPostPage, Ignore } from "../../../types";
+import type { ExtensionOf } from "../types";
+
+export interface Props {
+  /**
+   * @description Ignore specific reviews
+   */
+  ignoreReviews?: Ignore;
+  /**
+   * @description Order By
+   */
+  orderBy?: "date_asc" | "date_desc";
+}
+
+/**
+ * @title ExtensionOf BlogPostPage: Reviews
+ * @description It can harm performance. Use wisely
+ */
+export default function reviewsExt({
+  ignoreReviews,
+  orderBy,
+}: Props): ExtensionOf<BlogPostPage | null> {
+  return async (blogpostPage: BlogPostPage | null) => {
+    if (!blogpostPage) {
+      return null;
+    }
+    const post = await getReviews({ post: blogpostPage.post, ignoreReviews, orderBy });
+    return { ...blogpostPage, post };
+  };
+}

package/src/loaders/extensions/types.ts

@@ -0,0 +1,15 @@
+/**
+ * An enrichment step applied to a loader's already-resolved output.
+ *
+ * In `deco-cx/apps` this type comes from `website/loaders/extension.ts`, which
+ * also ships the generic `extension` loader that composes a list of these over
+ * one data source. That loader has not been ported into
+ * `@decocms/apps-website`, so the type is declared here rather than imported —
+ * the *composition* plumbing is a website-app concern and porting it into
+ * apps-blog would put it in the wrong package (see this package's README for
+ * the tracked gap).
+ *
+ * Each extension below is therefore usable directly: call it to obtain the
+ * enrichment function, then apply that to the loader result.
+ */
+export type ExtensionOf<T> = (data: T) => Promise<T>;

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,81 @@ 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
+   * @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 +102,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,75 @@
+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,
+          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,96 @@
+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,
+    alt,
+    sections,
+    slug,
+    categories,
+  } = post;
+
+  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 && <img className="w-full rounded-2xl bg-cover" src={image} alt={alt ?? title} />}
+        <div dangerouslySetInnerHTML={{ __html: content as string }} />
+        <div className="content-sections">{sections?.map(renderSection)}</div>
+      </div>
+    </>
+  );
+}