From 3f5979b84fa7dd218ae8493710da448cf00a93b6 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sun, 26 Dec 2021 22:48:29 -0500
Subject: [PATCH] [+] Breadcrumbs

---
 src/views/Blog.vue | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index 1b5251a..afa1d39 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -1,5 +1,11 @@
 <template>
     <div id="Blog">
+        <div id="breadcrumb">
+            <span>Blog</span>
+            <span v-if="tag">🏷️{{tag}}</span>
+            <span v-if="category">📂{{category}}</span>
+            <span class="no-after" v-if="activePost">{{activePost.title}}</span>
+        </div>
         <BlogPostPreview v-for="m of filteredPosts" :key="m" :meta="m"
                          :active="post ? m.url_name === post : m === filteredPosts[0] && m.pinned"/>
     </div>
@@ -34,6 +40,12 @@ export default class Blog extends Vue
         })
     }
 
+    get activePost(): BlogPost | null
+    {
+        const p = this.filteredPosts
+        return this.post ? p.filter(it => it.url_name == this.post)[0] : p[0].pinned ? p[0] : null
+    }
+
     get filteredPosts(): BlogPost[]
     {
         const posts = this.meta.posts.filter(it => it.pinned || (this.tag ? it.tags.includes(this.tag) :
@@ -48,12 +60,24 @@ export default class Blog extends Vue
 </script>
 
 <style lang="sass" scoped>
+@import "src/css/colors"
+
 $width: 600px
 
 #Blog
     width: $width
     margin: 20px auto
 
+    #breadcrumb
+        color: $color-text-light
+        margin-bottom: 20px
+        text-align: left
+
+        span:not(.no-after):after
+            content: ">"
+            margin: 0 10px
+
+
 // Phone layout
 @media screen and (max-width: $width + 40px)
     #Blog