From b555700e9090473050f8f4d6a8bb63f954ddc0ab Mon Sep 17 00:00:00 2001
From: Octobug <whalevocal@gmail.com>
Date: Sat, 18 Nov 2023 15:08:11 +0800
Subject: [PATCH] fix(post): stop using frontmatter title

---
 .vitepress/config.theme.ts                   |  2 +-
 .vitepress/theme/components/PostElements.vue | 63 ++++++++++++++++
 .vitepress/theme/components/PostHeader.vue   | 78 --------------------
 .vitepress/theme/components/PrevNext.vue     |  8 +-
 .vitepress/theme/pages/Layout.vue            |  4 +-
 .vitepress/theme/posts.data.ts               |  8 ++
 .vitepress/theme/search.ts                   |  6 +-
 .vitepress/theme/style.css                   |  5 ++
 .vitepress/theme/utils.ts                    |  9 +++
 posts/pilot/README.md                        | 21 +++---
 10 files changed, 106 insertions(+), 98 deletions(-)
 create mode 100644 .vitepress/theme/components/PostElements.vue
 delete mode 100644 .vitepress/theme/components/PostHeader.vue
 create mode 100644 .vitepress/theme/utils.ts

diff --git a/.vitepress/config.theme.ts b/.vitepress/config.theme.ts
index 6eeee62..189752e 100644
--- a/.vitepress/config.theme.ts
+++ b/.vitepress/config.theme.ts
@@ -53,13 +53,13 @@ export default {
           tokenize
         },
         searchOptions: {
+          combineWith: "AND",
           fuzzy: 0.1,
           prefix: true,
           boost: {
             title: 4,
             text: 2,
           },
-          combineWith: "AND"
         }
       },
     },
diff --git a/.vitepress/theme/components/PostElements.vue b/.vitepress/theme/components/PostElements.vue
new file mode 100644
index 0000000..5662392
--- /dev/null
+++ b/.vitepress/theme/components/PostElements.vue
@@ -0,0 +1,63 @@
+<template>
+  <div :class="$style.elementList">
+    <span :class="$style.elementItem">
+      {{ moment(post.date).format("LL") }}
+    </span>
+    <Dot
+      v-if="post.location"
+      :class="$style.dot"
+    />
+    <span
+      v-if="post.location"
+      :class="$style.elementItem"
+    >
+      {{ post.location }}
+    </span>
+    <Dot
+      v-if="post.readingTime"
+      :class="$style.dot"
+    />
+    <span :class="$style.elementItem">
+      {{ post.readingTime }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import moment from "moment-timezone";
+import { useData, onContentUpdated } from "vitepress";
+import { ref } from "vue";
+import { data as allPosts } from "../posts.data";
+import { findPost } from "../utils";
+import Dot from "./Dot.vue";
+
+const { frontmatter, page } = useData();
+let post = ref(getPostData());
+
+function getPostData() {
+  return findPost(allPosts, page.value).frontmatter || frontmatter.value;
+}
+
+onContentUpdated(() => {
+  post.value = getPostData();
+});
+</script>
+
+<style module scoped>
+.elementList {
+  border-top: 1px dashed var(--vp-c-divider);
+  padding-top: 0.5rem;
+  margin-top: 3rem;
+  margin-bottom: -5rem;
+  font-size: 0.88rem;
+}
+
+.elementItem {
+  color: var(--vp-c-text-3);
+}
+
+.dot {
+  color: var(--vp-c-text-2);
+  margin: 0.5rem;
+}
+</style>
diff --git a/.vitepress/theme/components/PostHeader.vue b/.vitepress/theme/components/PostHeader.vue
deleted file mode 100644
index b42d163..0000000
--- a/.vitepress/theme/components/PostHeader.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div :class="$style.postHeader">
-    <h1 :class="$style.title">
-      {{ post.title }}
-    </h1>
-    <div :class="$style.elementList">
-      <span :class="$style.elementItem">
-        {{ moment(post.date).format("LL") }}
-      </span>
-      <Dot
-        v-if="post.location"
-        :class="$style.dot"
-      />
-      <span
-        v-if="post.location"
-        :class="$style.elementItem"
-      >
-        {{ post.location }}
-      </span>
-      <Dot
-        v-if="post.readingTime"
-        :class="$style.dot"
-      />
-      <span :class="$style.elementItem">
-        {{ post.readingTime }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import moment from "moment-timezone";
-import { useData, onContentUpdated } from "vitepress";
-import { ref } from "vue";
-import Dot from "./Dot.vue";
-import { data as allPosts } from "../posts.data";
-
-const { frontmatter } = useData();
-let post = ref(getCurrentPost());
-
-function getCurrentPost() {
-  return allPosts.find(
-    p => p.frontmatter.title === frontmatter.value.title
-  )?.frontmatter || frontmatter.value;
-}
-
-onContentUpdated(() => {
-  post.value = getCurrentPost();
-});
-</script>
-
-<style module scoped>
-.postHeader {
-  margin-bottom: 2.5rem;
-}
-
-.title {
-  padding-bottom: 1rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.3em;
-  font-size: 1.8em;
-  font-weight: 600;
-  border-bottom: 1px dashed var(--vp-c-divider);
-}
-
-.elementList {
-  font-size: 0.88rem;
-}
-
-.elementItem {
-  color: var(--vp-c-text-3);
-}
-
-.dot {
-  color: var(--vp-c-text-2);
-  margin: 0.5rem;
-}
-</style>
diff --git a/.vitepress/theme/components/PrevNext.vue b/.vitepress/theme/components/PrevNext.vue
index d2d7e46..419d1a1 100644
--- a/.vitepress/theme/components/PrevNext.vue
+++ b/.vitepress/theme/components/PrevNext.vue
@@ -39,16 +39,14 @@
 import { useData, onContentUpdated } from "vitepress";
 import { ref } from "vue";
 import { data as allPosts } from "../posts.data";
+import { findPostIndex } from "../utils";
 import type { PageControl } from "../types/page-control";
 
-const { frontmatter, theme } = useData();
+const { page, theme } = useData();
 let control = ref<PageControl>({});
 
 onContentUpdated(() => {
-  const index = allPosts.findIndex(
-    p => p.frontmatter.title === frontmatter.value.title
-  ) || 0;
-
+  const index = findPostIndex(allPosts, page.value);
   const prevPost = allPosts[index - 1];
   const nextPost = allPosts[index + 1];
   const prev = prevPost && {
diff --git a/.vitepress/theme/pages/Layout.vue b/.vitepress/theme/pages/Layout.vue
index b096303..747d482 100644
--- a/.vitepress/theme/pages/Layout.vue
+++ b/.vitepress/theme/pages/Layout.vue
@@ -1,7 +1,7 @@
 <template>
   <Layout>
     <template #doc-before>
-      <PostHeader />
+      <PostElements />
     </template>
     <template #doc-after>
       <!-- <Comments /> -->
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import DefaultTheme from "vitepress/theme";
-import PostHeader from "../components/PostHeader.vue";
+import PostElements from "../components/PostElements.vue";
 import PrevNext from "../components/PrevNext.vue";
 
 const { Layout } = DefaultTheme;
diff --git a/.vitepress/theme/posts.data.ts b/.vitepress/theme/posts.data.ts
index b9218ed..84d25b6 100644
--- a/.vitepress/theme/posts.data.ts
+++ b/.vitepress/theme/posts.data.ts
@@ -6,10 +6,18 @@ import extendedConfig from "../config.theme";
 declare const data: ContentData[];
 export { data };
 
+// Title Workaround
+function extractTile(text: string) {
+  const titlePattern = /---\n\n# (?<title>.*)\n/;
+  const match = text.match(titlePattern);
+  return match?.groups?.title || "NonTitled";
+}
+
 export default createContentLoader(extendedConfig.mdfilePatterns, {
   includeSrc: true,
   transform(rawData) {
     return rawData.map(p => {
+      p.frontmatter.title = extractTile(p.src || "");
       p.frontmatter.datetime = new Date(p.frontmatter.date);
       p.frontmatter.readingTime = readingTime(p.src || "").text;
       p.url = p.url.replace("/README", "");
diff --git a/.vitepress/theme/search.ts b/.vitepress/theme/search.ts
index 634a37b..eec0fe4 100644
--- a/.vitepress/theme/search.ts
+++ b/.vitepress/theme/search.ts
@@ -9,6 +9,8 @@ export function tokenize(text: string): Array<string> {
   // @ts-ignore: seems like Intl.Segmenter is not supported by the lang server
   const segmenter = new Intl.Segmenter("cn", { granularity: "word" });
   // @ts-ignore
-  const words = Array.from(segmenter.segment(text)).map((item) => item.segment);
-  return words.filter(w => w !== " ");
+  const segs = Array.from(segmenter.segment(text)).map(item => item.segment);
+  const uniqueSegs = Array.from(new Set(segs));
+  const result = uniqueSegs.filter(w => !(/^\s+$/).test(w));
+  return result;
 }
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index f3f5bfd..d24baef 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -162,6 +162,11 @@ footer a {
 }
 
 /* CSS for a Post */
+/* PostElements Workaround */
+.main h1 {
+  margin-bottom: 5rem;
+}
+
 .main img {
   border-radius: 0.5rem;
   box-shadow: 0 0.5rem 0.8rem var(--ct-c-shadow);
diff --git a/.vitepress/theme/utils.ts b/.vitepress/theme/utils.ts
new file mode 100644
index 0000000..b967abc
--- /dev/null
+++ b/.vitepress/theme/utils.ts
@@ -0,0 +1,9 @@
+import { ContentData, PageData } from "vitepress";
+
+export function findPostIndex(postList: ContentData[], page: PageData) {
+  return postList.findIndex(p => p.frontmatter.title === page.title) || 0;
+}
+
+export function findPost(postList: ContentData[], page: PageData) {
+  return postList[findPostIndex(postList, page)];
+}
diff --git a/posts/pilot/README.md b/posts/pilot/README.md
index 41ce08f..ca3f104 100644
--- a/posts/pilot/README.md
+++ b/posts/pilot/README.md
@@ -1,5 +1,4 @@
 ---
-title: Pilot
 date: 2019-06-02
 location: 深圳，西乡街道
 sort: Miscellaneous
@@ -7,6 +6,8 @@ tags:
   - Small Talk
 ---
 
+# Pilot
+
 ![Pilot Whale](./pilot-whale.jpg)
 
 为了让这篇成为博客的第一篇文章，我写了个假日期。这个日期是我从珠海搬到深圳的日子，算是一个新的开始。
@@ -19,9 +20,9 @@ tags:
 
 ## 笔记
 
-一上大学就丢失了记笔记的习惯，之后我发现如果不记笔记，有些书很容易看了等于没看。
+一上大学就丢失了记笔记的习惯，纸质书里的勾勾划划随着大部分学习资料电子化而离去。
 
-大约在 2016 年我开始使用[为知笔记](https://www.wiz.cn/)。
+阅读知识密度高的书如果不记笔记很容易看了等于没看，所以大约在 2016 年（大三）我开始使用[为知笔记](https://www.wiz.cn/)。
 
 2019 年买了 MacBook Pro 13 (2018)，日常使用的操作系统变成 macOS，而那个时候的为知笔记 macOS 客户端很不好用，所以我把全部笔记迁移到了[有道云笔记](https://note.youdao.com/)。
 
@@ -29,7 +30,7 @@ tags:
 
 值得一提的是，在 VS Code 里写笔记的体验很好，和写代码差不多。并且由于使用了 Git，所以事后回溯非常方便。
 
-今年整理工作笔记时觉得有一些内容值得整理成篇，所以又萌发写博客的想法……
+直到今年，我在整理工作笔记时觉得有一些内容值得整理成篇，所以又萌发写博客的想法……
 
 ## VitePress
 
@@ -43,12 +44,12 @@ tags:
 
 我依然比较喜欢这个 ID，所以博客沿用了这个名字。
 
-以前不知道想要写什么，现在知道想要写什么，但是很多问题我并没有答案。已经知道答案的，我便把它们写在这里。
+以前不知道想要写什么，现在知道想要写什么，但是很多问题我并没有答案。已经知道答案的，我便把它们记录在这里。
 
 ::: details Pilot?
 
 - "Pilot" 经常被用作剧集第一集的名字 [[1],[2]]，中文可以译为“试播集”。
-- 题图中的鲸鱼是领航鲸 (Pilot Whale) [[3]]，图片来源 [[4]]。
+- 题图 [[3]] 中的鲸鱼是领航鲸 (Pilot Whale) [[4]]。
 
 :::
 
@@ -56,10 +57,10 @@ tags:
 
 1. [Television pilot [Wikipedia]][1]
 2. [List of television episodes titled Pilot [Wikipedia]][2]
-3. [Pilot whale [Wikipedia]][3]
-4. [Days Like Today Are Why I Want to Live Forever! [SDM adventures]][4]
+3. [Days Like Today Are Why I Want to Live Forever! [SDM adventures]][3]
+4. [Pilot whale [Wikipedia]][4]
 
 [1]: <https://en.wikipedia.org/wiki/Television_pilot>
 [2]: <https://en.wikipedia.org/wiki/List_of_television_episodes_titled_Pilot>
-[3]: <https://en.wikipedia.org/wiki/Pilot_whale>
-[4]: <https://sdmdiving.com/wildlife-travel-blog/tag/pilot+whale+diving>
+[3]: <https://sdmdiving.com/wildlife-travel-blog/tag/pilot+whale+diving>
+[4]: <https://en.wikipedia.org/wiki/Pilot_whale>