68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { useData } from "vitepress";
|
|
import { computed } from "vue";
|
|
import { data as posts } from "../composables/posts.data";
|
|
import TopBar from "./TopBar.vue";
|
|
|
|
import { useRoute } from "vitepress";
|
|
|
|
const route = useRoute();
|
|
|
|
const currentIndex = computed(() =>
|
|
posts.findIndex((p) => p.url === route.path),
|
|
);
|
|
const currentPost = computed(() =>
|
|
currentIndex.value > -1 ? posts[currentIndex.value] : null,
|
|
);
|
|
|
|
const nextPost = computed(() => {
|
|
return currentIndex.value < posts.length - 1
|
|
? posts[currentIndex.value + 1]
|
|
: null;
|
|
});
|
|
|
|
const prevPost = computed(() => {
|
|
return currentIndex.value > 0 ? posts[currentIndex.value - 1] : null;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="blog-layout">
|
|
<TopBar />
|
|
|
|
<!-- The main post content: the markdown for this page -->
|
|
<article class="blog-post">
|
|
<Content />
|
|
</article>
|
|
|
|
<hr />
|
|
|
|
<nav class="post-navigation">
|
|
<!-- Previous post link -->
|
|
<div v-if="prevPost" class="prev-post">
|
|
<a :href="prevPost.url">← {{ prevPost.title }}</a>
|
|
</div>
|
|
<!-- Next post link -->
|
|
<div v-if="nextPost" class="next-post">
|
|
<a :href="nextPost.url">{{ nextPost.title }} →</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.blog-layout {
|
|
/* your layout styling */
|
|
}
|
|
.blog-post {
|
|
max-width: 700px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
.post-navigation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 2rem auto;
|
|
max-width: 700px;
|
|
}
|
|
</style>
|