webfussel
0a481fee5e
Add first post for monday, add external posts from other authors, add components for internal and external links
58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<section class="BlogArticle content">
|
|
<NuxtLink class="text inline-flex-row" to="/blog">
|
|
<Icon name="ph:arrow-left-duotone"/>
|
|
Zurück zur Übersicht
|
|
</NuxtLink>
|
|
|
|
<main v-if="article" class="article-content z-3">
|
|
<div class="image z-2">
|
|
<img :src="article.image" alt="Artikelbild" aria-hidden="true"/>
|
|
</div>
|
|
<header>
|
|
<div class="meta">
|
|
<NuxtLink :to="`/blog/?category=${article.category}`">
|
|
<span class="chip interactive"><BlogCategory :name="article.category as Category"/></span>
|
|
</NuxtLink>
|
|
</div>
|
|
<h1 class="margin-top">
|
|
<span>{{ article.title }}</span>
|
|
<small>{{ article.description }}</small>
|
|
</h1>
|
|
</header>
|
|
<div class="flex-col article-text">
|
|
<ContentRenderer v-if="article" :value="article" :style="{ display: 'contents' }"/>
|
|
</div>
|
|
</main>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Category } from '../../components/Blog/types'
|
|
|
|
const route = useRoute()
|
|
|
|
const { data: article } = await useAsyncData('article', () => queryCollection('blog').path(route.path).where('date', '<', tomorrow(new Date())).first())
|
|
|
|
if (!article.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: 'Page Not Found',
|
|
})
|
|
} else {
|
|
useHead(article.value.head || {})
|
|
useSeoMeta({
|
|
...(article.value.seo || {}),
|
|
ogTitle: article.value.title,
|
|
ogDescription: article.value.description,
|
|
ogImage: article.value.image,
|
|
ogImageAlt: article.value.description,
|
|
ogUrl: `https://webfussel.de${article.value.path}`,
|
|
twitterTitle: article.value.title,
|
|
twitterDescription: article.value.description,
|
|
twitterImage: article.value.image,
|
|
twitterImageAlt: article.value.description,
|
|
twitterUrl: `https://webfussel.de${article.value.path}`,
|
|
})
|
|
}
|
|
</script>
|