35 lines
No EOL
938 B
Vue
35 lines
No EOL
938 B
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>
|
|
|
|
<p v-if="!article">
|
|
Sorry bro, aber der Artikel existiert einfach nicht.
|
|
</p>
|
|
|
|
<div v-else>
|
|
<header>
|
|
<div class="image z-2">
|
|
<img :src="article.image" alt="Artikelbild" aria-hidden="true"/>
|
|
</div>
|
|
<h1 class="margin-top">{{ article.title }}</h1>
|
|
<h2>{{ article.description }}</h2>
|
|
</header>
|
|
<div class="flex-col gap-default">
|
|
<ContentRenderer v-if="article" :value="article" :style="{ display: 'contents' }"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
|
|
const { data: article } = await useAsyncData('article', () => queryCollection('blog').path(route.path).first())
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |