Feature/refine vitepress (#38)

* feat(search): 优化 tokenize 函数

* build: 升级到 node.js 18.16 & vitepress 1.0.0-rc.44 #36

* refactor(caption): 使用 md 插件实现图片小标题

* refactor(description): 使用 md-it 接口插入 description 组件

close #36

* fix(style): 只修改文章大图样式

* fix: align image alt text with caption text

---------

Co-authored-by: eric.shady <darkercookies@gmail.com>

.github/workflows/deploy.yml

@@ -28,7 +28,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: yarn
       - run: yarn install --frozen-lockfile
       - name: Build

.gitignore

@@ -1,4 +1,5 @@
 /.vitepress/cache
 /.vitepress/dist
 /node_modules
+/temp
 .DS_Store

.nvmrc

@@ -1 +1 @@
-16
+18.16

.vitepress/config.js

@@ -1,9 +1,11 @@
 import path from 'path'
 import sidebarData from './gitbooktoc'
 import gtagConfig from './gtag'
+import useMDItPlugins from './mdit'
 import { tokenize } from './search'
 
 const urlBase = process.env.URL_BASE || undefined
+const year = new Date().getFullYear()
 
 export default {
   base: urlBase,
@@ -26,14 +28,7 @@ export default {
   ],
   markdown: {
     config: (md) => {
-      md.use(require('markdown-it-task-checkbox'), {
-        disabled: true,
-        divWrap: false,
-        divClass: 'checkbox',
-        idPrefix: 'cbx_',
-        ulClass: 'task-list',
-        liClass: 'task-list-item'
-      })
+      useMDItPlugins(md)
     }
   },
   // You have to write mapping for each depth of README.md
@@ -61,7 +56,7 @@ export default {
     },
     footer: {
       message: '🇨🇳 🇬🇧 Second-language Acquisition',
-      copyright: '© 2023-present <a href="https://github.com/2ndLA" target="_blank">2ndLA Team</a>. <a href="https://github.com/2ndLA/English/blob/main/LICENSE" target="_blank">CC BY-NC-SA 4.0</a>.'
+      copyright: `© 2023-${year} <a href="https://github.com/2ndLA" target="_blank">2ndLA Team</a>. <a href="https://github.com/2ndLA/English/blob/main/LICENSE" target="_blank">CC BY-NC-SA 4.0</a>.`
     },
     lastUpdated: {
       text: '更新于',

.vitepress/mdit.js

@@ -0,0 +1,37 @@
+import mdImageFigures from 'markdown-it-image-figures'
+import mdTaskCheckbox from 'markdown-it-task-checkbox'
+
+function appendImageFigures(md) {
+  // usage: ![alt](https://link-to-image 'title'){.class}
+  md.use(mdImageFigures, {
+    figcaption: 'title',
+    copyAttrs: '^class$'
+  })
+}
+
+function renderTaskCheckbox(md) {
+  md.use(mdTaskCheckbox, {
+    disabled: true,
+    divWrap: false,
+    divClass: 'checkbox',
+    idPrefix: 'cbx_',
+    ulClass: 'task-list',
+    liClass: 'task-list-item'
+  })
+}
+
+function insertPostElements(md) {
+  md.renderer.rules.heading_close = (tokens, idx, options, _env, self) => {
+    let result = self.renderToken(tokens, idx, options)
+    if (tokens[idx].markup === '#') {
+      result += '\n\n<Description />\n\n'
+    }
+    return result
+  }
+}
+
+export default function useMDItPlugins(md) {
+  insertPostElements(md)
+  appendImageFigures(md)
+  renderTaskCheckbox(md)
+}

.vitepress/theme/components/Description.vue

@@ -0,0 +1,22 @@
+<template>
+    <p
+        v-if="frontmatter.description"
+        :class="$style.description"
+    >{{ frontmatter.description }}
+    </p>
+</template>
+
+<script lang="ts" setup>
+import { useData } from "vitepress";
+
+const { frontmatter } = useData();
+</script>
+
+<style module scoped>
+.description {
+    color: #8899a8;
+    font-size: 20px;
+    padding-bottom: 10px;
+}
+</style>
+

.vitepress/theme/custom.css

@@ -43,3 +43,24 @@ p>a>img[alt^="Badge:"] {
     display: inline-block;
     margin-right: 3px;
 }
+
+/* image */
+.main figure img {
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 0.8rem var(--vp-c-default-soft);
+    margin-bottom: 0.8rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.dark .main figure img {
+    border: 0.1rem solid var(--vp-c-neutral);
+    box-shadow: none;
+}
+
+figure>figcaption {
+    text-align: center;
+    color: #8899a8;
+    font-size: 12px;
+    font-weight: 400;
+}

.vitepress/theme/index.js

@@ -1,4 +1,13 @@
 import DefaultTheme from 'vitepress/theme'
+import Description from './components/Description.vue'
 import './custom.css'
 
-export default DefaultTheme
+const { Layout } = DefaultTheme
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }) {
+    app.component('Description', Description)
+  }
+}

content/how-to-use.md

@@ -4,8 +4,6 @@ description: How to Use
 
 # 🧭 使用指南 🚧
 
-<!--@include: ../.vitepress/hack.md-->
-
 ## 碎片化学习
 
 学习一门语言是个漫长的过程，请回忆一下自己学习母语的“听说读写”花了多少年，考了多少试。

content/preface.md

@@ -4,13 +4,11 @@ description: Preface
 
 # 📄 前言
 
-<!--@include: ../.vitepress/hack.md-->
-
 ## 为什么要学英语
 
 这是一个老生常谈的话题，我们直接看看 ChatGPT 是怎么回答的。
 
-![问 ChatGPT：还有必要学外语吗？](.assets/preface-ask-chatgpt.png)
+![问 ChatGPT：还有必要学外语吗？](.assets/preface-ask-chatgpt.png '问 ChatGPT：还有必要学外语吗？')
 
 事实上，如果你自己不能回答这个问题，那么可能当下的你并不需要学英语。在这种情况下逼迫自己学，效果应该不会很好。
 

content/primer/README.md

@@ -4,8 +4,6 @@ description: Primer
 
 # 🐣 零基础
 
-<!--@include: ../../.vitepress/hack.md-->
-
 这个章节的内容是为**零基础**以及**自认为基础非常糟糕**的同学准备的。在这个阶段最重要的是脚踏实地，**循序渐进**地在脑子里积累自己的英语“语料库”。
 
 对于基础比较好的同学，如果你想要训练自己对英语的响应速度，做到简单表达可以“张嘴就来”，那么这部分内容也是值得学习的。

content/primer/duolingo.md

@@ -4,8 +4,6 @@ description: Duolingo
 
 # 多邻国
 
-<!--@include: ../../.vitepress/hack.md-->
-
 💡 建议看完全文之后再注册多邻国账号。
 
 ## 简介

content/primer/new-concept-english.md

@@ -4,8 +4,6 @@ description: New Concept English
 
 # 新概念英语
 
-<!--@include: ../../.vitepress/hack.md-->
-
 ## 简介 🚧
 
 ## 教材构成 🚧

content/tools.md

@@ -4,8 +4,6 @@ description: Tools
 
 # 🛠 工具
 
-<!--@include: ../.vitepress/hack.md-->
-
 > ~~俗话说得好，~~_欲打三天鱼，先晒两天网。_
 
 趁手的工具能让你更方便地学习、使用英语。在以下几个工具的帮助下，即使没有学过英语也能很快掌握**书面**输入输出英语的能力。

content/vocabulary/part-of-speech.md

@@ -4,8 +4,6 @@ description: Part of Speech | Word Class | Grammatical Category
 
 # 词性
 
-<!--@include: ../../.vitepress/hack.md-->
-
 **词性**是指单词所属的类别，同一类别的单词具有相似的语法属性。在英语中，一般分为如下 11 种词性 [\[Wikipedia\]](https://en.wikipedia.org/wiki/Part_of_speech)：
 
 | #   | 词性       | 标注                    | 例子  |

content/vocabulary/spelling.md

@@ -4,8 +4,6 @@ description: Spelling
 
 # 拼写
 
-<!--@include: ../../.vitepress/hack.md-->
-
 ## 如何高效记拼写 🚧
 
 ## 番外：打字训练

package.json

@@ -27,7 +27,8 @@
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
     "husky": "^8.0.3",
+    "markdown-it-image-figures": "^2.1.1",
     "markdown-it-task-checkbox": "^1.0.6",
-    "vitepress": "^1.0.0-rc.20"
+    "vitepress": "^1.0.0-rc.44"
   }
 }