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>

pages/news/index.vue

@@ -1,7 +1,46 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { data } = await useFetch("/api/getNewsList");
+</script>
 
 <template>
-    <div>Page: news/index</div>
+    <PageTop
+        :text="'News'"
+        :image-path="'https://www.gifu-nct.ac.jp/gakuseikai/club/sera/img/subtop/sub_top_sample.jpg'"
+    />
+    <main>
+        <div class="news-list">
+            <NewsCard
+                v-for="article in data"
+                :key="article.date as number"
+                :news-entry="article"
+                :is-new="data?.indexOf(article) < 2"
+            ></NewsCard>
+        </div>
+    </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+.news-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 15rem);
+    gap: 20px;
+    justify-self: center;
+    margin: 1rem 0;
+}
+
+.news-list > div:has(a) {
+    transition: all 0.3s ease-in-out;
+    &:hover {
+        scale: 105%;
+        filter: grayscale(25%);
+        transition: all 0.3s ease-in-out;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .news-list {
+        grid-auto-flow: row;
+        justify-content: center;
+    }
+}
+</style>