104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
|
<main class="article-page">
|
|
<article v-if="article" class="article">
|
|
<header class="article__header">
|
|
<h1 class="article__title">{{ article.title }}</h1>
|
|
<div v-if="article.publishedAt" class="article__meta">
|
|
<time :datetime="article.publishedAt">
|
|
{{ formatDate(article.publishedAt) }}
|
|
</time>
|
|
</div>
|
|
</header>
|
|
|
|
<div v-if="article.content" class="article__content">
|
|
<strapi-blocks :content="article.content" />
|
|
</div>
|
|
</article>
|
|
|
|
<div v-else class="article-not-found">
|
|
<h1>Article not found</h1>
|
|
<p>The requested article could not be found.</p>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useData } from 'vike-vue/useData'
|
|
|
|
const { article } = useData()
|
|
|
|
const formatDate = (dateString) => {
|
|
return new Date(dateString).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.article-page {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.article {
|
|
&__header {
|
|
margin-bottom: 2rem;
|
|
border-bottom: 1px solid var(--theme-border, #e0e0e0);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--theme-fg);
|
|
}
|
|
|
|
&__meta {
|
|
color: var(--theme-fg-muted, #666);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
&__content {
|
|
line-height: 1.6;
|
|
|
|
:deep(h2) {
|
|
font-size: 1.8rem;
|
|
margin: 2rem 0 1rem 0;
|
|
}
|
|
|
|
:deep(h3) {
|
|
font-size: 1.4rem;
|
|
margin: 1.5rem 0 0.75rem 0;
|
|
}
|
|
|
|
:deep(p) {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
:deep(ul, ol) {
|
|
margin: 1rem 0;
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.article-not-found {
|
|
text-align: center;
|
|
padding: 4rem 0;
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--theme-fg);
|
|
}
|
|
|
|
p {
|
|
color: var(--theme-fg-muted, #666);
|
|
}
|
|
}
|
|
</style> |