add blog

packages/web/layouts/default.vue

@@ -0,0 +1,143 @@
+<template lang="pug">
+section
+  b-navbar.navbar-shadow.noscroll.is-fixed-top(style="max-width: 100vw;")
+    template(slot="brand")
+      div(style="display: inline-flex; overflow: auto; max-width: calc(100vw - 3.25rem); flex-grow: 1")
+        b-navbar-item(tag="router-link" to="/")
+          h1.bold {{banner}}
+    template(slot="start")
+      b-navbar-item(v-for="t in tabs" @click="t.to ? $router.push(t.to) : open(t.url)" :key="t.name") {{t.name}}
+    template(slot="end")
+      form.field.m-sm.px-md(@submit.prevent="onSearch")
+        .control.has-icons-right
+          input.input.is-rounded(type="search" placeholder="Search" v-model="q")
+          span.icon.is-right
+            fa(icon="search")
+  section(style="margin-top: 3.25rem")
+    .container
+      .columns
+        main.column.is-8
+          nuxt
+        aside.column
+          section
+            .card.my-lg
+              header.card-header
+                p.card-header-title Tag cloud
+              .card-content(style="word-break: break-word")
+                span.bn-tag(v-for="t in tags" :key="t.name")
+                  a(:class="t.class" href="#" @click="$router.push('/tag/' + t.name)") {{t.name}}
+            .card.my-lg
+              a.twitter-timeline(data-height="800" href="https://twitter.com/ChinesePol") Tweets by ChinesePol
+</template>
+
+<script lang="ts">
+import PageSocial from '@/components/PageSocial.vue'
+import { Vue, Component } from 'nuxt-property-decorator'
+import { normalizeArray } from '@/assets/util'
+import { globalStore } from '~/store'
+
+@Component
+export default class Default extends Vue {
+  banner = '中文 Diary'
+  tabs = [
+    {
+      name: '千字文',
+      to: '/tag/千字文',
+    },
+    {
+      name: 'GitHub',
+      url: 'https://github.com/patarapolw/zhdiary',
+    },
+  ]
+
+  q = ''
+
+  get tags () {
+    const tagList = globalStore.tag
+
+    return Object.keys(tagList).sort((a, b) => {
+      return tagList[b] - tagList[a]
+    }).slice(0, 30).map((t) => {
+      if (t === 'pinned') {
+        return null
+      }
+      return {
+        name: t,
+        class: (() => {
+          const count = tagList[t]
+          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'
+        })(),
+      }
+    }).filter((el) => el)
+  }
+
+  mounted () {
+    this.q = normalizeArray(this.$route.query.q) || ''
+  }
+
+  onSearch () {
+    this.$router.push({
+      path: '/',
+      query: { q: this.q },
+    })
+  }
+
+  open (url: string) {
+    open(url, '_blank')
+  }
+}
+</script>
+
+<style lang="scss">
+.navbar-shadow {
+  $n: 0.1rem;
+
+  box-shadow: 0 $n $n rgba(0,0,0,.13),
+    $n $n $n rgba(0,0,0,.1),
+    -$n -$n $n rgba(0,0,0,.05);
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.w-100 {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.bn-tag {
+  white-space: nowrap;
+  margin-right: 10px;
+  $c-size: .6em;
+  .c20 {
+    font-size: 10 * $c-size;
+  }
+  .c10 {
+    font-size: 5 * $c-size;
+  }
+  .c5 {
+    font-size: 3 * $c-size;
+  }
+  .c3 {
+    font-size: 2 * $c-size;
+  }
+  .c2 {
+    font-size: 1.5 * $c-size;
+  }
+  .c1 {
+    font-size: $c-size;
+  }
+}
+</style>

packages/web/layouts/full.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+nuxt
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import '@/assets/global'
+export default Vue.extend({
+
+})
+</script>