new usePrevNextPost composable (#160)

docs/3.other-composables/1.user.md

@@ -2,14 +2,14 @@
 #### User
 
 getters:
-```ts
+```ts twoslash
 const userId = getCurrentUserId()
 const userName = getCurrentUserName()
 ```
 Authentication is required to fetch the user information.
 
 methods:
-```ts
+```ts twoslash
 loginUser()
 logoutUser()
 ```

docs/3.other-composables/2.staging.md

@@ -1,7 +1,7 @@
 
 #### Staging
 
-```ts
+```ts twoslash
 const staging = await isStaging()
 ```
 More about this on the [staging](../3.advanced/4.staging.md) page.

docs/3.other-composables/3.previous-next-post.md

@@ -0,0 +1,38 @@
+
+#### get Previous/Next posts
+
+```ts twoslash
+const { prev: prev, next: next } = await usePrevNextPost('currentPostSlug')
+```
+
+
+```vue twoslash [..uri.vue]
+<script setup lang="ts">
+const route = useRoute()
+const { prev: prev, next: next } = await usePrevNextPost(route.params.slug[0])
+</script>
+
+<template>
+  <div class="flex justify-start">
+    <UButton
+      v-if="prev"
+      :alt="prevButton"
+      :to="'/' + prev"
+      icon="i-heroicons-arrow-left-16-solid"
+      variant="soft"
+      size="sm"
+    />
+  </div>
+  <div class="flex justify-end">
+    <UButton
+      v-if="next"
+      :alt="nextButton"
+      :to="'/' + next"
+      trailing-icon="i-heroicons-arrow-right-16-solid"
+      variant="soft"
+      size="sm"
+    />
+  </div>
+</template>
+```
+

playground/components/PrevNext.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  prev?: string
+  next?: string
+  prevButton?: string
+  nextButton?: string
+}>()
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-6 max-w-28">
+    <div class="flex justify-start">
+      <UButton
+        v-if="prev"
+        :alt="prevButton"
+        :to="'/' + prev"
+        icon="i-heroicons-arrow-left-16-solid"
+        variant="soft"
+        size="sm"
+      />
+    </div>
+    <div class="flex justify-center">
+      <UButton
+        to="/"
+        icon="i-heroicons-home"
+        variant="soft"
+        size="sm"
+      />
+    </div>
+    <div class="flex justify-end">
+      <UButton
+        v-if="next"
+        :alt="nextButton"
+        :to="'/' + next"
+        trailing-icon="i-heroicons-arrow-right-16-solid"
+        variant="soft"
+        size="sm"
+      />
+    </div>
+  </div>
+</template>

playground/pages/[...slug].vue

@@ -18,6 +18,7 @@ if (post.value?.title) {
     title: post.value.title
   })
 }
+const { prev: prev, next: next } = await usePrevNextPost(route.params.slug[0])
 const staging = await isStaging()
 </script>
 
@@ -38,11 +39,11 @@ const staging = await isStaging()
         </UPageBody>
         <template #left>
           <UAside>
-            <UButton
-              icon="i-heroicons-arrow-left"
-              variant="soft"
-              size="sm"
-              to="/"
+            <PrevNext
+              :prev="post.contentTypeName === 'post' ? prev : undefined"
+              :next="post.contentTypeName === 'post' ? next : undefined"
+              prev-button="Vorige"
+              next-button="Volgende"
             />
             <div
               v-if="featuredImage"

src/module.ts

@@ -91,6 +91,7 @@ export default defineNuxtModule<WPNuxtConfig>({
       { name: 'isStaging', as: 'isStaging', from: resolveRuntimeModule('./composables/isStaging') },
       { name: 'useWPContent', as: 'useWPContent', from: resolveRuntimeModule('./composables/useWPContent') },
       { name: 'parseDoc', as: 'parseDoc', from: resolveRuntimeModule('./composables/useParser') },
+      { name: 'usePrevNextPost', as: 'usePrevNextPost', from: resolveRuntimeModule('./composables/usePrevNextPost') },
 
       { name: 'loginUser', as: 'loginUser', from: resolveRuntimeModule('./composables/user') },
       { name: 'logoutUser', as: 'logoutUser', from: resolveRuntimeModule('./composables/user') },

src/runtime/composables/usePrevNextPost.ts

@@ -0,0 +1,29 @@
+import { useWPContent } from './useWPContent'
+
+const _usePrevNextPost = async (currentPostSlug: string) => {
+  const allPosts = await getAllPosts()
+  if (!allPosts) return { prev: null, next: null }
+  const currentIndex: number = allPosts.slugs.findIndex((slug: string) => slug === currentPostSlug)
+  const nextPost = currentIndex > 0 ? allPosts.slugs[currentIndex - 1] : null
+  const prevPost = allPosts.slugs.length > (currentIndex + 1) ? allPosts.slugs[currentIndex + 1] : null
+
+  return {
+    prev: prevPost ? prevPost : null,
+    next: nextPost ? nextPost : null
+  }
+}
+
+const getAllPosts = async () => {
+  const { data: allPosts } = await useWPContent('Posts', ['posts', 'nodes'], false)
+  if (allPosts.value) {
+    return {
+      slugs: allPosts.value?.map((post) => {
+        if (post) return post.slug
+        else return null
+      })
+    }
+  }
+  return
+}
+
+export const usePrevNextPost = _usePrevNextPost