fix page navigation error and improve tagging

Author: gpproton

articles/components.md

@@ -8,6 +8,8 @@ slug: components-testing
 author: 'Godwin peter .O'
 draft: false
 navigation: true
+tags: Tech, Blog, Vue
+publishedAt: 2024-04-08
 image:
   src: '/assets/image.jpg'
   alt: 'placeholder'

articles/draft-content/index.md

@@ -7,6 +7,8 @@ description:
 slug: draft-root
 draft: false
 navigation: true
+tags: Tech, Blog, Vue
+publishedAt: 2024-04-08
 ---
 
 Nested index sample

articles/draft-content/nested-test.md

@@ -6,6 +6,8 @@ description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
 slug: nested-document-test
 draft: false
 navigation: true
+tags: Tech, Blog, Vue
+publishedAt: 2024-04-08
 ---
 
 Nested content sample

articles/welcome.md

@@ -8,6 +8,8 @@ slug: welcome-content
 author: 'Godwin peter .O'
 draft: false
 navigation: true
+tags: Tech, Blog, Vue
+publishedAt: 2024-04-08
 ---
 
 Summary of welcome content.

nuxt.config.ts

@@ -82,7 +82,7 @@ export default defineNuxtConfig({
   },
   content: {
     navigation: {
-      fields: ['author', 'publishedAt'],
+      fields: ['author', 'publishedAt', 'tags'],
     },
     // TODO: Review if necessary
     sources: {

pages/blog/[...slug].vue

@@ -21,6 +21,15 @@ if (page.value !== null) {
     twitterCard: 'summary_large_image',
   });
 }
+
+const processTags = (value?: string): string[] => {
+  if (value === undefined) return [];
+  const items = value.split(',');
+
+  return items.length > 7 ? items.slice(0, items.length - 1) : items;
+};
+
+console.log(page.value);
 </script>
 
 <template>
@@ -30,15 +39,24 @@ if (page.value !== null) {
         <div class="space-y-8">
           <div class="text-center p-8 border-b">
             <h1 class="text-5xl font-bold mb-4">{{ doc.title }}</h1>
-            <p class="text-base font-light line-clamp-2">
+            <p class="text-base font-light line-clamp-2 lg:px-32">
               {{ doc.description }}
             </p>
-            <div class="mt-4">
-              <span
-                class="text-sm uppercase font-normal rounded-lg bg-blue-100 px-3 py-1.5"
-              >
-                {{ formatDate(doc.createdAt) }}
-              </span>
+            <div class="mt-4 space-y-2">
+              <div class="px-1 space-x-2">
+                <span
+                  v-for="tag in processTags(doc.tags)"
+                  :key="tag"
+                  class="text-sm text-blue-500 font-normal rounded-lg bg-blue-100 px-3 py-1.5"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+              <div class="">
+                <span class="text-sm uppercase font-normal">
+                  {{ formatDate(doc.publishedAt) }}
+                </span>
+              </div>
             </div>
             <!-- <span>Updated: {{ formatDate(doc.updatedAt) }}</span> -->
           </div>

pages/blog/index.vue

@@ -44,7 +44,7 @@ useSeoMeta({
       v-if="articles !== null && articles.length > 0"
       class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 sm:mt-2 sm:pt-4 lg:mx-0 lg:max-w-none lg:grid-cols-3"
     >
-      <nuxt-link v-for="post in articles" :key="post.id" :to="root + post.slug">
+      <a v-for="post in articles" :key="post.id" :href="root + post.slug">
         <article
           class="flex max-w-sm rounded-xl flex-col items-start justify-between overflow-hidden hover:bg-indigo-10 hover:scale-105 hover:shadow-2xl transition shadow transform duration-300"
         >
@@ -67,8 +67,8 @@ useSeoMeta({
             </p>
           </section>
           <footer class="flex items-center gap-x-2 text-xs mt-2 py-2 px-3">
-            <time :datetime="post.createdAt" class="text-gray-500">{{
-              formatDate(post.createdAt)
+            <time :datetime="post.publishedAt" class="text-gray-500">{{
+              formatDate(post.publishedAt)
             }}</time>
             <span
               :to="'#'"
@@ -77,7 +77,7 @@ useSeoMeta({
             >
           </footer>
         </article>
-      </nuxt-link>
+      </a>
     </div>
     <div v-else class="text-2xl text-center">{{ 'Not Found' }}</div>
   </div>