rewrite home page

- set new light/dark preview pic
- add feature list
- code-highlight: add known issue

ph-bookshelf.md

@@ -1,5 +1,71 @@
-# ph-Bookshelf
+---
+title: "the ph-Bookshelf"
+configurations:
+  prism: 'true'
+  regex.highlight: 'true'
+---
+
+# the ph-Bookshelf
 
 ![preview](./preview.png)
 
-<progress max=100 value=45>45%</progress>
+<div align=center>
+
+另一个可以搭建 *很多个* 电子书的网站系统  
+<small>除了好看点之外一无是处</small>
+
+**Wiki** & **Demo**[^1] | [Repository]
+
+[Repository]: https://github.com/suk-ws/ph-Bookshelf
+
+</div>
+
+[^1]: 你正在访问的这个网站就是 Demo（合理）。
+
+---
+
+一个可以在单一站点上放一大堆书目的电子书（文档？）托管项目——我们把它称之为书架。
+
+每个书目就像是 GitBook 的一本书一样 —— 不过使用 `book.xml` 来定义书籍的目录；书架站点使用 `bookshelf.xml` 来管理书目和一些特色设置。
+
+## 特色功能
+
+- 可以在这一个站点上放置很多很多个文档：可以通过左上角的 Books 列出访问书目。
+- [CommonMark] 规范的完全支持。
+  - 以及 GitHub 文档特色功能的支持！
+  - 可以很开心的写内联 HTML/CSS/JS！
+- 基于 [`# Prism`{.lang-shell-session}][prism] 的[代码高亮]
+  - 甚至还能够[按需引入 Prism 插件][prism-plugin]
+  - 还有特色的 [`/([R-egE-x])\w+/`{.regex} 着色][regex] 
+- 有趣的特色功能像是 《<a id="rolling">滚来滚去的标题栏</a>》
+- 有趣的特色功能像是 ← 彩虹色的列表头
+  - 彩
+    - 虹
+      - 色
+        - ！~
+      - 的
+    - 哦
+- 前端设计使用 Bread Card Design[^2] 设计语言，简洁，好看，~~除了好看点之外一无是处~~
+- 基于 MIT [开源][Repository]
+- 使用 PHP <small>~~: 世界上最好的语言~~</small> 以及 PHP Composer 搭建
+- ~~一大堆的 0day 漏洞！~~
+- ~~只有上帝才能看得懂的代码~~
+
+[^2]: Bread Card Design 是一个以淡色无阴影的简单卡片为特色的设计语言。目前，还没有设计语言主页。
+
+[CommonMark]: https://commonmark.thephpleague.com/
+[prism]: https://prismjs.com
+[代码高亮]: ./tools/code-highlight
+[prism-plugin]: http://book.localhost/ph-bookshelf/tools/code-highlight#%E6%B7%BB%E5%8A%A0-prism-%E6%8F%92%E4%BB%B6
+[regex]: ./tools/regex-highlight
+
+<script>
+function roll_rolling () {
+    var title = document.getElementById("rolling").innerText;
+    const start = title[0];
+    title = title.substring(1);
+    title += start;
+    document.getElementById("rolling").innerText = title;
+    setTimeout(roll_rolling, 450);
+} roll_rolling();
+</script>

tools/code-highlight.md

@@ -34,6 +34,11 @@ ph-Bookshelf 可以合并不同位置的配置字段：所以在 *book.xml* 设
 >
 > 目前还没有支持从自定义 url 导入。
 
+## Known issue - 已知问题
+
+- prism `line-numbers` 插件会和 bread-card-markdown 的代码块样式表产生兼容性，导致行号无法正常显示。
+  - 但是和它差不多的插件 `command-line` 是可以正常使用的。
+
 ---
 
 ## 你知道吗