77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const { data: page } = await useAsyncData('blog-page', () => {
|
|
return queryCollection('pages').path('/blog').first()
|
|
})
|
|
if (!page.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: 'Page not found',
|
|
fatal: true
|
|
})
|
|
}
|
|
const { data: posts } = await useAsyncData('blogs', () =>
|
|
queryCollection('blog').order('date', 'DESC').all()
|
|
)
|
|
if (!posts.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: 'blogs posts not found',
|
|
fatal: true
|
|
})
|
|
}
|
|
|
|
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"
|
|
:links="page.links"
|
|
:ui="{
|
|
title: '!mx-0 text-left',
|
|
description: '!mx-0 text-left',
|
|
links: 'justify-start'
|
|
}"
|
|
/>
|
|
<UPageSection
|
|
:ui="{
|
|
container: '!pt-0'
|
|
}"
|
|
>
|
|
<UBlogPosts orientation="vertical">
|
|
<Motion
|
|
v-for="(post, index) in posts"
|
|
:key="index"
|
|
:initial="{ opacity: 0, transform: 'translateY(10px)' }"
|
|
:while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
|
|
:transition="{ delay: 0.2 * index }"
|
|
:in-view-options="{ once: true }"
|
|
>
|
|
<UBlogPost
|
|
variant="naked"
|
|
orientation="horizontal"
|
|
:to="post.path"
|
|
v-bind="post"
|
|
:ui="{
|
|
root: 'md:grid md:grid-cols-2 group overflow-visible transition-all duration-300',
|
|
image:
|
|
'group-hover/blog-post:scale-105 rounded-lg shadow-lg border-4 border-muted ring-2 ring-default',
|
|
header:
|
|
index % 2 === 0
|
|
? 'sm:-rotate-1 overflow-visible'
|
|
: 'sm:rotate-1 overflow-visible'
|
|
}"
|
|
/>
|
|
</Motion>
|
|
</UBlogPosts>
|
|
</UPageSection>
|
|
</UPage>
|
|
</template>
|