39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const { slug } = useRoute().params
|
|
</script>
|
|
|
|
<template>
|
|
<article
|
|
class="scrollbar fade-mask-sm d-flex flex-column gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
|
|
>
|
|
<ContentDoc :path="`/blog/${slug}`">
|
|
<template #default="{ doc }">
|
|
<div class="post-preamble">
|
|
<h3 class="alex">{{ doc.title }}</h3>
|
|
<img
|
|
draggable="false"
|
|
:src="doc.thumbnail"
|
|
:alt="doc.title"
|
|
class="post-preamble-thumb rounded-4"
|
|
/>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
<ContentRenderer :value="doc" />
|
|
</div>
|
|
</template>
|
|
|
|
<template #not-found>
|
|
<div
|
|
class="d-flex flex-column justify-content-center align-items-center gap-3"
|
|
>
|
|
<span>Blog post not found 🙁</span>
|
|
<NuxtLink to="/blog" class="link-hi">Back to blog</NuxtLink>
|
|
</div>
|
|
</template>
|
|
</ContentDoc>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|