create first post

src/app.ts

@@ -0,0 +1,25 @@
+import "./disqus";
+
+window.addEventListener("keydown", (ev) => {
+  if (ev.key === "s") {
+    const s = window.getSelection().toString();
+    if (s) {
+      speak(s);
+    }
+  }
+})
+
+function speak(s: string) {
+  const allVoices = speechSynthesis.getVoices();
+  let vs = allVoices.filter((v) => /zh[-_]cn/i.test(v.lang));
+  if (vs.length === 0) {
+    vs = allVoices.filter((v) => /zh/i.test(v.lang));
+  }
+
+  if (vs.length > 0) {
+    const u = new SpeechSynthesisUtterance(s);
+    u.lang = vs[0].lang;
+    u.rate = 0.8;
+    speechSynthesis.speak(u);
+  }
+}

src/pages/index.md

@@ -1,3 +1,3 @@
 ---
-title: 'Cogear.JS – modern st'
+title: '中文 Diary - My Chinese learning diary'
 ---

src/pages/p/2019/08/12-千字文1.md

@@ -1,14 +0,0 @@
----
-title: "千字文（qian2 zi3 wen2）- 1"
-date: "2019-08-12"
-tags: 
- - 千字文
- - 汉字
----
-
-# 天地玄黃，宇宙洪荒。
-
-![](https://upload.wikimedia.org/wikipedia/commons/a/ab/天-order.gif)
-![](https://upload.wikimedia.org/wikipedia/commons/f/fb/地-order.gif)
-![](https://upload.wikimedia.org/wikipedia/commons/d/d3/玄-order.gif)
-![](https://upload.wikimedia.org/wikipedia/commons/e/e7/黄-order.gif)

src/pages/p/2019/08/千字文1.pug

@@ -0,0 +1,76 @@
+---
+title: "千字文 (qian2 zi3 wen2) - 1"
+date: "2019-08-11"
+tags: 
+ - 千字文
+ - 汉字
+---
+
+.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)
+    figcaption.text-center tian1
+  figure.d-inline-block
+    img(src="https://upload.wikimedia.org/wikipedia/commons/f/fb/地-order.gif" height=100)
+    figcaption.text-center di4
+  figure.d-inline-block
+    img(src="https://upload.wikimedia.org/wikipedia/commons/d/d3/玄-order.gif" height=100)
+    figcaption.text-center xuan2
+  figure.d-inline-block
+    img(src="https://upload.wikimedia.org/wikipedia/commons/e/e7/黄-order.gif" height=100)
+    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)
+    figcaption.text-center yu3
+  figure.d-inline-block
+    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/23449.gif" height=100)
+    figcaption.text-center zhou4
+  figure.d-inline-block
+    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/27946.gif" height=100)
+    figcaption.text-center hong2
+  figure.d-inline-block
+    img(src="https://www.mdbg.net/chinese/rsc/img/stroke_anim/33618.gif" height=100)
+    figcaption.text-center huang1
+
+| ===
+
+.w-100.mt-3
+  table.table
+    colgroup
+      col(style="width: 6em")
+      col
+      col
+    tr
+      td 宇宙
+      td yǔzhòu
+      td universe / cosmos
+    tr
+      td 宇航
+      td yǔháng 
+      td space flight
+    tr
+      td 宇航员
+      td yǔhángyuán
+      td astronaut
+    tr
+      td 宇宙飞船
+      td yǔzhòufēichuán
+      td spacecraft
+    tr
+      td 防洪
+      td fánghóng
+      td flood control / flood prevention
+    tr 
+      td 山洪
+      td shānhóng
+      td mountain flash flood / mountain torrent
+    tr
+      td 荒
+      td huāng
+      td desolate / shortage / scarce / out of practice / absurd / uncultivated / to neglect
+    tr
+      td 荒野 
+      td huāngyě 
+      td wilderness