refactor the layout and generate summary automatically

Makefile

@@ -1,6 +1,7 @@
 PANDOC=pandoc --lua-filter templates/pagebreak.lua -t html5 --mathjax --template=templates/github.wechat --tab-stop 2 --highlight-style pygments --standalone --section-divs
 
 TRANSFORM=tools/transform.js
+GEN_SUMMARY=tools/gen_summary.js
 
 VERSION=$(strip $(shell cat version))
 OUTPUT=output
@@ -9,7 +10,9 @@ RES=resources
 SRC_DIRS=$(basename $(shell find src -maxdepth 1 -mindepth 1 -type d))
 RES_DIRS=$(basename $(shell find resources -maxdepth 1 -mindepth 1 -type d))
 DOCS=$(shell find src -name "*.md" | sort)
+PUB_DOCS=$(shell find src -name "*-pub.md" | sort)
 RDOCS=$(DOCS:$(SRC)/%.md=$(OUTPUT)/%.md)
+PUB_RDOCS=$(PUB_DOCS:$(SRC)/%.md=$(OUTPUT)/%.md)
 RES_DOCS=$(shell find resources -name "*.md" | sort)
 OUTPUT_DIRS=$(SRC_DIRS:$(SRC)/%=$(OUTPUT)/%) $(RES_DIRS:$(RES)/%=$(OUTPUT)/%)
 HTMLS=$(RDOCS:%.md=%.html)
@@ -26,7 +29,7 @@ travis-init:
 	@echo "Initialize software required for travis (normally ubuntu software)"
 
 show:
-	@echo $(RDOCS) $(HTMLS) $(RESOURCES) $(SRC_DIRS) $(OUTPUT_DIRS)
+	@echo $(PUB_RDOCS)
 
 install:
 	@echo "Install software required for this repo..."
@@ -51,7 +54,7 @@ travis-deploy:
 	@echo "Deploy the software by travis"
 	@make release
 
-build: $(OUTPUT) copy-assets $(RDOCS) $(HTMLS) $(RESOURCES)
+build: $(OUTPUT) copy-assets gen-summary $(RDOCS) $(HTMLS) $(RESOURCES)
 
 clean:
 	@rm -rf $(OUTPUT)/*/*/*.html $(OUTPUT)/intro.html $(OUTPUT)/book.html
@@ -77,23 +80,26 @@ epub: $(BOOK_HTML)
 run:
 	@http-server $(OUTPUT) -p 8000 -c-1
 
-$(BOOK_HTML):$(RDOCS)
-	@$(PANDOC) $(RDOCS) -o $(BOOK_HTML)
+$(BOOK_HTML):$(PUB_RDOCS)
+	@$(PANDOC) $(PUB_RDOCS) -o $(BOOK_HTML)
 
 $(DIRECTORIES):$(OUTPUT)/%:$(SRC)
 
 $(RDOCS):$(OUTPUT)/%.md:$(SRC)/%.md
 	@echo "Creating revised doc $@ with file $<."
 	@$(TRANSFORM) -i $< -o $@
 
-$(HTMLS):%.html:%.md
+$(HTMLS):$(OUTPUT)/%.html:$(SRC)/%.md
 	@echo "Creating doc $@ with file $<."
 	-@$(PANDOC) $< -o $@
 
 $(RESOURCES):$(OUTPUT)/%.html:$(RES)/%.md
 	@echo "Creating doc $@ with file $<."
 	-@$(PANDOC) $< -o $@
 
+gen-summary: $(PUB_DOCS)
+	@echo "Creating summary page"
+	@$(GEN_SUMMARY) -o src/1-summary-pub.md $(PUB_DOCS)
 
 include .makefiles/*.mk
 

package.json

@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/tyrchen/book_next#readme",
   "dependencies": {
+    "front-matter": "^3.0.2",
     "yargs": "^14.2.0"
   }
 }

resources/trashbin/no-title-5.md

@@ -0,0 +1,67 @@
+教钢琴的时候不光要教那些技法，还要带孩子去音乐会，去追寻伟大艺术家的生平，去了解每一首曲子的来龙去脉，练习的意义，以及谁练习过它。
+
+—— 摆在孩子们面前的是拆除了脚手架的庄严肃穆的殿堂。老师们像个讲解员介绍一下
+
+最近一个月每天晚上一个小时花在小宝身上，给她讲课，陪她探索，想方设法让她在快乐中领悟知识，拓展眼界，逐渐建立自己思考和解决问题的方法。目前看，收效不错，一来我在她心目中的形象大为改观：之前她在央求我陪他玩我以在「工作」为由拒绝，她甩过给我一句话：「工作，就知道工作！你是一个不管孩子的老爹！」，而现在她在日记里会写 "I love to learn Scratch. Especially with my dad, because I love my dad."；二来她对学习的态度大为改观，以前总抱怨「学习，总要我学习，你们就不能让一个六岁的孩子多玩玩吗？」，现在每晚还没到晚上 8:30 开课的时间，她就会敲我的书房，问：「老爹，你今天晚上会给我讲什么内容？」，或者周四早上上校车前，专门委托她妈妈嘱咐我：「探索课我想知道为什么姥姥炒好的一盘菜，表面很快就凉了，而里面还很热？」。
+
+此外，游戏中还有英雄的升级系统，通过不断地升级为英雄赋能。
+
+如果把我的课程看做产品，那么，我需要做的是，如何让这个产品的用户着迷。我曾经研究过一段时间的 gamification，记得让人着迷的核心是调用人们内心中的某种感觉 —— 包括正向的和负向的：
+
+- 意义和使命感（meaning）
+- 成就感（accomplishment）
+- 赋能（empowerment）
+- 社交影响力（social influence）
+- 所有权（ownership）
+- 稀缺性（scarcity）
+- 避祸心理（avoidance）
+- 不可预测性（unpredictability）
+
+在我开始给小宝上课时，她已经有了大部分小学二年级数学的能力：加减乘除，基本的几何概念，上千汉字的识字水平，能够自己读西游记的绘本等。所以我的工作需要铺垫的东西并不多。我需要做的，和产品经理一个路子，让用户着迷。这里的着迷有几个方面：
+
+1. 对数学的着迷。
+2. 对中国传统文化和历史的着迷。
+3. 对科学以及未知世界的着迷。
+
+所以如果我想让孩子对目标事物着迷，我就要应用这个模式。
+
+数学是科学之母，我们生活之中，大到东风快递，小到运动 app，都和数学有关。孩子的认知能力，抽象能力的提升来自于对数学的深刻掌握，而国内或者新加坡的数学教育偏重于对知识点的掌握和训练，略为枯燥，美国的 common core 虽然注重不同的方法和思路，还是摆脱不了枯燥，这让孩子学习的时候往往耽于枯燥的重复，容易对数学敬而远之。
+
+虽然「爸爸课堂」的初衷是为了尽我作为父亲在孩子教育上的责任，同时减轻老婆带孩子的压力，
+
+有天周六，她跳完舞，妈妈带她来我公司休息，她在我的白板上画了一个数轴：
+
+她说：爸爸，你看，这是 0，1，2，3 ...，$\sqrt{2}$ 在这里，π 在这里，我要发明一个数角 Lindsey，就像 $pi$ 一样，我告诉你它的值：6.5657，你要把这个数记好，因为它跟 π 一样重要。
+
+吃完晚餐忙工作或者个人成长，我就偶尔抖个机灵，给她教点有意思的内容，比如质因数分解，比如 scratch。
+
+在孩子成长的过程中，爸爸和妈妈的分工是天然形成的。妈妈多负责操作性的事情，如搭积木，提升动手能力；爸爸更多促进孩子动脑思考，发现规律，掌握规律。之前，动手的这些事情我是真不爱干；而动脑的事情，我没有干，所以在小宝的成长拼图中，爸爸的部分是缺失的。现在真干起来，我发现自己还挺胜任的 —— 当然，这和老婆打下的基础分不开。
+
+儿童认知心理学强调的是 **认识事物，熟悉事物，掌握事物，操作事物** 的过程。
+
+剥洋葱
+
+一个人是否能取得人生的成就，至少到三十岁才能有一个感觉。那就不要计较七八岁的考试成绩。
+
+让孩子着迷：
+
+1. 吸引力，通常通过视觉建立起来
+2. 好奇，通过这个事物的多变性，可控多变性中建立起来
+3. 尝试，体验各种变化，主动尝试不同组合，不同顺序。
+
+VAK 测试。多数男孩子在 10 岁前，都是触觉主导的（小宝也是）。
+
+数学思维的酝酿过程：一是慢，二是用图形，三是要持续想。爸爸妈妈要能够忍住不急于「教会」孩子一时想不出来的题目。
+
+孩子从妈妈身上可以感受到快乐，安全，兴趣等感性的行为；但无法模仿到理性，方法，套路，沉着，回顾这些智慧因子
+
+父母要克制让孩子尽快知道正确答案的冲动，也要克制让孩子知道你已经回了的冲动。只有眼前没录，也没人知道路在哪里时，人才会启动自己的大脑去尝试寻找路。
+
+A. 让孩子讲给父母听（为了让孩子将自己的思路进行梳理，尤其是对题目的原意进行梳理）
+B. 自己边听边做笔记（这是示范，启发孩子模仿自己的行为，这是在熏陶正确的学习方法）
+C. 在纸上记录关键词汇，在信息间进行连线，表示自己在思考（这是在示范正确的思考方法）
+D. 自言自语把思考过程表示出来（这是在展示思路，以便孩子最大化吸收自言自语过程中的关键信息）
+E. 让整个过程自然（自然的才是孩子愿意模仿的，主动教的，如果孩子看不到大人做，他就会认为那仅仅是对我的要求）
+F. 如果孩子一直做不出来，尝试说出答案（这样可以继续推动孩子思考）
+
+爸爸强调的数学思维，就是存疑，缓慢思考，不放弃，每天都想，直到想来想去，想出脑海中的虚构场景，好像爸爸的任务就完成了。

src/1-summary-pub.md

@@ -0,0 +1,12 @@
+---
+title: '目录'
+---
+
+# 目录
+
+- [序言](0-intro-pub.html)
+- [目录](1-summary-pub.html)
+- [Wireguard：简约之美](2019/w45/1-wireguard-pub.html)
+- [长日无痕(5): 天叔奇谈](2019/w45/2-no-title-5-pub.html)
+
+\newpage

src/2019/w45/1-wireguard.md → src/2019/w45/1-wireguard-pub.md

@@ -1,8 +1,7 @@
 ---
 title: 'Wireguard：简约之美'
 cover: 'assets/wg.jpg'
-author:
-  - 程序君
+author: [程序君]
 keywords: [tech, security, wireguard]
 ---
 

src/2019/w45/2-no-title-5.md → src/2019/w45/2-no-title-5-pub.md

@@ -1,8 +1,7 @@
 ---
 title: '长日无痕(5): 天叔奇谈'
 cover: 'assets/life.jpg'
-author:
-  - 程序君
+author: [程序君]
 keywords: [life, study]
 ---
 
@@ -77,71 +76,3 @@ keywords: [life, study]
 > It is not worth an intelligent man's time to be in the majority. By definition, there are already enough people to do that.
 >
 > - G. H. Hardy
-
-教钢琴的时候不光要教那些技法，还要带孩子去音乐会，去追寻伟大艺术家的生平，去了解每一首曲子的来龙去脉，练习的意义，以及谁练习过它。
-
-—— 摆在孩子们面前的是拆除了脚手架的庄严肃穆的殿堂。老师们像个讲解员介绍一下
-
-最近一个月每天晚上一个小时花在小宝身上，给她讲课，陪她探索，想方设法让她在快乐中领悟知识，拓展眼界，逐渐建立自己思考和解决问题的方法。目前看，收效不错，一来我在她心目中的形象大为改观：之前她在央求我陪他玩我以在「工作」为由拒绝，她甩过给我一句话：「工作，就知道工作！你是一个不管孩子的老爹！」，而现在她在日记里会写 "I love to learn Scratch. Especially with my dad, because I love my dad."；二来她对学习的态度大为改观，以前总抱怨「学习，总要我学习，你们就不能让一个六岁的孩子多玩玩吗？」，现在每晚还没到晚上 8:30 开课的时间，她就会敲我的书房，问：「老爹，你今天晚上会给我讲什么内容？」，或者周四早上上校车前，专门委托她妈妈嘱咐我：「探索课我想知道为什么姥姥炒好的一盘菜，表面很快就凉了，而里面还很热？」。
-
-此外，游戏中还有英雄的升级系统，通过不断地升级为英雄赋能。
-
-如果把我的课程看做产品，那么，我需要做的是，如何让这个产品的用户着迷。我曾经研究过一段时间的 gamification，记得让人着迷的核心是调用人们内心中的某种感觉 —— 包括正向的和负向的：
-
-- 意义和使命感（meaning）
-- 成就感（accomplishment）
-- 赋能（empowerment）
-- 社交影响力（social influence）
-- 所有权（ownership）
-- 稀缺性（scarcity）
-- 避祸心理（avoidance）
-- 不可预测性（unpredictability）
-
-在我开始给小宝上课时，她已经有了大部分小学二年级数学的能力：加减乘除，基本的几何概念，上千汉字的识字水平，能够自己读西游记的绘本等。所以我的工作需要铺垫的东西并不多。我需要做的，和产品经理一个路子，让用户着迷。这里的着迷有几个方面：
-
-1. 对数学的着迷。
-2. 对中国传统文化和历史的着迷。
-3. 对科学以及未知世界的着迷。
-
-所以如果我想让孩子对目标事物着迷，我就要应用这个模式。
-
-数学是科学之母，我们生活之中，大到东风快递，小到运动 app，都和数学有关。孩子的认知能力，抽象能力的提升来自于对数学的深刻掌握，而国内或者新加坡的数学教育偏重于对知识点的掌握和训练，略为枯燥，美国的 common core 虽然注重不同的方法和思路，还是摆脱不了枯燥，这让孩子学习的时候往往耽于枯燥的重复，容易对数学敬而远之。
-
-虽然「爸爸课堂」的初衷是为了尽我作为父亲在孩子教育上的责任，同时减轻老婆带孩子的压力，
-
-有天周六，她跳完舞，妈妈带她来我公司休息，她在我的白板上画了一个数轴：
-
-她说：爸爸，你看，这是 0，1，2，3 ...，$\sqrt{2}$ 在这里，π 在这里，我要发明一个数角 Lindsey，就像 $pi$ 一样，我告诉你它的值：6.5657，你要把这个数记好，因为它跟 π 一样重要。
-
-吃完晚餐忙工作或者个人成长，我就偶尔抖个机灵，给她教点有意思的内容，比如质因数分解，比如 scratch。
-
-在孩子成长的过程中，爸爸和妈妈的分工是天然形成的。妈妈多负责操作性的事情，如搭积木，提升动手能力；爸爸更多促进孩子动脑思考，发现规律，掌握规律。之前，动手的这些事情我是真不爱干；而动脑的事情，我没有干，所以在小宝的成长拼图中，爸爸的部分是缺失的。现在真干起来，我发现自己还挺胜任的 —— 当然，这和老婆打下的基础分不开。
-
-儿童认知心理学强调的是 **认识事物，熟悉事物，掌握事物，操作事物** 的过程。
-
-剥洋葱
-
-一个人是否能取得人生的成就，至少到三十岁才能有一个感觉。那就不要计较七八岁的考试成绩。
-
-让孩子着迷：
-
-1. 吸引力，通常通过视觉建立起来
-2. 好奇，通过这个事物的多变性，可控多变性中建立起来
-3. 尝试，体验各种变化，主动尝试不同组合，不同顺序。
-
-VAK 测试。多数男孩子在 10 岁前，都是触觉主导的（小宝也是）。
-
-数学思维的酝酿过程：一是慢，二是用图形，三是要持续想。爸爸妈妈要能够忍住不急于「教会」孩子一时想不出来的题目。
-
-孩子从妈妈身上可以感受到快乐，安全，兴趣等感性的行为；但无法模仿到理性，方法，套路，沉着，回顾这些智慧因子
-
-父母要克制让孩子尽快知道正确答案的冲动，也要克制让孩子知道你已经回了的冲动。只有眼前没录，也没人知道路在哪里时，人才会启动自己的大脑去尝试寻找路。
-
-A. 让孩子讲给父母听（为了让孩子将自己的思路进行梳理，尤其是对题目的原意进行梳理）
-B. 自己边听边做笔记（这是示范，启发孩子模仿自己的行为，这是在熏陶正确的学习方法）
-C. 在纸上记录关键词汇，在信息间进行连线，表示自己在思考（这是在示范正确的思考方法）
-D. 自言自语把思考过程表示出来（这是在展示思路，以便孩子最大化吸收自言自语过程中的关键信息）
-E. 让整个过程自然（自然的才是孩子愿意模仿的，主动教的，如果孩子看不到大人做，他就会认为那仅仅是对我的要求）
-F. 如果孩子一直做不出来，尝试说出答案（这样可以继续推动孩子思考）
-
-爸爸强调的数学思维，就是存疑，缓慢思考，不放弃，每天都想，直到想来想去，想出脑海中的虚构场景，好像爸爸的任务就完成了。

tools/gen_summary.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+const fs = require('fs').promises;
+const path = require('path');
+const fm = require('front-matter');
+
+async function extract(src) {
+  const content = await fs.readFile(src, 'utf8');
+  const title = fm(content).attributes.title;
+  return `- [${title}](${src.replace('src/', '').replace('.md', '.html')})`;
+}
+
+async function process(srcs, dst) {
+  const results = await Promise.all(srcs.map(extract));
+  const prelude = `---\ntitle: '目录'\n---\n\n# 目录`;
+  const content = `${prelude}\n\n${results.join('\n')}\n\n\\newpage\n`;
+  await fs.writeFile(dst, content);
+}
+
+async function main() {
+  const argv = require('yargs')
+    .help()
+    .option('output', {
+      alias: 'o',
+      describe: 'output file'
+    })
+    .demandOption(['output'], 'Please provide output file').argv;
+
+  await process(argv._, argv.o);
+}
+
+main();