Merge pull request #4 from patarapolw/next

Based on Nuxt
2020-12-16 16:42:29 +07:00
commit 6c88578fd3
@@ -0,0 +1,4 @@
+#!/usr/bin/zsh
+
+# current directory is always `.git/..` root
+# echo $PWD
@@ -1,3 +0,0 @@
-[submodule "template"]
-	path = template
-	url = git@github.com:patarapolw/nuxt-blog-template.git
@@ -1,4 +0,0 @@
-{
-  "no-inline-html": false,
-  "line-length": false
-}
@@ -0,0 +1,9 @@
+{
+  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+  "editor.formatOnSave": true,
+  "files.associations": {
+    ".env.*": "dotenv"
+  },
+  "whitespacepp.backColorWS": "",
+  "editor.tabSize": 4
+}
@@ -1,6 +1,6 @@
 ---
 title: "千字文"
-date: "2019-08-10"
+date: 2019-08-10T00:00:00+07:00
 tag: 
 - 千字文
 - 汉字
@@ -1,6 +1,6 @@
 ---
 title: "句子 1.1"
-date: "2019-08-16 01:00"
+date: 2019-08-16T01:00:00+07:00
 tag: 
 - 千字文
 - 句子
@@ -1,6 +1,6 @@
 ---
 title: "句子 1.2"
-date: "2019-08-17 01:00"
+date: 2019-08-17T01:00:00+07:00
 tag: 
 - 千字文
 - 句子
@@ -1,6 +1,6 @@
 ---
 title: "句子 1.3"
-date: "2019-08-17 02:00"
+date: 2019-08-17T02:00:00+07:00
 tag: 
 - 千字文
 - 句子
@@ -1,6 +1,6 @@
 ---
 title: "身体1"
-date: "2019-08-18 01:00"
+date: 2019-08-18T01:00:00+07:00
 tag: 
 - 分类词汇
 - 身体
@@ -1,6 +1,6 @@
 ---
 title: "Learning Chinese using Git -- ZhLab"
-date: "2019-09-25"
+date: 2019-09-25T00:00:00+07:00
 tag: 
 - diary
 ---
@@ -1,6 +1,6 @@
 ---
 title: "Fruit and vegetables quiz"
-date: "2019-09-30"
+date: 2019-09-30T00:00:00+07:00
 image: https://images.chinatimes.com/newsphoto/2018-12-31/900/20181231000035.jpg
 tag: 
 - quiz
@@ -1,6 +1,6 @@
 ---
 title: "Move to new URL notice"
-date: "2019-10-07"
+date: 2019-10-07T00:00:00+07:00
 tag: 
 - diary
 ---
@@ -1,6 +1,6 @@
 ---
 title: "Chinese from Emoji 1: 学习用品"
-date: 2019-11-26
+date: 2019-11-26T00:00:00+07:00
 image: https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQpaKJKlp3UhF_S-Q5sPWmLnKhwb8Ey0sqA7ersas1OJcAgZFzB
 tag: 
 - vocab
@@ -1,6 +1,6 @@
 ---
 title: "Chinese from Emoji 2: 陆地动物"
-date: 2019-11-27
+date: 2019-11-27T00:00:00+07:00
 image: https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQpaKJKlp3UhF_S-Q5sPWmLnKhwb8Ey0sqA7ersas1OJcAgZFzB
 tag: 
 - vocab
@@ -1,6 +1,6 @@
 ---
 title: Moving to Netlify
-date: 2019-11-25
+date: 2019-11-25T00:00:00+07:00
 tag: 
 - diary
 ---
@@ -1,6 +1,6 @@
 ---
 title: Back to former glory
-date: 2019-12-07
+date: 2019-12-07T00:00:00+07:00
 tag:
  - vuetify
  - resources
@@ -1,6 +1,6 @@
 ---
 title: "Chinese from Emoji 3: 水生和昆虫"
-date: 2019-12-08
+date: 2019-12-08T00:00:00+07:00
 image: https://steamuserimages-a.akamaihd.net/ugc/264973755082472713/B44953104F4F5FBB70205CCCD759E511C0E50E52/
 tag:
  - vocab
@@ -1,12 +1,12 @@
 ---
 title: 我和你 - Another song I always hear.
-date: 2020-02-26
+date: 2020-02-26T00:00:00+07:00
 tag:
  - 邓丽君
  - song
 ---

-<iframe width="560" height="315" src="https://www.youtube.com/embed/z0tCpDY2Ong" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<%- youtube('z0tCpDY2Ong') %>

 <!-- excerpt -->

@@ -1,22 +1,18 @@
 ---
 title: ZhLevel Level 1
-date: 2020-03-23
+date: 2020-03-23T00:00:00+07:00
 tag:
  - zhlevel
 ---

 Comes from my old repository [here](https://github.com/patarapolw/zhlevel/blob/master/resources/level/hanzi.json).

-```pug parsed
-a(data-make-html="card" href="https://github.com/patarapolw/zhlevel/blob/master/resources/level/hanzi.json")
-  | https://github.com/patarapolw/zhlevel/blob/master/resources/level/hanzi.json
-  pre(data-template style="display: none;").
-    image: 'https://avatars3.githubusercontent.com/u/21255931?s=400&v=4'
-    title: patarapolw/zhlevel
-    description: >-
-      Learn Chinese from sentences, Tatoeba, or use your own sentences -
-      patarapolw/zhlevel - /resources/level/hanzi.json
-```
+<%- xCard({
+  href: "https://github.com/patarapolw/zhlevel/blob/master/resources/level/hanzi.json",
+  image: "https://avatars3.githubusercontent.com/u/21255931?s=400&v=4",
+  title: "patarapolw/zhlevel",
+  description: "Learn Chinese from sentences, Tatoeba, or use your own sentences - patarapolw/zhlevel - /resources/level/hanzi.json"
+})%>

 Level One

@@ -51,15 +47,11 @@ Level One

 According to <https://github.com/patarapolw/zhlevel/blob/master/resources/level/hsk.yaml>

-```pug parsed
-a(data-make-html="card" href="https://github.com/patarapolw/zhlevel/blob/master/resources/level/hsk.yaml")
-  | https://github.com/patarapolw/zhlevel/blob/master/resources/level/hsk.yaml
-  pre(data-template style="display: none;").
-    image: 'https://avatars3.githubusercontent.com/u/21255931?s=400&v=4'
-    title: patarapolw/zhlevel
-    description: >-
-      Learn Chinese from sentences, Tatoeba, or use your own sentences -
-      patarapolw/zhlevel - /resources/level/hsk.yaml
-```
+<%- xCard({
+  href: 'https://github.com/patarapolw/zhlevel/blob/master/resources/level/hsk.yaml',
+  image: 'https://avatars3.githubusercontent.com/u/21255931?s=400&v=4',
+  title: 'patarapaolw/zhlevel',
+  description: 'Learn Chinese from sentences, Tatoeba, or use your own sentences - patarapolw/zhlevel - /resources/level/hsk.yaml'
+}) %>

 爱, 八, 爸爸, 杯子, 北京, 本, 不, 不客气, 菜, 茶, 吃, 出租车, 打电话, 大, 的, 点, 电脑, 电视, 电影, 东西, 都, 读, 对不起, 多, 多少, 儿子, 二, 饭店, 飞机, 分钟
@@ -1,6 +1,6 @@
 ---
 title: ZhLevel Level 2
-date: 2020-03-23
+date: 2020-03-23T01:00:00+07:00
 tag:
  - zhlevel
 ---
@@ -1,6 +1,6 @@
 ---
 title: ZhLevel Level 3
-date: 2020-03-25
+date: 2020-03-25T00:00:00+07:00
 tag:
  - zhlevel
 ---
@@ -0,0 +1,53 @@
+---
+title: 千里之外
+date: 2020-04-20T00:00:00+07:00
+tag:
+  - song
+---
+
+<%- youtube('ocDo3ySyHSI') %>
+
+<!-- excerpt -->
+
+## 周杰伦
+
+### 千里之外(& 费玉清)
+
+作词：方文山 \
+作曲：周杰伦
+
+(周)屋簷如悬崖 风铃如沧海 我等燕归来 \
+时间被安排 演一场意外 妳悄然走开 \
+故事在城外 浓雾散不开 看不清对白 \
+妳听不出来 风声不存在 是我在感慨 \
+梦醒来 是谁在窗台 把结局打开 \
+那薄如蝉翼的未来 禁不起谁来拆
+
+(费)我送你离开 千里之外 你无声黑白 \
+沉默年代 或许不该 太遥远的相爱 \
+我送妳离开 天涯之外 妳是否还在 \
+琴声何来 生死难猜 用一生 去等待
+
+(周)闻泪声入林 寻梨花白 只得一行青苔 \
+天在山之外 雨落花台 我两鬓斑白 \
+闻泪声入林 寻梨花白 只得一行青苔 \
+天在山之外 雨落花台 我等妳来
+
+更多更详尽歌词 在 ※ Mojim.com　魔镜歌词网 \
+(费)一身琉璃白 透明著尘埃 妳无瑕的爱 \
+妳从雨中来 诗化了悲哀 我淋湿现在
+
+(周)芙蓉水面采 船行影犹在 妳却不回来 \
+被岁月覆蓋 妳说的花开 过去成空白
+
+(费)梦醒来 是谁在窗台 把结局打开 \
+(周)那薄如蝉翼的未来 \
+(周)禁不起谁来拆 \
+(费)我送你离开 千里之外 你无声黑白 沉默年代 或许不该 太遥远的相爱 \
+(周)我送妳离开 天涯之外 妳是否还在 琴声何来 生死难猜 用一生 \
+(费)我送妳离开 千里之外 妳无声黑白 沉默年代 或许不该 太遥远的相爱 \
+(周)我送妳离开 天涯之外 \
+(周)妳是否还在 \
+(周)琴声何来 \
+(费)生死难猜 \
+(合)用一生去等待
@@ -1,11 +1,11 @@
 ---
 title: 祝福
-date: 2020-04-18
+date: 2020-04-18T00:00:00+07:00
 tag:
  - song
 ---

-<iframe width="560" height="315" src="https://www.youtube.com/embed/ZuJM8AOivYU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<%- youtube('ZuJM8AOivYU') %>

 <!-- excerpt -->

@@ -13,31 +13,31 @@ tag:

 ## 祝福

-作词：丁晓雯
-作曲：郭子
-编曲：王豫民
+作词：丁晓雯 \
+作曲：郭子 \
+编曲：王豫民 \

-不要问　不要说　一切尽在不言中
-这一刻　偎著烛光　让我们静静的渡过
-莫挥手　莫回头　当我唱起这首歌　怕只怕　泪水轻轻的滑落
+不要问　不要说　一切尽在不言中 \
+这一刻　偎著烛光　让我们静静的渡过 \
+莫挥手　莫回头　当我唱起这首歌　怕只怕　泪水轻轻的滑落 \
 愿心中永远留着我的笑容　伴你走过每一个春夏秋冬

-几许愁　几许忧　人生难免苦与痛
-失去过　才能真正懂得去珍惜和拥有
-情难舍　人难留　今朝一别各西东　冷和热　点点滴滴在心头
+几许愁　几许忧　人生难免苦与痛 \
+失去过　才能真正懂得去珍惜和拥有 \
+情难舍　人难留　今朝一别各西东　冷和热　点点滴滴在心头 \
 愿心中永远留着我的笑容　伴你走过每一个春夏秋冬

-＊伤离别　离别虽然在眼前　说再见　再见不会太遥远
-更多更详尽歌词
+＊伤离别　离别虽然在眼前　说再见　再见不会太遥远 \
+更多更详尽歌词 \
 　若有缘　有缘就能期待明天　你和我重逢在灿烂的季节

 Repeat ＊

-伤离别　离别虽然在眼前　说再见　再见不会太遥远
-伤离别　离别虽然在眼前　说再见　再见不会太遥远
+伤离别　离别虽然在眼前　说再见　再见不会太遥远 \
+伤离别　离别虽然在眼前　说再见　再见不会太遥远 \
 若有缘　有缘就能期待明天　你和我重逢在灿烂的季节

-不要问　不要说　一切尽在不言中
-这一刻　偎著烛光　让我们静静的渡过
-莫挥手　莫回头　当我唱起这首歌
+不要问　不要说　一切尽在不言中 \
+这一刻　偎著烛光　让我们静静的渡过 \
+莫挥手　莫回头　当我唱起这首歌 \
 愿心中留着笑容　陪你度过每个春夏秋冬
@@ -0,0 +1,26 @@
+---
+title: 虫儿飞
+date: 2020-04-10T00:00:00+07:00
+tag:
+  - song
+---
+
+<%- youtube('4CazJNOLoM0') %>
+
+<!-- excerpt -->
+
+黑黑的天空低垂 \
+亮亮的繁星相随 \
+虫儿飞 虫儿飞 \
+你在思念谁
+
+天上的星星流泪 \
+地上的玫瑰枯萎 \
+冷风吹 冷风吹 \
+只要有你陪
+
+虫儿飞 花儿睡 \
+一双又一对才美 \
+不怕天黑 只怕心碎 \
+不管累不累 \
+也不管东南西北
@@ -0,0 +1,90 @@
+---
+title: "千字文 - 1/1"
+date: 2019-08-11T00:00:00+07:00
+tag:
+ - 千字文
+ - 汉字
+---
+
+<div class="w-100 mt-3">
+  <h3 class="text-center">天地玄黃，宇宙洪荒。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/天-order.gif" height="100" />
+    <figcaption class="text-center">tian1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/地-order.gif" height="100" />
+    <figcaption class="text-center">di4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/玄-order.gif" height="100" />
+    <figcaption class="text-center">xuan2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/黄-order.gif" height="100" />
+    <figcaption class="text-center">huang2</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23431.gif" height="100" />
+    <figcaption class="text-center">yu3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23449.gif" height="100" />
+    <figcaption class="text-center">zhou4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27946.gif" height="100" />
+    <figcaption class="text-center">hong2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33618.gif" height="100" />
+    <figcaption class="text-center">huang1</figcaption>
+  </figure>
+</div>
+
+<style>
+img[height="100"] {
+  height: 100px;
+}
+
+figure {
+  margin: 0;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.d-inline-block {
+  display: inline-block;
+}
+
+.text-center {
+  text-align: center;
+}
+
+table td:first-child {
+  width: 10em;
+}
+</style>
+
+<!-- excerpt_separator -->
+
+| | | |
+| --- | --- | --- |
+宇宙 | yǔzhòu | universe / cosmos
+宇航 | yǔháng | space flight
+宇航员 | yǔhángyuán | astronaut
+宇宙飞船 | yǔzhòufēichuán | spacecraft
+防洪 | fánghóng | flood control / flood prevention
+山洪 | shānhóng | mountain flash flood / mountain torrent
+荒 | huāng | desolate / shortage / scarce / out of practice / absurd / uncultivated / to neglect
+荒野 | huāngyě | wilderness
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 1/2"
-date: "2019-08-12"
-tag: 
+createdAt: 2019-08-12T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 日月盈昃，辰宿列張。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26085.gif" height=100 data-no-cache)
-    figcaption.text-center ri4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26376.gif" height=100 data-no-cache)
-    figcaption.text-center yue4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30408.gif" height=100 data-no-cache)
-    figcaption.text-center ying2
-  figure.d-inline-block.text-center
-    .hanzi-img 昃
-    figcaption ze4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36784.gif" height=100 data-no-cache)
-    figcaption.text-center chen2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23487.gif" height=100 data-no-cache)
-    figcaption.text-center su4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21015.gif" height=100 data-no-cache)
-    figcaption.text-center lie2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24373.gif" height=100 data-no-cache)
-    figcaption.text-center zhang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">日月盈昃，辰宿列張。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26085.gif" height="100" />
+    <figcaption class="text-center">ri4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26376.gif" height="100" />
+    <figcaption class="text-center">yue4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30408.gif" height="100" />
+    <figcaption class="text-center">ying2</figcaption>
+  </figure>
+  <figure class="d-inline-block text-center">
+    <div class="hanzi-img">昃</div>
+    <figcaption>ze4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36784.gif" height="100" />
+    <figcaption class="text-center">chen2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23487.gif" height="100" />
+    <figcaption class="text-center">su4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21015.gif" height="100" />
+    <figcaption class="text-center">lie2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24373.gif" height="100" />
+    <figcaption class="text-center">zhang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,51 @@
 ---
 title: "千字文 - 1/3"
-date: "2019-08-13"
-tag: 
+createdAt: 2019-10-08T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 寒來暑往，秋收冬藏。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23506.gif" height=100 data-no-cache)
-    figcaption.text-center han2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20358.gif" height=100 data-no-cache)
-    figcaption.text-center lai2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26257.gif" height=100 data-no-cache)
-    figcaption.text-center shu3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24448.gif" height=100 data-no-cache)
-    figcaption.text-center wang3
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31179.gif" height=100 data-no-cache)
-    figcaption.text-center qiu1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25910.gif" height=100 data-no-cache)
-    figcaption.text-center shou1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20908.gif" height=100 data-no-cache)
-    figcaption.text-center dong1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34255.gif" height=100 data-no-cache)
-    figcaption.text-center cang2
-```
+
+<div class="w-100 mt-3">
+  <h3 class="text-center">寒來暑往，秋收冬藏。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23506.gif" height="100" />
+    <figcaption class="text-center">han2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20358.gif" height="100" />
+    <figcaption class="text-center">lai2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26257.gif" height="100" />
+    <figcaption class="text-center">shu3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24448.gif" height="100" />
+    <figcaption class="text-center">wang3</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31179.gif" height="100" />
+    <figcaption class="text-center">qiu1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25910.gif" height="100" />
+    <figcaption class="text-center">shou1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20908.gif" height="100" />
+    <figcaption class="text-center">dong1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34255.gif" height="100" />
+    <figcaption class="text-center">cang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,51 @@
 ---
 title: "千字文 - 1/4"
-date: "2019-08-14"
-tag: 
+createdAt: 2019-08-14T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 閏餘成歲，律呂調陽。
-.w-100
-  figure.d-inline-block
-    .hanzi-img 閏
-    figcaption.text-center run4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39192.gif" height=100 data-no-cache)
-    figcaption.text-center yu2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25104.gif" height=100 data-no-cache)
-    figcaption.text-center cheng2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27506.gif" height=100 data-no-cache)
-    figcaption.text-center sui4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24459.gif" height=100 data-no-cache)
-    figcaption.text-center lu:4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21570.gif" height=100 data-no-cache)
-    figcaption.text-center lu:3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35519.gif" height=100 data-no-cache)
-    figcaption.text-center diao4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38525.gif" height=100 data-no-cache)
-    figcaption.text-center yang2
-```
+
+<div class="w-100 mt-3">
+  <h3 class="text-center">閏餘成歲，律呂調陽。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <div class="hanzi-img">閏</div>
+    <figcaption class="text-center">run4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39192.gif" height="100"/>
+    <figcaption class="text-center">yu2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25104.gif" height="100"/>
+    <figcaption class="text-center">cheng2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27506.gif" height="100"/>
+    <figcaption class="text-center">sui4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24459.gif" height="100"/>
+    <figcaption class="text-center">lu:4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21570.gif" height="100"/>
+    <figcaption class="text-center">lu:3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35519.gif" height="100"/>
+    <figcaption class="text-center">diao4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38525.gif" height="100"/>
+    <figcaption class="text-center">yang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 1/5"
-date: "2019-08-15"
-tag: 
+createdAt: 2019-08-15T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 雲騰致雨，露結為霜。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38642.gif" height=100 data-no-cache)
-    figcaption.text-center yun2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39472.gif" height=100 data-no-cache)
-    figcaption.text-center teng2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33268.gif" height=100 data-no-cache)
-    figcaption.text-center zhi4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38632.gif" height=100 data-no-cache)
-    figcaption.text-center yu3
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38706.gif" height=100 data-no-cache)
-    figcaption.text-center lu4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32080.gif" height=100 data-no-cache)
-    figcaption.text-center jie2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28858.gif" height=100 data-no-cache)
-    figcaption.text-center wei4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38684.gif" height=100 data-no-cache)
-    figcaption.text-center shuang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">雲騰致雨，露結為霜。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38642.gif" height="100" />
+    <figcaption class="text-center">yun2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39472.gif" height="100" />
+    <figcaption class="text-center">teng2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33268.gif" height="100" />
+    <figcaption class="text-center">zhi4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38632.gif" height="100" />
+    <figcaption class="text-center">yu3</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38706.gif" height="100" />
+    <figcaption class="text-center">lu4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32080.gif" height="100" />
+    <figcaption class="text-center">jie2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28858.gif" height="100" />
+    <figcaption class="text-center">wei4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38684.gif" height="100" />
+    <figcaption class="text-center">shuang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 1/6"
-date: "2019-08-16"
-tag: 
+createdAt: 2019-08-16T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 金生麗水，玉出崑岡。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/37329.gif" height=100 data-no-cache)
-    figcaption.text-center jin1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29983.gif" height=100 data-no-cache)
-    figcaption.text-center sheng1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40599.gif" height=100 data-no-cache)
-    figcaption.text-center li4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27700.gif" height=100 data-no-cache)
-    figcaption.text-center shui3
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29577.gif" height=100 data-no-cache)
-    figcaption.text-center yu4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20986.gif" height=100 data-no-cache)
-    figcaption.text-center chu1
-  figure.d-inline-block
-    .hanzi-img 崑
-    figcaption.text-center kun1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23713.gif" height=100 data-no-cache)
-    figcaption.text-center gang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">金生麗水，玉出崑岡。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/37329.gif" height="100" />
+    <figcaption class="text-center">jin1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29983.gif" height="100" />
+    <figcaption class="text-center">sheng1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40599.gif" height="100" />
+    <figcaption class="text-center">li4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27700.gif" height="100" />
+    <figcaption class="text-center">shui3</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29577.gif" height="100" />
+    <figcaption class="text-center">yu4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20986.gif" height="100" />
+    <figcaption class="text-center">chu1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">崑</div>
+    <figcaption class="text-center">kun1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23713.gif" height="100" />
+    <figcaption class="text-center">gang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 1/7"
-date: "2019-08-17"
-tag: 
+createdAt: 2019-08-17T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 劍號巨闕，珠稱夜光。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21133.gif" height=100 data-no-cache)
-    figcaption.text-center jian4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34399.gif" height=100 data-no-cache)
-    figcaption.text-center hao4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24040.gif" height=100 data-no-cache)
-    figcaption.text-center ju4
-  figure.d-inline-block
-    .hanzi-img 闕
-    figcaption.text-center que4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29664.gif" height=100 data-no-cache)
-    figcaption.text-center zhu1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31281.gif" height=100 data-no-cache)
-    figcaption.text-center cheng1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22812.gif" height=100 data-no-cache)
-    figcaption.text-center ye4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20809.gif" height=100 data-no-cache)
-    figcaption.text-center guang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">劍號巨闕，珠稱夜光。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21133.gif" height="100" />
+    <figcaption class="text-center">jian4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34399.gif" height="100" />
+    <figcaption class="text-center">hao4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24040.gif" height="100" />
+    <figcaption class="text-center">ju4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">闕</div>
+    <figcaption class="text-center">que4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29664.gif" height="100" />
+    <figcaption class="text-center">zhu1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31281.gif" height="100" />
+    <figcaption class="text-center">cheng1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22812.gif" height="100" />
+    <figcaption class="text-center">ye4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20809.gif" height="100" />
+    <figcaption class="text-center">guang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 1/8"
-date: "2019-08-18"
-tag: 
+createdAt: 2019-08-18T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 果珍李柰，菜重芥薑。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26524.gif" height=100 data-no-cache)
-    figcaption.text-center guo3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29645.gif" height=100 data-no-cache)
-    figcaption.text-center zhen1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26446.gif" height=100 data-no-cache)
-    figcaption.text-center li3
-  figure.d-inline-block
-    .hanzi-img 柰
-    figcaption.text-center nai4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33756.gif" height=100 data-no-cache)
-    figcaption.text-center cai4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/37325.gif" height=100 data-no-cache)
-    figcaption.text-center zhong4
-  figure.d-inline-block
-    .hanzi-img 柰
-    figcaption.text-center jie4
-  figure.d-inline-block
-    .hanzi-img 薑
-    figcaption.text-center jiang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">果珍李柰，菜重芥薑。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26524.gif" height="100" />
+    <figcaption class="text-center">guo3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29645.gif" height="100" />
+    <figcaption class="text-center">zhen1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26446.gif" height="100" />
+    <figcaption class="text-center">li3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">柰</div>
+    <figcaption class="text-center">nai4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33756.gif" height="100" />
+    <figcaption class="text-center">cai4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/37325.gif" height="100" />
+    <figcaption class="text-center">zhong4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">柰</div>
+    <figcaption class="text-center">jie4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">薑</div>
+    <figcaption class="text-center">jiang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 1/9"
-date: "2019-08-19"
+createdAt: 2019-08-19T00:00:00+07:00
 tag: 
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 海咸河淡，鱗潛羽翔。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28023.gif" height=100 data-no-cache)
-    figcaption.text-center hai3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21688.gif" height=100 data-no-cache)
-    figcaption.text-center xian2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27827.gif" height=100 data-no-cache)
-    figcaption.text-center he2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28129.gif" height=100 data-no-cache)
-    figcaption.text-center dan4
-.w-100
-  figure.d-inline-block
-    .hanzi-img 鱗
-    figcaption.text-center lin2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28507.gif" height=100 data-no-cache)
-    figcaption.text-center qian2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32701.gif" height=100 data-no-cache)
-    figcaption.text-center yu3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32724.gif" height=100 data-no-cache)
-    figcaption.text-center xiang2
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">海咸河淡，鱗潛羽翔。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28023.gif" height="100" />
+    <figcaption class="text-center">hai3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21688.gif" height="100" />
+    <figcaption class="text-center">xian2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27827.gif" height="100" />
+    <figcaption class="text-center">he2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28129.gif" height="100" />
+    <figcaption class="text-center">dan4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <div class="hanzi-img">鱗</div>
+    <figcaption class="text-center">lin2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28507.gif" height="100" />
+    <figcaption class="text-center">qian2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32701.gif" height="100" />
+    <figcaption class="text-center">yu3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32724.gif" height="100" />
+    <figcaption class="text-center">xiang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -0,0 +1,89 @@
+---
+title: "千字文 - 2/1"
+createdAt: 2019-08-20T00:00:00+07:00
+tag:
+ - 千字文
+ - 汉字
+---
+
+<div class="w-100 mt-3">
+  <h3 class="text-center">龍師火帝，鳥官人皇。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40845.gif" height="100" />
+    <figcaption class="text-center">long2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24107.gif" height="100" />
+    <figcaption class="text-center">shi1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28779.gif" height="100" />
+    <figcaption class="text-center">huo3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24093.gif" height="100" />
+    <figcaption class="text-center">di4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40165.gif" height="100" />
+    <figcaption class="text-center">niao3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23448.gif" height="100" />
+    <figcaption class="text-center">guan1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20154.gif" height="100" />
+    <figcaption class="text-center">ren2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30343.gif" height="100" />
+    <figcaption class="text-center">huang1</figcaption>
+  </figure>
+</div>
+
+<!-- excerpt_separator -->
+
+<style>
+img[height="100"] {
+  height: 100px;
+}
+
+figure {
+  margin: 0;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.d-inline-block {
+  display: inline-block;
+}
+
+.text-center {
+  text-align: center;
+}
+
+table td:first-child {
+  width: 10em;
+}
+</style>
+
+| | | |
+| --- | --- | --- |
+官方 | guānfāng | government / official (approved or issued by an authority)
+官员 (官員) | guānyuán | official (in an organization or government) / administrator
+法官 | fǎguān | judge
+警官 | jǐngguān | constable / police officer
+感官 | gǎnguān | sense / sense organ
+指挥官 (指揮官) | zhǐhuīguān | commander
+收官 | shōuguān | final part of a go game (see 官子) / endgame / to finish up / to come to the final stage
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 2/2"
-date: "2019-08-21"
-tag: 
+createdAt: 2019-08-21T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 始制文字，乃服衣裳。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22987.gif" height=100 data-no-cache)
-    figcaption.text-center shi3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21046.gif" height=100 data-no-cache)
-    figcaption.text-center zhi4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25991.gif" height=100 data-no-cache)
-    figcaption.text-center wen2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23383.gif" height=100 data-no-cache)
-    figcaption.text-center zi4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20035.gif" height=100 data-no-cache)
-    figcaption.text-center nai3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26381.gif" height=100 data-no-cache)
-    figcaption.text-center fu2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34915.gif" height=100 data-no-cache)
-    figcaption.text-center yi1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35059.gif" height=100 data-no-cache)
-    figcaption.text-center chang2
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">始制文字，乃服衣裳。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22987.gif" height="100" />
+    <figcaption class="text-center">shi3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21046.gif" height="100" />
+    <figcaption class="text-center">zhi4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25991.gif" height="100" />
+    <figcaption class="text-center">wen2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23383.gif" height="100" />
+    <figcaption class="text-center">zi4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20035.gif" height="100" />
+    <figcaption class="text-center">nai3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26381.gif" height="100" />
+    <figcaption class="text-center">fu2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34915.gif" height="100" />
+    <figcaption class="text-center">yi1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35059.gif" height="100" />
+    <figcaption class="text-center">chang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 2/3"
-date: "2019-08-23"
+createdAt: 2019-08-23T00:00:00+07:00
 tag: 
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 推位讓國，有虞陶唐。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25512.gif" height=100 data-no-cache)
-    figcaption.text-center tui1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20301.gif" height=100 data-no-cache)
-    figcaption.text-center wei4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35731.gif" height=100 data-no-cache)
-    figcaption.text-center rang4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22283.gif" height=100 data-no-cache)
-    figcaption.text-center guo2
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26377.gif" height=100 data-no-cache)
-    figcaption.text-center you3
-  figure.d-inline-block
-    .hanzi-img 虞
-    figcaption.text-center fu2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38518.gif" height=100 data-no-cache)
-    figcaption.text-center tao2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21776.gif" height=100 data-no-cache)
-    figcaption.text-center tang2
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">推位讓國，有虞陶唐。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25512.gif" height="100" />
+    <figcaption class="text-center">tui1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20301.gif" height="100" />
+    <figcaption class="text-center">wei4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35731.gif" height="100" />
+    <figcaption class="text-center">rang4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22283.gif" height="100" />
+    <figcaption class="text-center">guo2</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26377.gif" height="100" />
+    <figcaption class="text-center">you3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">虞</div>
+    <figcaption class="text-center">fu2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38518.gif" height="100" />
+    <figcaption class="text-center">tao2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21776.gif" height="100" />
+    <figcaption class="text-center">tang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 2/4"
-date: "2019-08-27"
-tag: 
+createdAt: 2019-08-27T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 弔民伐罪，周發殷湯。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24340.gif" height=100 data-no-cache)
-    figcaption.text-center diao1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27665.gif" height=100 data-no-cache)
-    figcaption.text-center min2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20240.gif" height=100 data-no-cache)
-    figcaption.text-center fa2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32618.gif" height=100 data-no-cache)
-    figcaption.text-center zui4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21608.gif" height=100 data-no-cache)
-    figcaption.text-center zhou1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30332.gif" height=100 data-no-cache)
-    figcaption.text-center fa1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27575.gif" height=100 data-no-cache)
-    figcaption.text-center yin1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28271.gif" height=100 data-no-cache)
-    figcaption.text-center tang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">弔民伐罪，周發殷湯。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24340.gif" height="100" />
+    <figcaption class="text-center">diao1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27665.gif" height="100" />
+    <figcaption class="text-center">min2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20240.gif" height="100" />
+    <figcaption class="text-center">fa2</figcaption>
+  </figure>
+  <figure class="d-inline-block">\
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32618.gif" height="100" />
+    <figcaption class="text-center">zui4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21608.gif" height="100" />
+    <figcaption class="text-center">zhou1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30332.gif" height="100" />
+    <figcaption class="text-center">fa1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27575.gif" height="100" />
+    <figcaption class="text-center">yin1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28271.gif" height="100" />
+    <figcaption class="text-center">tang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 2/5"
-date: "2019-08-29"
-tag: 
+createdAt: 2019-08-29T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 坐朝問道，垂拱平章。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22352.gif" height=100 data-no-cache)
-    figcaption.text-center zuo4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26397.gif" height=100 data-no-cache)
-    figcaption.text-center zhao1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21839.gif" height=100 data-no-cache)
-    figcaption.text-center wen4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36947.gif" height=100 data-no-cache)
-    figcaption.text-center dao4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22402.gif" height=100 data-no-cache)
-    figcaption.text-center chui2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25329.gif" height=100 data-no-cache)
-    figcaption.text-center gong3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24179.gif" height=100 data-no-cache)
-    figcaption.text-center ping2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31456.gif" height=100 data-no-cache)
-    figcaption.text-center zhang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">坐朝問道，垂拱平章。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22352.gif" height="100" />
+    <figcaption class="text-center">zuo4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26397.gif" height="100" />
+    <figcaption class="text-center">zhao1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21839.gif" height="100" />
+    <figcaption class="text-center">wen4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36947.gif" height="100" />
+    <figcaption class="text-center">dao4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22402.gif" height="100" />
+    <figcaption class="text-center">chui2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25329.gif" height="100" />
+    <figcaption class="text-center">gong3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24179.gif" height="100" />
+    <figcaption class="text-center">ping2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31456.gif" height="100" />
+    <figcaption class="text-center">zhang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 2/6"
-date: "2019-08-30"
-tag: 
+createdAt: 2019-08-30T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 愛育黎首，臣伏戎羌。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24859.gif" height=100 data-no-cache)
-    figcaption.text-center ai4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32946.gif" height=100 data-no-cache)
-    figcaption.text-center yu4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40654.gif" height=100 data-no-cache)
-    figcaption.text-center li2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39318.gif" height=100 data-no-cache)
-    figcaption.text-center shou3
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33251.gif" height=100 data-no-cache)
-    figcaption.text-center chen2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20239.gif" height=100 data-no-cache)
-    figcaption.text-center fu2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25102.gif" height=100 data-no-cache)
-    figcaption.text-center rong2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32652.gif" height=100 data-no-cache)
-    figcaption.text-center qiang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">愛育黎首，臣伏戎羌。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24859.gif" height="100" />
+    <figcaption class="text-center">ai4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32946.gif" height="100" />
+    <figcaption class="text-center">yu4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40654.gif" height="100" />
+    <figcaption class="text-center">li2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39318.gif" height="100" />
+    <figcaption class="text-center">shou3</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33251.gif" height="100" />
+    <figcaption class="text-center">chen2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20239.gif" height="100" />
+    <figcaption class="text-center">fu2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25102.gif" height="100" />
+    <figcaption class="text-center">rong2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/32652.gif" height="100" />
+    <figcaption class="text-center">qiang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 2/7"
-date: "2019-09-01"
-tag: 
+createdAt: 2019-09-01T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 遐邇一體，率賓歸王。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36944.gif" height=100 data-no-cache)
-    figcaption.text-center xia2
-  figure.d-inline-block
-    .hanzi-img 邇
-    figcaption.text-center er3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/19968.gif" height=100 data-no-cache)
-    figcaption.text-center yi1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39636.gif" height=100 data-no-cache)
-    figcaption.text-center ti3
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29575.gif" height=100 data-no-cache)
-    figcaption.text-center lu:4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36051.gif" height=100 data-no-cache)
-    figcaption.text-center bin1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27512.gif" height=100 data-no-cache)
-    figcaption.text-center gui1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29579.gif" height=100 data-no-cache)
-    figcaption.text-center wang2
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">遐邇一體，率賓歸王。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36944.gif" height="100" />
+    <figcaption class="text-center">xia2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">邇</div>
+    <figcaption class="text-center">er3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/19968.gif" height="100" />
+    <figcaption class="text-center">yi1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39636.gif" height="100" />
+    <figcaption class="text-center">ti3</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29575.gif" height="100" />
+    <figcaption class="text-center">lu:4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36051.gif" height="100" />
+    <figcaption class="text-center">bin1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27512.gif" height="100" />
+    <figcaption class="text-center">gui1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/29579.gif" height="100" />
+    <figcaption class="text-center">wang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 2/8"
-date: "2019-09-02"
-tag: 
+createdAt: 2019-09-02T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 鳴鳳在竹，白駒食場。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40180.gif" height=100 data-no-cache)
-    figcaption.text-center ming2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40179.gif" height=100 data-no-cache)
-    figcaption.text-center feng4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22312.gif" height=100 data-no-cache)
-    figcaption.text-center zai4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31481.gif" height=100 data-no-cache)
-    figcaption.text-center zhu2
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30333.gif" height=100 data-no-cache)
-    figcaption.text-center bai2
-  figure.d-inline-block
-    .hanzi-img 駒
-    figcaption.text-center ju1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39135.gif" height=100 data-no-cache)
-    figcaption.text-center shi2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22580.gif" height=100 data-no-cache)
-    figcaption.text-center chang2
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">鳴鳳在竹，白駒食場。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40180.gif" height="100" />
+    <figcaption class="text-center">ming2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40179.gif" height="100" />
+    <figcaption class="text-center">feng4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22312.gif" height="100" />
+    <figcaption class="text-center">zai4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/31481.gif" height="100" />
+    <figcaption class="text-center">zhu2</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30333.gif" height="100" />
+    <figcaption class="text-center">bai2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">駒</div>
+    <figcaption class="text-center">ju1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39135.gif" height="100" />
+    <figcaption class="text-center">shi2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22580.gif" height="100" />
+    <figcaption class="text-center">chang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,51 @@
 ---
 title: "千字文 - 2/9"
-date: "2019-09-03"
-tag: 
+createdAt: 2019-09-03T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 化被草木，賴及萬方。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21270.gif" height=100 data-no-cache)
-    figcaption.text-center hua4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34987.gif" height=100 data-no-cache)
-    figcaption.text-center bei4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33609.gif" height=100 data-no-cache)
-    figcaption.text-center cao3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26408.gif" height=100 data-no-cache)
-    figcaption.text-center mu4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36084.gif" height=100 data-no-cache)
-    figcaption.text-center lai4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21450.gif" height=100 data-no-cache)
-    figcaption.text-center ji2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33836.gif" height=100 data-no-cache)
-    figcaption.text-center wan4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26041.gif" height=100 data-no-cache)
-    figcaption.text-center fang1
-```
+
+<div class="w-100 mt-3">
+  <h3 class="text-center">化被草木，賴及萬方。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21270.gif" height="100" />
+    <figcaption class="text-center">hua4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/34987.gif" height="100" />
+    <figcaption class="text-center">bei4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33609.gif" height="100" />
+    <figcaption class="text-center">cao3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26408.gif" height="100" />
+    <figcaption class="text-center">mu4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36084.gif" height="100" />
+    <figcaption class="text-center">lai4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/21450.gif" height="100" />
+    <figcaption class="text-center">ji2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33836.gif" height="100" />
+    <figcaption class="text-center">wan4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/26041.gif" height="100" />
+    <figcaption class="text-center">fang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 3/1"
-date: "2019-09-12"
-tag: 
+createdAt: 2019-09-12T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 蓋此身髮，四大五常。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33995.gif" height=100 data-no-cache)
-    figcaption.text-center gai4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27492.gif" height=100 data-no-cache)
-    figcaption.text-center ci3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36523.gif" height=100 data-no-cache)
-    figcaption.text-center shen1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39662.gif" height=100 data-no-cache)
-    figcaption.text-center fa4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22235.gif" height=100 data-no-cache)
-    figcaption.text-center si4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22823.gif" height=100 data-no-cache)
-    figcaption.text-center da4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20116.gif" height=100 data-no-cache)
-    figcaption.text-center wu3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24120.gif" height=100 data-no-cache)
-    figcaption.text-center chang2
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">蓋此身髮，四大五常。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33995.gif" height="100" />
+    <figcaption class="text-center">gai4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27492.gif" height="100" />
+    <figcaption class="text-center">ci3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/36523.gif" height="100" />
+    <figcaption class="text-center">shen1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39662.gif" height="100" />
+    <figcaption class="text-center">fa4</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22235.gif" height="100" />
+    <figcaption class="text-center">si4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22823.gif" height="100" />
+    <figcaption class="text-center">da4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20116.gif" height="100" />
+    <figcaption class="text-center">wu3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24120.gif" height="100" />
+    <figcaption class="text-center">chang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 3/2"
-date: "2019-09-15"
-tag: 
+createdAt: 2019-09-15T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 恭惟鞠養，豈敢毀傷。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24685.gif" height=100 data-no-cache)
-    figcaption.text-center gong1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24799.gif" height=100 data-no-cache)
-    figcaption.text-center wei2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38816.gif" height=100 data-no-cache)
-    figcaption.text-center ju1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39178.gif" height=100 data-no-cache)
-    figcaption.text-center yang3
-.w-100
-  figure.d-inline-block
-    .hanzi-img 豈
-    figcaption.text-center qi3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25954.gif" height=100 data-no-cache)
-    figcaption.text-center gan3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27584.gif" height=100 data-no-cache)
-    figcaption.text-center hui3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20663.gif" height=100 data-no-cache)
-    figcaption.text-center shang1
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">恭惟鞠養，豈敢毀傷。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24685.gif" height="100" />
+    <figcaption class="text-center">gong1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24799.gif" height="100" />
+    <figcaption class="text-center">wei2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/38816.gif" height="100" />
+    <figcaption class="text-center">ju1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/39178.gif" height="100" />
+    <figcaption class="text-center">yang3</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <div class="hanzi-img">豈</div>
+    <figcaption class="text-center">qi3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25954.gif" height="100" />
+    <figcaption class="text-center">gan3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27584.gif" height="100" />
+    <figcaption class="text-center">hui3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20663.gif" height="100" />
+    <figcaption class="text-center">shang1</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -1,41 +1,50 @@
 ---
 title: "千字文 - 3/3"
-date: "2019-09-23"
-tag: 
+createdAt: 2019-09-23T00:00:00+07:00
+tag:
 - 千字文
 - 汉字
 ---

-```pug parsed
-.w-100.mt-3
-  h3.text-center 女慕貞絜，男效才良。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22899.gif" height=100 data-no-cache)
-    figcaption.text-center nu:3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24917.gif" height=100 data-no-cache)
-    figcaption.text-center mu4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35998.gif" height=100 data-no-cache)
-    figcaption.text-center zhen1
-  figure.d-inline-block
-    .hanzi-img 絜
-    figcaption.text-center xie2
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30007.gif" height=100 data-no-cache)
-    figcaption.text-center nan2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25928.gif" height=100 data-no-cache)
-    figcaption.text-center xiao4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25165.gif" height=100 data-no-cache)
-    figcaption.text-center cai2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33391.gif" height=100 data-no-cache)
-    figcaption.text-center liang2
-```
+<div class="w-100 mt-3">
+  <h3 class="text-center">女慕貞絜，男效才良。</h3>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/22899.gif" height="100" />
+    <figcaption class="text-center">nu:3</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24917.gif" height="100" />
+    <figcaption class="text-center">mu4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/35998.gif" height="100" />
+    <figcaption class="text-center">zhen1</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <div class="hanzi-img">絜</div>
+    <figcaption class="text-center">xie2</figcaption>
+  </figure>
+</div>
+<div class="w-100">
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30007.gif" height="100" />
+    <figcaption class="text-center">nan2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25928.gif" height="100" />
+    <figcaption class="text-center">xiao4</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/25165.gif" height="100" />
+    <figcaption class="text-center">cai2</figcaption>
+  </figure>
+  <figure class="d-inline-block">
+    <img src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33391.gif" height="100" />
+    <figcaption class="text-center">liang2</figcaption>
+  </figure>
+</div>

 <style>
 img[height="100"] {
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    '@nuxtjs/eslint-config-typescript',
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended',
+  ],
+  plugins: ['prettier'],
+  // add your custom rules here
+  rules: {
+    'require-await': 0,
+    'vue/no-v-html': 0,
+    'import/order': 0,
+  },
+}
@@ -0,0 +1,19 @@
+# This file specifies files that are *not* uploaded to Google Cloud Platform
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Node.js dependencies:
+node_modules/
+
+/scripts/
@@ -0,0 +1,93 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+/built/
+/static/media/
@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}
@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+}
@@ -0,0 +1,20 @@
+# zhdiary
+
+## Build Setup
+
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+# generate static project
+$ yarn generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
@@ -0,0 +1,20 @@
+runtime: nodejs12
+
+instance_class: F2
+
+handlers:
+  - url: /_nuxt
+    static_dir: .nuxt/dist/client
+    secure: always
+
+  - url: /(.*\.(gif|png|jpg|ico|txt))$
+    static_files: static/\1
+    upload: static/.*\.(gif|png|jpg|ico|txt)$
+    secure: always
+
+  - url: /.*
+    script: auto
+    secure: always
+
+env_variables:
+  HOST: '0.0.0.0'
@@ -0,0 +1,3 @@
+export default function () {
+  return { x: 0, y: 0 }
+}
@@ -0,0 +1,6 @@
+interface IPostTeaser {
+  title: string
+  path: string
+  date?: string
+  excerpt: string
+}
@@ -0,0 +1,3 @@
+import type { ITheme } from '~/server/theme'
+
+export const THEME: ITheme = JSON.parse(process.env.THEME!)
@@ -0,0 +1,48 @@
+/* eslint-disable camelcase */
+
+import { THEME } from './global'
+
+export type Theme = 'light' | 'dark'
+
+export interface CommentsConfig {
+  host: string
+  site_id: string
+  url?: string
+  max_shown_comments?: number
+  theme?: Theme
+  page_title?: string
+  node?: string | HTMLElement
+  locale?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  __colors__?: any
+}
+
+declare global {
+  interface Window {
+    remark_config: CommentsConfig
+    REMARK42: {
+      changeTheme(theme: Theme): void
+      destroy?: () => void
+      createInstance: (
+        remark_config: CommentsConfig
+      ) =>
+        | {
+            changeTheme(theme: Theme): void
+            destroy(): void
+          }
+        | undefined
+    }
+  }
+}
+
+if (process.browser && THEME?.comment?.remark42) {
+  ;(function (c) {
+    for (let i = 0; i < c.length; i++) {
+      const d = document
+      const s = d.createElement('script')
+      s.src = THEME.comment.remark42.host + '/web/' + c[i] + '.js'
+      s.defer = true
+      ;(d.head || d.body).appendChild(s)
+    }
+  })(['embed'])
+}
@@ -0,0 +1,79 @@
+<template>
+  <article>
+    <post-teaser v-for="p in posts" :key="p.path" :post="p"></post-teaser>
+
+    <nav v-if="count > 5">
+      <ul>
+        <li v-if="page > 1">
+          <nuxt-link :to="makePageUrl(1)" aria-label="page 1">1</nuxt-link>
+        </li>
+
+        <li v-if="page > 3">
+          <span> &hellip; </span>
+        </li>
+
+        <li v-if="page > 2">
+          <nuxt-link
+            :to="makePageUrl(page - 1)"
+            :aria-label="`page ${page - 1}`"
+          >
+            {{ page - 1 }}
+          </nuxt-link>
+        </li>
+
+        <li>
+          <span>
+            {{ page }}
+          </span>
+        </li>
+
+        <li v-if="page < total - 1">
+          <nuxt-link
+            :to="makePageUrl(page + 1)"
+            :aria-label="`page ${page + 1}`"
+          >
+            {{ page + 1 }}
+          </nuxt-link>
+        </li>
+
+        <li v-if="page < total - 2">
+          <span> &hellip; </span>
+        </li>
+
+        <li v-if="page < total">
+          <nuxt-link :to="makePageUrl(total)" :aria-label="`page ${total}`">
+            {{ total }}
+          </nuxt-link>
+        </li>
+      </ul>
+    </nav>
+  </article>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class PostQuery extends Vue {
+  @Prop({ required: true }) posts!: IPostTeaser[]
+  @Prop({ required: true }) count!: number
+
+  get page() {
+    return parseInt((this.$route.query.page as string) || '1')
+  }
+
+  get total() {
+    return Math.ceil(this.count / 5)
+  }
+
+  makePageUrl(page: number) {
+    return this.$router.resolve({
+      path: this.$route.path,
+      query: {
+        ...this.$route.query,
+        page: page.toString(),
+      },
+    }).href
+  }
+}
+</script>
@@ -0,0 +1,48 @@
+<template>
+  <section>
+    <h2>
+      <nuxt-link :to="'post/' + post.path">
+        {{ post.title }}
+      </nuxt-link>
+    </h2>
+    <small>
+      <span>
+        by
+        <a
+          v-if="theme.author.url"
+          :href="theme.author.url"
+          target="_blank"
+          rel="noopener"
+        >
+          {{ theme.author.name }}
+        </a>
+        <span v-else>
+          {{ theme.author.name }}
+        </span>
+      </span>
+      <span v-if="post.date" style="float: right">
+        {{ post.date | formatDate }}
+      </span>
+    </small>
+
+    <article v-html="post.excerpt"></article>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+import { THEME } from '~/assets/global'
+
+@Component
+export default class PostTeaser extends Vue {
+  @Prop() post!: IPostTeaser
+
+  theme = THEME
+}
+</script>
+
+<style scoped>
+article {
+  margin-top: 2em;
+}
+</style>
@@ -0,0 +1,74 @@
+<template>
+  <main>
+    <header>
+      <h1>{{ theme.title }}</h1>
+
+      <nav>
+        <ul>
+          <li>
+            <nuxt-link to="/">Home</nuxt-link>
+          </li>
+          <li v-for="(n, i) in theme.nav || []" :key="i">
+            <nuxt-link v-if="n.to" :to="n.to">{{ n.name }}</nuxt-link>
+            <a v-else :href="n.href" target="_blank" rel="noopener">
+              {{ n.name }}
+            </a>
+          </li>
+        </ul>
+
+        <form @submit.prevent="doSearch">
+          <input v-model="q" type="search" placeholder="Search..." />
+          <div class="icon">🔎</div>
+        </form>
+      </nav>
+    </header>
+    <Nuxt />
+  </main>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+import { THEME } from '~/assets/global'
+
+@Component
+export default class DefaultLayout extends Vue {
+  theme = THEME
+  q = this.$route.query.q || ''
+
+  doSearch() {
+    let path = this.$route.path
+    if (['/blog', '/tag'].includes(path)) {
+      path = '/blog'
+    }
+
+    this.$router.push({
+      path,
+      query: {
+        q: this.q,
+      },
+    })
+  }
+}
+</script>
+
+<style scoped>
+nav ul {
+  display: inline-block;
+}
+
+form {
+  float: right;
+  max-width: 300px;
+  position: relative;
+}
+
+form .icon {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+
+input {
+  padding-right: 1.5em;
+}
+</style>
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <section>
+      <h2 v-if="error.statusCode === 404">Page not found</h2>
+      <pre v-else style="width: 100%">{{ error }}</pre>
+    </section>
+    <section>
+      <NuxtLink to="/">Home page</NuxtLink>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['error'],
+  layout: 'error', // you can set a custom layout for the error page
+}
+</script>
@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
@@ -0,0 +1,86 @@
+import { NuxtConfig } from '@nuxt/types'
+
+import { getTheme } from './server/theme'
+
+const config = async (): Promise<NuxtConfig> => {
+  const theme = getTheme()
+  const PORT = process.env.PORT || '3000'
+
+  return {
+    // Global page headers (https://go.nuxtjs.dev/config-head)
+    head: {
+      title: theme.title,
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        {
+          hid: 'description',
+          name: 'description',
+          content: theme.description || '',
+        },
+      ],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/media/favicon.ico' },
+        {
+          rel: 'stylesheet',
+          href: theme.awsm
+            ? `https://unpkg.com/awsm.css/dist/awsm_theme_${theme.awsm}.min.css`
+            : 'https://unpkg.com/awsm.css/dist/awsm.min.css',
+        },
+      ],
+      script: [
+        ...(theme.analytics?.plausible
+          ? [
+              {
+                src: 'https://plausible.io/js/plausible.js',
+                async: true,
+                defer: true,
+                'data-domain': theme.analytics?.plausible,
+              },
+            ]
+          : []),
+        {
+          src:
+            'https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js',
+          defer: true,
+        },
+        {
+          type: 'module',
+          src: '/webcomponents.js',
+        },
+      ],
+    },
+
+    // Global CSS (https://go.nuxtjs.dev/config-css)
+    css: [],
+
+    // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
+    plugins: [
+      '~/plugins/axios-fix.ts',
+      '~/plugins/format.ts',
+      '~/plugins/remark42.client.js',
+    ],
+
+    // Auto import components (https://go.nuxtjs.dev/config-components)
+    components: true,
+
+    // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
+    buildModules: [
+      // https://go.nuxtjs.dev/typescript
+      '@nuxt/typescript-build',
+    ],
+
+    // Modules (https://go.nuxtjs.dev/config-modules)
+    modules: ['@nuxtjs/axios'],
+
+    // Build Configuration (https://go.nuxtjs.dev/config-build)
+    build: {},
+    env: {
+      THEME: JSON.stringify(theme),
+      PORT,
+    },
+    serverMiddleware: [{ path: '/api', handler: '~/server/index.ts' }],
+  }
+}
+
+export default config
@@ -0,0 +1,73 @@
+{
+  "name": "@patarapolw/nuxt-awsm",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
+    "lint:js": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+    "lint": "yarn lint:js",
+    "ts": "ts-node -O '{\"module\":\"commonjs\"}'",
+    "ts:prepare": "yarn ts scripts/prepare.ts",
+    "predeploy": "yarn build",
+    "deploy": "gcloud app deploy"
+  },
+  "dependencies": {
+    "@nuxt/typescript-runtime": "^2.0.0",
+    "@nuxtjs/axios": "^5.12.4",
+    "@patarapolw/scope-css": "^1.3.0",
+    "@types/express": "^4.17.9",
+    "@types/js-yaml": "^3.12.5",
+    "@types/morgan": "^1.9.2",
+    "better-sqlite3": "^7.1.1",
+    "cheerio": "^1.0.0-rc.3",
+    "core-js": "^3.6.5",
+    "express": "^4.17.1",
+    "js-yaml": "^3.14.1",
+    "morgan": "^1.10.0",
+    "nuxt": "^2.14.6",
+    "nuxt-property-decorator": "^2.8.8",
+    "showdown": "^1.9.1",
+    "zod": "^1.11.11"
+  },
+  "devDependencies": {
+    "@nuxt/types": "^2.14.6",
+    "@nuxt/typescript-build": "^2.0.3",
+    "@nuxtjs/eslint-config": "^3.1.0",
+    "@nuxtjs/eslint-config-typescript": "^3.0.0",
+    "@nuxtjs/eslint-module": "^2.0.0",
+    "@types/better-sqlite3": "^5.4.1",
+    "@types/cheerio": "^0.22.23",
+    "@types/ejs": "^3.0.5",
+    "@types/fs-extra": "^9.0.5",
+    "@types/rimraf": "^3.0.0",
+    "@types/showdown": "^1.9.3",
+    "babel-eslint": "^10.1.0",
+    "dotenv": "^8.2.0",
+    "ejs": "^3.1.5",
+    "eslint": "^7.10.0",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-nuxt": "^1.0.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "import-sort-parser-typescript": "^6.0.0",
+    "nodejieba": "^2.5.1",
+    "prettier": "^2.1.2",
+    "ts-node": "^9.1.1",
+    "typescript": "4.0.5"
+  },
+  "importSort": {
+    ".ts, .tsx, .config.ts": {
+      "parser": "typescript",
+      "style": "module"
+    }
+  },
+  "engines": {
+    "node": "12",
+    "npm": "please-use-yarn",
+    "yarn": "1",
+    "pnpm": "please-use-yarn"
+  },
+  "engineStrict": true
+}
@@ -0,0 +1,34 @@
+<template>
+  <p v-if="$fetchState.pending"></p>
+  <p v-else-if="$fetchState.error">
+    An error occurred {{ $fetchState.error.message }}
+  </p>
+  <p v-else-if="!posts.length">No posts found.</p>
+  <post-query v-else :posts="posts" :count="count" />
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component<BlogPage>({
+  watch: {
+    '$route.query.q': '$fetch',
+    '$route.query.page': '$fetch',
+  },
+  async fetch() {
+    const { result, count } = await this.$axios.$get('/api/q', {
+      params: {
+        q: this.$route.query.q,
+        page: this.$route.query.page,
+      },
+    })
+
+    this.posts = result
+    this.count = count
+  },
+})
+export default class BlogPage extends Vue {
+  posts: IPostTeaser[] = []
+  count = 0
+}
+</script>
@@ -0,0 +1,9 @@
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  middleware: (ctx) => {
+    ctx.redirect('/blog')
+  },
+})
+</script>
@@ -0,0 +1,116 @@
+<template>
+  <p v-if="$fetchState.pending"></p>
+  <p v-else-if="$fetchState.error">
+    An error occurred {{ $fetchState.error.message }}
+  </p>
+  <section v-else>
+    <section>
+      <h2>
+        {{ post.title }}
+      </h2>
+      <small>
+        <span>
+          by
+          <a
+            v-if="theme.author.url"
+            :href="theme.author.url"
+            target="_blank"
+            rel="noopener"
+          >
+            {{ theme.author.name }}
+          </a>
+          <span v-else>
+            {{ theme.author.name }}
+          </span>
+        </span>
+        <span v-if="post.date" style="float: right">
+          {{ post.date | formatDate }}
+        </span>
+      </small>
+    </section>
+
+    <section v-html="post.content"></section>
+
+    <section class="tags-container">
+      <span>Tags:</span>
+      <span v-for="t in post.tag || []" :key="t">
+        <nuxt-link :to="`/tag/${t}`">
+          {{ t }}
+        </nuxt-link>
+      </span>
+    </section>
+
+    <footer v-if="remark42settings">
+      <div ref="remark42" />
+    </footer>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch } from 'nuxt-property-decorator'
+import { THEME } from '~/assets/global'
+import '~/assets/remark42'
+
+@Component<PostPage>({
+  async fetch() {
+    const r = await this.$axios.$get('/api', {
+      params: {
+        path: this.$route.params.pathMatch,
+      },
+    })
+
+    this.post = r
+  },
+  mounted() {
+    this.initRemark42()
+  },
+  beforeDestroy() {
+    if (this.remark42Instance) {
+      this.remark42Instance.destroy()
+    }
+  },
+})
+export default class PostPage extends Vue {
+  post: {
+    date?: string
+    title: string
+    image?: string
+    tag?: string[]
+    category?: string
+    content: string
+  } | null = null
+
+  theme = THEME
+
+  remark42settings = THEME.comment?.remark42 || null
+  remark42Instance: any = null
+
+  @Watch('$fetchState.pending')
+  initRemark42() {
+    this.$nextTick(() => {
+      if (
+        this.$refs.remark42 &&
+        process.browser &&
+        this.remark42settings &&
+        window.REMARK42
+      ) {
+        if (this.remark42Instance) {
+          this.remark42Instance.destroy()
+        }
+
+        this.remark42Instance = window.REMARK42.createInstance({
+          node: this.$refs.remark42 as HTMLElement,
+          host: this.remark42settings.host,
+          site_id: this.remark42settings.siteId,
+        })
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+.tags-container > span + span {
+  margin-left: 0.6em;
+}
+</style>
@@ -0,0 +1,32 @@
+<template>
+  <p v-if="$fetchState.pending"></p>
+  <p v-else-if="$fetchState.error">An error occurred {{ $fetchState.error }}</p>
+  <post-query v-else :posts="posts" :count="count" />
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component<TagPage>({
+  watch: {
+    '$route.query.q': '$fetch',
+    '$route.query.page': '$fetch',
+  },
+  async fetch() {
+    const { result, count } = await this.$axios.$get('/api/q', {
+      params: {
+        q: this.$route.query.q,
+        page: this.$route.query.page,
+        tag: this.$route.params.tag,
+      },
+    })
+
+    this.posts = result
+    this.count = count
+  },
+})
+export default class TagPage extends Vue {
+  posts: IPostTeaser[] = []
+  count = 0
+}
+</script>
@@ -0,0 +1,31 @@
+import { Plugin } from '@nuxt/types'
+
+const plugin: Plugin = ({ $axios, error }) => {
+  if (typeof location !== 'undefined') {
+    $axios.defaults.baseURL = location.origin
+  }
+
+  $axios.interceptors.response.use(
+    (r) => {
+      if (r.data?.error) {
+        error({
+          statusCode: r.status,
+          message: r.data.error,
+        })
+        throw new Error(r.data.error)
+      }
+
+      return r
+    },
+    (err) => {
+      error({
+        statusCode: err.response.status,
+        message: err.toJSON(),
+      })
+
+      return Promise.reject(err)
+    }
+  )
+}
+
+export default plugin
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+Vue.filter('formatDate', (s: string) => {
+  return s
+    ? new Date(s).toLocaleDateString([], {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'short',
+      })
+    : ''
+})
@@ -0,0 +1,19 @@
+import fs from 'fs'
+import path from 'path'
+
+import dotenv from 'dotenv'
+
+import { THEME_FILENAME } from '../server/theme'
+
+dotenv.config({ path: '../../.env' })
+dotenv.config()
+
+export const CONTENT_PATH = path.resolve(
+  process.env.CONTENT_PATH ||
+    (fs.existsSync('../../_posts') ? '../..' : 'content')
+)
+
+export const srcPath = (
+  root: '_posts' | '_media' | typeof THEME_FILENAME,
+  ...ps: string[]
+): string => path.join(CONTENT_PATH, root, ...ps)
@@ -0,0 +1,148 @@
+import crypto from 'crypto'
+
+import scopeCss from '@patarapolw/scope-css'
+import cheerio from 'cheerio'
+import ejs from 'ejs'
+import jieba from 'nodejieba'
+import showdown from 'showdown'
+
+export class MakeHTML {
+  $ = cheerio.load('')
+
+  mdConverter = new showdown.Converter({
+    noHeaderId: true,
+    parseImgDimensions: true,
+    simplifiedAutoLink: true,
+    // literalMidWordUnderscores: true,
+    strikethrough: true,
+    tables: true,
+    tasklists: true,
+    // simpleLineBreaks: true,
+    openLinksInNewWindow: true,
+    backslashEscapesHTMLTags: true,
+    emoji: true,
+    underline: true,
+    disableForced4SpacesIndentedSublists: true,
+    metadata: true,
+  })
+
+  constructor() {
+    this.mdConverter.addExtension(
+      {
+        type: 'lang',
+        regex: /\\\n/g,
+        replace: '<br />',
+      },
+      'commonmark-simple-linebreak'
+    )
+
+    /**
+     * ! For some reasons default underscore italic fails to render...
+     */
+    this.mdConverter.addExtension(
+      {
+        type: 'lang',
+        regex: /([^\\])_{1}(.*?[^\\])_{1}/g,
+        replace: '$1<i>$2</i>',
+      },
+      'underscore-italic'
+    )
+
+    /**
+     * ! This is the only way to preserve syntax highlighting, while output multiline strings correctly
+     */
+    this.mdConverter.addExtension(
+      {
+        type: 'lang',
+        regex: /(^|\n)```html parsed([^]+)\n```\n/g,
+        replace: (_: string, p1: string, p2: string) => {
+          return (
+            p1 +
+            ejs.render(p2, {
+              rmWhitespace: true,
+              beautify: false,
+            })
+          )
+        },
+      },
+      'html-parsed'
+    )
+  }
+
+  async parse(
+    filename: string
+  ): Promise<{
+    $: cheerio.Cheerio
+    html(): string
+    clean(): string
+  }> {
+    const id =
+      'md-' +
+      crypto
+        .createHash('sha256')
+        .update(filename)
+        .digest()
+        .toString('hex')
+        .substr(0, 8)
+
+    const $div = this.$(`<div id="${id}">`)
+    $div.html(await this.getHTML(filename))
+    $div.find('style').each((_, el) => {
+      const $el = this.$(el)
+      const html = $el.html() || ''
+      if (html.trim()) {
+        $el.html(scopeCss(html, `#${id}`))
+      }
+    })
+
+    return {
+      $: $div,
+      html: () => {
+        return this.$('<div>').append($div).html() || ''
+      },
+      clean: () => {
+        return jieba.cutForSearch($div.text() || '').join(' ')
+      },
+    }
+  }
+
+  private async getHTML(filename: string) {
+    return this.mdConverter.makeHtml(
+      await ejs.renderFile(filename, {
+        youtube: (id: string) =>
+          ejs.render(
+            /* html */ `
+          <div style="position:relative;padding-top:56.25%;">
+            <iframe src="https://www.youtube.com/embed/${id}"
+              frameborder="0"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+              style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>
+          </div>`,
+            { rmWhitespace: true, beautify: false }
+          ),
+        xCard: (opts: {
+          href: string
+          image?: string
+          title: string
+          description?: string
+        }) =>
+          this.$('<div>')
+            .append(
+              this.$('<x-card>')
+                .attr(opts)
+                .append(
+                  this.$('<a>')
+                    .attr({
+                      href: opts.href,
+                      rel: 'noopener',
+                      target: '_blank',
+                    })
+                    .text(opts.title)
+                )
+            )
+            .html(),
+      })
+    )
+  }
+}
@@ -0,0 +1,57 @@
+import fg from 'fast-glob'
+import fs from 'fs-extra'
+import yaml from 'js-yaml'
+import rimraf from 'rimraf'
+
+import { Database, IMatter } from '../server/db'
+import { builtPath, dstMediaPath } from '../server/dir'
+import { THEME_FILENAME } from '../server/theme'
+import { srcPath } from './dir'
+import { MakeHTML } from './make-html'
+
+async function main() {
+  rimraf.sync(dstMediaPath())
+  rimraf.sync(builtPath())
+
+  await fs.copy(srcPath('_media'), dstMediaPath())
+  await fs.ensureDir(builtPath())
+
+  await fs.copyFile(srcPath(THEME_FILENAME), builtPath(THEME_FILENAME))
+
+  const db = new Database()
+  db.init()
+
+  const files = await fg('**/*.md', {
+    cwd: srcPath('_posts'),
+  })
+
+  const makeHtml = new MakeHTML()
+
+  await Promise.all(
+    files.map(async (f) => {
+      const path = f.replace(/\.md$/, '')
+      const markdown = fs.readFileSync(srcPath('_posts', f), 'utf8')
+
+      const [h] = markdown.substr(4).split(/---\n(.*)$/s)
+      const header = yaml.safeLoad(h) as IMatter
+
+      const r = await makeHtml.parse(srcPath('_posts', f))
+      const contentHtml = r.html()
+      const excerptHtml = contentHtml.split(
+        /<!-- excerpt(?:_separator)? -->/
+      )[0]
+
+      db.insert({
+        ...header,
+        path,
+        content: r.clean(),
+        excerptHtml,
+        contentHtml,
+      })
+    })
+  )
+}
+
+if (require.main === module) {
+  main()
+}
@@ -0,0 +1,280 @@
+import sqlite3 from 'better-sqlite3'
+import * as z from 'zod'
+
+import { builtPath } from './dir'
+
+const zMatter = z.object({
+  date: z.date().optional(),
+  createdAt: z.date().optional(),
+  updatedAt: z.date().optional(),
+  priority: z.number().optional(),
+  title: z.string(),
+  image: z.string().optional(),
+  tag: z.array(z.string()).optional(),
+  category: z.string().optional(),
+})
+
+export type IMatter = z.infer<typeof zMatter>
+
+export const zPost = z
+  .object({
+    path: z.string(),
+    /**
+     * Cleaned and jieba-separated markdown
+     */
+    content: z.string(),
+    excerptHtml: z.string(),
+    contentHtml: z.string(),
+  })
+  .merge(zMatter.nonstrict())
+
+export type IPost = z.infer<typeof zPost>
+
+export class Database {
+  db: sqlite3.Database
+
+  constructor(opts?: sqlite3.Options) {
+    this.db = sqlite3(builtPath('data.db'), opts)
+  }
+
+  public init(): void {
+    this.db.exec(/* sql */ `
+    CREATE TABLE IF NOT EXISTS files (
+      [path]        TEXT PRIMARY KEY,
+      [date]        INT,    -- epoch milli
+      createdAt     INT,    -- epoch milli
+      updatedAt     INT,    -- epoch milli
+      priority      INT,
+      -- q.title
+      [image]       TEXT,
+      -- m2o files_tag
+      -- q.category
+      -- q.content
+      excerptHtml   TEXT NOT NULL,
+      contentHtml   TEXT NOT NULL
+    );
+
+    CREATE INDEX IF NOT EXISTS files_date ON files([date]);
+    CREATE INDEX IF NOT EXISTS files_createdAt ON files(createdAt);
+    CREATE INDEX IF NOT EXISTS files_updatedAt ON files(updatedAt);
+    CREATE INDEX IF NOT EXISTS files_priority ON files(priority);
+
+    CREATE TABLE IF NOT EXISTS files_tag (
+      [path]        TEXT NOT NULL,
+      tag           TEXT NOT NULL,
+      PRIMARY KEY ([path], tag)
+    );
+    `)
+
+    this.db.exec(/* sql */ `
+    CREATE VIRTUAL TABLE IF NOT EXISTS q USING fts5 (
+      [path],       -- REFERENCES files([path])
+      title,
+      tag,          -- space separated
+      category,     -- can compare via equal
+      content       -- cleaned markdown
+    );
+    `)
+  }
+
+  public insert(...ps: IPost[]): void {
+    const fStmt = this.db.prepare(/* sql */ `
+    INSERT INTO files ([path], [date], [createdAt], [updatedAt], priority, [image], excerptHtml, contentHtml)
+    VALUES (@path, @date, @createdAt, @updatedAt, @priority, @image, @excerptHtml, @contentHtml)
+    `)
+
+    const ftStmt = this.db.prepare(/* sql */ `
+    INSERT INTO files_tag ([path], tag)
+    VALUES (@path, @tag)
+    `)
+
+    const qStmt = this.db.prepare(/* sql */ `
+    INSERT INTO q ([path], title, tag, category, content)
+    VALUES (@path, @title, @tag, @category, @content)
+    `)
+
+    this.db.transaction(() => {
+      // eslint-disable-next-line array-callback-return
+      ps.map((p) => {
+        const {
+          path,
+          date,
+          createdAt,
+          updatedAt,
+          priority,
+          image,
+          excerptHtml,
+          contentHtml,
+          title,
+          tag,
+          category,
+          content,
+        } = zPost.parse(p)
+
+        fStmt.run({
+          path,
+          priority,
+          image,
+          excerptHtml,
+          contentHtml,
+          date: date ? date.getTime() : null,
+          createdAt: createdAt ? createdAt.getTime() : null,
+          updatedAt: updatedAt ? updatedAt.getTime() : null,
+        })
+
+        qStmt.run({
+          path,
+          title,
+          category,
+          content,
+          tag: tag ? tag.join(' ') : undefined,
+        })
+
+        if (tag) {
+          Array.from(new Set(tag)).map((t) => {
+            ftStmt.run({
+              path,
+              tag: t,
+            })
+          })
+        }
+      })
+    })()
+  }
+
+  public get(id: string) {
+    const r = this.db
+      .prepare(
+        /* sql */ `
+    SELECT
+      [date],
+      title,
+      [image],
+      GROUP_CONCAT(ft.tag, ' ')   tag,
+      category,
+      contentHtml   content
+    FROM files f
+    JOIN      q             ON q.path = f.path
+    LEFT JOIN files_tag ft  ON ft.path = f.path
+    WHERE f.path = @id
+    GROUP BY f.path
+    `
+      )
+      .get({ id })
+
+    if (!r) {
+      return null
+    }
+
+    return {
+      ...r,
+      date: r.date ? new Date(r.date) : undefined,
+      tag: r.tag ? r.tag.split(/ /g) : undefined,
+    } as {
+      date?: Date
+      title: string
+      image?: string
+      tag?: string[]
+      category?: string
+      content: string
+    }
+  }
+
+  public q(
+    q: string,
+    opts: {
+      offset: number
+      limit: number
+      tag?: string
+    }
+  ) {
+    return this._search(q, {
+      ...opts,
+      orderedBy: 'RANK',
+    })
+  }
+
+  public by(opts: { tag?: string; offset: number; limit: number }) {
+    return this._search('', {
+      ...opts,
+      orderedBy: 'priority DESC, [date] DESC, createdAt DESC, updatedAt DESC',
+      where: ['[date] IS NOT NULL'],
+    })
+  }
+
+  private _search(
+    q: string,
+    opts: {
+      offset: number
+      limit: number
+      orderedBy: string
+      tag?: string
+      where?: string[]
+    }
+  ) {
+    const $where: string[] = []
+    if (q) {
+      $where.push('q = @q')
+    }
+
+    if (opts.tag) {
+      $where.push('ft.tag = @tag')
+    }
+
+    if (opts.where) {
+      $where.push(...opts.where)
+    }
+
+    const fromSegment = /* sql */ `
+    FROM files f
+    JOIN q ON q.path = f.path
+    ${opts.tag ? `LEFT JOIN files_tag ft ON ft.path = f.path` : ''}
+    WHERE ${$where.join(' AND ') || 'TRUE'}
+    ${opts.tag ? 'GROUP BY f.path' : ''}
+    `
+
+    const cond = {
+      q,
+      tag: opts.tag,
+    }
+
+    const count =
+      this.db
+        .prepare(
+          /* sql */ `
+    SELECT COUNT(f.path) [count]
+    ${fromSegment}
+    `
+        )
+        .get(cond)?.count || 0
+
+    const result = this.db
+      .prepare(
+        /* sql */ `
+    SELECT
+      f.path    [path],
+      [date],
+      title,
+      [image],
+      category,
+      excerptHtml   excerpt
+    ${fromSegment}
+    ORDER BY ${opts.orderedBy}
+    LIMIT ${opts.limit} OFFSET ${opts.offset}
+    `
+      )
+      .all(cond) as {
+      path: string
+      date?: Date
+      title: string
+      image?: string
+      category?: string
+      excerpt: string
+    }[]
+
+    return {
+      result,
+      count,
+    }
+  }
+}
@@ -0,0 +1,7 @@
+import path from 'path'
+
+export const builtPath = (...ps: string[]): string =>
+  path.join(__dirname, '../built', ...ps)
+
+export const dstMediaPath = (...ps: string[]): string =>
+  path.join(__dirname, '../static/media', ...ps)
@@ -0,0 +1,69 @@
+import express from 'express'
+import morgan from 'morgan'
+import * as z from 'zod'
+
+import { Database } from './db'
+
+const app = express()
+app.use(morgan('dev'))
+
+const db = new Database({ readonly: true })
+
+app.get('/', (req, res) => {
+  const { path } = z
+    .object({
+      path: z.string(),
+    })
+    .parse(req.query)
+
+  const r = db.get(path)
+  if (!r) {
+    res.sendStatus(404)
+    return
+  }
+
+  res.json(r)
+})
+
+app.get('/q', (req, res) => {
+  const { q, tag, page: _page = '1' } = z
+    .object({
+      q: z.string().optional(),
+      tag: z.string().optional(),
+      page: z
+        .string()
+        .refine((s) => /^\d+$/.test(s))
+        .optional(),
+    })
+    .parse(req.query)
+
+  const perPage = 5
+  const offset = (parseInt(_page) - 1) * perPage
+
+  if (q) {
+    res.json(
+      db.q(q, {
+        offset,
+        limit: perPage,
+        tag,
+      })
+    )
+    return
+  }
+
+  res.json(
+    db.by({
+      offset,
+      limit: perPage,
+      tag,
+    })
+  )
+})
+
+app.use((err: Error, _: express.Request, res: express.Response) => {
+  // eslint-disable-next-line no-console
+  console.error(err.stack)
+  res.status(500).send(err)
+})
+
+export default app
@@ -0,0 +1,61 @@
+import fs from 'fs'
+import path from 'path'
+
+import yaml from 'js-yaml'
+import * as z from 'zod'
+
+export const THEME_FILENAME = 'theme.yml'
+
+export const zTheme = z
+  .object({
+    title: z.string(),
+    awsm: z.string().optional(),
+    description: z.string().optional(),
+    keywords: z.array(z.string()).optional(),
+    nav: z
+      .array(
+        z
+          .object({
+            name: z.string(),
+            to: z.string(),
+          })
+          .or(
+            z.object({
+              name: z.string(),
+              href: z.string(),
+            })
+          )
+      )
+      .optional(),
+    author: z
+      .object({
+        url: z.string().optional(),
+        email: z.string().optional(),
+        name: z.string(),
+      })
+      .nonstrict(),
+    analytics: z
+      .object({
+        plausible: z.string().optional(),
+      })
+      .optional(),
+    comment: z
+      .object({
+        remark42: z
+          .object({
+            host: z.string(),
+            siteId: z.string(),
+          })
+          .optional(),
+      })
+      .optional(),
+  })
+  .nonstrict()
+
+export type ITheme = z.infer<typeof zTheme>
+
+export function getTheme() {
+  return zTheme.parse(
+    yaml.safeLoad(fs.readFileSync(path.join('built', THEME_FILENAME), 'utf-8'))
+  )
+}
@@ -0,0 +1,11 @@
+/* global WebComponents */
+WebComponents.waitFor(() => {
+  // At this point we are guaranteed that all required polyfills have
+  // loaded, and can use web components API's.
+  // The standard pattern is to load element definitions that call
+  // `customElements.define` here.
+  // Note: returning the import's promise causes the custom elements
+  // polyfill to wait until all definitions are loaded and then upgrade
+  // the document in one batch, for better performance.
+  return import('https://unpkg.com/@patarapolw/make-html-x-card')
+})
@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"]
+    },
+    "types": ["@types/node", "@nuxt/types", "@nuxtjs/axios"]
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}
@@ -1,53 +0,0 @@
---
-title: 千里之外
-date: 2020-04-20
-tag:
-  - song
---
-
-<iframe width="560" height="315" src="https://www.youtube.com/embed/ocDo3ySyHSI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-<!-- excerpt -->
-
-## 周杰伦
-
-### 千里之外(& 费玉清)
-
-作词：方文山
-作曲：周杰伦
-
-(周)屋簷如悬崖 风铃如沧海 我等燕归来
-时间被安排 演一场意外 妳悄然走开
-故事在城外 浓雾散不开 看不清对白
-妳听不出来 风声不存在 是我在感慨
-梦醒来 是谁在窗台 把结局打开
-那薄如蝉翼的未来 禁不起谁来拆
-
-(费)我送你离开 千里之外 你无声黑白
-沉默年代 或许不该 太遥远的相爱
-我送妳离开 天涯之外 妳是否还在
-琴声何来 生死难猜 用一生 去等待
-
-(周)闻泪声入林 寻梨花白 只得一行青苔
-天在山之外 雨落花台 我两鬓斑白
-闻泪声入林 寻梨花白 只得一行青苔
-天在山之外 雨落花台 我等妳来
-
-更多更详尽歌词 在 ※ Mojim.com　魔镜歌词网
-(费)一身琉璃白 透明著尘埃 妳无瑕的爱
-妳从雨中来 诗化了悲哀 我淋湿现在
-
-(周)芙蓉水面采 船行影犹在 妳却不回来
-被岁月覆蓋 妳说的花开 过去成空白
-
-(费)梦醒来 是谁在窗台 把结局打开
-(周)那薄如蝉翼的未来
-(周)禁不起谁来拆
-(费)我送你离开 千里之外 你无声黑白 沉默年代 或许不该 太遥远的相爱
-(周)我送妳离开 天涯之外 妳是否还在 琴声何来 生死难猜 用一生
-(费)我送妳离开 千里之外 妳无声黑白 沉默年代 或许不该 太遥远的相爱
-(周)我送妳离开 天涯之外
-(周)妳是否还在
-(周)琴声何来
-(费)生死难猜
-(合)用一生去等待
@@ -1,26 +0,0 @@
---
-title: 虫儿飞
-date: 2020-04-10
-tag:
-  - song
---
-
-<iframe width="560" height="315" src="https://www.youtube.com/embed/4CazJNOLoM0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-<!-- excerpt -->
-
-黑黑的天空低垂
-亮亮的繁星相随
-虫儿飞 虫儿飞
-你在思念谁
-
-天上的星星流泪
-地上的玫瑰枯萎
-冷风吹 冷风吹
-只要有你陪
-
-虫儿飞 花儿睡
-一双又一对才美
-不怕天黑 只怕心碎
-不管累不累
-也不管东南西北
@@ -1,81 +0,0 @@
---
-title: "千字文 - 1/1"
-date: "2019-08-11"
-tag: 
- - 千字文
- - 汉字
---
-
-```pug parsed
-.w-100.mt-3
-  h3.text-center 天地玄黃，宇宙洪荒。
-.w-100
-  figure.d-inline-block
-    img(src="https://upload.wikimedia.org/wikipedia/commons/a/ab/天-order.gif" height=100 data-no-cache)
-    figcaption.text-center tian1
-  figure.d-inline-block
-    img(src="https://upload.wikimedia.org/wikipedia/commons/f/fb/地-order.gif" height=100 data-no-cache)
-    figcaption.text-center di4
-  figure.d-inline-block
-    img(src="https://upload.wikimedia.org/wikipedia/commons/d/d3/玄-order.gif" height=100 data-no-cache)
-    figcaption.text-center xuan2
-  figure.d-inline-block
-    img(src="https://upload.wikimedia.org/wikipedia/commons/e/e7/黄-order.gif" height=100 data-no-cache)
-    figcaption.text-center huang2
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23431.gif" height=100 data-no-cache)
-    figcaption.text-center yu3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23449.gif" height=100 data-no-cache)
-    figcaption.text-center zhou4
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27946.gif" height=100 data-no-cache)
-    figcaption.text-center hong2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33618.gif" height=100 data-no-cache)
-    figcaption.text-center huang1
-```
-
-<style>
-img[height="100"] {
-  height: 100px;
-}
-
-figure {
-  margin: 0;
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.d-inline-block {
-  display: inline-block;
-}
-
-.text-center {
-  text-align: center;
-}
-
-table td:first-child {
-  width: 10em;
-}
-</style>
-
-<!-- excerpt_separator -->
-
-| | | |
-| --- | --- | --- |
-宇宙 | yǔzhòu | universe / cosmos
-宇航 | yǔháng | space flight
-宇航员 | yǔhángyuán | astronaut
-宇宙飞船 | yǔzhòufēichuán | spacecraft
-防洪 | fánghóng | flood control / flood prevention
-山洪 | shānhóng | mountain flash flood / mountain torrent
-荒 | huāng | desolate / shortage / scarce / out of practice / absurd / uncultivated / to neglect
-荒野 | huāngyě | wilderness
@@ -1,80 +0,0 @@
---
-title: "千字文 - 2/1"
-date: "2019-08-20"
-tag: 
- - 千字文
- - 汉字
---
-
-```pug parsed
-.w-100.mt-3
-  h3.text-center 龍師火帝，鳥官人皇。
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40845.gif" height=100 data-no-cache)
-    figcaption.text-center long2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24107.gif" height=100 data-no-cache)
-    figcaption.text-center shi1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/28779.gif" height=100 data-no-cache)
-    figcaption.text-center huo3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/24093.gif" height=100 data-no-cache)
-    figcaption.text-center di4
-.w-100
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/40165.gif" height=100 data-no-cache)
-    figcaption.text-center niao3
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23448.gif" height=100 data-no-cache)
-    figcaption.text-center guan1
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/20154.gif" height=100 data-no-cache)
-    figcaption.text-center ren2
-  figure.d-inline-block
-    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/30343.gif" height=100 data-no-cache)
-    figcaption.text-center huang1
-```
-
-<!-- excerpt_separator -->
-
-<style>
-img[height="100"] {
-  height: 100px;
-}
-
-figure {
-  margin: 0;
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.d-inline-block {
-  display: inline-block;
-}
-
-.text-center {
-  text-align: center;
-}
-
-table td:first-child {
-  width: 10em;
-}
-</style>
-
-| | | |
-| --- | --- | --- |
-官方 | guānfāng | government / official (approved or issued by an authority)
-官员 (官員) | guānyuán | official (in an organization or government) / administrator
-法官 | fǎguān | judge
-警官 | jǐngguān | constable / police officer
-感官 | gǎnguān | sense / sense organ
-指挥官 (指揮官) | zhǐhuīguān | commander
-收官 | shōuguān | final part of a go game (see 官子) / endgame / to finish up / to come to the final stage
@@ -1,4 +1,5 @@
 title: polv's Chinese Learning Diary
+awsm: tasman
 banner: ZhDiary
 baseUrl: https://zhdiary.polv.cc
 description: polv's Chinese Learning Diary
@@ -7,7 +8,7 @@ keywords:
  - patarapolw
  - chinese
  - mandarin
-tabs:
+nav:
  - name: 千字文
    to: /post/2019/08/千字文
 author:
@@ -19,7 +20,7 @@ sidebar:
  twitter: ChinesePol
 analytics:
  plausible: zhdiary.polv.cc
-comments:
+comment:
  remark42:
    host: https://remark42.polv.cc
    siteId: zhdiary