eggy/public
1
0
Fork 0
Code Issues 7 Pull Requests 1 Releases Wiki Activity

feat: use time el for date strings

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/BlogStatBox.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { BlogParsedContent } from "@/shared/types"; import type { BlogParsedContent } from "@/shared/types";
import { calcReadingTime, getPrettyDate } from "@/shared/metadata"; import { calcReadingTime } from "@/shared/metadata";
const docs = await queryContent<BlogParsedContent>("/blog") const docs = await queryContent<BlogParsedContent>("/blog")
.sort({ date: 1 }) .sort({ date: 1 })
@ -8,7 +8,6 @@ const docs = await queryContent<BlogParsedContent>("/blog")
.find(); .find();
const latest = docs.at(-1) as BlogParsedContent; const latest = docs.at(-1) as BlogParsedContent;
const prettyDate = getPrettyDate(latest);
</script> </script>
<template> <template>
@ -21,7 +20,7 @@ const prettyDate = getPrettyDate(latest);
> >
<h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2> <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 m-0"> <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> </p>
<div class="tag-list mt-1"> <div class="tag-list mt-1">
<Tag <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>

4
components/PostPreviewCard.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { StoryParsedContent, BlogParsedContent } from "@/shared/types"; import type { StoryParsedContent, BlogParsedContent } from "@/shared/types";
import { calcReadingTime, getPrettyDate } from "@/shared/metadata"; import { calcReadingTime } from "@/shared/metadata";
const { post, type, highlighttags } = defineProps<{ const { post, type, highlighttags } = defineProps<{
post: StoryParsedContent | BlogParsedContent; post: StoryParsedContent | BlogParsedContent;
@ -25,7 +25,7 @@ const descText =
{{ post.title }} {{ post.title }}
</a> </a>
</h3> </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"> <div class="flex flex-wrap">
<Tag <Tag
:dest="`/tags/${type}/${tag}`" :dest="`/tags/${type}/${tag}`"

6
components/StoryStatBox.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { type StoryParsedContent } from "@/shared/types"; import { type StoryParsedContent } from "@/shared/types";
import { calcReadingTime, getPrettyDate } from "@/shared/metadata"; import { calcReadingTime } from "@/shared/metadata";
const docs = await queryContent<StoryParsedContent>("/stories") const docs = await queryContent<StoryParsedContent>("/stories")
.sort({ date: 1 }) .sort({ date: 1 })
@ -8,8 +8,6 @@ const docs = await queryContent<StoryParsedContent>("/stories")
.find(); .find();
const latest = docs.at(-1) as StoryParsedContent; const latest = docs.at(-1) as StoryParsedContent;
const prettyDate = getPrettyDate(latest);
</script> </script>
<template> <template>
@ -22,7 +20,7 @@ const prettyDate = getPrettyDate(latest);
> >
<h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2> <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 m-0"> <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> </p>
<div class="tag-list mt-1"> <div class="tag-list mt-1">
<Tag <Tag

4
pages/[...slug].vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { BlogParsedContent, StoryParsedContent } from "@/shared/types"; import type { BlogParsedContent, StoryParsedContent } from "@/shared/types";
import { calcReadingTime, getPrettyDate } from "@/shared/metadata"; import { calcReadingTime } from "@/shared/metadata";
type GeneralParsedContent = BlogParsedContent | StoryParsedContent; type GeneralParsedContent = BlogParsedContent | StoryParsedContent;
@ -33,7 +33,7 @@ const captionText =
{{ captionText }} {{ captionText }}
</p> </p>
<h1 class="m-0">{{ doc.title }}</h1> <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"> <div class="flex flex-wrap">
<Tag <Tag
v-for="(tag, index) in doc.tags" v-for="(tag, index) in doc.tags"

5
shared/metadata.ts
View File

@ -37,3 +37,8 @@ export function getPrettyDate(doc: BlogParsedContent | StoryParsedContent) {
const date = dayjs(doc.date).utc(); const date = dayjs(doc.date).utc();
return date.format("DD MMM YYYY"); return date.format("DD MMM YYYY");
} }
export function getUtcDate(doc: BlogParsedContent | StoryParsedContent) {
const date = dayjs(doc.date).utc();
return date.format("YYYY-MM-DD");
}