73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup>
|
|
const { path } = useRoute()
|
|
|
|
const { isMobile, isDesktopOrTablet } = useDevice();
|
|
|
|
// https://content.nuxtjs.org/guide/displaying/querying#with-useasyncdata
|
|
const { data, error } = await useAsyncData(`content-${path}`, () => {
|
|
return queryContent().where({ _path: path, public: true }).findOne()
|
|
})
|
|
|
|
// https://nuxt.com/docs/api/utils/create-error#createerror
|
|
if (error.value) {
|
|
showError(
|
|
createError({
|
|
statusCode: 404,
|
|
statusMessage: 'Not Found',
|
|
})
|
|
)
|
|
}
|
|
|
|
import { format, addMinutes } from "date-fns";
|
|
|
|
let formatDate = (date) => {
|
|
date = new Date(date)
|
|
return new Date(
|
|
date.valueOf() + date.getTimezoneOffset() * 60 * 1000
|
|
)
|
|
}
|
|
|
|
let date = formatDate(data.value.date)
|
|
date = format(addMinutes(date, 240), 'MMM do, yyy')
|
|
|
|
useHead({
|
|
meta: [
|
|
{ name: `og:type`, content: `website` },
|
|
{ name: `og:image`, content: data.value.image.src },
|
|
|
|
{ name: `twitter:card`, content: `summary_large_image` },
|
|
{ name: `twitter:url`, content: "https://www.inspin.io/articles/" + data.value.slug },
|
|
{ name: `twitter:title`, content: data.value.title },
|
|
{ name: `twitter:description`, content: data.value.description },
|
|
{ name: `twitter:image`, content: data.value.meta.src },
|
|
],
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="post">
|
|
|
|
<div class="hero">
|
|
<div class="meta" v-if="isDesktopOrTablet">
|
|
<p class="date"><b>Published</b> <br> {{ date }}</p>
|
|
<p class="author"><b>Author</b> <br> {{ data.author }}</p>
|
|
<p><b>Tags</b></p>
|
|
<p class="tags" v-for="tag in data.tags">{{ tag }}</p>
|
|
</div>
|
|
<div class="head">
|
|
<h2>{{ data.heading }}</h2>
|
|
<p class="excerpt">{{ data.description }}</p>
|
|
<img :src="data.hero.src" :alt="data.hero.alt" />
|
|
</div>
|
|
</div>
|
|
|
|
<ContentDoc class="content" />
|
|
|
|
<section class="comments">
|
|
<ArticleComments :post="data.slug" />
|
|
<ArticlePolicy />
|
|
<ArticleForm :post="data.slug" />
|
|
</section>
|
|
</div>
|
|
</template> |