From 1277628576d6670f8cf2f57842ccaa75531f4989 Mon Sep 17 00:00:00 2001
From: Octobug <whalevocal@gmail.com>
Date: Mon, 11 Dec 2023 19:14:18 +0800
Subject: [PATCH] feat(sort): link sort of a single post to the sorts page

close #6
---
 .vitepress/theme/components/Annotations.vue | 47 +++++++++++++++++++++
 .vitepress/theme/pages/Layout.vue           |  4 ++
 .vitepress/theme/pages/Sorts.vue            | 15 ++++---
 .vitepress/theme/utils.ts                   |  2 +-
 README.md                                   |  3 +-
 5 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 .vitepress/theme/components/Annotations.vue

diff --git a/.vitepress/theme/components/Annotations.vue b/.vitepress/theme/components/Annotations.vue
new file mode 100644
index 0000000..7413969
--- /dev/null
+++ b/.vitepress/theme/components/Annotations.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="annotations">
+    <a
+      :href="withBase(`/sorts#${toDashedHash(frontmatter.sort)}`)"
+      class="sort"
+    >
+      {{ frontmatter.sort?.toUpperCase() }}
+    </a>
+    <!-- <Dot /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useData, withBase } from "vitepress";
+import { toDashedHash } from "../utils";
+// import Dot from "../components/Dot.vue";
+
+const { frontmatter } = useData();
+</script>
+
+<style scoped>
+.annotations {
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 2rem 0;
+  font-size: 14px;
+}
+
+.sort {
+  color: var(--vp-c-neutral-inverse);
+  background-color: var(--vp-c-brand-3);
+  font-weight: bold;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.sort:hover {
+  background-color: var(--vp-c-brand-1);
+}
+
+.dark .sort {
+  background-color: var(--vp-c-brand-1);
+}
+
+.dark .sort:hover {
+  background-color: var(--vp-c-brand-2);
+}
+</style>
diff --git a/.vitepress/theme/pages/Layout.vue b/.vitepress/theme/pages/Layout.vue
index cf2679d..c4da35c 100644
--- a/.vitepress/theme/pages/Layout.vue
+++ b/.vitepress/theme/pages/Layout.vue
@@ -3,6 +3,9 @@
     <template #doc-before>
       <PostElements />
     </template>
+    <template #doc-footer-before>
+      <Annotations />
+    </template>
     <template #doc-after>
       <PrevNext />
       <Comments />
@@ -13,6 +16,7 @@
 <script lang="ts" setup>
 import DefaultTheme from "vitepress/theme";
 import PostElements from "../components/PostElements.vue";
+import Annotations from "../components/Annotations.vue";
 import PrevNext from "../components/PrevNext.vue";
 import Comments from "../components/Comments.vue";
 
diff --git a/.vitepress/theme/pages/Sorts.vue b/.vitepress/theme/pages/Sorts.vue
index bf9668c..d98babf 100644
--- a/.vitepress/theme/pages/Sorts.vue
+++ b/.vitepress/theme/pages/Sorts.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { data as allPosts } from "../posts.data";
 import { toDashedHash } from "../utils";
 import Badge from "../components/Badge.vue";
@@ -54,15 +54,20 @@ Object.keys(postsBySort).forEach(sort => {
   hashToSort[toDashedHash(sort)] = sort;
 });
 
-const defaultHash = window.location.hash?.slice(1);
-const selectedSort = ref(hashToSort[defaultHash] || ALL);
-
-selectSort(selectedSort.value);
+const selectedSort = ref();
 
 function selectSort(sort: string) {
   window.location.hash = `#${toDashedHash(sort)}`;
   selectedSort.value = sort;
 }
+
+onMounted(() => {
+  const defaultHash = window.location.hash?.slice(1);
+  selectedSort.value = hashToSort[defaultHash] || ALL;
+
+  selectSort(selectedSort.value);
+});
+
 </script>
 
 <style module scoped>
diff --git a/.vitepress/theme/utils.ts b/.vitepress/theme/utils.ts
index 86fb228..759b5de 100644
--- a/.vitepress/theme/utils.ts
+++ b/.vitepress/theme/utils.ts
@@ -8,6 +8,6 @@ export function findPost(postList: ContentData[], page: PageData) {
   return postList[findPostIndex(postList, page)];
 }
 
-export function toDashedHash(words: string) {
+export function toDashedHash(words: string = "") {
   return words.split(" ").join("-").toLowerCase();
 }
diff --git a/README.md b/README.md
index 57c6f05..4cc842e 100644
--- a/README.md
+++ b/README.md
@@ -21,11 +21,12 @@ This blog is powered by [VitePress](https://vitepress.dev/) with a customized th
     - Reading Time
   - [x] Prev/Next (without the built-in global sidebar)
   - [x] Comments (with [Giscus](https://github.com/giscus/giscus))
-  - [ ] Sort (Category)
+  - [x] Sort (Category)
   - [ ] Tags
 - [x] Home
   - [x] Profile Card
     - Avatar
+    - Nickname
     - Bio
     - Location
     - Timezone