chore: use yarn and upgrade to Remark 9 (#173)

* chore: use yarn and upgrade autoprefixer and postcss-cli

* ci: update to use yarn

* chore: upgrade Remark

* fix: add postcss-cli

* Use goldmark

* fix: escape in render-link

.github/workflows/build-test.yml

@@ -14,12 +14,12 @@ jobs:
       - name: Setup Node
         uses: actions/[email protected]
         with:
-          node-version: "14.x"
-      - run: npm install
+          node-version: "16.x"
+      - run: yarn
       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v2
         with:
-          hugo-version: "0.80.0"
+          hugo-version: "0.83.1"
           extended: true
       - name: Build Site
         run: |

.github/workflows/deploy.yml

@@ -17,12 +17,12 @@ jobs:
       - name: Setup Node
         uses: actions/[email protected]
         with:
-          node-version: "14.x"
-      - run: npm install
+          node-version: "16.x"
+      - run: yarn
       - name: Setup Hugo
         uses: peaceiris/actions-hugo@v2
         with:
-          hugo-version: "0.80.0"
+          hugo-version: "0.83.1"
           extended: true
       - name: Build Site
         run: HUGO_ENV=production ./build.sh

.github/workflows/remark-lint.yml

@@ -10,17 +10,17 @@ jobs:
     - name: Setup Node
       uses: actions/[email protected]
       with:
-        node-version: '13.x'
-    - run: npm install
-    - run: npm run lint
+        node-version: '16.x'
+    - run: yarn
+    - run: yarn lint
     - name: Check diff
       run: git diff --exit-code ${{ github.sha }}
     - name: Create Pull Request
       if: failure()
       uses: peter-evans/[email protected]
       with:
-        commit-message: "style: Format Markdown files"
-        title: "Format Markdown files for ${{ github.ref }}"
+        commit-message: "style: format Markdown files"
+        title: "style: format Markdown files for ${{ github.ref }}"
         labels: "style"
         assignees: "${{ github.actor }}"
         reviewers: "${{ github.actor }}"

.remarkrc

@@ -0,0 +1,9 @@
+{
+  "settings": {
+    "bullet": "-"
+  },
+  "plugins": [
+    "remark-preset-lint-recommended",
+    "remark-frontmatter"
+  ]
+}

CONTRIBUTING.md

@@ -21,7 +21,7 @@ Make sure [Git](https://git-scm.com/), [Node.js](https://nodejs.org/) and [Hugo]
 ```sh
 git clone --recurse-submodules https://github.com/cpeditor/cpeditor.github.io
 cd cpeditor.github.io
-npm install
+yarn
 ```
 
 If you have cloned the repository but haven't cloned the submodules:
@@ -77,7 +77,7 @@ For example: `[Preferences->Languages->C++->C++ Commands](../preferences/languag
 
 We use [remark-lint](https://github.com/remarkjs/remark-lint) to format Markdown files.
 
-If you have run `npm install`, you can simply run `npm run lint` to format all Markdown files.
+If you have run `yarn`, you can simply run `yarn lint` to format all Markdown files.
 
 If you are using [VS Code](https://github.com/microsoft/vscode), you can use the [vscode-remark](https://github.com/remarkjs/vscode-remark) extension to help you.
 

config.toml

@@ -95,13 +95,13 @@ copyright = "The CP Editor team"
 # This menu appears only if you have at least one [params.versions] set.
 version_menu = "Releases"
 
-# Flag used in the "version-banner" partial to decide whether to display a 
+# Flag used in the "version-banner" partial to decide whether to display a
 # banner on every page indicating that this is an archived version of the docs.
 # Set this flag to "true" if you want to display the banner.
 archived_version = false
 
 # The version number for the version of the docs represented in this doc set.
-# Used in the "version-banner" partial to display a version number for the 
+# Used in the "version-banner" partial to display a version number for the
 # current doc set.
 version = "alpha"
 
@@ -151,7 +151,7 @@ yes = 'Glad to hear it! You can <a href="https://github.com/cpeditor/cpeditor.gi
 no = 'Sorry to hear that. Please <a href="https://github.com/cpeditor/cpeditor.github.io/issues/new">tell us how we can improve</a>.'
 
 # Adds a reading time to the top of each doc.
-# If you want this feature, but occasionally need to remove the Reading time from a single page, 
+# If you want this feature, but occasionally need to remove the Reading time from a single page,
 # add "hide_readingtime: true" to the page's front matter
 [params.ui.readingtime]
 enable = false

content/docs/faq/_index.md

@@ -23,8 +23,8 @@ CF-Tool requires you to configure it before you use it. Please run `cf config` i
 
 ### How to enable error linting in the code editor?
 
-You need to install a [Language Server program](https://microsoft.github.io/language-server-protocol/implementors/servers/) and set the settings in Preferences -> Extensions -> Language Server. You can learn about more details [here](../setup/_index.md#setup-language-server).
+You need to install a [Language Server program](https://microsoft.github.io/language-server-protocol/implementors/servers/) and set the settings in Preferences -> Extensions -> Language Server. You can learn about more details [here](../setup/\_index.md#setup-language-server).
 
 ### My code gets TLE on every first execution after compilation.
 
-It's probably because your anti-virus software is scanning your program. A possible solution is to [set the output directory of the executable files](../preferences/language/_index.md#c-executable-file-path) (for example, you can set it to `D:/cpeditor-executables/${basename}`), and add that directory (`D:/cpeditor-executables` in the example) in the whitelist of your anti-virus software.
+It's probably because your anti-virus software is scanning your program. A possible solution is to [set the output directory of the executable files](../preferences/language/\_index.md#c-executable-file-path) (for example, you can set it to `D:/cpeditor-executables/${basename}`), and add that directory (`D:/cpeditor-executables` in the example) in the whitelist of your anti-virus software.

content/docs/faq/_index.ru.md

@@ -23,8 +23,8 @@ CF-Tool requires you to configure it before you use it. Please run `cf config` i
 
 ### How to enable error linting in the code editor?
 
-You need to install a [Language Server program](https://microsoft.github.io/language-server-protocol/implementors/servers/) and set the settings in Preferences -> Extensions -> Language Server. You can learn about more details [here](../setup/_index.ru.md#setup-language-server).
+You need to install a [Language Server program](https://microsoft.github.io/language-server-protocol/implementors/servers/) and set the settings in Preferences -> Extensions -> Language Server. You can learn about more details [here](../setup/\_index.ru.md#setup-language-server).
 
 ### My code gets TLE on every first execution after compilation.
 
-It's probably because your anti-virus software is scanning your program. A possible solution is to [set the output directory of the executable files](../preferences/language/_index.ru.md#c-executable-file-path) (for example, you can set it to `D:/cpeditor-executables/${basename}`), and add that directory (`D:/cpeditor-executables` in the example) in the whitelist of your anti-virus software.
+It's probably because your anti-virus software is scanning your program. A possible solution is to [set the output directory of the executable files](../preferences/language/\_index.ru.md#c-executable-file-path) (for example, you can set it to `D:/cpeditor-executables/${basename}`), and add that directory (`D:/cpeditor-executables` in the example) in the whitelist of your anti-virus software.

content/docs/faq/_index.zh.md

@@ -24,8 +24,8 @@ CF Tool 需要在使用前进行配置。请在终端中执行 `cf config` 以
 
 ### 如何在代码编辑框中启用错误提示？
 
-你需要安装 [Language Server 程序](https://microsoft.github.io/language-server-protocol/implementors/servers/) 并在 [设置->扩展->Language Server](../preferences/extensions/_index.zh.md#language-server) 中完成有关配置。更多细节详见 [初始化](../setup/_index.zh.md) 页面。
+你需要安装 [Language Server 程序](https://microsoft.github.io/language-server-protocol/implementors/servers/) 并在 [设置->扩展->Language Server](../preferences/extensions/\_index.zh.md#language-server) 中完成有关配置。更多细节详见 [初始化](../setup/\_index.zh.md) 页面。
 
 ### 我的代码每次首次运行时都超时。
 
-这很可能是因为你的杀毒软件在扫描你的程序。一个可能的解决方法是，[设置可执行文件的输出目录](../preferences/language/_index.zh.md#c-可执行文件路径)（例如，你可以将其设置为 `D:/cpeditor-executables/${basename}`），然后将这个目录（在上面的例子中，即 `D:/cpeditor-executables`）加到杀毒软件的白名单中。
+这很可能是因为你的杀毒软件在扫描你的程序。一个可能的解决方法是，[设置可执行文件的输出目录](../preferences/language/\_index.zh.md#c-可执行文件路径)（例如，你可以将其设置为 `D:/cpeditor-executables/${basename}`），然后将这个目录（在上面的例子中，即 `D:/cpeditor-executables`）加到杀毒软件的白名单中。

content/docs/installation/build-from-aur/_index.zh.md

@@ -9,6 +9,6 @@ description: 这是推荐 Arch Linux 用户使用的安装方法。你可以使
 
 CP Editor 在 AUR 上有两个包：稳定版 [cpeditor](https://aur.archlinux.org/packages/cpeditor/) 和 alpha 版 [cpeditor-git](https://aur.archlinux.org/packages/cpeditor-git/)。
 
-如果你安装了 `yay`，你可以运行 `yay -S cpeditor` 来安装。如果你没有安装 `yay` 并且你不知道如何从 AUR 安装，你可以阅读 [如何安装 yay](https://github.com/Jguer/yay#installation) 或者 [Arch Wiki](https://wiki.archlinux.org/index.php/Arch_User_Repository_(简体中文)#安装软件包)，或者从 [archlinuxcn](https://www.archlinuxcn.org/archlinux-cn-repo-and-mirror/) 安装 `yay`。
+如果你安装了 `yay`，你可以运行 `yay -S cpeditor` 来安装。如果你没有安装 `yay` 并且你不知道如何从 AUR 安装，你可以阅读 [如何安装 yay](https://github.com/Jguer/yay#installation) 或者 [Arch Wiki](https://wiki.archlinux.org/index.php/Arch_User_Repository_\(简体中文\)#安装软件包)，或者从 [archlinuxcn](https://www.archlinuxcn.org/archlinux-cn-repo-and-mirror/) 安装 `yay`。
 
 安装完成后，你就可以在终端中运行 `cpeditor` 或在开始菜单中运行 CP Editor 了。

content/docs/preferences/actions/_index.md

@@ -23,29 +23,29 @@ Save your code when executing it.
 
 Save the test cases on the disk when saving the code.
 
-You can choose where to save the test cases in [File Path/Testcases](../file-path/_index.md#testcases).
+You can choose where to save the test cases in [File Path/Testcases](../file-path/\_index.md#testcases).
 
 ## Auto Save
 
 ### Auto Save Interval Type
 
-It is easier to describe if we explain a little bit about the internal implementation: There is a countdown timer. When we "reset" it, it will be "running" in the next _Auto Save Interval_ milliseconds, and after _Auto Save Interval_ milliseconds, the timer will "timeout" and the code is auto-saved.
+It is easier to describe if we explain a little bit about the internal implementation: There is a countdown timer. When we "reset" it, it will be "running" in the next *Auto Save Interval* milliseconds, and after *Auto Save Interval* milliseconds, the timer will "timeout" and the code is auto-saved.
 
 #### After the last modification
 
-The timer is reset whenever you modify the code. i.e. Your codes will be saved if you haven't modified it for _Auto Save Interval_ milliseconds.
+The timer is reset whenever you modify the code. i.e. Your codes will be saved if you haven't modified it for *Auto Save Interval* milliseconds.
 
-This mode is suitable for a small _Auto Save Interval_ so that your codes will be auto-saved every time you take a short break from typing. If the interval is too long, likely, your codes will never be auto-saved.
+This mode is suitable for a small *Auto Save Interval* so that your codes will be auto-saved every time you take a short break from typing. If the interval is too long, likely, your codes will never be auto-saved.
 
 #### After the first modification
 
-The timer is reset when you modify the code if the timer is not running. i.e. Your codes will be saved if you modified it _Auto Save Interval_ milliseconds ago.
+The timer is reset when you modify the code if the timer is not running. i.e. Your codes will be saved if you modified it *Auto Save Interval* milliseconds ago.
 
-This mode is suitable for a long _Auto Save Interval_, otherwise, it's likely that the save happens when you are typing, which could affect your typing experience.
+This mode is suitable for a long *Auto Save Interval*, otherwise, it's likely that the save happens when you are typing, which could affect your typing experience.
 
 #### Without modification
 
-The timer is reset when it timeouts. i.e. Your codes will be saved every _Auto Save Interval_ milliseconds, no matter you have modified it or not.
+The timer is reset when it timeouts. i.e. Your codes will be saved every *Auto Save Interval* milliseconds, no matter you have modified it or not.
 
 This mode is suitable for saving test cases, etc. In the other modes, the test cases are not auto-saved if you don't modify the codes.
 

content/docs/preferences/actions/_index.ru.md

@@ -23,29 +23,29 @@ Save your code when executing it.
 
 Save the test cases on the disk when saving the code.
 
-You can choose where to save the test cases in [File Path/Testcases](../file-path/_index.ru.md#testcases).
+You can choose where to save the test cases in [File Path/Testcases](../file-path/\_index.ru.md#testcases).
 
 ## Auto Save
 
 ### Auto Save Interval Type
 
-It is easier to describe if we explain a little bit about the internal implementation: There is a countdown timer. When we "reset" it, it will be "running" in the next _Auto Save Interval_ milliseconds, and after _Auto Save Interval_ milliseconds, the timer will "timeout" and the code is auto-saved.
+It is easier to describe if we explain a little bit about the internal implementation: There is a countdown timer. When we "reset" it, it will be "running" in the next *Auto Save Interval* milliseconds, and after *Auto Save Interval* milliseconds, the timer will "timeout" and the code is auto-saved.
 
 #### After the last modification
 
-The timer is reset whenever you modify the code. i.e. Your codes will be saved if you haven't modified it for _Auto Save Interval_ milliseconds.
+The timer is reset whenever you modify the code. i.e. Your codes will be saved if you haven't modified it for *Auto Save Interval* milliseconds.
 
-This mode is suitable for a small _Auto Save Interval_ so that your codes will be auto-saved every time you take a short break from typing. If the interval is too long, likely, your codes will never be auto-saved.
+This mode is suitable for a small *Auto Save Interval* so that your codes will be auto-saved every time you take a short break from typing. If the interval is too long, likely, your codes will never be auto-saved.
 
 #### After the first modification
 
-The timer is reset when you modify the code if the timer is not running. i.e. Your codes will be saved if you modified it _Auto Save Interval_ milliseconds ago.
+The timer is reset when you modify the code if the timer is not running. i.e. Your codes will be saved if you modified it *Auto Save Interval* milliseconds ago.
 
-This mode is suitable for a long _Auto Save Interval_, otherwise, it's likely that the save happens when you are typing, which could affect your typing experience.
+This mode is suitable for a long *Auto Save Interval*, otherwise, it's likely that the save happens when you are typing, which could affect your typing experience.
 
 #### Without modification
 
-The timer is reset when it timeouts. i.e. Your codes will be saved every _Auto Save Interval_ milliseconds, no matter you have modified it or not.
+The timer is reset when it timeouts. i.e. Your codes will be saved every *Auto Save Interval* milliseconds, no matter you have modified it or not.
 
 This mode is suitable for saving test cases, etc. In the other modes, the test cases are not auto-saved if you don't modify the codes.
 

content/docs/preferences/actions/_index.zh.md

@@ -23,29 +23,29 @@ weight: 40
 
 在保存代码时将测试用例一并保存。
 
-你可以在 [文件路径/测试点](../file-path/_index.zh.md#测试点) 中设置测试用例保存的位置。
+你可以在 [文件路径/测试点](../file-path/\_index.zh.md#测试点) 中设置测试用例保存的位置。
 
 ## 自动保存
 
 ### 自动保存间隔类型
 
-自动保存机制以如下的方式运作：有一个计时器，每当它被“重置”，它就会“运行” _自动保存时间间隔_ 毫秒，当计时器“运行”了 _自动保存时间间隔_ 毫秒后，当前代码就会被自动保存。
+自动保存机制以如下的方式运作：有一个计时器，每当它被“重置”，它就会“运行” *自动保存时间间隔* 毫秒，当计时器“运行”了 *自动保存时间间隔* 毫秒后，当前代码就会被自动保存。
 
 #### After the last modification
 
-计时器在每次修改代码后被重置。即，如果你在 _自动保存时间间隔_ 毫秒内没有修改你的代码，则计时器完成了倒计时，同时你的代码会被自动保存。
+计时器在每次修改代码后被重置。即，如果你在 *自动保存时间间隔* 毫秒内没有修改你的代码，则计时器完成了倒计时，同时你的代码会被自动保存。
 
-该模式适合使用较短的 _自动保存时间间隔_，以使代码能在你两次输入的间歇间被自动保存。如果设置的间隔时间过长，则难以让代码被自动保存。
+该模式适合使用较短的 *自动保存时间间隔*，以使代码能在你两次输入的间歇间被自动保存。如果设置的间隔时间过长，则难以让代码被自动保存。
 
 #### After the first modification
 
-在计时器未运行时，若你修改了代码，则计时器将被重置。即，你的代码将在第一次修改后 _自动保存时间间隔_ 毫秒被自动保存。
+在计时器未运行时，若你修改了代码，则计时器将被重置。即，你的代码将在第一次修改后 *自动保存时间间隔* 毫秒被自动保存。
 
-该模式适合使用较长的 _自动保存时间间隔_。如果设置的时间过短，代码会在你输入的时候被自动保存，这可能会影响你的输入体验。
+该模式适合使用较长的 *自动保存时间间隔*。如果设置的时间过短，代码会在你输入的时候被自动保存，这可能会影响你的输入体验。
 
 #### Without modification
 
-每当计时器完成倒计时，计时器会被重置。即，无论你是否修改了你的代码，你的代码都会以恒定的 _自动保存时间间隔_ 被自动保存。
+每当计时器完成倒计时，计时器会被重置。即，无论你是否修改了你的代码，你的代码都会以恒定的 *自动保存时间间隔* 被自动保存。
 
 该模式适合保存测试用例。在其他模式下，如果你不修改你的代码，测试用例不会被自动保存。
 

content/docs/preferences/code-edit/_index.md

@@ -26,19 +26,19 @@ Automatically add the right parenthesis when you type the left one. For example,
 
 When the character next to the cursor is a right parenthesis and you type this parenthesis, instead of typing this parenthesis, the cursor will jump out of the parenthesis.
 
-You can choose the parentheses to auto-complete in the [Parentheses](../language/_index.md#parentheses) settings.
+You can choose the parentheses to auto-complete in the [Parentheses](../language/\_index.md#parentheses) settings.
 
 ### Auto Remove Parentheses
 
 When you delete a left parenthesis, if a corresponding right parenthesis is next to it, the right parenthesis will also be deleted.
 
-You can choose the parentheses to auto-remove in the [Parentheses](../language/_index.md#parentheses) settings.
+You can choose the parentheses to auto-remove in the [Parentheses](../language/\_index.md#parentheses) settings.
 
 ### Jump out of a parenthesis by pressing Tab
 
 When the cursor is next to a right parenthesis, you can use the Tab key to jump out of it. If [Auto Complete Parentheses](#auto-complete-parentheses) is enabled, this is an alternative of typing the right parenthesis.
 
-You can choose the parentheses to jump out by Tab in the [Parentheses](../language/_index.md#parentheses) settings.
+You can choose the parentheses to jump out by Tab in the [Parentheses](../language/\_index.md#parentheses) settings.
 
 ### Replace tabs by spaces