Add some structured data to the post page

Author: floscher

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);

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

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,
+  };
+})();