Upgrade dependencies.

.gitignore

@@ -26,3 +26,7 @@ pnpm-debug.log*
 # ignore test articles except for article definitions
 src/content/*
 !src/content/config.ts
+
+# ignore generated html from makeinfo
+src/pages/article/translation/*.html
+

.prettierrc.mjs

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ['prettier-plugin-astro'],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+  ],
+};

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "[json]": {
+    "editor.tabSize": 2
+  },
+  "[javascript]": {
+    "editor.tabSize": 2
+  },
+  "[typescript]": {
+    "editor.tabSize": 2
+  }
+}

README.md

@@ -1 +1,12 @@
+# 李守中的个人站
+
 个人资料、文章与工具站点。由 Astro 框架构建，使用 typescript 编写。
+
+## 关于翻译类文章的发布方式
+
+翻译类文章不由 Astro 生成，而是预先使用 texinfo 编写后编译到 HTML 文件，将其放于固定位置，再在 Astro 页面中引用这些文件。
+
+这意味着每有一个新的翻译类文章要发布时，需要:
+
+1. 更新 pages/article/translation/index.astro 文件中翻译类文章的列表;
+2. 更新 astro.config.mjs 文件中的 sitemap 插件配置，填入 texinfo 编译出的 HTML 文件的 URL 以使这些文章可以进入 sitemap.xml 中，从而可以被搜索引擎收录。

astro.config.mjs

@@ -35,8 +35,25 @@ export default defineConfig({
   site: 'https://lishouzhong.com',
   integrations: [
     sitemap({
+      customPages: [
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFS exports man(5) page 2021 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFS mountd man(8) page 2020 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFS nfsd man(8) page 2019 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFS showmount man(8) page 2016 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFSv4 man(4) page 2019 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFSv4 nfscbd man(8) page 2009 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFSv4 nfsrevoke man(8) page 2009 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 NFSv4 nfsuserd man(8) page 2019 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/FreeBSD 13 rpcbind man(8) page 2017 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/EasyRSA Intro-To-PKI v3.08 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/EasyRSA-Advanced v3.08 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/EasyRSA-Readme v3.08 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/EasyRSA-Upgrade-Notes v3.08 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/iperf3 v3.9 man page 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/PostgreSQL Don't Do This 中文译本.html",
+        "https://lishouzhong.com/file_share/translation/rsync v3.2.7 man(1) page 中文译本.html",
+      ],
       // entryLimit: 10000,
-      // customPages: [],
       // filter: (page) => { },
       // lastmod: new Date('2022-02-24'),
       // serialize(item) {

content.config.ts

@@ -1,7 +1,8 @@
 import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
 
 const blogCollection = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/blog" }),
   schema: z.object({
     title: z.string(),
     description: z.string(),
@@ -10,7 +11,7 @@ const blogCollection = defineCollection({
   }),
 });
 const noteCollection = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/note" }),
   schema: z.object({
     title: z.string(),
     description: z.string(),
@@ -19,7 +20,7 @@ const noteCollection = defineCollection({
   }),
 });
 const translationCollection = defineCollection({
-  type: 'content',
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/translation" }),
   schema: z.object({
     title: z.string(),
     description: z.string(),
@@ -32,4 +33,4 @@ export const collections = {
   'blog': blogCollection,
   'note': noteCollection,
   'translation': translationCollection,
-};
+};

package.json

@@ -3,21 +3,23 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --host",
-    "start": "astro dev",
+    "start": "astro dev --host",
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.7.0",
+    "@astrojs/check": "^0.9.4",
-    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/vue": "^4.5.0",
+    "@astrojs/vue": "^5.1.3",
-    "astro": "^4.9.2",
+    "astro": "^5.15.9",
-    "bignumber.js": "^9.1.2",
+    "bignumber.js": "^9.3.1",
-    "pinyin-pro": "^3.22.0",
+    "pinyin-pro": "^3.27.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-astro": "^0.14.1",
     "remark-toc": "^9.0.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.8.2",
-    "vue": "^3.4.29"
+    "vue": "^3.5.13"
   }
 }

script/build_on_linux.sh

@@ -2,17 +2,28 @@
 # cron
 # 0 4 * * * . /etc/profile; /bin/sh /opt/ld-site/script/build_on_linux.sh >/dev/null 2>&1
 
-export PATH=$PATH:/opt/dev_tools/node-v20.12.2-linux-x64/bin
+NVM_DIR="/opt/dev_tools/nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 
 script_path="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
 original_article_home="/home/ld/Documents/ld_article"
 original_article_destination="/opt/ld-site/src/content"
 ld_site_dist_target="/opt/nginx_targets/ld_site_dist"
+translation_article_path="/opt/nginx_targets/file_share/translation"
 
 rsync -a --delete-after -f"P config.ts" \
       "${original_article_home}/" \
       "${original_article_destination}/"
 
+cd "${original_article_destination}/translation"
+makeinfo --html --no-split --css-include=theme.css ./*.texi
+if [ $? -ne 0 ]; then
+    echo "cannot generate translation article, check 'makeinfo' command output."
+    exit 1
+fi
+rm -rf "${translation_article_path}/*.html"
+mv ./*.html "${translation_article_path}/"
+
 cd "${script_path}/../"
 npm run build
 
@@ -21,6 +32,6 @@ if [ $? -ne 0 ]; then
     exit 1
 fi
 
-mv ${ld_site_dist_target} "${ld_site_dist_target}-old"
+mv ${ld_site_dist_target} "${ld_site_dist_target}_old"
 mv dist ${ld_site_dist_target}
-rm -rf "${ld_site_dist_target}-old"
+rm -rf "${ld_site_dist_target}_old"

src/components/Footer.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <div class="footer">
@@ -10,8 +11,8 @@
   <div>
     <small class="licence">若正文中无特殊说明，本站内容遵循:</small>
     <small class="licence">
-      <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
+      <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">
-        署名-非商业使用-相同方式共享 4.0 国际许可
+        署名-非商业性使用 4.0 协议国际版
       </a>
     </small>
   </div>

src/components/HTMLCommonHead.astro

@@ -7,7 +7,7 @@ const { title } = Astro.props;
 
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width" />
-<link rel="icon" href="/favicon.ico" type="image/x-icon">
+<link rel="icon" href="/favicon.ico" type="image/x-icon" />
 <meta name="generator" content={Astro.generator} />
 <link rel="sitemap" href="/sitemap-index.xml" />
 <title>{title}</title>

src/components/Nav.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <div class="nav" id="nav">

src/components/article/CategorySummary.astro

@@ -14,7 +14,8 @@ const { collectionName, categoryName, posts } = Astro.props;
   {
     posts.map((post) => (
       <li>
-        <a href={`/article/${collectionName}/${post.slug}`} target="_blank">
+        {/* Hide .md extension from URL */}
+        <a href={`/article/${collectionName}/${post.id.replace(".md", "")}`} target="_blank">
           {post.data.title}
         </a>
       </li>

src/components/article/CollectionSummary.astro

@@ -1,5 +1,5 @@
 ---
-import type { CollectionEntry, ContentEntryMap } from "astro:content";
+import type { CollectionEntry } from "astro:content";
 import { getCollection, type CollectionKey } from "astro:content";
 import CategorySummary from "./CategorySummary.astro";
 
@@ -23,8 +23,8 @@ const allCategories: Array<string> = Array.from(
   new Set(
     allPosts.map((entry) => {
       return entry.data.category;
-    })
+    }),
-  )
+  ),
 );
 
 const categoriedPostList: Array<CategoriedPosts> = allCategories.map((key) => {
@@ -34,7 +34,7 @@ const categoriedPostList: Array<CategoriedPosts> = allCategories.map((key) => {
   // article sort function by article title
   function sortPostByTitlePinyin(
     postA: CollectionEntry<CollectionKey>,
-    postB: CollectionEntry<CollectionKey>
+    postB: CollectionEntry<CollectionKey>,
   ): number {
     let postATitle = pinyinpro.convert(pinyinpro.pinyin(postA.data.title), {
       format: "symbolToNum",
@@ -57,21 +57,21 @@ const categoriedPostList: Array<CategoriedPosts> = allCategories.map((key) => {
   } else if (sortByArticleTitle) {
     // sort article by title
     // get articles with titles started in Chinese or the alphabet
-    let postWithAlphabetStartedTitle: CollectionEntry<keyof ContentEntryMap>[] =
+    let postWithAlphabetStartedTitle: CollectionEntry<CollectionKey>[] =
       object[key].filter((post) => /^[a-zA-Z]/.test(post.data.title));
-    let postWithChineseStartedTitle: CollectionEntry<keyof ContentEntryMap>[] =
+    let postWithChineseStartedTitle: CollectionEntry<CollectionKey>[] =
       object[key].filter((post) => /^[^a-zA-Z]/.test(post.data.title));
     // sort two Array by article title
     postWithAlphabetStartedTitle.sort((postA, postB) =>
-      sortPostByTitlePinyin(postA, postB)
+      sortPostByTitlePinyin(postA, postB),
     );
     postWithChineseStartedTitle.sort((postA, postB) =>
-      sortPostByTitlePinyin(postA, postB)
+      sortPostByTitlePinyin(postA, postB),
     );
     // articles that have title start with Chinese prior to
     // those which have titles start with the alphabet
     object[key] = postWithChineseStartedTitle.concat(
-      postWithAlphabetStartedTitle
+      postWithAlphabetStartedTitle,
     );
   }
   return object;
@@ -83,7 +83,7 @@ const categoriedPostListSortedByArticleAmount: Array<CategoriedPosts> =
       const aKey: string = Object.keys(a)[0];
       const bKey: string = Object.keys(b)[0];
       return b[bKey].length - a[aKey].length;
-    }
+    },
   );
 ---
 

src/components/article/article_body/ArticleBody.astro

@@ -2,25 +2,67 @@
 // get rendered ArticleBodyContent HTML
 const html = await Astro.slots.render("default");
 
-// If some lines are not started with ASCII character,
+// rule:
-// join them to their previous line.
+//   1. If a line belongs to the area where the line break should be kept,
-// This is important.
+//      do not process this line.
-// Because I add one newline character to wrap Chinese.
+//   2. If a line ends with [a-zA-Z], add a space to the end of this line.
+//   3. If a line ends without [a-zA-Z] and its next line starts with [a-zA-Z],
+//      add a heading space to the next line.
+//   4. If a line does not start in ASCII chars, join it to its previous line.
+//   5. If a line starts with <strong> or <em> or <a>, add a heading space to
+//      this line.
+//   6. If a line ends with </strong> or </em> or </a>, add a tailing space to
+//      this line.
+// This is important in using one newline character to wrap Chinese.
 const arr = html.split("\n");
 let articleHTMLFinal = arr[0];
-// Whether the current line belongs to the area where
-// the line break should be kept.
 let remainIntactArea = false;
+// The first line of the HTML string is a table-of-content head recognized by
+// remark-toc so it can be ignored.
 for (let i = 1; i < arr.length; i++) {
+  // rule 1
+  // Check if the current line belongs to some block area.
   if (arr[i].match(/^(<pre|<code|<blockquote|<table)/) !== null) {
     remainIntactArea = true;
   } else {
     remainIntactArea = false;
   }
+  // -------- add space
+  // rule 2
+  // If the last character of the current line is [a-zA-Z], add a space to the
+  // end of the line.
+  if (arr[i].charAt(arr[i].length - 1).match(/[a-zA-Z]/) !== null) {
+    arr[i] += " ";
+  }
+  // rule 3
+  // The current is not the last line.
+  // AND
+  // The current line ends without [a-zA-Z].
+  // AND
+  // The next line starts with [a-zA-Z].
   if (
-    // If the first character is not ascii character,
+    i + 1 < arr.length &&
-    // or the final character of previous line is not character.
+    arr[i].charAt(arr[i].length - 1).match(/[a-zA-Z]/) === null &&
-    // AND
+    arr[i + 1].charAt(0).match(/[a-zA-Z]/) !== null
+  ) {
+    arr[i] += " ";
+  }
+  // rule 5
+  if (arr[i].match(/^(<em>|<strong>|<a>)/) !== null) {
+    arr[i] = " " + arr[i];
+  }
+  // rule 6
+  if (arr[i].match(/(<\/em>|<\/strong>|<\/a>)$/) !== null) {
+    arr[i] = arr[i] + " ";
+  }
+  // -------- combine lines
+  // rule 4
+  if (
+    // (
+    //   If the first character is not ascii character,
+    //   OR
+    //   the final character of previous line is not ascii character.
+    // ) AND
     // Current line should not belong to area that remains intact.
     (arr[i].charAt(0).match(/[ -~]/) === null ||
       arr[i - 1].charAt(arr[i - 1].length - 1).match(/[ -~]/) === null) &&

src/components/article/article_body/ArticleBodyContent.astro

@@ -1,15 +1,19 @@
 ---
-import { getEntry, type CollectionKey } from "astro:content";
+import { getCollection, type CollectionEntry } from "astro:content";
+import { render, type CollectionKey } from "astro:content";
 
 interface Props {
-  articleSlug: string;
+  articleId: string;
   collectionName: CollectionKey;
 }
-const { articleSlug, collectionName } = Astro.props;
+const { articleId, collectionName } = Astro.props;
 
-const article = await getEntry(collectionName, articleSlug);
+const articles = await getCollection(collectionName);
-const { Content } = await article!.render();
+const article = articles.find(
-const articlePrettyName = article!.id.split("/").pop()!.replace(".md", "");
+  (post: CollectionEntry<CollectionKey>) => post.id === articleId
+);
+const { Content } = await render(article!);
+const articlePrettyName = article!.data.title;
 ---
 
 <div class="article">

src/components/article/article_body/ArticleBodyWrapper.astro

@@ -4,15 +4,15 @@ import ArticleBody from "./ArticleBody.astro";
 import ArticleBodyContent from "./ArticleBodyContent.astro";
 
 interface Props {
-  articleSlug: string;
+  articleId: string;
   collectionName: CollectionKey;
 }
-const { articleSlug, collectionName } = Astro.props;
+const { articleId, collectionName } = Astro.props;
 ---
 
 <ArticleBody>
   <ArticleBodyContent
+    articleId={articleId}
     collectionName={collectionName}
-    articleSlug={articleSlug}
   />
 </ArticleBody>

src/components/tool/ToolNav.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <ul class="tool-list">
@@ -6,14 +7,14 @@
 </ul>
 
 <style>
-.tool-list {
+  .tool-list {
-  list-style: none;
+    list-style: none;
-  padding: 0;
+    padding: 0;
-  margin: 0.5em 0;
+    margin: 0.5em 0;
-}
+  }
 
-.tool-list li {
+  .tool-list li {
-  float: left;
+    float: left;
-  margin: 0 16px 0 0;
+    margin: 0 16px 0 0;
-}
+  }
 </style>

src/components/tool/unit_conversion/DataUnitConversion.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref } from "vue";
 import BigNumber from "bignumber.js";
 
 /**
@@ -24,7 +24,7 @@ const UnitName = Object.freeze({
   MBIT: "unit-m-bit",
   GBIT: "unit-g-bit",
   TBIT: "unit-t-bit",
-})
+});
 
 /**
  * @enum {number}
@@ -47,25 +47,25 @@ const UnitNameToSize = Object.freeze({
 });
 
 const size = ref({
-  [UnitName.KBYTE]: '',
+  [UnitName.KBYTE]: "",
-  [UnitName.MBYTE]: '',
+  [UnitName.MBYTE]: "",
-  [UnitName.GBYTE]: '',
+  [UnitName.GBYTE]: "",
-  [UnitName.TBYTE]: '',
+  [UnitName.TBYTE]: "",
-  [UnitName.KIBYTE]: '',
+  [UnitName.KIBYTE]: "",
-  [UnitName.MIBYTE]: '',
+  [UnitName.MIBYTE]: "",
-  [UnitName.GIBYTE]: '',
+  [UnitName.GIBYTE]: "",
-  [UnitName.TIBYTE]: '',
+  [UnitName.TIBYTE]: "",
-  [UnitName.BYTE]: '',
+  [UnitName.BYTE]: "",
-  [UnitName.BIT]: '',
+  [UnitName.BIT]: "",
-  [UnitName.KBIT]: '',
+  [UnitName.KBIT]: "",
-  [UnitName.MBIT]: '',
+  [UnitName.MBIT]: "",
-  [UnitName.GBIT]: '',
+  [UnitName.GBIT]: "",
-  [UnitName.TBIT]: '',
+  [UnitName.TBIT]: "",
 });
 
 /**
  * Change ref variable when user inputs some characters.
- * @param {UnitNameStr} unitName 
+ * @param {UnitNameStr} unitName
  * @returns {void}
  */
 function sizeChanged(unitName) {
@@ -74,17 +74,19 @@ function sizeChanged(unitName) {
    */
   let result = {};
   // assign 0 to current input if nothing is passed
-  if (size.value[unitName].length === 0) result[unitName] = '0';
+  if (size.value[unitName].length === 0) result[unitName] = "0";
-  let inputedBytes = new BigNumber(UnitNameToSize[unitName]).multipliedBy(size.value[unitName]);
+  let inputedBytes = new BigNumber(UnitNameToSize[unitName]).multipliedBy(
+    size.value[unitName],
+  );
   for (const key in UnitNameToSize) {
     result[key] = inputedBytes.div(UnitNameToSize[key]).toString();
   }
   result[unitName] = size.value[unitName];
   for (const key in UnitNameToSize) {
-    if (result[key] !== 'NaN') {
+    if (result[key] !== "NaN") {
       size.value[key] = result[key];
-    } else if (result[key] === 'NaN') {
+    } else if (result[key] === "NaN") {
-      size.value[key] = '';
+      size.value[key] = "";
     }
   }
 }
@@ -93,7 +95,7 @@ const isMultipleOf4KiB = computed(() => {
   let userInput = new BigNumber(size.value[UnitName.KIBYTE]);
   if (userInput.toNumber() === 0) return false;
   return userInput.mod(4).toNumber() === 0 ? true : false;
-})
+});
 </script>
 
 <template>
@@ -102,22 +104,22 @@ const isMultipleOf4KiB = computed(() => {
     <p>1000 进制并以 Byte 计:</p>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.KBYTE" type="text" v-model="size[UnitName.KBYTE]"
-        @input="sizeChanged(UnitName.KBYTE)">
+        @input="sizeChanged(UnitName.KBYTE)" />
       <span class="unit-name">KB</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.MBYTE" type="text" v-model="size[UnitName.MBYTE]"
-        @input="sizeChanged(UnitName.MBYTE)">
+        @input="sizeChanged(UnitName.MBYTE)" />
       <span class="unit-name">MB</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.GBYTE" type="text" v-model="size[UnitName.GBYTE]"
-        @input="sizeChanged(UnitName.GBYTE)">
+        @input="sizeChanged(UnitName.GBYTE)" />
       <span class="unit-name">GB</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.TBYTE" type="text" v-model="size[UnitName.TBYTE]"
-        @input="sizeChanged(UnitName.TBYTE)">
+        @input="sizeChanged(UnitName.TBYTE)" />
       <span class="unit-name">TB</span>
     </div>
   </div>
@@ -125,22 +127,22 @@ const isMultipleOf4KiB = computed(() => {
     <p>1024 进制并以 Byte 计:</p>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.KIBYTE" type="text" v-model="size[UnitName.KIBYTE]"
-        @input="sizeChanged(UnitName.KIBYTE)">
+        @input="sizeChanged(UnitName.KIBYTE)" />
       <span class="unit-name">KiB</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.MIBYTE" type="text" v-model="size[UnitName.MIBYTE]"
-        @input="sizeChanged(UnitName.MIBYTE)">
+        @input="sizeChanged(UnitName.MIBYTE)" />
       <span class="unit-name">MiB</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.GIBYTE" type="text" v-model="size[UnitName.GIBYTE]"
-        @input="sizeChanged(UnitName.GIBYTE)">
+        @input="sizeChanged(UnitName.GIBYTE)" />
       <span class="unit-name">GiB</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.TIBYTE" type="text" v-model="size[UnitName.TIBYTE]"
-        @input="sizeChanged(UnitName.TIBYTE)">
+        @input="sizeChanged(UnitName.TIBYTE)" />
       <span class="unit-name">TiB</span>
     </div>
   </div>
@@ -148,12 +150,12 @@ const isMultipleOf4KiB = computed(() => {
     <p>以 Byte (B) / bit (b) 计:</p>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.BYTE" type="text" v-model="size[UnitName.BYTE]"
-        @input="sizeChanged(UnitName.BYTE)">
+        @input="sizeChanged(UnitName.BYTE)" />
       <span class="unit-name">B</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.BIT" type="text" v-model="size[UnitName.BIT]"
-        @input="sizeChanged(UnitName.BIT)">
+        @input="sizeChanged(UnitName.BIT)" />
       <span class="unit-name">b</span>
     </div>
   </div>
@@ -161,22 +163,22 @@ const isMultipleOf4KiB = computed(() => {
     <p>1000 进制并以 bit 计:</p>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.KBIT" type="text" v-model="size[UnitName.KBIT]"
-        @input="sizeChanged(UnitName.KBIT)">
+        @input="sizeChanged(UnitName.KBIT)" />
       <span class="unit-name">Kb</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.MBIT" type="text" v-model="size[UnitName.MBIT]"
-        @input="sizeChanged(UnitName.MBIT)">
+        @input="sizeChanged(UnitName.MBIT)" />
       <span class="unit-name">Mb</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.GBIT" type="text" v-model="size[UnitName.GBIT]"
-        @input="sizeChanged(UnitName.GBIT)">
+        @input="sizeChanged(UnitName.GBIT)" />
       <span class="unit-name">Gb</span>
     </div>
     <div class="unit-conversion-computation-node">
       <input class="size-text" :id="UnitName.TBIT" type="text" v-model="size[UnitName.TBIT]"
-        @input="sizeChanged(UnitName.TBIT)">
+        @input="sizeChanged(UnitName.TBIT)" />
       <span class="unit-name">Tb</span>
     </div>
   </div>
@@ -203,7 +205,7 @@ p {
 
 .unit-conversion-computation-node .size-text {
   margin: 0 6px 0 0;
-  width: 125px
+  width: 125px;
 }
 
 @media screen and (max-width: 395px) {
@@ -217,7 +219,7 @@ p {
 }
 
 .unit-conversion-computation-area::after {
-  content: '';
+  content: "";
   display: block;
   clear: both;
 }

src/components/tool/unit_conversion/UnitConversionWrapper.astro

@@ -5,6 +5,6 @@ import WeightUnitConversion from "./WeightUnitConversion.vue";
 
 <WeightUnitConversion client:load />
 
-<br>
+<br />
 
 <DataUnitConversion client:load />

src/components/tool/unit_conversion/WeightUnitConversion.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref } from "vue";
 import BigNumber from "bignumber.js";
 
 /**
@@ -15,8 +15,8 @@ const twToMetricUnitName = Object.freeze({
   QIAN: "qian",
   FEN: "fen",
   GRAM: "gram",
-  KILOGRAM: "kilogram"
+  KILOGRAM: "kilogram",
-})
+});
 
 /**
  * @enum {number}
@@ -28,20 +28,20 @@ const twToMetricUnitNameToWeight = Object.freeze({
   [twToMetricUnitName.FEN]: 600 / 16 / 10 / 10,
   [twToMetricUnitName.GRAM]: 1,
   [twToMetricUnitName.KILOGRAM]: 1 * 1000,
-})
+});
 
 const weight = ref({
-  [twToMetricUnitName.JIN]: '',
+  [twToMetricUnitName.JIN]: "",
-  [twToMetricUnitName.LIANG]: '',
+  [twToMetricUnitName.LIANG]: "",
-  [twToMetricUnitName.QIAN]: '',
+  [twToMetricUnitName.QIAN]: "",
-  [twToMetricUnitName.FEN]: '',
+  [twToMetricUnitName.FEN]: "",
-  [twToMetricUnitName.GRAM]: '',
+  [twToMetricUnitName.GRAM]: "",
-  [twToMetricUnitName.KILOGRAM]: '',
+  [twToMetricUnitName.KILOGRAM]: "",
 });
 
 /**
  * Change ref variable when user inputs some characters.
- * @param {UnitNameStr} unitName 
+ * @param {UnitNameStr} unitName
  * @returns {void}
  */
 function weightChanged(unitName) {
@@ -50,17 +50,19 @@ function weightChanged(unitName) {
    */
   let result = {};
   // assign 0 to current input if nothing is passed
-  if (weight.value[unitName].length === 0) result[unitName] = '0';
+  if (weight.value[unitName].length === 0) result[unitName] = "0";
-  let inputedGram = new BigNumber(twToMetricUnitNameToWeight[unitName]).multipliedBy(weight.value[unitName]);
+  let inputedGram = new BigNumber(
+    twToMetricUnitNameToWeight[unitName],
+  ).multipliedBy(weight.value[unitName]);
   for (const key in twToMetricUnitNameToWeight) {
     result[key] = inputedGram.div(twToMetricUnitNameToWeight[key]).toString();
   }
   result[unitName] = weight.value[unitName];
   for (const key in twToMetricUnitNameToWeight) {
-    if (result[key] !== 'NaN') {
+    if (result[key] !== "NaN") {
       weight.value[key] = result[key];
-    } else if (result[key] === 'NaN') {
+    } else if (result[key] === "NaN") {
-      weight.value[key] = '';
+      weight.value[key] = "";
     }
   }
 }
@@ -72,12 +74,12 @@ function weightChanged(unitName) {
     <p>公制重量:</p>
     <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.KILOGRAM" type="text"
-        v-model="weight[twToMetricUnitName.KILOGRAM]" @input="weightChanged(twToMetricUnitName.KILOGRAM)">
+        v-model="weight[twToMetricUnitName.KILOGRAM]" @input="weightChanged(twToMetricUnitName.KILOGRAM)" />
       <span class="unit-name">千克</span>
     </div>
     <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.GRAM" type="text" v-model="weight[twToMetricUnitName.GRAM]"
-        @input="weightChanged(twToMetricUnitName.GRAM)">
+        @input="weightChanged(twToMetricUnitName.GRAM)" />
       <span class="unit-name">克</span>
     </div>
   </div>
@@ -85,22 +87,22 @@ function weightChanged(unitName) {
     <p>台湾制重量:</p>
     <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.JIN" type="text" v-model="weight[twToMetricUnitName.JIN]"
-        @input="weightChanged(twToMetricUnitName.JIN)">
+        @input="weightChanged(twToMetricUnitName.JIN)" />
       <span class="unit-name">斤</span>
     </div>
     <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.LIANG" type="text" v-model="weight[twToMetricUnitName.LIANG]"
-        @input="weightChanged(twToMetricUnitName.LIANG)">
+        @input="weightChanged(twToMetricUnitName.LIANG)" />
       <span class="unit-name">两</span>
     </div>
     <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.QIAN" type="text" v-model="weight[twToMetricUnitName.QIAN]"
-        @input="weightChanged(twToMetricUnitName.QIAN)">
+        @input="weightChanged(twToMetricUnitName.QIAN)" />
       <span class="unit-name">钱</span>
     </div>
     <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.FEN" type="text" v-model="weight[twToMetricUnitName.FEN]"
-        @input="weightChanged(twToMetricUnitName.FEN)">
+        @input="weightChanged(twToMetricUnitName.FEN)" />
       <span class="unit-name">分</span>
     </div>
   </div>
@@ -124,7 +126,7 @@ p {
 
 .weight-conversion-computation-node .size-text {
   margin: 0 6px 0 0;
-  width: 115px
+  width: 115px;
 }
 
 @media screen and (max-width: 395px) {
@@ -138,7 +140,7 @@ p {
 }
 
 .weight-conversion-computation-area::after {
-  content: '';
+  content: "";
   display: block;
   clear: both;
 }

src/layouts/DefaultLayout.astro

@@ -1,6 +1,6 @@
 ---
 import HTMLCommonHead from "../components/HTMLCommonHead.astro";
-import "../styles/global.css"
+import "../styles/global.css";
 
 interface Props {
   title: string;
@@ -11,7 +11,7 @@ const { title } = Astro.props;
 <!doctype html>
 <html lang="zh">
   <head>
-    <HTMLCommonHead title={title}/>
+    <HTMLCommonHead title={title} />
   </head>
   <body>
     <slot />

src/pages/404.astro

@@ -7,6 +7,6 @@ import ArticleBodyWrapper from "../components/article/article_body/ArticleBodyWr
 
 <DefaultLayout title="404">
   <Nav />
-  <ArticleBodyWrapper collectionName="site" articleSlug="404" />
+  <ArticleBodyWrapper collectionName="site" articleId="404.md" />
   <Footer />
 </DefaultLayout>

src/pages/article/blog/[...blog].astro

@@ -1,10 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import type {
+import type { CollectionEntry, CollectionKey } from "astro:content";
-  CollectionEntry,
-  CollectionKey,
-  ContentEntryMap,
-} from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
 import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
@@ -13,22 +9,23 @@ import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 export async function getStaticPaths() {
   const collectionName: CollectionKey = "blog";
   const blogEntries = await getCollection(collectionName);
-  return blogEntries.map((entry) => ({
+  return blogEntries.map((post: CollectionEntry<CollectionKey>) => ({
-    params: { blog: entry.slug },
+    // Hide .md extension from URL
-    props: { entry },
+    params: { blog: post.id.replace(".md", "") },
+    props: { post },
   }));
 }
 
 interface Props {
-  entry: CollectionEntry<keyof ContentEntryMap>;
+  post: CollectionEntry<CollectionKey>;
 }
-const { entry } = Astro.props;
+const { post } = Astro.props;
 
-const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
+const articlePrettyName: string = post.data.title;
 ---
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBodyWrapper collectionName="blog" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="blog" articleId={post.id} />
   <Footer />
 </DefaultLayout>

src/pages/article/note/[...note].astro

@@ -1,10 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import type {
+import type { CollectionEntry, CollectionKey } from "astro:content";
-  CollectionEntry,
-  CollectionKey,
-  ContentEntryMap,
-} from "astro:content";
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
 import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
@@ -13,22 +9,22 @@ import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 export async function getStaticPaths() {
   const collectionName: CollectionKey = "note";
   const blogEntries = await getCollection(collectionName);
-  return blogEntries.map((entry) => ({
+  return blogEntries.map((post: CollectionEntry<CollectionKey>) => ({
-    params: { note: entry.slug },
+    params: { note: post.id.replace(".md", "") },
-    props: { entry },
+    props: { post },
   }));
 }
 
 interface Props {
-  entry: CollectionEntry<keyof ContentEntryMap>;
+  post: CollectionEntry<CollectionKey>;
 }
-const { entry } = Astro.props;
+const { post } = Astro.props;
 
-const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
+const articlePrettyName: string = post.data.title;
 ---
 
 <DefaultLayout title=`${articlePrettyName} - 李守中`>
   <Nav />
-  <ArticleBodyWrapper collectionName="note" articleSlug={entry.slug} />
+  <ArticleBodyWrapper collectionName="note" articleId={post.id} />
   <Footer />
 </DefaultLayout>

src/pages/article/translation/[...translation].astro

@@ -1,34 +0,0 @@
----
-import { getCollection } from "astro:content";
-import type {
-  CollectionEntry,
-  CollectionKey,
-  ContentEntryMap,
-} from "astro:content";
-import Footer from "../../../components/Footer.astro";
-import Nav from "../../../components/Nav.astro";
-import ArticleBodyWrapper from "../../../components/article/article_body/ArticleBodyWrapper.astro";
-import DefaultLayout from "../../../layouts/DefaultLayout.astro";
-
-export async function getStaticPaths() {
-  const collectionName: CollectionKey = "translation";
-  const blogEntries = await getCollection(collectionName);
-  return blogEntries.map((entry) => ({
-    params: { translation: entry.slug },
-    props: { entry },
-  }));
-}
-
-interface Props {
-  entry: CollectionEntry<keyof ContentEntryMap>;
-}
-const { entry } = Astro.props;
-
-const articlePrettyName:string = entry.id.split("/").pop()!.replace(".md", "");
----
-
-<DefaultLayout title=`${articlePrettyName} - 李守中`>
-  <Nav />
-  <ArticleBodyWrapper collectionName="translation" articleSlug={entry.slug} />
-  <Footer />
-</DefaultLayout>

src/pages/article/translation/index.astro

@@ -1,21 +1,141 @@
 ---
 import Footer from "../../../components/Footer.astro";
 import Nav from "../../../components/Nav.astro";
-import CollectionSummary from "../../../components/article/CollectionSummary.astro";
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 ---
 
 <DefaultLayout title="翻译 - 李守中">
   <Nav />
-  <div class="options">
+  <div class="collection-desc">
-    <span>当前: [按名字排序]</span>
+    <div class="collection-desc-item">
-    <a href="/article/translation/sort_by_timeline">按日期降序</a>
+      <h1>freebsd</h1>
+      <ul>
+        <li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFS exports man(5) page 2021 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFS exports man(5) 2021 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFS mountd man(8) page 2020 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFS mountd man(8) 2020 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFS nfsd man(8) page 2019 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFS nfsd man(8) 2019 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFS showmount man(8) page 2016 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFS showmount man(8) 2016 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFSv4 man(4) page 2019 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFSv4 man(4) 2019 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFSv4 nfscbd man(8) page 2009 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFSv4 nfscbd man(8) 2009 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFSv4 nfsrevoke man(8) page 2009 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFSv4 nfsrevoke man(8) 2020 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 NFSv4 nfsuserd man(8) page 2019 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 NFSv4 nfsuserd man(8) 2019 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/FreeBSD 13 rpcbind man(8) page 2017 中文译本.html"
+            target="_blank"
+          >
+            FreeBSD 13 rpcbind man(8) 2017 中文译本
+          </a>
+        </li>
+      </ul>
+    </div><div class="collection-desc-item">
+      <h1>easyrsa</h1>
+      <ul>
+        <li>
+          <a
+            href="/file_share/translation/EasyRSA Intro-To-PKI v3.08 中文译本.html"
+            target="_blank"
+          >
+            EasyRSA Intro-To-PKI v3.08 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/EasyRSA-Advanced v3.08 中文译本.html"
+            target="_blank"
+          >
+            EasyRSA-Advanced v3.08 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/EasyRSA-Readme v3.08 中文译本.html"
+            target="_blank"
+          >
+            EasyRSA-Readme v3.08 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/EasyRSA-Upgrade-Notes v3.08 中文译本.html"
+            target="_blank"
+          >
+            EasyRSA-Upgrade-Notes v3.08 中文译本
+          </a>
+        </li>
+      </ul>
+    </div><div class="collection-desc-item">
+      <h1>uncategorized</h1>
+      <ul>
+        <li>
+          <a
+            href="/file_share/translation/iperf3 v3.9 man page 中文译本.html"
+            target="_blank"
+          >
+            iperf3 v3.9 man(1) 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/PostgreSQL Don't Do This 中文译本.html"
+            target="_blank"
+          >
+            PostgreSQL Don't Do This 中文译本
+          </a>
+        </li><li>
+          <a
+            href="/file_share/translation/rsync v3.2.7 man(1) page 中文译本.html"
+            target="_blank"
+          >
+            rsync v3.2.7 man(1) 中文译本
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
-  <CollectionSummary
-    collectionName="translation"
-    sortByTimeline={false}
-    sortByArticleTitle={true}
-  />
   <Footer />
 </DefaultLayout>
 
@@ -34,4 +154,19 @@ import DefaultLayout from "../../../layouts/DefaultLayout.astro";
   .options {
     margin: 0.5em 0 0 0;
   }
+
+  .collection-desc::after {
+    display: block;
+    content: "";
+    clear: both;
+  }
+
+  ul {
+    padding: 0;
+    list-style-type: none;
+  }
+
+  h1 {
+    margin: 0.5em 0 0 0;
+  }
 </style>

src/pages/article/translation/sort_by_timeline.astro

@@ -1,37 +0,0 @@
----
-import Footer from "../../../components/Footer.astro";
-import Nav from "../../../components/Nav.astro";
-import CollectionSummary from "../../../components/article/CollectionSummary.astro";
-import DefaultLayout from "../../../layouts/DefaultLayout.astro";
----
-
-<DefaultLayout title="翻译 - 李守中">
-  <Nav />
-  <div class="options">
-    <span>当前: [按日期降序]</span>
-    <a href="/article/translation/">按名字排序</a>
-  </div>
-  <CollectionSummary
-    collectionName="translation"
-    sortByTimeline={true}
-    sortByArticleTitle={false}
-  />
-  <Footer />
-</DefaultLayout>
-
-<style>
-  :global(@media screen and (max-width: 1024px)) {
-    .collection-desc-item {
-      width: 100%;
-    }
-  }
-  :global(@media screen and (min-width: 1024px)) {
-    .collection-desc-item {
-      width: 50%;
-      float: left;
-    }
-  }
-  .options {
-    margin: 0.5em 0 0 0;
-  }
-</style>

src/pages/index.astro

@@ -7,6 +7,6 @@ import ArticleBodyWrapper from "../components/article/article_body/ArticleBodyWr
 
 <DefaultLayout title="李守中">
   <Nav />
-  <ArticleBodyWrapper collectionName="site" articleSlug="关于本站" />
+  <ArticleBodyWrapper collectionName="site" articleId="关于本站.md" />
   <Footer />
 </DefaultLayout>

src/styles/global.css

@@ -17,13 +17,22 @@ html {
 body {
   display: flex;
   flex-direction: column;
-  font-family: "Consolas", "Hack", -apple-system,
+  font-family:
-    BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei",
+  "Consolas",
-    "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  "Hack",
-    "Segoe UI Symbol", "Noto Color Emoji";
+  Tahoma,
+  Arial,
+  "Hiragino Sans GB",
+  "Microsoft YaHei",
+  "WenQuanYi Micro Hei",
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji";
   font-size: 1em;
   margin: auto;
-  overflow-y: scroll;
+  padding: 0 8px 0 8px;
   min-height: 100%;
   line-height: 1.5;
 }

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
   "compilerOptions": {
     "jsx": "preserve"
   }