89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
|
<v-container class="content-container mx-auto">
|
|
<v-card v-if="page" class="mb-5">
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="4">
|
|
<v-img :src="page.thumbnail" :aspect-ratio="16/9" class="rounded-md" cover />
|
|
</v-col>
|
|
<v-col cols="12" md="8" class="flex flex-col">
|
|
<h2 class="text-xl">{{ page.title }}</h2>
|
|
<span>{{ page.description }}</span>
|
|
<v-chip
|
|
v-if="page?.archived"
|
|
label
|
|
prepend-icon="mdi-archive"
|
|
variant="text"
|
|
color="warning"
|
|
size="small"
|
|
class="mx-[-6px]"
|
|
>
|
|
{{ t("productArchived") }}
|
|
</v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<article class="text-base prose xl:text-lg mx-auto">
|
|
<content-renderer :value="page">
|
|
<template #empty>
|
|
<v-empty-state
|
|
icon="mdi-image-broken-variant"
|
|
text="This product has no specific describe for it, yet."
|
|
title="No Content"
|
|
class="no-content-placeholder"
|
|
>
|
|
<template #actions>
|
|
<v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
|
|
</template>
|
|
</v-empty-state>
|
|
</template>
|
|
|
|
<content-renderer-markdown :value="page" />
|
|
</content-renderer>
|
|
</article>
|
|
</v-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.no-content-placeholder {
|
|
min-height: 0;
|
|
max-height: 64rem;
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
|
|
const { t } = useI18n()
|
|
const { data: page } = await useAsyncData<any>("page", queryContent(route.path).where({ _locale: getLocale() }).findOne)
|
|
|
|
if (page.value == null) {
|
|
throw createError({
|
|
status: 404,
|
|
statusMessage: "Product Not Found",
|
|
})
|
|
}
|
|
|
|
useHead({
|
|
title: page.value.title,
|
|
})
|
|
|
|
useSeoMeta({
|
|
title: page.value.title,
|
|
description: page.value.description,
|
|
ogTitle: page.value.title,
|
|
ogDescription: page.value.description,
|
|
ogUrl: `${useRuntimeConfig().public.siteUrl}${route.fullPath}`,
|
|
publisher: "Solar Network",
|
|
ogSiteName: "Solsynth Capital",
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content-container {
|
|
max-width: 65ch !important;
|
|
}
|
|
</style>
|