diff --git a/client/src/views/PostView.vue b/client/src/views/PostView.vue index 65c9f38..a7f3538 100644 --- a/client/src/views/PostView.vue +++ b/client/src/views/PostView.vue @@ -88,7 +88,8 @@ import PostNotAvailable from "@client/components/PostNotAvailable.vue"; import { faClock } from "@fortawesome/free-regular-svg-icons"; import { faArrowLeft, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons"; import type { ConfirmDialogData, Post, UserRolePermissionsType } from "@fumix/fu-blog-common"; -import { useSeoMeta } from "@unhead/vue"; +import { DateUtil } from "@fumix/fu-blog-common"; +import { useHead, useSeoMeta } from "@unhead/vue"; import { onMounted, type PropType, ref } from "vue"; import { useI18n } from "vue-i18n"; import { useRoute, useRouter } from "vue-router"; @@ -122,7 +123,32 @@ onMounted(async () => { }); const res = await fetch(`/api/posts/${id}`); const response = await res.json(); - post.value = response.data; + const responseData: Post | null = response.data; + if (responseData) { + useHead({ + title: responseData.title + " – " + t("posts.blogTitle"), + script: [ + { + type: "application/json+ld", + textContent: JSON.stringify({ + "@context": "https://schema.org", + "@type": "BlogPosting", + name: responseData.title, + datePublished: responseData.createdAt ? DateUtil.formatDateOnlyUtcIso(new Date(responseData.createdAt)) : undefined, + dateModified: responseData.updatedAt ? DateUtil.formatDateOnlyUtcIso(new Date(responseData.updatedAt)) : undefined, + description: responseData.description, + author: responseData.createdBy + ? { + "@type": "Person", + name: responseData.createdBy.fullName, + } + : undefined, + }), + }, + ], + }); + } + post.value = responseData; loading.value = false; } catch (e) { console.log("ERROR: ", e); diff --git a/common/src/index.ts b/common/src/index.ts index be9eada..0de7098 100644 --- a/common/src/index.ts +++ b/common/src/index.ts @@ -27,6 +27,7 @@ export * from "./types/public-post.js"; export * from "./types/search-operator.js"; export * from "./util/base64.js"; export * from "./util/cookie-header-helpers.js"; +export * from "./util/date-util.js"; export * from "./util/filesize.js"; export * from "./util/markdown.js"; export * from "./util/mimeType.js"; diff --git a/common/src/util/date-util.ts b/common/src/util/date-util.ts new file mode 100644 index 0000000..e62b62f --- /dev/null +++ b/common/src/util/date-util.ts @@ -0,0 +1,11 @@ +export const DateUtil = (() => { + function formatDateOnlyUtcIso(date: Date): string { + console.log("Date", date, typeof date); + console.log(date.getUTCFullYear()); + return `${date.getUTCFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; + } + + return { + formatDateOnlyUtcIso, + }; +})();