From 1dd89aef8772ce93fef8220988f4798905597058 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Thu, 26 Dec 2019 07:50:57 +0100
Subject: [PATCH] display blog article

---
 _posts/blog/2019-11-03-anothert-one.md | 21 ++++++++
 src/routes/blog/[slug].json.js         |  6 ++-
 src/routes/blog/[slug].svelte          | 74 +++++++++++++-------------
 src/routes/blog/index.json.js          |  2 +
 4 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/_posts/blog/2019-11-03-anothert-one.md b/_posts/blog/2019-11-03-anothert-one.md
index a1a5147..30836a4 100644
--- a/_posts/blog/2019-11-03-anothert-one.md
+++ b/_posts/blog/2019-11-03-anothert-one.md
@@ -71,3 +71,24 @@ adspexit Circe est iuvencae ut favilla inque vir. Fas gelidas depressitque, et
 ipse, occidit **afflatibus** est caesosque Liber? Animam [gramine quam
 melior](http://nequesolum.net/in.html); arbor parte gestit moras trementia
 aquilone se membris prima; Atlantis.
+
+- Iunget quem color baculumque insistere perque nequiquam
+- Temptabat Macareus hoc urbem inmanem alasque averserisque
+- Tibia vita ita
+- Mihi caput audito Hippolytus debita finita
+- Ignis murmura summa nimis fragmina
+- Aeneadae omnibus
+
+## Tractus aderat
+
+Datque **in sidera** timorem in fuerant partem, sit hi lapidis robora et
+Phrygii! Dixisse dato posse et balatus tu tractare adit, merito quid tamen se.
+[Huic](http://quibus-corpus.net/dissimulare-condit.html) nivea in modo iam enixa
+sinistrum, haud collabitur misit, bello.
+
+1. Stimuletur orbem vestigia regina
+2. Pedibusque Latona in sub ponderis sustinuit maiora
+3. Paverunt metiris malorum genetrice de illis
+4. Sedebant ora
+5. Deae bicolor submisso
+6. Suis astra ut illas frontes
diff --git a/src/routes/blog/[slug].json.js b/src/routes/blog/[slug].json.js
index 121bb77..6f96bbd 100644
--- a/src/routes/blog/[slug].json.js
+++ b/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))
diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug].svelte
index 9e0c419..d3a72b7 100644
--- a/src/routes/blog/[slug].svelte
+++ b/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>
diff --git a/src/routes/blog/index.json.js b/src/routes/blog/index.json.js
index 6e3f40d..56fda28 100644
--- a/src/routes/blog/index.json.js
+++ b/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'),
       }
     })
   )