feat(sort): link sort of a single post to the sorts page

close #6

.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>

.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";
 

.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>

.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();
 }

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