move to vue-blogify

src/layouts/Sidebar.vue

@@ -0,0 +1,84 @@
+<template lang="pug">
+div
+  b-card.mb-3
+    :markdown
+      #### Record my journey to Chinese by [@polvcode](https://polvcode.dev)
+
+      Highlight text and press "s" to speak.
+    a.twitter-timeline(href="https://twitter.com/ChinesePol" data-height="600") Tweets by ChinesePol
+  b-card
+    h3 Tag cloud
+    span.mr-3(v-for="t in tags" :key="t.name" :class="t.class")
+      b-link(:to="'/tag/' + t.name") {{t.name}}
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+import { g } from '../shared';
+
+@Component
+export default class Sidebar extends Vue {
+  get tags() {
+    const tagList: Record<string, number> = {};
+
+    g.posts.forEach((p) => {
+      for (const t of p.tag || []) {
+        tagList[t] = (tagList[t] || 0) + 1;
+      }
+    });
+
+    return Object.keys(tagList).sort().map((t) => {
+      return {
+        name: t,
+        class: (() => {
+          const count = tagList[t];
+          if (count > 30) {
+            return "c30"
+          } else if (count > 20) {
+            return "c20"
+          } else if (count > 10) {
+            return "c10"
+          } else if (count > 5) {
+            return "c5"
+          } else if (count > 3) {
+            return "c3"
+          } else if (count > 1) {
+            return "c2"
+          }
+          return "c1"
+        })()
+      }
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.c30 {
+  font-size: 40px;
+}
+
+.c20 {
+  font-size: 30px;
+}
+
+.c10 {
+  font-size: 25px;
+}
+
+.c5 {
+  font-size: 20px;
+}
+
+.c3 {
+  font-size: 16px;
+}
+
+.c2 {
+  font-size: 13px;
+}
+
+.c1 {
+  font-size: 10px;
+}
+</style>