From a5142fb00b5db7bdef2175860a3dd08239ac9266 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Thu, 1 Dec 2022 01:24:26 -0500
Subject: [PATCH] feat: use time el for date strings

for better machine recognition
---
 components/BlogStatBox.vue     |  5 ++---
 components/Date.vue            | 13 +++++++++++++
 components/PostPreviewCard.vue |  4 ++--
 components/StoryStatBox.vue    |  6 ++----
 pages/[...slug].vue            |  4 ++--
 shared/metadata.ts             |  5 +++++
 6 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 components/Date.vue

diff --git a/components/BlogStatBox.vue b/components/BlogStatBox.vue
index 8b73c40..2a4d41a 100644
--- a/components/BlogStatBox.vue
+++ b/components/BlogStatBox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BlogParsedContent } from "@/shared/types";
-import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
+import { calcReadingTime } from "@/shared/metadata";
 
 const docs = await queryContent<BlogParsedContent>("/blog")
   .sort({ date: 1 })
@@ -8,7 +8,6 @@ const docs = await queryContent<BlogParsedContent>("/blog")
   .find();
 
 const latest = docs.at(-1) as BlogParsedContent;
-const prettyDate = getPrettyDate(latest);
 </script>
 
 <template>
@@ -21,7 +20,7 @@ const prettyDate = getPrettyDate(latest);
     >
       <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
       <p class="text-sm text-gray-500 dark:text-gray-400 m-0">
-        {{ prettyDate }} · {{ calcReadingTime(latest).minutes }} min read
+        <Date :doc="latest" /> · {{ calcReadingTime(latest).minutes }} min read
       </p>
       <div class="tag-list mt-1">
         <Tag
diff --git a/components/Date.vue b/components/Date.vue
new file mode 100644
index 0000000..5fc1410
--- /dev/null
+++ b/components/Date.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { getPrettyDate, getUtcDate } from "~~/shared/metadata";
+import { BlogParsedContent, StoryParsedContent } from "~~/shared/types";
+
+const props = defineProps<{ doc: StoryParsedContent | BlogParsedContent }>();
+
+const prettyDate = getPrettyDate(props.doc);
+const utcDate = getUtcDate(props.doc);
+</script>
+
+<template>
+  <time pubdate :datetime="utcDate">{{ prettyDate }}</time> ·
+</template>
diff --git a/components/PostPreviewCard.vue b/components/PostPreviewCard.vue
index 8f2ed21..df22ebd 100644
--- a/components/PostPreviewCard.vue
+++ b/components/PostPreviewCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { StoryParsedContent, BlogParsedContent } from "@/shared/types";
-import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
+import { calcReadingTime } from "@/shared/metadata";
 
 const { post, type, highlighttags } = defineProps<{
   post: StoryParsedContent | BlogParsedContent;
@@ -25,7 +25,7 @@ const descText =
         {{ post.title }}
       </a>
     </h3>
-    <p class="my-1 text-sm">{{ getPrettyDate(post) }} · {{ descText }}</p>
+    <p class="my-1 text-sm"><Date :doc="post" /> · {{ descText }}</p>
     <div class="flex flex-wrap">
       <Tag
         :dest="`/tags/${type}/${tag}`"
diff --git a/components/StoryStatBox.vue b/components/StoryStatBox.vue
index 2b5e607..f9519d8 100644
--- a/components/StoryStatBox.vue
+++ b/components/StoryStatBox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type StoryParsedContent } from "@/shared/types";
-import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
+import { calcReadingTime } from "@/shared/metadata";
 
 const docs = await queryContent<StoryParsedContent>("/stories")
   .sort({ date: 1 })
@@ -8,8 +8,6 @@ const docs = await queryContent<StoryParsedContent>("/stories")
   .find();
 
 const latest = docs.at(-1) as StoryParsedContent;
-
-const prettyDate = getPrettyDate(latest);
 </script>
 
 <template>
@@ -22,7 +20,7 @@ const prettyDate = getPrettyDate(latest);
     >
       <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
       <p class="text-sm text-gray-500 dark:text-gray-400 m-0">
-        {{ prettyDate }} · {{ calcReadingTime(latest).words.total }} words
+        <Date :doc="latest" /> · {{ calcReadingTime(latest).words.total }} words
       </p>
       <div class="tag-list mt-1">
         <Tag
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 9fc7ed0..ddb9ddd 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BlogParsedContent, StoryParsedContent } from "@/shared/types";
-import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
+import { calcReadingTime } from "@/shared/metadata";
 
 type GeneralParsedContent = BlogParsedContent | StoryParsedContent;
 
@@ -33,7 +33,7 @@ const captionText =
       {{ captionText }}
     </p>
     <h1 class="m-0">{{ doc.title }}</h1>
-    <p class="my-2">{{ getPrettyDate(doc) }} · {{ descText }}</p>
+    <p class="my-2"><Date :doc="doc" /> · {{ descText }}</p>
     <div class="flex flex-wrap">
       <Tag
         v-for="(tag, index) in doc.tags"
diff --git a/shared/metadata.ts b/shared/metadata.ts
index 265f9c5..3d81f69 100644
--- a/shared/metadata.ts
+++ b/shared/metadata.ts
@@ -37,3 +37,8 @@ export function getPrettyDate(doc: BlogParsedContent | StoryParsedContent) {
   const date = dayjs(doc.date).utc();
   return date.format("DD MMM YYYY");
 }
+
+export function getUtcDate(doc: BlogParsedContent | StoryParsedContent) {
+  const date = dayjs(doc.date).utc();
+  return date.format("YYYY-MM-DD");
+}