45 lines
1.7 KiB
Vue
45 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useBlog, type BlogPost } from '../composables/useBlog';
|
|
import { marked } from 'marked';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { getPost } = useBlog();
|
|
const post = ref<BlogPost | undefined>(undefined);
|
|
const renderedContent = ref('');
|
|
|
|
onMounted(async () => {
|
|
const slug = route.params.slug as string;
|
|
post.value = await getPost(slug);
|
|
|
|
if (post.value) {
|
|
renderedContent.value = await marked(post.value.content);
|
|
} else {
|
|
router.push({ name: 'blog-overview' });
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div v-if="post">
|
|
<RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors" title="Return to blog overview" aria-label="Navigate back to blog overview page">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Back to overview
|
|
</RouterLink>
|
|
|
|
<h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">{{ post.title }}</h1>
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mb-8">{{ post.date }}</p>
|
|
<!-- Image is intentionally omitted here as per requirements -->
|
|
<div class="prose max-w-none" v-html="renderedContent"></div>
|
|
</div>
|
|
<div v-else class="text-center py-12">
|
|
<p class="text-xl text-gray-600 dark:text-gray-400">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</template>
|