Add pagination components into Blog and Guestbook

craftcms · Sep 24, 2024 · 253b8a8 · 253b8a8
1 parent d8866d0
commit 253b8a8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/pages/blog.vue b/pages/blog.vue
@@ -14,6 +14,7 @@
     :slug="entry?.slug"
     :pageSubheading="entry?.pageSubheading"
     :postDate="entry?.postDate" />
+    <Pagination />
   </section>
 </template>
 

diff --git a/pages/guestbook.vue b/pages/guestbook.vue
@@ -8,17 +8,22 @@
   </section>
   <div class="container mx-auto px-2 sm:grid gap-6 grid-cols-2">
     <section class="mb-12">
-      <ol class="mb-2 divide-y divide-slate-300" v-if="data.postsEntries.length > 0">
-        <li v-for="post in data.postsEntries">
-          <article class="text-xl py-6">
-            {{ post.textBlock }}
-            <p class="text-sm mt-1">
-              <time :datetime="post.postDate">{{ post.postDate }}</time><br />
-              By
-            </p>
-          </article>
-        </li>
-      </ol>
+      <div v-if="data.postsEntries.length > 0">
+        <ol class="mb-2 divide-y divide-slate-300">
+          <li v-for="post in data.postsEntries">
+            <article class="text-xl py-6">
+              <div v-html="post.textBlock"></div>
+              <p class="text-sm mt-1">
+                <time :datetime="post.postDate">{{ post.postDate }}</time><br />
+                By
+              </p>
+            </article>
+          </li>
+        </ol>
+        <Pagination
+        :current-page="0"
+        :total-pages="3" />
+      </div>
       <p class="text-2xl" v-else>No entries yet. Create one using the form.</p>
     </section>
     <section>

diff --git a/queries/guestbook.gql b/queries/guestbook.gql
@@ -12,7 +12,7 @@ query Guestbook($limit: Int!, $offset: Int!) {
     ... on text_Entry {
       id
       title
-      textBlock
+      textBlock @markdown
       postDate @formatDateTime(format: "F j, Y")
     }
   }