create first post

config.yaml

@@ -11,7 +11,7 @@ blog:
   split: ===
   title: "中文 Diary"
 pages:
-  ^p/:
+  ^/?p/:
     layout: post
     author:
      login: polvcode

package-lock.json

@@ -173,9 +173,9 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "acorn": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
-      "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
+      "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA=="
     },
     "ajv": {
       "version": "6.10.2",

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

themes/blog/layouts/includes/mixins.pug

@@ -13,7 +13,9 @@ mixin post(post)
 				h1= post.title
 		.post-content!= post.teaser ? post.teaser : post.content
 		if !post.teaser
-			a(href="javascript: history.back()") ← Back
+			ul.mt-3.pagination
+				li.page-item
+					a.page-link(href="javascript: history.back()") ← Back
 mixin date(date)
 	- let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
 	- let d = new Date(date)

themes/blog/layouts/sidebar.pug

@@ -3,5 +3,7 @@ aside.card.p-3
 		:markdown-it
 			#### Record my journey to Chinese by [@polvcode](https://polvcode.dev)
 
+			Highlight text and press "s" to speak.
+
 		a.twitter-timeline(href="https://twitter.com/ChinesePol" data-height="600") Tweets by ChinesePol
 		script(async src="https://platform.twitter.com/widgets.js" charset="utf-8")