[O] Combine tags and categories

src/components/BlogIndex.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="index index-tags" v-if="mode === 'tags'">
+        <Tag v-for="t in meta.tags" :key="t" :tag-name="t[0]" direction="right">{{t[0]}} ({{t[1]}})</Tag>
+    </div>
+    <div class="index index-categories" v-else>
+        <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 Tag from "@/components/Tag.vue";
+import {Prop} from "vue-property-decorator";
+import {pushQuery} from "@/scripts/router";
+
+@Options({components: {Tag}})
+export default class BlogIndexLinks extends Vue
+{
+    @Prop({default: 'tags'}) mode: 'tags' | 'categories' = 'tags'
+
+    meta: BlogMeta = staticMeta
+
+    click(c: [string, number]): void
+    {
+        pushQuery({category: c[0]})
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+@import 'src/css/colors'
+
+.index
+    *
+        margin-right: 10px
+        margin-top: 5px
+        margin-bottom: 5px
+
+.index-tags
+    font-size: 0.7em
+
+.index-categories
+    font-size: 0.8em
+    text-decoration: underline
+    color: $color-text-special
+</style>

src/components/BlogIndexCategories.vue

@@ -1,34 +0,0 @@
-<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>

src/components/BlogIndexTags.vue

@@ -1,25 +0,0 @@
-<template>
-    <div class="index-tags">
-        <Tag v-for="t in meta.tags" :key="t" :tag-name="t[0]" direction="right">{{t[0]}} ({{t[1]}})</Tag>
-    </div>
-</template>
-
-<script lang="ts">
-import {Options, Vue} from 'vue-class-component';
-import {BlogMeta, staticMeta} from '@/views/Blog.vue'
-import Tag from "@/components/Tag.vue";
-
-@Options({components: {Tag}})
-export default class BlogIndexLinks extends Vue
-{
-    meta: BlogMeta = staticMeta
-}
-</script>
-
-<style lang="sass" scoped>
-.index-tags
-    font-size: 0.7em
-
-    * + *
-        margin-left: 10px
-</style>

src/main.ts

@@ -4,13 +4,11 @@ import router from './scripts/router'
 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";
+import BlogIndex from "@/components/BlogIndex.vue";
 
 const app = createApp(App).use(router).use(i18n)
     .component('Collapse', Collapse)
-    .component('BlogIndexTags', BlogIndexTags)
-    .component('BlogIndexCategories', BlogIndexCategories)
+    .component('BlogIndex', BlogIndex)
     .component('Dynamic', {
         props: ['template'],
         render() {