Enables markdown rendering for replies.

content/replies/1714906247110.jf2.json

@@ -1,7 +1,7 @@
 {
   "type": "entry",
   "in-reply-to": "https://adactio.com/journal/21104",
-  "content": "If you want to avoid using a nonce value, the other way to go about it is to hash the resource and put that in the CSP header. I blogged about the interaction between CSP and import maps (which must be inline), and caching and it turns out to work really well: https://qubyte.codes/blog/progressively-enhanced-caching-of-javascript-modules-without-bundling-using-import-maps",
+  "content": "If you want to avoid using a nonce value, the other way to go about it is to hash the resource and put that in the CSP header. [I blogged about the interaction between CSP and import maps](https://qubyte.codes/blog/progressively-enhanced-caching-of-javascript-modules-without-bundling-using-import-maps) (which must be inline), and caching and it turns out to work really well.",
   "category": {},
   "mp-slug": "if-you-want-to-avoid-using",
   "name": "Adactio: Journal—Securing client-side JavaScript",

lib/load-reply-files.js

@@ -1,6 +1,7 @@
 // @ts-check
 
 import { readdir, readFile } from 'node:fs/promises';
+import render from './render.js';
 import handlebars from 'handlebars';
 import getTimezone from './get-timezone.js';
 import Page from './page.js';
@@ -46,20 +47,21 @@ class ReplyPage extends Page {
 
 export default async function loadReplyFiles({ baseUrl, dir }) {
   const filenames = await readdir(dir);
-  const notes = await Promise.all(filenames.filter(fn => fn.endsWith('.json')).map(async filename => {
-    const note = JSON.parse(await readFile(new URL(filename, dir), 'utf8'));
-    const timezone = getTimezone(note.location?.latitude, note.location?.longitude);
+  const replies = await Promise.all(filenames.filter(fn => fn.endsWith('.json')).map(async filename => {
+    const reply = JSON.parse(await readFile(new URL(filename, dir), 'utf8'));
+    const content = render(reply.content);
+    const timezone = getTimezone(reply.location?.latitude, reply.location?.longitude);
 
     return new ReplyPage({
       baseUrl,
-      content: note.content,
-      date: new Date(note.published),
+      content,
+      date: new Date(reply.published),
       timezone,
-      inReplyTo: note['in-reply-to']
+      inReplyTo: reply['in-reply-to']
     });
   }));
 
-  notes.sort((a, b) => b.timestamp - a.timestamp);
+  replies.sort((a, b) => b.timestamp - a.timestamp);
 
-  return notes;
+  return replies;
 }

lib/render.js

@@ -320,7 +320,7 @@ marked.use(
  * @param {Map<string, { width: number, height: number }>} imagesMap
  * @returns {string}
  */
-export default function render(input, imagesMap) {
+export default function render(input, imagesMap = new Map()) {
   return marked(input, { async: false, imagesMap });
 }
 

src/templates/partials/reply.html.handlebars

@@ -3,6 +3,8 @@
   <header>
     <a class="u-url" href="{{canonical}}"><time datetime="{{datetime}}" class="dt-published">{{humanDateTime datetime timezone}}</time></a>
   </header>
-  <p class="e-content p-name">{{content}}</p>
+  <div class="e-content p-name">
+    {{{content}}}
+  </div>
   <p>In reply to: <a class="u-in-reply-to" href="{{inReplyTo}}">{{inReplyTo}}</a></p>
 </article>