83 lines
2.4 KiB
Vue
83 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { withoutTrailingSlash } from "ufo";
|
|
import { useHead, useRuntimeConfig } from '#imports';
|
|
|
|
definePageMeta({
|
|
documentDriven: true,
|
|
});
|
|
|
|
const route = useRoute();
|
|
const path = withoutTrailingSlash(route.path);
|
|
|
|
const { data: page } = await useAsyncData(`blog-${path}`, () => {
|
|
return queryCollection("blog").path(path).first();
|
|
});
|
|
|
|
if (page.value) {
|
|
// dynamically set document head for SEO / social previews
|
|
const title = page.value.title || 'Pumpkin Blog';
|
|
const description = page.value.description || '';
|
|
const image = page.value.image || '/images/icon.svg';
|
|
const url = useRuntimeConfig().public.siteUrl + path;
|
|
|
|
useHead({
|
|
title,
|
|
meta: [
|
|
{ name: 'description', content: description },
|
|
{ property: 'og:title', content: title },
|
|
{ property: 'og:description', content: description },
|
|
{ property: 'og:type', content: 'article' },
|
|
{ property: 'og:url', content: url },
|
|
{ property: 'og:image', content: image },
|
|
{ name: 'twitter:card', content: 'summary_large_image' },
|
|
{ name: 'twitter:title', content: title },
|
|
{ name: 'twitter:description', content: description },
|
|
{ name: 'twitter:image', content: image },
|
|
],
|
|
});
|
|
}
|
|
|
|
if (!page.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: "Page not found",
|
|
fatal: true,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<article
|
|
class="prose prose-invert prose-orange m-auto min-h-[70%] max-w-screen-lg px-12 pb-20"
|
|
>
|
|
<h1 class="pb-0! mb-0! leading-none!" v-if="page?.title">
|
|
{{ page.title }}
|
|
</h1>
|
|
<div class="opacity-60">
|
|
<a v-if="page?.author" :href="page.author.url">{{
|
|
page.author.name
|
|
}}</a>
|
|
<span v-if="page?.author && page?.date" class="mx-2">•</span>
|
|
<span v-if="page?.date">{{
|
|
new Date(page.date).toLocaleDateString(undefined, {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})
|
|
}}</span>
|
|
</div>
|
|
<ContentRenderer class="mt-10" v-if="page" :value="page">
|
|
Hello
|
|
</ContentRenderer>
|
|
</article>
|
|
</template>
|
|
|
|
<style>
|
|
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
h1 {
|
|
@apply text-5xl font-extrabold pb-8 pt-12;
|
|
}
|
|
</style>
|