From a6e7d42d845974785e6841e0eaea907fba5142d2 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Tue, 16 Jun 2020 15:27:06 +0200
Subject: [PATCH] Add footer to article

---
 src/components/blog/article-footer.svelte | 57 +++++++++++++++++++++++
 src/routes/blog/[slug].svelte             |  4 ++
 src/routes/blog/index.svelte              | 53 +--------------------
 3 files changed, 63 insertions(+), 51 deletions(-)
 create mode 100644 src/components/blog/article-footer.svelte

diff --git a/src/components/blog/article-footer.svelte b/src/components/blog/article-footer.svelte
new file mode 100644
index 0000000..4da81de
--- /dev/null
+++ b/src/components/blog/article-footer.svelte
@@ -0,0 +1,57 @@
+<script>
+  import { format } from 'date-fns'
+
+  export let post
+</script>
+
+<style>
+  .tags-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: inline;
+  }
+
+  .tags-list li {
+    display: inline;
+    font-style: italic;
+  }
+
+  .lighten {
+    color: #595a8f;
+  }
+
+  time {
+    font-style: italic;
+  }
+
+  footer {
+    display: flex;
+    font-size: 0.85em;
+    justify-content: space-between;
+    padding-top: 0.2em;
+    margin-top: 0.4em;
+    border-top: 1px solid #c0c1e1;
+  }
+</style>
+
+<footer>
+  <div class="article-tags">
+    {#if post.tags.length > 0}
+      <span class="lighten">Tags:</span>
+      <ul class="tags-list">
+        {#each post.tags as tag}
+          <li>
+            <a href="blog?tag={tag}">{tag}</a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+  <div class="created-at">
+    <span class="lighten">Published on</span>
+    <time datetime={post.date}>
+      {format(new Date(post.date), "do MMMM',' y")}
+    </time>
+  </div>
+</footer>
diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug].svelte
index 7fc7b25..9e3f6dc 100644
--- a/src/routes/blog/[slug].svelte
+++ b/src/routes/blog/[slug].svelte
@@ -14,6 +14,8 @@
 </script>
 
 <script>
+  import ArticleFooter from '../../components/blog/article-footer.svelte'
+
   export let post
 </script>
 
@@ -73,3 +75,5 @@
 <div class="content">
   {@html post.body}
 </div>
+<ArticleFooter post={post} />
+
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
index ccabc36..b287946 100644
--- a/src/routes/blog/index.svelte
+++ b/src/routes/blog/index.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <script>
-  import { format } from 'date-fns'
+  import ArticleFooter from '../../components/blog/article-footer.svelte'
 
   export let posts
   export let query
@@ -33,35 +33,6 @@
     margin-bottom: 2em;
   }
 
-  .tags-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: inline;
-  }
-
-  .tags-list li {
-    display: inline;
-    font-style: italic;
-  }
-
-  time {
-    font-style: italic;
-  }
-
-  footer {
-    display: flex;
-    font-size: 0.85em;
-    justify-content: space-between;
-    padding-top: 0.2em;
-    margin-top: 0.4em;
-    border-top: 1px solid #c0c1e1;
-  }
-
-  .lighten {
-    color: #595a8f;
-  }
-
   .see-all {
     text-align: end;
     margin-top: -1.5em;
@@ -102,28 +73,8 @@
           </h2>
         </header>
         {@html post.preview}
-        <footer>
-          <div class="article-tags">
-            {#if post.tags.length > 0}
-              <span class="lighten">Tags:</span>
-              <ul class="tags-list">
-                {#each post.tags as tag}
-                  <li>
-                    <a href="blog?tag={tag}">{tag}</a>
-                  </li>
-                {/each}
-              </ul>
-            {/if}
-          </div>
-          <div class="created-at">
-            <span class="lighten">Published on</span>
-            <time datetime={post.date}>
-              {format(new Date(post.date), "do MMMM',' y")}
-            </time>
-          </div>
-        </footer>
       </article>
-
+      <ArticleFooter post={post} />
     </li>
   {/each}
 </ul>