From 1cf85add1a278dd515a5e72c45de45a325d2dff0 Mon Sep 17 00:00:00 2001
From: Yugo Ogura <jigenbakdaaan@gmail.com>
Date: Sun, 26 Jul 2020 01:26:01 +0900
Subject: [PATCH] feat: set links at the bottom of page

---
 .../components/NextAndPrevLinks.ts            | 22 ++++++++++++++++
 .../components/NextAndPrevLinks.vue           | 25 +++++++++++++++++++
 src/client/theme-default/components/Page.vue  |  8 ++++++
 types/shared.d.ts                             |  2 ++
 4 files changed, 57 insertions(+)
 create mode 100644 src/client/theme-default/components/NextAndPrevLinks.ts
 create mode 100644 src/client/theme-default/components/NextAndPrevLinks.vue

diff --git a/src/client/theme-default/components/NextAndPrevLinks.ts b/src/client/theme-default/components/NextAndPrevLinks.ts
new file mode 100644
index 00000000..9080a73f
--- /dev/null
+++ b/src/client/theme-default/components/NextAndPrevLinks.ts
@@ -0,0 +1,22 @@
+import { defineComponent, computed } from 'vue'
+import { usePageData } from 'vitepress'
+
+export default defineComponent({
+  setup() {
+    const pageData = usePageData()
+    const next = computed(() => {
+      return pageData.value.next
+    })
+    const prev = computed(() => {
+      return pageData.value.prev
+    })
+    const hasLinks = computed(() => {
+      return !!next || !!prev
+    })
+    return {
+      next,
+      prev,
+      hasLinks
+    }
+  }
+})
diff --git a/src/client/theme-default/components/NextAndPrevLinks.vue b/src/client/theme-default/components/NextAndPrevLinks.vue
new file mode 100644
index 00000000..f15b9b07
--- /dev/null
+++ b/src/client/theme-default/components/NextAndPrevLinks.vue
@@ -0,0 +1,25 @@
+<template>
+  <div v-if="hasLinks" class="links-wrapper">
+    <div class="prev-link">
+      <div v-if="prev">
+      ← <a :href="prev.link">{{prev.text}}</a>
+      </div>
+    </div>
+    <div class="next-link">
+      <div v-if="next">
+      <a :href="next.link">{{next.text}}</a> →
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./NextAndPrevLinks"></script>
+
+<style>
+.links-wrapper {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/src/client/theme-default/components/Page.vue b/src/client/theme-default/components/Page.vue
index c2c3536c..676886ea 100644
--- a/src/client/theme-default/components/Page.vue
+++ b/src/client/theme-default/components/Page.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="content">
     <Content />
+    <NextAndPrevLinks />
   </div>
 </template>
 
+<script>
+import NextAndPrevLinks from './NextAndPrevLinks.vue'
+export default {
+  components:{ NextAndPrevLinks }
+}
+</script>
+
 <style>
 .content {
   max-width: 46rem;
diff --git a/types/shared.d.ts b/types/shared.d.ts
index 93a77742..3cf71d5d 100644
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@@ -26,6 +26,8 @@ export interface PageData {
   frontmatter: Record<string, any>
   headers: Header[]
   lastUpdated: number
+  next?: { text: string; link: string }
+  prev?: { text: string; link: string }
 }
 
 export interface Header {