81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<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>
|
|
<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>
|
|
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>
|