emdash 1.1.0 → 1.2.0

package/src/components/InlinePortableTextEditor.tsx

@@ -16,6 +16,8 @@ import Focus from "@tiptap/extension-focus";
 import Image from "@tiptap/extension-image";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
 import TextAlign from "@tiptap/extension-text-align";
 import Typography from "@tiptap/extension-typography";
 import Underline from "@tiptap/extension-underline";
@@ -28,6 +30,12 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 
 import { resolveImageMedia } from "../content/converters/gallery.js";
+import { normalizeImageLink } from "../content/converters/image-link.js";
+import {
+	assertPortableTextMarksSupported,
+	assertProseMirrorMarksSupported,
+	UnsupportedPortableTextMarksError,
+} from "../content/converters/mark-safety.js";
 import {
 	deriveLegacyListId,
 	normalizeProseMirrorOrderedListJson,
@@ -35,6 +43,7 @@ import {
 	normalizeListStart,
 	readOrderedListMetadata,
 } from "../content/converters/numbered-list.js";
+import type { ProseMirrorDocument } from "../content/converters/types.js";
 import { computeThumbnailSize } from "../media/thumbnail.js";
 import { CodeMarkExtension } from "./code-mark.js";
 import { InlineCodeBlockExtension } from "./inline-code-block.js";
@@ -81,10 +90,15 @@ function isPTTableBlock(value: unknown): value is PTTableBlock {
 	return typeof value === "object" && value !== null && "_type" in value && value._type === "table";
 }
 
-/** Type guard for ProseMirror JSON document node */
-function isPMNode(value: unknown): value is PMNode {
+/** Type guard for a ProseMirror JSON document. */
+function isProseMirrorDocument(value: unknown): value is ProseMirrorDocument {
 	return (
-		typeof value === "object" && value !== null && "type" in value && typeof value.type === "string"
+		typeof value === "object" &&
+		value !== null &&
+		"type" in value &&
+		value.type === "doc" &&
+		"content" in value &&
+		Array.isArray(value.content)
 	);
 }
 
@@ -172,6 +186,18 @@ function attrDimension(
 	return value !== undefined && Number.isFinite(value) && value > 0 ? value : undefined;
 }
 
+type ImageAlignment = "left" | "center" | "right" | "wide" | "full";
+
+function imageAlignment(value: unknown): ImageAlignment | undefined {
+	return value === "left" ||
+		value === "center" ||
+		value === "right" ||
+		value === "wide" ||
+		value === "full"
+		? value
+		: undefined;
+}
+
 function canonicalMediaProviderId(provider: string | undefined): string | undefined {
 	return provider === "external-url" ? "external" : provider;
 }
@@ -300,6 +326,8 @@ function convertPMNode(node: PMNode, path: string): PTBlock | PTBlock[] | null {
 				...(dominantColor ? { dominantColor } : {}),
 				displayWidth: attrDimension(node.attrs, "displayWidth"),
 				displayHeight: attrDimension(node.attrs, "displayHeight"),
+				alignment: imageAlignment(node.attrs?.alignment),
+				link: normalizeImageLink(node.attrs?.link) ?? undefined,
 			};
 		}
 		case "horizontalRule":
@@ -448,6 +476,7 @@ function convertPMMark(
 
 function portableTextToPM(blocks: PTBlock[]): JSONContent {
 	if (!blocks || blocks.length === 0) return { type: "doc", content: [{ type: "paragraph" }] };
+	assertPortableTextMarksSupported(blocks);
 
 	const content: PMNode[] = [];
 	let i = 0;
@@ -592,6 +621,9 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 			dominantColor?: string;
 			displayWidth?: number;
 			displayHeight?: number;
+			alignment?: unknown;
+			/** `{ href, blank? }`, or a bare string on WordPress-imported content */
+			link?: unknown;
 		};
 		const meta = ib.asset?.meta;
 		const { asset, alt, width, height } = resolveImageMedia(ib);
@@ -623,6 +655,8 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 				dominantColor,
 				displayWidth: ib.displayWidth,
 				displayHeight: ib.displayHeight,
+				alignment: imageAlignment(ib.alignment) ?? null,
+				link: normalizeImageLink(ib.link),
 			},
 		};
 	}
@@ -811,6 +845,12 @@ function convertPTMarks(marks: string[], markDefs: Map<string, PTMarkDef>): Mark
 			case "code":
 				pm.push({ type: "code" });
 				break;
+			case "superscript":
+				pm.push({ type: "superscript" });
+				break;
+			case "subscript":
+				pm.push({ type: "subscript" });
+				break;
 			default: {
 				const md = markDefs.get(mark);
 				if (md && md._type === "link") {
@@ -947,6 +987,23 @@ function InlineBubbleMenu({ editor }: { editor: Editor }) {
 						<span style={{ fontFamily: "monospace", fontSize: "13px" }}>&lt;/&gt;</span>
 					</button>
 					<span className="emdash-bubble-divider" />
+					<button
+						type="button"
+						className={`emdash-bubble-btn ${editor.isActive("superscript") ? "emdash-bubble-btn--active" : ""}`}
+						onClick={() => editor.chain().focus().toggleSuperscript().run()}
+						title="Superscript"
+					>
+						<span style={{ fontSize: "13px" }}>x²</span>
+					</button>
+					<button
+						type="button"
+						className={`emdash-bubble-btn ${editor.isActive("subscript") ? "emdash-bubble-btn--active" : ""}`}
+						onClick={() => editor.chain().focus().toggleSubscript().run()}
+						title="Subscript"
+					>
+						<span style={{ fontSize: "13px" }}>x₂</span>
+					</button>
+					<span className="emdash-bubble-divider" />
 					<button
 						type="button"
 						className={`emdash-bubble-btn ${editor.isActive("link") ? "emdash-bubble-btn--active" : ""}`}
@@ -2168,16 +2225,33 @@ export function InlinePortableTextEditor({
 		);
 	});
 
-	const initialContent = React.useMemo(
-		() => portableTextToPM(value || []),
-		[], // Only compute once on mount
-	);
+	const [loadState] = React.useState<{
+		content: JSONContent;
+		error: UnsupportedPortableTextMarksError | null;
+	}>(() => {
+		try {
+			return { content: portableTextToPM(value || []), error: null };
+		} catch (error) {
+			if (error instanceof UnsupportedPortableTextMarksError) {
+				return {
+					content: { type: "doc", content: [{ type: "paragraph" }] },
+					error,
+				};
+			}
+			throw error;
+		}
+	});
+
+	const initialContent = loadState.content;
+	const loadError = loadState.error;
+	const [saveError, setSaveError] = React.useState<string | null>(null);
 
 	const getBlocks = React.useCallback((): PTBlock[] => {
 		const editor = editorRef.current;
 		if (!editor) return initialRef.current;
 		const json: unknown = editor.getJSON();
-		if (!isPMNode(json)) return initialRef.current;
+		if (!isProseMirrorDocument(json)) return initialRef.current;
+		assertProseMirrorMarksSupported(json);
 		return pmToPortableText(json);
 	}, []);
 
@@ -2186,14 +2260,21 @@ export function InlinePortableTextEditor({
 			// A pagehide flush must not be skipped: an in-flight blur save is
 			// cancelled by the navigation, so the keepalive request is the only
 			// one that can still land.
+			if (loadError) return;
 			if (savingRef.current && !options?.keepalive) return;
 
 			const doc = editorRef.current?.state.doc;
 			if (!doc || !savedDocRef.current || doc.eq(savedDocRef.current)) return;
-			const blocks = getBlocks();
 
 			savingRef.current = true;
+			let settle = () => {};
+			const done = new Promise<void>((resolve) => {
+				settle = () => resolve();
+			});
+			// The visual-editing toolbar holds Publish until `done` settles.
+			document.dispatchEvent(new CustomEvent("emdash:save-pending", { detail: { done } }));
 			try {
+				const blocks = getBlocks();
 				const res = await fetch(
 					`/_emdash/api/content/${encodeURIComponent(collection)}/${encodeURIComponent(entryId)}`,
 					{
@@ -2206,6 +2287,7 @@ export function InlinePortableTextEditor({
 				);
 
 				if (res.ok) {
+					setSaveError(null);
 					initialRef.current = blocks;
 					savedDocRef.current = doc;
 					document.dispatchEvent(new CustomEvent("emdash:save", { detail: { state: "saved" } }));
@@ -2215,17 +2297,24 @@ export function InlinePortableTextEditor({
 						}),
 					);
 				} else {
+					setSaveError(`Save failed: ${res.status}`);
 					document.dispatchEvent(new CustomEvent("emdash:save", { detail: { state: "error" } }));
 					console.error("Save failed:", res.status);
 				}
 			} catch (err) {
+				setSaveError(
+					err instanceof UnsupportedPortableTextMarksError
+						? `Save failed: unsupported formatting (${err.marks.join(", ")}).`
+						: "Save failed. Please try again.",
+				);
 				document.dispatchEvent(new CustomEvent("emdash:save", { detail: { state: "error" } }));
 				console.error("Save failed:", err);
 			} finally {
 				savingRef.current = false;
+				settle();
 			}
 		},
-		[collection, entryId, field, getBlocks],
+		[collection, entryId, field, getBlocks, loadError],
 	);
 
 	// Flush unsaved edits when the page goes away (browser back/forward,
@@ -2280,10 +2369,14 @@ export function InlinePortableTextEditor({
 						caption: { default: null },
 						blurhash: { default: null },
 						dominantColor: { default: null },
+						alignment: { default: null, rendered: false },
+						link: { default: null, rendered: false },
 					};
 				},
 			}),
 			Underline,
+			Subscript,
+			Superscript,
 			Link.configure({
 				openOnClick: false,
 				HTMLAttributes: { class: "underline text-blue-600 dark:text-blue-400" },
@@ -2344,20 +2437,17 @@ export function InlinePortableTextEditor({
 			if (!editor) return;
 			const src =
 				item.url || item.previewUrl || `/_emdash/api/media/file/${item.storageKey || item.id}`;
-			editor
-				.chain()
-				.focus()
-				.setImage({
-					src,
-					alt: item.alt || item.filename || "",
-					mediaId: item.id,
-					provider: canonicalMediaProviderId(item.provider) || "local",
-					width: item.width,
-					height: item.height,
-					blurhash: item.blurhash,
-					dominantColor: item.dominantColor,
-				})
-				.run();
+			const attrs = {
+				src,
+				alt: item.alt || item.filename || "",
+				mediaId: item.id,
+				provider: canonicalMediaProviderId(item.provider) || "local",
+				width: item.width,
+				height: item.height,
+				blurhash: item.blurhash,
+				dominantColor: item.dominantColor,
+			};
+			editor.chain().focus().setImage(attrs).run();
 			setMediaPickerOpen(false);
 			void save();
 		},
@@ -2384,8 +2474,22 @@ export function InlinePortableTextEditor({
 
 	return (
 		<div onBlur={handleBlur}>
-			<InlineBubbleMenu editor={editor} />
-			<EditorContent editor={editor} />
+			{loadError ? (
+				<div className="emdash-inline-editor-error" role="alert" dir="auto">
+					This field can’t be edited here because it contains unsupported Portable Text marks:{" "}
+					{loadError.marks.join(", ")}.
+				</div>
+			) : (
+				<>
+					<InlineBubbleMenu editor={editor} />
+					<EditorContent editor={editor} />
+				</>
+			)}
+			{saveError ? (
+				<div className="emdash-inline-editor-error" role="alert" dir="auto">
+					{saveError}
+				</div>
+			) : null}
 			{unsupportedFileGuidance ? (
 				<div
 					key={unsupportedFileGuidance.version}
@@ -2661,6 +2765,19 @@ export function InlinePortableTextEditor({
 					line-height: 1.4;
 					text-align: start;
 				}
+				.emdash-inline-editor-error {
+					margin-block-start: 0.75rem;
+					padding-block: 0.625rem;
+					padding-inline: 0.875rem;
+					border: 1px solid #fecaca;
+					border-radius: 0.5rem;
+					background: #fef2f2;
+					color: #991b1b;
+					font-size: 0.875rem;
+					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+					line-height: 1.4;
+					text-align: start;
+				}
 				.emdash-plugin-block-placeholder {
 					margin: 0.75rem 0;
 					padding: 0.625rem 0.875rem;
@@ -2678,6 +2795,11 @@ export function InlinePortableTextEditor({
 						background: #172554;
 						color: #dbeafe;
 					}
+					.emdash-inline-editor-error {
+						border-color: #991b1b;
+						background: #450a0a;
+						color: #fee2e2;
+					}
 					.emdash-plugin-block-placeholder {
 						border-color: #374151;
 						background: #111827;

package/src/components/Video.astro

@@ -0,0 +1,100 @@
+---
+/**
+ * Portable Text video block component
+ *
+ * Plays a Media Library video in the browser's own player, or a media
+ * provider's video from the provider's embed. An empty block, and a `video`
+ * block of another shape, which belongs to a plugin, render nothing.
+ */
+import { isPortableTextVideoBlock } from "../content/converters/video.js";
+import { getMediaProvider } from "../media/provider-loader.js";
+import type { VideoEmbed } from "../media/types.js";
+import { buildRenderMediaUrl } from "../media/url.js";
+
+export interface Props {
+	node: {
+		_type: "video";
+		_key: string;
+		asset?: { _ref: string; url?: string; provider?: string };
+		caption?: string;
+		width?: number;
+		height?: number;
+	};
+}
+
+const { node } = Astro.props;
+
+const asset = isPortableTextVideoBlock(node) ? node.asset : undefined;
+if (!asset) {
+	return null;
+}
+
+const { caption, width, height } = node;
+const providerId = asset.provider && asset.provider !== "local" ? asset.provider : undefined;
+
+let embed: VideoEmbed | undefined;
+if (providerId) {
+	try {
+		const provider = await getMediaProvider(providerId);
+		const result = await provider?.getEmbed(
+			{ provider: providerId, id: asset._ref, width, height },
+			{ width, height },
+		);
+		if (result?.type === "video" && (result.src || result.sources?.length)) embed = result;
+	} catch (error) {
+		console.warn(`Failed to get embed for video ${asset._ref}:`, error);
+	}
+} else {
+	// Only the file URL can play: the file route takes a storage key, not the
+	// media id in `_ref`.
+	const src = buildRenderMediaUrl(Astro.locals.emdash?.getPublicMediaUrl, { url: asset.url });
+	if (src) embed = { type: "video", src, width, height, controls: true, preload: "metadata" };
+}
+
+if (!embed) {
+	return null;
+}
+
+// Astro leaves `<` and `>` unescaped in attributes. Middleware that finds
+// `</body>` by searching the page's text could then match one in a URL.
+// Browsers percent-encode them in URLs anyway, so this changes no address.
+const url = (value: string | undefined) => value?.replaceAll("<", "%3C").replaceAll(">", "%3E");
+---
+
+<figure class="emdash-video">
+	<video
+		src={embed.sources?.length ? undefined : url(embed.src)}
+		poster={url(embed.poster)}
+		width={embed.width ?? width}
+		height={embed.height ?? height}
+		controls={embed.controls ?? true}
+		autoplay={embed.autoplay}
+		muted={embed.muted}
+		loop={embed.loop}
+		playsinline={embed.playsinline ?? true}
+		preload={embed.preload ?? "metadata"}
+		crossorigin={embed.crossorigin}
+	>
+		{embed.src && embed.sources?.length ? <source src={url(embed.src)} /> : null}
+		{embed.sources?.map((source) => <source src={url(source.src)} type={source.type} />)}
+	</video>
+	{caption && <figcaption>{caption}</figcaption>}
+</figure>
+
+<style>
+	.emdash-video {
+		margin: 1.5rem 0;
+	}
+	.emdash-video video {
+		display: block;
+		width: 100%;
+		height: auto;
+		max-height: 70vh;
+	}
+	.emdash-video figcaption {
+		font-size: 0.875rem;
+		color: var(--emdash-caption-color, var(--color-muted, #666));
+		margin-top: 0.5rem;
+		text-align: center;
+	}
+</style>

package/src/components/index.ts

@@ -51,6 +51,7 @@ export { default as Columns } from "./Columns.astro";
 export { default as Break } from "./Break.astro";
 export { default as HtmlBlock } from "./HtmlBlock.astro";
 export { default as Iframe } from "./Iframe.astro";
+export { default as Video } from "./Video.astro";
 export { default as Table } from "./Table.astro";
 export { default as Button } from "./Button.astro";
 export { default as Buttons } from "./Buttons.astro";
@@ -84,6 +85,7 @@ import { emdashMarkComponents } from "./marks.js";
 import OrderedListComponent from "./OrderedList.astro";
 import PullquoteComponent from "./Pullquote.astro";
 import TableComponent from "./Table.astro";
+import VideoComponent from "./Video.astro";
 
 /**
  * Pre-configured components for EmDash Portable Text content
@@ -92,7 +94,7 @@ import TableComponent from "./Table.astro";
  * - Block styles: paragraph, h1..h6, blockquote — with `textAlign` honoured
  *   as a WordPress-style `has-text-align-{value}` class (#1201)
  * - Block types: image, code, embed, gallery, columns, break, htmlBlock, iframe,
- *   table, button, buttons, cover, file, pullquote
+ *   video, table, button, buttons, cover, file, pullquote
  * - Marks: superscript, subscript, underline, strike-through, link
  */
 export const emdashComponents = {
@@ -110,6 +112,7 @@ export const emdashComponents = {
 		break: BreakComponent,
 		htmlBlock: HtmlBlockComponent,
 		iframe: IframeComponent,
+		video: VideoComponent,
 		table: TableComponent,
 		button: ButtonComponent,
 		buttons: ButtonsComponent,

package/src/components/inline-code-block.tsx

@@ -458,6 +458,14 @@ export const InlineCodeBlockExtension = CodeBlockLowlight.extend({
 
 		return {
 			...shortcuts,
+			"Mod-a": () => {
+				if (!selectionIsInCodeBlock()) return false;
+				const { $from } = this.editor.state.selection;
+				return this.editor.commands.setTextSelection({
+					from: $from.start(),
+					to: $from.end(),
+				});
+			},
 			Tab: (props) => (selectionIsInCodeBlock() ? (shortcuts.Tab?.(props) ?? false) : false),
 			"Shift-Tab": (props) =>
 				selectionIsInCodeBlock() ? (shortcuts["Shift-Tab"]?.(props) ?? false) : false,

package/src/components/webmcp-search.ts

@@ -10,9 +10,11 @@ export interface SiteSearchToolConfig {
 	routeMap: LiveSearchRouteMap;
 }
 
-interface ToolResult {
-	content: { type: "text"; text: string }[];
-	isError?: boolean;
+interface SiteSearchToolResult {
+	title: string;
+	url: string;
+	collection: string;
+	excerpt?: string;
 }
 
 interface WebMcpTool {
@@ -20,7 +22,11 @@ interface WebMcpTool {
 	description: string;
 	inputSchema: Record<string, unknown>;
 	annotations: { readOnlyHint: boolean; untrustedContentHint: boolean };
-	execute: (input: { query?: unknown; limit?: unknown }) => Promise<ToolResult>;
+	/**
+	 * WebMCP serializes the fulfilled value to JSON for the agent and reports only a
+	 * rejection as a failed call, so errors must throw rather than resolve.
+	 */
+	execute: (input: { query?: unknown; limit?: unknown }) => Promise<SiteSearchToolResult[]>;
 }
 
 export interface ModelContextLike {
@@ -53,10 +59,6 @@ function snippetToText(snippet: string): string {
 		.replaceAll("&amp;", "&");
 }
 
-function textResult(text: string, isError = false): ToolResult {
-	return { content: [{ type: "text", text }], ...(isError ? { isError } : {}) };
-}
-
 export function createSiteSearchTool(
 	config: SiteSearchToolConfig,
 	origin: string,
@@ -83,7 +85,7 @@ export function createSiteSearchTool(
 		annotations: { readOnlyHint: true, untrustedContentHint: true },
 		async execute(input) {
 			const query = typeof input.query === "string" ? input.query.trim() : "";
-			if (!query) return textResult("Provide a search query.", true);
+			if (!query) throw new Error("Provide a search query.");
 			const requested = typeof input.limit === "number" ? Math.floor(input.limit) : maxLimit;
 			const limit = Math.min(Math.max(requested, 1), maxLimit);
 
@@ -91,21 +93,15 @@ export function createSiteSearchTool(
 			if (config.collections) params.set("collections", config.collections);
 			if (config.locale) params.set("locale", config.locale);
 
-			let body: { data?: { items?: SearchApiResult[] } };
-			try {
-				const response = await fetchImpl(`${origin}/_emdash/api/search?${params}`);
-				if (!response.ok) return textResult(`Search failed (HTTP ${response.status}).`, true);
-				body = await response.json();
-			} catch {
-				return textResult("Search failed.", true);
-			}
-			const results = (body.data?.items ?? []).map((item) => ({
+			const response = await fetchImpl(`${origin}/_emdash/api/search?${params}`);
+			if (!response.ok) throw new Error(`Search failed (HTTP ${response.status}).`);
+			const body: { data?: { items?: SearchApiResult[] } } = await response.json();
+			return (body.data?.items ?? []).map((item) => ({
 				title: item.title ?? item.slug ?? item.id,
 				url: new URL(buildLiveSearchResultUrl(item, config.routeMap), origin).href,
 				collection: item.collection,
 				...(item.snippet ? { excerpt: snippetToText(item.snippet) } : {}),
 			}));
-			return textResult(JSON.stringify(results));
 		},
 	};
 }

package/src/components/widgets/RecentPosts.astro

@@ -1,47 +1,87 @@
 ---
 import { getEmDashCollection } from "../../query.js";
+import { getI18nConfig } from "../../i18n/config.js";
+import { getSiteSettings } from "../../settings/index.js";
+import { sanitizeHref } from "../../utils/url.js";
+import EmDashImage from "../EmDashImage.astro";
+import { buildLiveSearchResultUrl } from "../live-search-routing.js";
+import {
+	createPublishedDateFormatter,
+	isThumbnailImage,
+	toPublishedDate,
+} from "../../widgets/recent-posts.js";
 
 interface Props {
 	count?: number;
 	showThumbnails?: boolean;
 	showDate?: boolean;
+	/** URL template for post links, e.g. "/blog/:slug" (tokens: :collection, :id, :slug, :path) */
+	urlTemplate?: string;
 }
 
-const { count = 5, showThumbnails = false, showDate = true } = Astro.props;
+const { count = 5, showThumbnails = false, showDate = true, urlTemplate } = Astro.props;
 
-const { entries: posts } = await getEmDashCollection("posts", {
-	limit: count,
-	orderBy: { published_at: "desc" },
+const [{ entries: posts }, settings] = await Promise.all([
+	getEmDashCollection("posts", {
+		limit: count,
+		orderBy: { published_at: "desc" },
+	}),
+	showDate ? getSiteSettings() : undefined,
+]);
+
+const dateFormatter = createPublishedDateFormatter({
+	locale: Astro.currentLocale ?? getI18nConfig()?.defaultLocale,
+	timezone: settings?.timezone,
 });
 
-// Helper to get typed values from dynamic data
-function getString(data: Record<string, unknown>, key: string): string | undefined {
-	const val = data[key];
-	return typeof val === "string" ? val : undefined;
+function getTitle(data: Record<string, unknown>): string | undefined {
+	return typeof data.title === "string" ? data.title : undefined;
 }
 ---
 
 <ul class="widget-recent-posts">
 	{
 		posts.map((post) => {
-			const publishedAt = getString(post.data, "publishedAt");
-			const featuredImage = getString(post.data, "featured_image");
-			const title = getString(post.data, "title");
+			const title = getTitle(post.data);
+			const publishedAt = toPublishedDate(post.data.publishedAt);
+			const featuredImage = post.data.featured_image;
+			// Without a template, keep the widget's long-standing default:
+			// `post.id` is the loader's slug (or `locale/slug` with i18n
+			// prefixing), so the locale prefix is preserved. With a template,
+			// use the same token semantics as LiveSearch's routeMap — `:id`
+			// is the content ULID (`data.id`), `:slug` the bare slug.
+			const href = urlTemplate
+				? sanitizeHref(
+						buildLiveSearchResultUrl(
+							{
+								collection: "posts",
+								id: typeof post.data.id === "string" ? post.data.id : post.id,
+								slug: typeof post.data.slug === "string" ? post.data.slug : post.id,
+							},
+							{ posts: urlTemplate },
+						),
+					)
+				: `/posts/${post.id}`;
 			return (
 				<li>
-					{showThumbnails && featuredImage && (
-						<img
-							src={featuredImage}
+					{showThumbnails && isThumbnailImage(featuredImage) && (
+						<EmDashImage
+							image={featuredImage}
 							alt=""
+							width={96}
+							height={96}
 							class="widget-recent-posts__thumbnail"
 						/>
 					)}
-					<a href={`/posts/${post.id}`} class="widget-recent-posts__link">
+					<a href={href} class="widget-recent-posts__link">
 						{title}
 					</a>
 					{showDate && publishedAt && (
-						<time datetime={publishedAt} class="widget-recent-posts__date">
-							{new Date(publishedAt).toLocaleDateString()}
+						<time
+							datetime={publishedAt.toISOString()}
+							class="widget-recent-posts__date"
+						>
+							{dateFormatter.format(publishedAt)}
 						</time>
 					)}
 				</li>

package/src/content/converters/mark-safety.ts

@@ -1,4 +1,4 @@
-import type { PortableTextBlock, ProseMirrorDocument, ProseMirrorNode } from "./types.js";
+import type { ProseMirrorDocument, ProseMirrorNode } from "./types.js";
 
 const SUPPORTED_PORTABLE_TEXT_DECORATORS = new Set([
 	"strong",
@@ -93,7 +93,7 @@ export class UnsupportedPortableTextMarksError extends Error {
 	}
 }
 
-export function findUnsupportedPortableTextMarks(blocks: PortableTextBlock[]): string[] {
+export function findUnsupportedPortableTextMarks(blocks: readonly { _type: string }[]): string[] {
 	const unsupported = new Set<string>();
 	for (const block of blocks) {
 		if (block._type === "block" || block._type === "table") {
@@ -103,7 +103,7 @@ export function findUnsupportedPortableTextMarks(blocks: PortableTextBlock[]): s
 	return [...unsupported].toSorted();
 }
 
-export function assertPortableTextMarksSupported(blocks: PortableTextBlock[]): void {
+export function assertPortableTextMarksSupported(blocks: readonly { _type: string }[]): void {
 	const unsupported = findUnsupportedPortableTextMarks(blocks);
 	if (unsupported.length > 0) {
 		throw new UnsupportedPortableTextMarksError(unsupported);