emdash 0.21.0 → 0.23.0

package/src/components/Comments.astro

@@ -21,6 +21,10 @@ interface Props {
 	collection: string;
 	contentId: string;
 	threaded?: boolean;
+	/** Show a like/reaction button per comment (opt-in). */
+	reactions?: boolean;
+	/** Order of top-level comments: chronological (default) or Wilson-ranked. */
+	sort?: "oldest" | "best";
 	class?: string;
 }
 
@@ -28,13 +32,15 @@ const {
 	collection,
 	contentId,
 	threaded = false,
+	reactions = false,
+	sort = "oldest",
 	class: className,
 } = Astro.props;
 
 const collectionInfo = await getCollectionInfo(collection);
 const enabled = collectionInfo?.commentsEnabled ?? false;
 const { items, total } = enabled
-	? await getComments({ collection, contentId, threaded })
+	? await getComments({ collection, contentId, threaded, reactions, sort })
 	: { items: [], total: 0 };
 
 const URL_RE = /https?:\/\/[^\s<>"')\]]+/g;
@@ -62,15 +68,72 @@ function escapeHtml(text: string): string {
 function formatBody(text: string): string {
 	return autoLinkUrls(escapeHtml(text));
 }
+
+// Progressive-enhancement script for reactions. Emitted verbatim (is:inline)
+// only when `reactions` is enabled, so non-reaction pages ship zero extra JS.
+// Avoids template literals internally so it survives the outer backticks.
+const REACTION_SCRIPT = `
+(() => {
+  const sections = document.querySelectorAll('[data-ec-comments][data-ec-reactions]');
+  sections.forEach((section) => {
+    const collection = section.getAttribute('data-collection');
+    const contentId = section.getAttribute('data-content-id');
+    if (!collection || !contentId) return;
+    const base = '/_emdash/api/comments/' + encodeURIComponent(collection) + '/' + encodeURIComponent(contentId) + '/reactions';
+    const headers = { 'X-EmDash-Request': '1' };
+
+    fetch(base, { headers: headers })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((payload) => {
+        const viewer = payload && payload.data && payload.data.viewer;
+        if (!viewer) return;
+        Object.keys(viewer).forEach((commentId) => {
+          (viewer[commentId] || []).forEach((reaction) => {
+            const sel = '.ec-reaction[data-comment-id="' + commentId + '"][data-ec-reaction="' + reaction + '"]';
+            const btn = section.querySelector(sel);
+            if (btn) btn.setAttribute('aria-pressed', 'true');
+          });
+        });
+      })
+      .catch(() => {});
+
+    section.addEventListener('click', (event) => {
+      const btn = event.target.closest('.ec-reaction');
+      if (!btn || !section.contains(btn)) return;
+      const commentId = btn.getAttribute('data-comment-id');
+      const reaction = btn.getAttribute('data-ec-reaction');
+      if (!commentId || !reaction) return;
+      btn.disabled = true;
+      fetch(base, {
+        method: 'POST',
+        headers: Object.assign({ 'Content-Type': 'application/json' }, headers),
+        body: JSON.stringify({ commentId: commentId, reaction: reaction }),
+      })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((payload) => {
+          const data = payload && payload.data;
+          if (!data) return;
+          btn.setAttribute('aria-pressed', data.reacted ? 'true' : 'false');
+          const countEl = btn.querySelector('[data-ec-reaction-count]');
+          if (countEl) countEl.textContent = String((data.counts && data.counts[reaction]) || 0);
+        })
+        .catch(() => {})
+        .finally(() => { btn.disabled = false; });
+    });
+  });
+})();
+`;
 ---
 
 {
 	enabled && (
+		<Fragment>
 		<section
 			class:list={["ec-comments", className]}
 			data-ec-comments
 			data-collection={collection}
 			data-content-id={contentId}
+			{...(reactions ? { "data-ec-reactions": "" } : {})}
 		>
 			<h3 class="ec-comments-heading">
 				{total === 0
@@ -112,6 +175,25 @@ function formatBody(text: string): string {
 									class="ec-comment-body"
 									set:html={formatBody(comment.body)}
 								/>
+								{reactions && (
+									<div class="ec-comment-actions">
+										<button
+											type="button"
+											class="ec-reaction"
+											data-ec-reaction="like"
+											data-comment-id={comment.id}
+											aria-pressed="false"
+										>
+											<span class="ec-reaction-icon" aria-hidden="true">
+												&#x2661;
+											</span>
+											<span class="ec-reaction-label">Like</span>
+											<span class="ec-reaction-count" data-ec-reaction-count>
+												{comment.reactions?.like ?? 0}
+											</span>
+										</button>
+									</div>
+								)}
 								{threaded && comment.replies && comment.replies.length > 0 && (
 									<ol class="ec-comment-replies">
 										{comment.replies.map((reply: PublicComment) => (
@@ -153,6 +235,21 @@ function formatBody(text: string): string {
 														class="ec-comment-body"
 														set:html={formatBody(reply.body)}
 													/>
+													{reactions && (
+														<div class="ec-comment-actions">
+															<button
+																type="button"
+																class="ec-reaction"
+																data-ec-reaction="like"
+																data-comment-id={reply.id}
+																aria-pressed="false"
+															>
+																<span class="ec-reaction-icon" aria-hidden="true">&#x2661;</span>
+																<span class="ec-reaction-label">Like</span>
+																<span class="ec-reaction-count" data-ec-reaction-count>{reply.reactions?.like ?? 0}</span>
+															</button>
+														</div>
+													)}
 												</article>
 											</li>
 										))}
@@ -164,6 +261,8 @@ function formatBody(text: string): string {
 				</ol>
 			)}
 		</section>
+		{reactions && <script is:inline set:html={REACTION_SCRIPT} />}
+		</Fragment>
 	)
 }
 
@@ -229,4 +328,40 @@ function formatBody(text: string): string {
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
+
+	.ec-comment-actions {
+		margin-top: 0.5rem;
+	}
+
+	.ec-reaction {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		font: inherit;
+		font-size: 0.875em;
+		color: inherit;
+		background: none;
+		border: var(--ec-comment-border);
+		border-radius: 999px;
+		padding: 0.15rem 0.6rem;
+		cursor: pointer;
+	}
+
+	.ec-reaction[aria-pressed="true"] {
+		border-color: currentColor;
+		font-weight: 600;
+	}
+
+	.ec-reaction[aria-pressed="true"] .ec-reaction-icon {
+		color: #e0245e;
+	}
+
+	.ec-reaction:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.ec-reaction-count {
+		font-variant-numeric: tabular-nums;
+	}
 </style>

package/src/components/EmDashMedia.astro

@@ -158,9 +158,8 @@ const finalAlt = alt ?? (embed?.type === "image" ? embed.alt : undefined) ?? med
 	</audio>
 )}
 
+{/* Custom component embeds (Mux player, etc.) require dynamic import. Placeholder until that lands. */}
 {embed?.type === "component" && (
-	<!-- Custom component embeds (Mux player, etc.) require dynamic import -->
-	<!-- For now, show a placeholder - full implementation TBD -->
 	<div class="emdash-media-component" data-package={embed.package} data-export={embed.export}>
 		<p>Custom media component: {embed.package}</p>
 	</div>

package/src/components/Image.astro

@@ -38,6 +38,8 @@ export interface Props {
 		displayWidth?: number;
 		/** Display height for this instance (overrides original) */
 		displayHeight?: number;
+		/** Alignment for this image instance (e.g. from a WordPress import) */
+		alignment?: "left" | "center" | "right" | "wide" | "full";
 	};
 }
 
@@ -63,7 +65,7 @@ if (!node?.asset) {
 	return null;
 }
 
-const { asset, alt = "", caption, width, height, displayWidth, displayHeight } = node;
+const { asset, alt = "", caption, width, height, displayWidth, displayHeight, alignment } = node;
 
 // Calculate aspect ratio from original dimensions
 const aspectRatio = width && height ? width / height : undefined;
@@ -168,7 +170,7 @@ const baseStyle = aspectRatio
 const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseStyle;
 ---
 
-<figure class="emdash-image">
+<figure class:list={["emdash-image", alignment && `emdash-image--align-${alignment}`]}>
 	<img
 		src={src}
 		srcset={srcset}
@@ -197,4 +199,36 @@ const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseSty
 		margin-top: 0.5rem;
 		text-align: center;
 	}
+	/* Alignment (WordPress-style). Floats wrap surrounding text; wide/full span the column. */
+	.emdash-image--align-left,
+	.emdash-image--align-right {
+		width: fit-content;
+		max-width: 50%;
+	}
+	.emdash-image--align-left {
+		float: left;
+		margin: 0 1.5rem 1rem 0;
+	}
+	.emdash-image--align-right {
+		float: right;
+		margin: 0 0 1rem 1.5rem;
+	}
+	.emdash-image--align-center {
+		width: fit-content;
+		margin-inline: auto;
+	}
+	.emdash-image--align-wide,
+	.emdash-image--align-full {
+		width: 100%;
+	}
+	/* On narrow screens, un-float left/right so the image is not cramped beside text. */
+	@media (max-width: 640px) {
+		.emdash-image--align-left,
+		.emdash-image--align-right {
+			float: none;
+			width: 100%;
+			max-width: 100%;
+			margin-inline: 0;
+		}
+	}
 </style>

package/src/components/InlinePortableTextEditor.tsx

@@ -51,6 +51,7 @@ interface PTTextBlock {
 	level?: number;
 	children: PTSpan[];
 	markDefs?: PTMarkDef[];
+	textAlign?: "left" | "center" | "right" | "justify";
 }
 
 type PTBlock = PTTextBlock | { _type: string; _key: string; [key: string]: unknown };
@@ -119,12 +120,15 @@ function convertPMNode(node: PMNode): PTBlock | PTBlock[] | null {
 		case "paragraph": {
 			const { children, markDefs } = convertInline(node.content || []);
 			if (children.length === 0) return null;
+			const ta = node.attrs?.textAlign;
+			const textAlign = ta === "center" || ta === "right" || ta === "justify" ? ta : undefined;
 			return {
 				_type: "block",
 				_key: k(),
 				style: "normal",
 				children,
 				markDefs: markDefs.length > 0 ? markDefs : undefined,
+				...(textAlign ? { textAlign } : {}),
 			};
 		}
 		case "heading": {
@@ -140,12 +144,15 @@ function convertPMNode(node: PMNode): PTBlock | PTBlock[] | null {
 				6: "h6",
 			};
 			const headingStyle = headingStyles[level] ?? "h1";
+			const ta = node.attrs?.textAlign;
+			const textAlign = ta === "center" || ta === "right" || ta === "justify" ? ta : undefined;
 			return {
 				_type: "block",
 				_key: k(),
 				style: headingStyle,
 				children,
 				markDefs: markDefs.length > 0 ? markDefs : undefined,
+				...(textAlign ? { textAlign } : {}),
 			};
 		}
 		case "bulletList":
@@ -361,7 +368,7 @@ function portableTextToPM(blocks: PTBlock[]): JSONContent {
 
 function convertPTBlock(block: PTBlock): JSONContent | null {
 	if (isPTTextBlock(block)) {
-		const { style = "normal", children, markDefs = [] } = block;
+		const { style = "normal", children, markDefs = [], textAlign } = block;
 		const pmContent = convertPTSpans(children, markDefs);
 
 		if (style === "blockquote") {
@@ -379,12 +386,13 @@ function convertPTBlock(block: PTBlock): JSONContent | null {
 			const level = parseInt(style.substring(1), 10);
 			return {
 				type: "heading",
-				attrs: { level },
+				attrs: { level, ...(textAlign ? { textAlign } : {}) },
 				content: pmContent.length > 0 ? pmContent : undefined,
 			};
 		}
 		return {
 			type: "paragraph",
+			attrs: textAlign ? { textAlign } : undefined,
 			content: pmContent.length > 0 ? pmContent : undefined,
 		};
 	}

package/src/components/index.ts

@@ -36,6 +36,7 @@ export { default as EmDashImage } from "./EmDashImage.astro";
 export { default as EmDashMedia } from "./EmDashMedia.astro";
 
 // Portable Text block type components
+export { default as Block } from "./Block.astro";
 export { default as Image } from "./Image.astro";
 export { default as Code } from "./Code.astro";
 export { default as Embed } from "./Embed.astro";
@@ -57,6 +58,7 @@ export { default as Underline } from "./marks/Underline.astro";
 export { default as StrikeThrough } from "./marks/StrikeThrough.astro";
 export { default as Link } from "./marks/Link.astro";
 
+import BlockComponent from "./Block.astro";
 import BreakComponent from "./Break.astro";
 import ButtonComponent from "./Button.astro";
 import ButtonsComponent from "./Buttons.astro";
@@ -77,11 +79,14 @@ import TableComponent from "./Table.astro";
  * Pre-configured components for EmDash Portable Text content
  *
  * Includes renderers for:
+ * - 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, table,
  *   button, buttons, cover, file, pullquote
  * - Marks: superscript, subscript, underline, strike-through, link
  */
 export const emdashComponents = {
+	block: BlockComponent,
 	type: {
 		image: ImageComponent,
 		code: CodeComponent,

package/src/components/portable-text-text-align.ts

@@ -0,0 +1,38 @@
+/**
+ * Maps a Portable Text block's `textAlign` to a WordPress-style class name
+ * (`has-text-align-{value}`) for public rendering. Used by the Portable Text
+ * `Block` override in `./Block.astro`.
+ *
+ * `left` is the document default and intentionally does not produce a class —
+ * this matches the converter's omit-on-default rule (see
+ * `src/content/converters/prosemirror-to-portable-text.ts`) so untouched
+ * content stays bytewise identical and renders without an extra class.
+ *
+ * Related: https://github.com/emdash-cms/emdash/issues/1201
+ */
+
+type AlignClassName = "has-text-align-center" | "has-text-align-right" | "has-text-align-justify";
+
+const ALIGN_CLASS_MAP: Record<string, AlignClassName> = {
+	center: "has-text-align-center",
+	right: "has-text-align-right",
+	justify: "has-text-align-justify",
+};
+
+/**
+ * Returns the CSS class for a textAlign value, or `undefined` when no class
+ * should be emitted (default left, missing, or unknown values).
+ *
+ * Allowlist-only by design: arbitrary strings are rejected so a hand-edited
+ * or imported Portable Text block cannot inject attacker-controlled class
+ * names into the rendered HTML.
+ */
+export function textAlignClassName(value: string | undefined): AlignClassName | undefined {
+	if (value === undefined) return undefined;
+	// `Object.hasOwn` (not `in`) so prototype keys like "toString" or
+	// "constructor" can't slip through as valid alignments.
+	if (Object.hasOwn(ALIGN_CLASS_MAP, value)) {
+		return ALIGN_CLASS_MAP[value];
+	}
+	return undefined;
+}

package/src/content/converters/portable-text-to-prosemirror.ts

@@ -164,7 +164,10 @@ function convertTextBlock(block: PortableTextTextBlock): ProseMirrorNode | null
 			const level = parseInt(style.substring(1), 10);
 			return {
 				type: "heading",
-				attrs: { level },
+				attrs: {
+					level,
+					...(block.textAlign ? { textAlign: block.textAlign } : {}),
+				},
 				content: content.length > 0 ? content : undefined,
 			};
 		}
@@ -184,6 +187,7 @@ function convertTextBlock(block: PortableTextTextBlock): ProseMirrorNode | null
 		default:
 			return {
 				type: "paragraph",
+				attrs: block.textAlign ? { textAlign: block.textAlign } : undefined,
 				content: content.length > 0 ? content : undefined,
 			};
 	}

package/src/content/converters/prosemirror-to-portable-text.ts

@@ -106,12 +106,16 @@ function convertParagraph(node: ProseMirrorNode): PortableTextTextBlock | null {
 		return null;
 	}
 
+	const ta = node.attrs?.textAlign;
+	const textAlign = ta === "center" || ta === "right" || ta === "justify" ? ta : undefined;
+
 	return {
 		_type: "block",
 		_key: generateKey(),
 		style: "normal",
 		children,
 		markDefs: markDefs.length > 0 ? markDefs : undefined,
+		...(textAlign ? { textAlign } : {}),
 	};
 }
 
@@ -147,12 +151,16 @@ function convertHeading(node: ProseMirrorNode): PortableTextTextBlock | null {
 		return null;
 	}
 
+	const ta = node.attrs?.textAlign;
+	const textAlign = ta === "center" || ta === "right" || ta === "justify" ? ta : undefined;
+
 	return {
 		_type: "block",
 		_key: generateKey(),
 		style,
 		children,
 		markDefs: markDefs.length > 0 ? markDefs : undefined,
+		...(textAlign ? { textAlign } : {}),
 	};
 }
 

package/src/content/converters/types.ts

@@ -43,6 +43,7 @@ export interface PortableTextTextBlock {
 	level?: number;
 	children: PortableTextSpan[];
 	markDefs?: PortableTextMarkDef[];
+	textAlign?: "left" | "center" | "right" | "justify";
 }
 
 /**

package/src/database/instrumentation.ts

@@ -33,6 +33,19 @@ export interface QueryRecorder {
 	route: string;
 	method: string;
 	phase: string;
+	/**
+	 * Set once the recorder has been emitted, so a flush is idempotent.
+	 * Without this, a fallback flush and the stream-end flush could both
+	 * fire and double-emit the events.
+	 */
+	flushed?: boolean;
+	/**
+	 * Set when the response body is wrapped for stream-end metrics. The
+	 * recorder is then flushed when the body finishes streaming (so it
+	 * captures queries issued by components during streaming) rather than
+	 * when middleware returns (headers ready, body not yet streamed).
+	 */
+	deferredFlush?: boolean;
 }
 
 export function createRecorder(route: string, method: string, phase: string): QueryRecorder {
@@ -60,9 +73,16 @@ export function recordEvent(
  * harness pipes the child's stdout, filters lines beginning with
  * QUERY_LOG_PREFIX, and writes them to its own file. Using stdout means
  * the sink works uniformly in Node and in workerd (which has no fs).
+ *
+ * Idempotent: the first call emits and marks the recorder flushed, later
+ * calls no-op. For streamed responses the flush is deferred to stream end
+ * (see wrapBodyForStreamMetrics) so it captures queries issued while the
+ * body is still rendering; bodyless responses fall back to a flush when
+ * middleware returns.
  */
 export function flushRecorder(rec: QueryRecorder): void {
-	if (rec.events.length === 0) return;
+	if (rec.flushed) return;
+	rec.flushed = true;
 	for (const e of rec.events) {
 		console.log(`${QUERY_LOG_PREFIX} ${JSON.stringify(e)}`);
 	}

package/src/database/migrations/044_comment_reactions.ts

@@ -0,0 +1,56 @@
+import type { Kysely } from "kysely";
+
+import { currentTimestamp } from "../dialect-helpers.js";
+
+/**
+ * Comment reactions (Tier 1 of the best-in-class comments RFC).
+ *
+ * One row per (comment, voter, reaction). Toggle semantics are enforced by the
+ * unique index — a voter either has a given reaction on a comment or doesn't.
+ * `voter_hash` is a salted SHA-256 of the visitor's IP (same primitive as
+ * `_emdash_comments.ip_hash`), so no cleartext identity is stored.
+ *
+ * Additive and backward-compatible: a new table, no change to existing schema.
+ */
+export async function up(db: Kysely<unknown>): Promise<void> {
+	await db.schema
+		.createTable("_emdash_comment_reactions")
+		.ifNotExists()
+		.addColumn("id", "text", (col) => col.primaryKey())
+		.addColumn("comment_id", "text", (col) =>
+			col.notNull().references("_emdash_comments.id").onDelete("cascade"),
+		)
+		.addColumn("reaction", "text", (col) => col.notNull().defaultTo("like"))
+		.addColumn("voter_hash", "text", (col) => col.notNull())
+		.addColumn("created_at", "text", (col) => col.defaultTo(currentTimestamp(db)))
+		.execute();
+
+	// One reaction of a given type per voter per comment (toggle semantics).
+	await db.schema
+		.createIndex("idx_comment_reactions_unique")
+		.ifNotExists()
+		.on("_emdash_comment_reactions")
+		.columns(["comment_id", "voter_hash", "reaction"])
+		.unique()
+		.execute();
+
+	// Aggregate counts per comment (GROUP BY comment_id, reaction).
+	await db.schema
+		.createIndex("idx_comment_reactions_comment")
+		.ifNotExists()
+		.on("_emdash_comment_reactions")
+		.column("comment_id")
+		.execute();
+
+	// Per-voter rate limiting (recent reactions by a voter).
+	await db.schema
+		.createIndex("idx_comment_reactions_voter")
+		.ifNotExists()
+		.on("_emdash_comment_reactions")
+		.columns(["voter_hash", "created_at"])
+		.execute();
+}
+
+export async function down(db: Kysely<unknown>): Promise<void> {
+	await db.schema.dropTable("_emdash_comment_reactions").execute();
+}

package/src/database/migrations/runner.ts

@@ -45,6 +45,7 @@ import * as m040 from "./040_byline_i18n.js";
 import * as m041 from "./041_content_locale_list_index.js";
 import * as m042 from "./042_byline_fields.js";
 import * as m043 from "./043_content_references.js";
+import * as m044 from "./044_comment_reactions.js";
 
 const MIGRATIONS: Readonly<Record<string, Migration>> = Object.freeze({
 	"001_initial": m001,
@@ -89,6 +90,7 @@ const MIGRATIONS: Readonly<Record<string, Migration>> = Object.freeze({
 	"041_content_locale_list_index": m041,
 	"042_byline_fields": m042,
 	"043_content_references": m043,
+	"044_comment_reactions": m044,
 });
 
 /** Total number of registered migrations. Exported for use in tests. */