Added updatedAt attribute in blog meta

README.md

@@ -29,7 +29,8 @@ A beautiful blogging platform for the JankariTech peoples.
     authorName: John Doe
     authorAvatar: https://some.link.jpg (must be an image URL, **required**)
     authorLink: https://github.com/John
-    createdAt: Oct 30, 2019 (must be in the format `MM dd, yyyy`, **required**)
+    createdAt: Oct 30, 2019 (can be in the format `MMM dd, yyyy` or `MMMM dd, yyyy`, **required**)
+    updatedAt: October 30, 2023 (can be in the format `MMM dd, yyyy` or `MMMM dd, yyyy`, **optional**)
     tags: vue, jest, unit, testing (separate multiple items with a comma `,` character, **required**)
     banner: https://some.link.jpg (must be an image URL, **required**)
     seriesTitle: Unit Testing is Fun (if only this post belongs to a series, **optional**)

lint/check.js

@@ -42,6 +42,7 @@ const requiredMeta = [
 ]
 
 const optionalMeta = [
+  "updatedAt",
   "seriesTitle",
   "episode"
 ]
@@ -91,11 +92,28 @@ function lintMeta (key) {
   })
 
   // check if the createdAt is set with proper format
+  let createdAt
   if (peekData.createdAt) {
-    const regex = /[A-Za-z]+\s\d{1,2},\s\d{4}/g
+    createdAt = new Date(peekData.createdAt)
+    if (isNaN(createdAt.getTime())) {
+      log.error(`Invalid createdAt date format in ${key}`)
+      success = false
+    }
+  }
 
-    if (!regex.test(peekData.createdAt)) {
-      log.error(`Invalid date format in ${key}`)
+  if (peekData.updatedAt) {
+    const updatedAt = new Date(peekData.updatedAt)
+    // check if the updatedAt is set with proper format
+    if (isNaN(updatedAt.getTime())) {
+      log.error(`Invalid updatedAt date format in ${key}`)
+      success = false
+    }
+    // check if the updatedAt is later than createdAt
+    if (createdAt.getTime() === updatedAt.getTime()) {
+      log.error(`Updated date is same as created date in ${key}`)
+      success = false
+    } else if (createdAt.getTime() > updatedAt.getTime()) {
+      log.error(`Updated date is earlier than created date in ${key}`)
       success = false
     }
   }

src/components/BlogPeek.vue

@@ -35,9 +35,15 @@
         </a>
         <div v-else class="author-name">{{ authorName }}</div>
         <div class="created-at" title="Created Timestamp">
-          {{ moment(createdAt).format("MMM DD, YYYY") }}
+          Published:
+          {{ moment(createdAt).format("MMMM DD, YYYY") }}
           ({{ moment(createdAt).fromNow() }})
         </div>
+        <div v-if="updatedAt" class="updated-at" title="Updated Timestamp">
+          Updated:
+          {{ moment(updatedAt).format("MMMM DD, YYYY") }}
+          ({{ moment(updatedAt).fromNow() }})
+        </div>
       </div>
     </div>
     <div class="blog-peek--content">
@@ -101,6 +107,10 @@ defineProps({
     type: [Date, String],
     required: true
   },
+  updatedAt: {
+    type: [Date, String],
+    required: true
+  },
   contentLength: {
     type: Number,
     default: 0

src/components/detail/HeadSection.vue

@@ -20,9 +20,15 @@
         >
           {{ peek.authorName }}
         </a>
+        <div class="vl">|</div>
         <div class="created-at">
-          <mdi-clock />
-          <span>{{ $moment(peek.createdAt).format("LLLL") }}</span>
+          Published:
+          <span>{{ $moment(peek.createdAt).format("MMMM DD, YYYY") }}</span>
+        </div>
+        <div v-if="peek.updatedAt" class="vl">|</div>
+        <div v-if="peek.updatedAt" class="updated-at">
+          Updated:
+          <span>{{ $moment(peek.updatedAt).format("MMMM DD, YYYY") }}</span>
         </div>
       </div>
     </div>
@@ -96,17 +102,16 @@ const fallbackBanner = computed(() => {
           padding-inline: 0.5rem;
         }
 
-        .created-at {
+        .created-at, .updated-at, .vl {
           display: flex;
           align-items: center;
           color: grey;
           font-size: 0.875rem;
           line-height: 1.2rem;
-          padding-inline: 0.5rem;
+          padding-inline: 0.2rem;
 
           span {
             margin-left: 0.2rem;
-            margin-top: 0.1rem;
           }
         }
       }

src/styles/blogPeek.scss

@@ -52,7 +52,7 @@
       font-weight: 500;
     }
 
-    .created-at {
+    .created-at, .updated-at {
       font-size: 0.75rem;
     }
 

src/views/HomeView.vue

@@ -89,6 +89,7 @@
         :key="index"
         :title="item.title"
         :created-at="item.createdAt"
+        :updated-at="item.updatedAt"
         :author-name="item.authorName"
         :author-link="item.authorLink"
         :author-avatar="item.authorAvatar"