63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
const { data: page } = await useAsyncData('about', () => {
|
|
return queryCollection('about').first()
|
|
})
|
|
if (!page.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: 'Page not found',
|
|
fatal: true
|
|
})
|
|
}
|
|
|
|
const { global } = useAppConfig()
|
|
|
|
useSeoMeta({
|
|
title: page.value?.seo?.title || page.value?.title,
|
|
ogTitle: page.value?.seo?.title || page.value?.title,
|
|
description: page.value?.seo?.description || page.value?.description,
|
|
ogDescription: page.value?.seo?.description || page.value?.description
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UPage v-if="page">
|
|
<UPageHero
|
|
:title="page.title"
|
|
:description="page.description"
|
|
orientation="horizontal"
|
|
:ui="{
|
|
container: 'lg:flex sm:flex-row items-center',
|
|
title: '!mx-0 text-left',
|
|
description: '!mx-0 text-left',
|
|
links: 'justify-start'
|
|
}"
|
|
>
|
|
<UColorModeAvatar
|
|
class="sm:rotate-4 size-36 rounded-lg ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
|
|
:light="global.picture?.light!"
|
|
:dark="global.picture?.dark!"
|
|
:alt="global.picture?.alt!"
|
|
/>
|
|
</UPageHero>
|
|
<UPageSection
|
|
:ui="{
|
|
container: '!pt-0'
|
|
}"
|
|
>
|
|
<MDC
|
|
:value="page.content"
|
|
unwrap="p"
|
|
/>
|
|
<div class="flex flex-row justify-center items-center py-10 space-x-[-2rem]">
|
|
<PolaroidItem
|
|
v-for="(image, index) in page.images"
|
|
:key="index"
|
|
:image="image"
|
|
:index
|
|
/>
|
|
</div>
|
|
</UPageSection>
|
|
</UPage>
|
|
</template>
|