display blog article

src/routes/blog/[slug].json.js

@@ -23,7 +23,11 @@ export async function get(req, res, next) {
   }
 
   const parsedPost = fm(postSource)
-  const response = parseField('body')(parsedPost)
+
+  const response = parseField('body')({
+    ...parsedPost.attributes,
+    body: parsedPost.body,
+  })
 
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify(response))

src/routes/blog/[slug].svelte

@@ -1,24 +1,24 @@
 <script context="module">
-	export async function preload({ params, query }) {
-		// the `slug` parameter is available because
-		// this file is called [slug].svelte
-		const res = await this.fetch(`blog/${params.slug}.json`);
-		const data = await res.json();
+  export async function preload({ params, query }) {
+    // the `slug` parameter is available because
+    // this file is called [slug].svelte
+    const res = await this.fetch(`blog/${params.slug}.json`)
+    const data = await res.json()
 
-		if (res.status === 200) {
-			return { post: data };
-		} else {
-			this.error(res.status, data.message);
-		}
-	}
+    if (res.status === 200) {
+      return { post: data }
+    } else {
+      this.error(res.status, data.message)
+    }
+  }
 </script>
 
 <script>
-	export let post;
+  export let post
 </script>
 
 <style>
-	/*
+  /*
 		By default, CSS is locally scoped to the component,
 		and any unused styles are dead-code-eliminated.
 		In this page, Svelte can't know which elements are
@@ -26,39 +26,39 @@
 		so we have to use the :global(...) modifier to target
 		all elements inside .content
 	*/
-	.content :global(h2) {
-		font-size: 1.4em;
-		font-weight: 500;
-	}
+  .content :global(h2) {
+    font-size: 1.4em;
+    font-weight: 500;
+  }
 
-	.content :global(pre) {
-		background-color: #f9f9f9;
-		box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
-		padding: 0.5em;
-		border-radius: 2px;
-		overflow-x: auto;
-	}
+  .content :global(pre) {
+    background-color: #f9f9f9;
+    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
+    padding: 0.5em;
+    border-radius: 2px;
+    overflow-x: auto;
+  }
 
-	.content :global(pre) :global(code) {
-		background-color: transparent;
-		padding: 0;
-	}
+  .content :global(pre) :global(code) {
+    background-color: transparent;
+    padding: 0;
+  }
 
-	.content :global(ul) {
-		line-height: 1.5;
-	}
+  .content :global(ul) {
+    line-height: 1.5;
+  }
 
-	.content :global(li) {
-		margin: 0 0 0.5em 0;
-	}
+  .content :global(li) {
+    margin: 0 0 0.5em 0;
+  }
 </style>
 
 <svelte:head>
-	<title>{post.title}</title>
+  <title>{post.title}</title>
 </svelte:head>
 
 <h1>{post.title}</h1>
 
-<div class='content'>
-	{@html post.html}
+<div class="content">
+  {@html post.body}
 </div>

src/routes/blog/index.json.js

@@ -1,5 +1,6 @@
 import { readdir, readFile } from 'fs'
 import { promisify } from 'util'
+import { basename } from 'path'
 import fm from 'front-matter'
 import marked from 'marked'
 
@@ -24,6 +25,7 @@ export async function get(req, res) {
       return {
         ...parsedAttributes.attributes,
         preview,
+        slug: basename(file, '.md'),
       }
     })
   )