new layouts for generic blog and articles

website/layouts/article.vue

@@ -9,7 +9,7 @@
             <img src="https://unsplash.it/44/44" class="rounded-full h-11">
               <div>
                 <span class="text-md block">Posted by: <strong>{{ page.author }}</strong></span>
-                <span class="text-sm mb-0">{{ page.pubdate }}</span>
+                <span class="text-sm mb-0">{{ $formatDate(page.pubdate) }}</span>
               </div>
           </div>      
         </div>
@@ -21,7 +21,7 @@
               <NuxtLink :to="page._path">
                 <img src= "https://unsplash.it/400/200" class="mb-2 w-full md:min-win-400"/>
                 <h2 class="text-xl">{{ page.title }}</h2>
-                <span class="text-xs">{{ page.pubdate }}</span>
+                <span class="text-xs">{{ $formatDate(page.pubdate) }}</span>
               </NuxtLink>
             </li>
           </ul>
@@ -39,6 +39,7 @@
 <script setup lang="ts">
 const route = useRoute()
 const { page } = useContent()
+const { $formatDate } = useNuxtApp()
 
 const { data: posts } = await useAsyncData(`recent:${route.path}`, () => {
   return queryContent('blog')

website/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@nuxt/content": "^2.8.5",
+    "dayjs": "^1.11.10",
     "shiki": "^0.14.5"
   }
 }

website/plugins/helpers.ts

@@ -0,0 +1,11 @@
+import dayjs from 'dayjs'
+
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      formatDate: (dateTime: string): string => {
+        return dayjs(dateTime).format('D MMM YYYY')
+      }
+    }
+  }
+})

yarn.lock

@@ -171,6 +171,7 @@ __metadata:
     "@nuxt/content": ^2.8.5
     "@nuxt/devtools": latest
     autoprefixer: ^10.4.16
+    dayjs: ^1.11.10
     nuxt: ^3.7.4
     postcss: ^8.4.31
     shiki: ^0.14.5
@@ -7759,6 +7760,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.10":
+  version: 1.11.10
+  resolution: "dayjs@npm:1.11.10"
+  checksum: a6b5a3813b8884f5cd557e2e6b7fa569f4c5d0c97aca9558e38534af4f2d60daafd3ff8c2000fed3435cfcec9e805bcebd99f90130c6d1c5ef524084ced588c4
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.11.9":
   version: 1.11.9
   resolution: "dayjs@npm:1.11.9"