From c063728a42410d96468a95241c95248b38311fc1 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Mon, 27 Dec 2021 12:37:39 -0500
Subject: [PATCH] [+] BlogIndexCategories

---
 src/components/BlogIndexCategories.vue | 34 ++++++++++++++++++++++++++
 src/main.ts                            |  2 ++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/BlogIndexCategories.vue

diff --git a/src/components/BlogIndexCategories.vue b/src/components/BlogIndexCategories.vue
new file mode 100644
index 0000000..ca54d88
--- /dev/null
+++ b/src/components/BlogIndexCategories.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="index-categories">
+        <span v-for="c in meta.categories" :key="c" class="clickable unselectable" @click="click(c)">{{c[0]}} ({{c[1]}})</span>
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {BlogMeta, staticMeta} from "@/views/Blog.vue";
+import {pushQuery} from "@/scripts/router";
+
+@Options({components: {}})
+export default class BlogIndexCategories extends Vue
+{
+    meta: BlogMeta = staticMeta
+
+    click(c: [string, number]): void
+    {
+        pushQuery({category: c[0]})
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+@import 'src/css/colors'
+
+.index-categories
+    font-size: 0.8em
+    text-decoration: underline
+    color: $color-text-special
+
+    * + *
+        margin-left: 10px
+</style>
diff --git a/src/main.ts b/src/main.ts
index f449fec..7e012f9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,10 +5,12 @@ import {i18n} from "@/scripts/messages"
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import Collapse from "@/components/Collapse.vue"
 import BlogIndexTags from "@/components/BlogIndexTags.vue";
+import BlogIndexCategories from "@/components/BlogIndexCategories.vue";
 
 const app = createApp(App).use(router).use(i18n)
     .component('Collapse', Collapse)
     .component('BlogIndexTags', BlogIndexTags)
+    .component('BlogIndexCategories', BlogIndexCategories)
     .component('Dynamic', {
         props: ['template'],
         render() {