68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type { ArticleSummary, Paginated } from '#shared/types/blog'
|
||
|
|
|
||
|
|
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
|
||
|
|
key: 'home-articles',
|
||
|
|
query: { page: 1 },
|
||
|
|
})
|
||
|
|
|
||
|
|
const articles = computed(() => data.value?.items.slice(0, 6) ?? [])
|
||
|
|
|
||
|
|
const { public: config } = useRuntimeConfig()
|
||
|
|
|
||
|
|
useSeoMeta({
|
||
|
|
title: 'Blog',
|
||
|
|
description: 'Articoli, guide e approfondimenti.',
|
||
|
|
ogTitle: 'Blog',
|
||
|
|
ogDescription: 'Articoli, guide e approfondimenti.',
|
||
|
|
ogType: 'website',
|
||
|
|
ogUrl: config.siteUrl,
|
||
|
|
})
|
||
|
|
|
||
|
|
useHead({ link: [{ rel: 'canonical', href: config.siteUrl }] })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<section class="hero">
|
||
|
|
<h1>Blog</h1>
|
||
|
|
<p class="muted">Articoli, guide e approfondimenti.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<h2>Ultimi articoli</h2>
|
||
|
|
|
||
|
|
<p v-if="error">
|
||
|
|
Non è stato possibile caricare gli articoli. Riprova più tardi.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p v-else-if="!articles.length">
|
||
|
|
Non ci sono ancora articoli pubblicati.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ul v-else class="card-grid">
|
||
|
|
<li v-for="article in articles" :key="article.slug">
|
||
|
|
<ArticleCard :article="article" />
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p class="more">
|
||
|
|
<NuxtLink to="/blog">Vedi tutti gli articoli</NuxtLink>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.hero {
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero h1 {
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.more {
|
||
|
|
margin-top: 2.5rem;
|
||
|
|
}
|
||
|
|
</style>
|