feat: use time el for date strings

for better machine recognition
This commit is contained in:
eggy 2022-12-01 01:24:26 -05:00
parent 156be1cfd4
commit a5142fb00b
6 changed files with 26 additions and 11 deletions

View File

@ -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

13
components/Date.vue Normal file
View File

@ -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>

View File

@ -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}`"

View File

@ -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

View File

@ -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"

View File

@ -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");
}