Merge pull request #7 from ethmarks/move-marked-to-server-side

refactor to render blips with Marked exclusively on server side

Author: ethmarks

src/lib/components/blip.svelte

@@ -1,20 +1,12 @@
 <script>
-    import { marked } from "marked";
     import { formatDistance } from "date-fns";
     import { onMount, onDestroy } from "svelte";
-    import { postProcessCitations } from "$lib/blockquoteCitations.js";
 
     export let blip;
 
     let currentTime = Date.now();
     let timeUpdateInterval;
 
-    function renderMarkdown(markdown) {
-        let html = marked(markdown || "");
-        html = postProcessCitations(html);
-        return html;
-    }
-
     function getISODate(date) {
         return date.toISOString();
     }
@@ -81,7 +73,7 @@
             {getAbsoluteDate(createdAtDate)}
         </time>
     </div>
-    <div class="blip-content">{@html renderMarkdown(blip.content)}</div>
+    <div class="blip-content">{@html blip.renderedContent}</div>
 </div>
 
 <style>

src/routes/+page.server.js

@@ -1,12 +1,27 @@
 import { error } from "@sveltejs/kit";
 import { getBlips } from "../lib/sanity.js";
+import { marked } from "marked";
+import { postProcessCitations } from "$lib/blockquoteCitations.js";
+
+function renderMarkdown(markdown) {
+  let html = marked(markdown || "");
+  html = postProcessCitations(html);
+  return html;
+}
 
 export async function load() {
   try {
     const data = await getBlips();
 
+    // Render markdown server-side
+    const blipsWithRenderedContent = data.blips.map((blip) => ({
+      ...blip,
+      renderedContent: renderMarkdown(blip.content),
+    }));
+
     return {
-      blips: data.blips,
+      blips: blipsWithRenderedContent,
+      allBlipsShown: data.allBlipsShown,
     };
   } catch (err) {
     throw error(500, `Failed to load blips: ${err.message}`);