added PageTop component, markdown styles, white background on logo svg, and documentation comments

pages/news/[article].vue

@@ -1,7 +1,80 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { marked } from "marked";
+
+const route = useRoute();
+
+const { data } = await useFetch("/api/getArticle", {
+    query: { name: route.params.article },
+});
+
+if (data.value === undefined || data.value === null) {
+    throw createError({
+        statusCode: 404,
+        statusMessage: "Article Not Found :(",
+    });
+}
+
+onMounted(() => {
+    const article = document.getElementById("article");
+    const articleTitle = article?.getElementsByTagName("h1")[0];
+    const postedDate = new Date(data.value?.date).toLocaleDateString(
+        "ja-JP-u-ca-japanese",
+        { dateStyle: "medium" }
+    );
+    const postedDateElement = document.createElement("small");
+    postedDateElement.textContent = "掲載日： " + postedDate;
+    articleTitle?.insertAdjacentElement("afterend", postedDateElement);
+    const cardContentConversion = document.createElement("div");
+    cardContentConversion.innerHTML = marked.parse(
+        data.value?.cardContent as string
+    ) as string;
+    useSeoMeta(
+        generateSeoMeta(
+            articleTitle?.innerText,
+            cardContentConversion.innerText,
+            data.value?.coverImagePath || "/sera-logo-text.svg",
+            "article"
+        )
+    );
+});
+</script>
 
 <template>
-    <div>Page: news/[article]</div>
+    <main>
+        <img :src="(data?.coverImagePath as string) || '/sera-logo-text.svg'" />
+        <div
+            id="article"
+            class="markdown"
+            v-html="marked.parse(data?.article as string)"
+        ></div>
+    </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+main {
+    display: grid;
+    width: 50%;
+    height: fit-content;
+    margin: 2rem auto;
+}
+
+main > div {
+    width: 100%;
+}
+
+main > img {
+    width: 42rem;
+    place-self: center;
+    margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 1024px) {
+    main {
+        width: calc(100% - 6rem);
+        padding: 0 3rem;
+    }
+    main > img {
+        width: 70vw;
+    }
+}
+</style>