feat(post): support prev & next

.vitepress/theme/components/PostHeader.vue

@@ -4,18 +4,20 @@
       {{ post.title }}
     </h1>
     <div :class="$style.elementList">
-      <Dot />
       <span :class="$style.elementItem">
         {{ moment(post.date).format("LL") }}
       </span>
-      <Dot v-if="post.location" />
+      <Dot
+        v-if="post.location"
+        :class="$style.dot"
+      />
       <span
         v-if="post.location"
         :class="$style.elementItem"
       >
         {{ post.location }}
       </span>
-      <Dot />
+      <Dot :class="$style.dot" />
       <span :class="$style.elementItem">
         {{ post.readingTime }}
       </span>
@@ -25,36 +27,49 @@
 
 <script lang="ts" setup>
 import moment from "moment-timezone";
-import { useData } from "vitepress";
+import { useData, onContentUpdated } from "vitepress";
+import { ref } from "vue";
 import Dot from "./Dot.vue";
 import { data as allPosts } from "../posts.data";
 
 const { frontmatter } = useData();
-const post = allPosts.find(
-  p => p.frontmatter.title === frontmatter.value.title
-)?.frontmatter || frontmatter.value;
+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 {
-  padding-bottom: 1.5rem;
+  margin-bottom: 2.5rem;
 }
 
 .title {
   padding-bottom: 1rem;
-  margin-top: 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 {
-  color: var(--vp-c-text-3);
   font-size: 0.88rem;
 }
 
 .elementItem {
-  margin-right: 1rem;
+  color: var(--vp-c-text-3);
+}
+
+.dot {
+  color: var(--vp-c-text-2);
+  margin: 0.5rem;
 }
 </style>

.vitepress/theme/components/PrevNext.vue

@@ -0,0 +1,116 @@
+<!-- Mostly copied from: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/components/VPDocFooter.vue -->
+<template>
+  <nav
+    v-if="control.prev?.link || control.next?.link"
+    :class="$style.prevNext"
+  >
+    <div class="pager">
+      <a
+        v-if="control.prev?.link"
+        :class="[$style.pagerLink, $style.prev]"
+        :href="control.prev.link"
+      >
+        <span :class="$style.desc">
+          {{ theme.docFooter?.prev || 'Previous page' }}
+        </span>
+        <span :class="$style.title">
+          {{ control.prev.text }}
+        </span>
+      </a>
+    </div>
+    <div class="pager">
+      <a
+        v-if="control.next?.link"
+        :class="[$style.pagerLink, $style.next]"
+        :href="control.next.link"
+      >
+        <span :class="$style.desc">
+          {{ theme.docFooter?.next || 'Next page' }}
+        </span>
+        <span :class="$style.title">
+          {{ control.next.text }}
+        </span>
+      </a>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { useData, onContentUpdated } from "vitepress";
+import { ref } from "vue";
+import { data as allPosts } from "../posts.data";
+import type { PageControl } from "../types/page-control";
+
+const { frontmatter, theme } = useData();
+let control = ref<PageControl>({});
+
+onContentUpdated(() => {
+  const index = allPosts.findIndex(
+    p => p.frontmatter.title === frontmatter.value.title
+  ) || 0;
+
+  const prevPost = allPosts[index - 1];
+  const nextPost = allPosts[index + 1];
+  const prev = prevPost && {
+    text: prevPost.frontmatter.title,
+    link: prevPost.url
+  };
+  const next = nextPost && {
+    text: nextPost.frontmatter.title,
+    link: nextPost.url
+  };
+  control.value = { prev, next };
+});
+</script>
+
+<style module scoped>
+.prevNext {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  display: grid;
+  grid-row-gap: 8px;
+}
+
+@media (min-width: 640px) {
+  .prevNext {
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 16px;
+  }
+}
+
+.pagerLink {
+  display: block;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 11px 16px 13px;
+  width: 100%;
+  height: 100%;
+  transition: border-color 0.25s;
+}
+
+.pagerLink:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.pagerLink.next {
+  margin-left: auto;
+  text-align: right;
+}
+
+.desc {
+  display: block;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+</style>

.vitepress/theme/pages/Layout.vue

@@ -5,13 +5,15 @@
     </template>
     <template #doc-after>
       <!-- <Comments /> -->
+      <PrevNext />
     </template>
   </Layout>
 </template>
 
 <script lang="ts" setup>
 import DefaultTheme from "vitepress/theme";
 import PostHeader from "../components/PostHeader.vue";
+import PrevNext from "../components/PrevNext.vue";
 
 const { Layout } = DefaultTheme;
 </script>

.vitepress/theme/types/page-control.d.ts

@@ -0,0 +1,4 @@
+export interface PageControl {
+  prev?: { text?: string; link?: string },
+  next?: { text?: string; link?: string }
+}