davide
005c90f33a
The name and tagline live in one place, shared/utils/site.ts, and feed the header, the footer, the home page and the title template.
65 lines
1.4 KiB
Vue
65 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()
|
|
|
|
// The home page is the site itself, so it carries the bare name as its title.
|
|
useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: config.siteUrl }] })
|
|
|
|
useSeoMeta({
|
|
title: SITE_NAME,
|
|
description: SITE_DESCRIPTION,
|
|
ogTitle: SITE_NAME,
|
|
ogDescription: SITE_DESCRIPTION,
|
|
ogType: 'website',
|
|
ogUrl: config.siteUrl,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<section class="hero">
|
|
<h1>{{ SITE_NAME }}</h1>
|
|
<p class="muted">{{ SITE_DESCRIPTION }}</p>
|
|
</section>
|
|
|
|
<h2>Latest articles</h2>
|
|
|
|
<p v-if="error">Articles could not be loaded. Please try again later.</p>
|
|
|
|
<p v-else-if="!articles.length">Nothing has been published yet.</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">See all articles</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>
|