Render dev disaster bodies as markdown, not plain paragraphs (#41)

Disaster story bodies were split on blank lines into paragraphs and
drawn as plain text, so any markdown someone typed into the submit
form (bold, links, code fences) came through literally instead of
being rendered.

Comments already had a safe markdown renderer in src/lib/markdown.ts,
built from marked's token stream with an allow list of eight tags,
headings demoted to bold paragraphs, and code fences highlighted
through shiki. There was no reason for a disaster body to have a
second, weaker renderer, so it now goes through the same one.

shapeDisasters is async now, since rendering a body is. paragraphs()
is gone; renderBody() takes its place and calls renderComment.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Author: michaeljolley

src/lib/disaster-rows.ts

@@ -15,13 +15,16 @@
   function of the network. What is still unexecuted after this is the query itself and the
   shape Supabase returns, which genuinely does need the project ref.
 
-  Nothing is imported here but types, deliberately. disasters.ts has top level await and
-  imports ./supabase, which is a directory, so importing it from a test fails before any
-  assertion runs. Severity ids arrive as an argument rather than from ../config/site for
-  the same reason, and it makes the drift they guard against directly testable.
+  Nothing is imported here but types and ./markdown, deliberately. disasters.ts has top
+  level await and imports ./supabase, which is a directory, so importing it from a test
+  fails before any assertion runs. Severity ids arrive as an argument rather than from
+  ../config/site for the same reason, and it makes the drift they guard against directly
+  testable. ./markdown imports shiki and marked, neither of which touches a database, so
+  it is safe to pull into a test the way ./supabase is not.
 */
 
 import type { SeverityId } from '../config/site';
+import { renderComment } from './markdown.ts';
 
 /**
  * Who told a story, and what the byline is allowed to say about them.
@@ -58,8 +61,8 @@ export interface Disaster {
   date: Date;
   /** When Michael put this on the front page, or null. A real act, not a side effect. */
   featuredAt: Date | null;
-  /** Story paragraphs. Plain prose, no markup. */
-  body: string[];
+  /** The story body, rendered from markdown through the same allow list comments use. */
+  body: string;
 }
 
 export interface DisasterRow {
@@ -83,17 +86,17 @@ export interface ProfileRow {
 }
 
 /**
- * Prose as typed, split into paragraphs.
+ * A story body, rendered from markdown the same way a comment is.
  *
- * The column is one text field because that is what somebody typed into one textarea.
- * Blank lines are where they chose to break it. A story with no blank lines is one
- * paragraph, which is a real way to write a short one and not a defect to repair.
+ * The column is one text field because that is what somebody typed into one textarea, and
+ * renderComment already turns blank lines into paragraphs on its own, so nothing here has
+ * to split anything first. Routing it through the comment renderer rather than a second
+ * one means a disaster body gets the same allow list, the same highlighted code fences,
+ * and the same demoted headings a comment gets, instead of a second surface that has to be
+ * kept in step with the first by hand.
  */
-export function paragraphs(body: string): string[] {
-  return body
-    .split(/\n\s*\n/)
-    .map((p) => p.trim())
-    .filter(Boolean);
+export async function renderBody(body: string): Promise<string> {
+  return renderComment(body);
 }
 
 /**
@@ -158,7 +161,7 @@ export interface ShapeOptions {
 }
 
 /** Rows to stories, newest first, with anything undrawable left out and reported. */
-export function shapeDisasters(rows: readonly DisasterRow[], tellers: Map<string, Teller>, opts: ShapeOptions): Disaster[] {
+export async function shapeDisasters(rows: readonly DisasterRow[], tellers: Map<string, Teller>, opts: ShapeOptions): Promise<Disaster[]> {
   const warn = opts.warn ?? console.warn;
   const out: Disaster[] = [];
 
@@ -207,7 +210,7 @@ export function shapeDisasters(rows: readonly DisasterRow[], tellers: Map<string
       replies: opts.repliesById.get(String(r.id)) ?? 0,
       date: new Date(r.published_at),
       featuredAt: r.featured_at ? new Date(r.featured_at) : null,
-      body: paragraphs(r.body)
+      body: await renderBody(r.body)
     });
   }
 

src/pages/dev-disasters/[slug].astro

@@ -89,9 +89,7 @@ const filed = d.date.toLocaleDateString('en-GB', {
           <p class="lede">{d.line}</p>
         </header>
 
-        <div class="prose dd-body">
-          {d.body.map((p) => <p>{p}</p>)}
-        </div>
+        <div class="prose dd-body" set:html={d.body} />
 
         <p class="notice dd-notice">
           Names and the company have been scrubbed. Stories are lightly edited for length

tests/disaster.rows.test.mjs

@@ -21,7 +21,6 @@ import assert from 'node:assert/strict';
 
 import {
   authorIdsToResolve,
-  paragraphs,
   shapeDisasters,
   tellerFor,
   tellersFromProfiles
@@ -43,9 +42,9 @@ const row = (over = {}) => ({
   ...over
 });
 
-const shape = (rows, tellers = new Map(), over = {}) => {
+const shape = async (rows, tellers = new Map(), over = {}) => {
   const warnings = [];
-  const out = shapeDisasters(rows, tellers, {
+  const out = await shapeDisasters(rows, tellers, {
     severityIds: SEVERITY_IDS,
     likesById: new Map(),
     repliesById: new Map(),
@@ -119,25 +118,25 @@ test('an anonymous story asks for no profile at all', () => {
   assert.deepEqual(ids, ['u2'], 'anonymous rows must not send their author id to the profiles query');
 });
 
-test('an unknown severity is left off the site and reported with its id', () => {
-  const { out, warnings } = shape([row({ id: 7, severity: 'catastrophe' })]);
+test('an unknown severity is left off the site and reported with its id', async () => {
+  const { out, warnings } = await shape([row({ id: 7, severity: 'catastrophe' })]);
 
   assert.equal(out.length, 0);
   assert.equal(warnings.length, 1);
   assert.match(warnings[0], /Dev disaster 7/, 'the warning does not name the row, so nobody can find it');
   assert.match(warnings[0], /catastrophe/);
 });
 
-test('an incomplete published row is left off rather than half drawn', () => {
+test('an incomplete published row is left off rather than half drawn', async () => {
   for (const missing of ['slug', 'title', 'line', 'body', 'published_at']) {
-    const { out, warnings } = shape([row({ [missing]: null })]);
+    const { out, warnings } = await shape([row({ [missing]: null })]);
     assert.equal(out.length, 0, `a row with no ${missing} was drawn anyway`);
     assert.match(warnings[0], /published but incomplete/);
   }
 });
 
-test('one bad row does not take the rest of the wall with it', () => {
-  const { out } = shape([
+test('one bad row does not take the rest of the wall with it', async () => {
+  const { out } = await shape([
     row({ id: 1, slug: 'good', published_at: '2026-07-01T00:00:00Z' }),
     row({ id: 2, severity: 'nonsense' }),
     row({ id: 3, slug: 'also-good', published_at: '2026-07-02T00:00:00Z' })
@@ -150,32 +149,27 @@ test('one bad row does not take the rest of the wall with it', () => {
   );
 });
 
-test('stories come back newest first whatever order the rows arrived in', () => {
-  const { out } = shape([
+test('stories come back newest first whatever order the rows arrived in', async () => {
+  const { out } = await shape([
     row({ id: 1, published_at: '2026-01-01T00:00:00Z' }),
     row({ id: 2, published_at: '2026-07-01T00:00:00Z' }),
     row({ id: 3, published_at: '2026-03-01T00:00:00Z' })
   ]);
   assert.deepEqual(out.map((d) => d.id), [2, 3, 1]);
 });
 
-test('a story with no blank lines is one paragraph, not a defect', () => {
-  assert.deepEqual(paragraphs('Just the one.'), ['Just the one.']);
-  assert.deepEqual(paragraphs('First.\n\nSecond.'), ['First.', 'Second.']);
-  assert.deepEqual(paragraphs('First.\n\n\n   \n\nSecond.'), ['First.', 'Second.']);
-  assert.deepEqual(paragraphs('  Padded.  '), ['Padded.']);
-  assert.deepEqual(paragraphs(''), [], 'an empty body should be no paragraphs rather than one empty one');
+test('a story body is rendered from markdown rather than left as plain paragraphs', async () => {
+  const { out } = await shape([row({ body: 'One **bold** paragraph.\n\nAnd a second one.' })]);
+  assert.equal(out[0].body, '<p>One <strong>bold</strong> paragraph.</p><p>And a second one.</p>');
 });
 
-test('a single newline is a line break inside a paragraph, not a new one', () => {
-  assert.deepEqual(
-    paragraphs('One line.\nStill the same paragraph.'),
-    ['One line.\nStill the same paragraph.']
-  );
+test('a heading in a story body is demoted the same way a heading in a comment is', async () => {
+  const { out } = await shape([row({ body: '# Not a page title' })]);
+  assert.equal(out[0].body, '<p><strong>Not a page title</strong></p>');
 });
 
-test('counts default to zero rather than undefined', () => {
-  const { out } = shape([row({ id: 42 })], new Map(), {
+test('counts default to zero rather than undefined', async () => {
+  const { out } = await shape([row({ id: 42 })], new Map(), {
     likesById: new Map([['42', 11]]),
     repliesById: new Map()
   });
@@ -184,17 +178,17 @@ test('counts default to zero rather than undefined', () => {
   assert.equal(out[0].replies, 0, 'a story nobody has replied to must read zero, not undefined');
 });
 
-test('the url is built from the slug and stays under dev-disasters', () => {
+test('the url is built from the slug and stays under dev-disasters', async () => {
   /*
     A disaster never belongs to a topic. If this ever starts reading a topic field, the
     whole URL scheme decision has been undone somewhere upstream.
   */
-  const { out } = shape([row({ slug: 'the-time-i-dropped-prod' })]);
+  const { out } = await shape([row({ slug: 'the-time-i-dropped-prod' })]);
   assert.equal(out[0].url, '/dev-disasters/the-time-i-dropped-prod/');
 });
 
-test('featured_at becomes a date or null, never an invalid date', () => {
-  const { out } = shape([
+test('featured_at becomes a date or null, never an invalid date', async () => {
+  const { out } = await shape([
     row({ id: 1, featured_at: '2026-07-15T00:00:00Z' }),
     row({ id: 2, featured_at: null, published_at: '2026-06-01T00:00:00Z' })
   ]);
@@ -203,8 +197,8 @@ test('featured_at becomes a date or null, never an invalid date', () => {
   assert.equal(out.find((d) => d.id === 2).featuredAt, null);
 });
 
-test('an empty read produces an empty wall and no warnings', () => {
-  const { out, warnings } = shape([]);
+test('an empty read produces an empty wall and no warnings', async () => {
+  const { out, warnings } = await shape([]);
   assert.deepEqual(out, []);
   assert.deepEqual(warnings, []);
 });