Fix article sort problem in non-zh environment.

package-lock.json

@@ -11,6 +11,7 @@
         "@astrojs/check": "^0.7.0",
         "@astrojs/sitemap": "^3.1.5",
         "astro": "^4.9.2",
+        "pinyin-pro": "^3.22.0",
         "typescript": "^5.4.5"
       }
     },
@@ -4620,6 +4621,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinyin-pro": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmmirror.com/pinyin-pro/-/pinyin-pro-3.22.0.tgz",
+      "integrity": "sha512-fz1rvX72K/OmUp3Bbj8/jzRt0aSetmmx/Su4My1H/nUu5x2udnp0Qiq+ojxDXk1CojXBgSUcjXyMI3XNhwSoLg=="
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "@astrojs/check": "^0.7.0",
     "@astrojs/sitemap": "^3.1.5",
     "astro": "^4.9.2",
+    "pinyin-pro": "^3.22.0",
     "typescript": "^5.4.5"
   }
 }

src/components/article/CollectionSummary.astro

@@ -1,8 +1,10 @@
 ---
-import type { CollectionEntry } from "astro:content";
+import type { CollectionEntry, ContentEntryMap } from "astro:content";
 import { getCollection, type CollectionKey } from "astro:content";
 import CategorySummary from "./CategorySummary.astro";
 
+import * as pinyinpro from "pinyin-pro";
+
 interface Props {
   collectionName: CollectionKey;
   sortedByTimeline: boolean;
@@ -27,26 +29,50 @@ const allCategories: Array<string> = Array.from(
 const categoriedPostList: Array<CategoriedPosts> = allCategories.map((key) => {
   let object: CategoriedPosts = {};
   object[key] = allPosts.filter((post) => post.data.category === key);
-  sortedByTimeline
+
-    ? object[key].sort(
+  // article sort function by article title
-        (
+  function sortPostByTitlePinyin(
     postA: CollectionEntry<CollectionKey>,
     postB: CollectionEntry<CollectionKey>
-        ) => {
+  ): number {
+    let postATitle = pinyinpro.convert(pinyinpro.pinyin(postA.data.title), {
+      format: "symbolToNum",
+    });
+    let postBTitle = pinyinpro.convert(pinyinpro.pinyin(postB.data.title), {
+      format: "symbolToNum",
+    });
+    return postATitle.localeCompare(postBTitle, "en");
+  }
+
+  if (sortedByTimeline) {
+    // sort article by update date
+    object[key].sort((postA, postB) => {
+      // if two articles is updated on the same day, sort them by title
       if (postA.data.lastUpdate !== postB.data.lastUpdate) {
         return postA.data.lastUpdate < postB.data.lastUpdate ? 1 : -1;
       }
-          return postA.id.localeCompare(postB.id);
+      return sortPostByTitlePinyin(postA, postB);
-        }
+    });
-      )
+  } else {
-    : object[key].sort(
+    // sort article by title
-        (
+    // get articles with titles started in Chinese or the alphabet
-          postA: CollectionEntry<CollectionKey>,
+    let postWithAlphabetStartedTitle: CollectionEntry<keyof ContentEntryMap>[] =
-          postB: CollectionEntry<CollectionKey>
+      object[key].filter((post) => /^[a-zA-Z]/.test(post.data.title));
-        ) => {
+    let postWithChineseStartedTitle: CollectionEntry<keyof ContentEntryMap>[] =
-          return postA.id.localeCompare(postB.id);
+      object[key].filter((post) => /^[^a-zA-Z]/.test(post.data.title));
-        }
+    // sort two Array by article title
+    postWithAlphabetStartedTitle.sort((postA, postB) =>
+      sortPostByTitlePinyin(postA, postB)
     );
+    postWithChineseStartedTitle.sort((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
+    );
+  }
   return object;
 });