blog/frontend/app/pages/index.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 featured = computed(() => data.value?.items[0] ?? null)

const mediaUrl = useMediaUrl()
const featuredCover = computed(() => mediaUrl(featured.value?.cover))

const { public: config } = useRuntimeConfig()
const route = useRoute()
const canonical = computed(() => `${config.siteUrl}${route.path}`)

// The home page is the site itself, so it carries the bare name as its title.
useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })

useSeoMeta({
  title: SITE_NAME,
  description: 'Articoli, guide e analisi.',
  ogTitle: SITE_NAME,
  ogDescription: 'Articoli, guide e analisi.',
  ogType: 'website',
  ogUrl: canonical,
  ogImage: `${config.siteUrl}/logo.png`,
})
</script>

<template>
  <div>
    <section class="landing">
      <img
        class="landing-image"
        src="/protesta-bancaria.jpg"
        alt="Manifesti e scritte contro le banche durante una crisi bancaria"
        width="770"
        height="420"
      >

      <h1>La fine dell'Unione Europea per come l'abbiamo conosciuta.</h1>

      <img
        class="landing-image"
        src="/eurozona-crisi.jpg"
        alt="Bandiera dell'Unione Europea incrinata"
        width="1000"
        height="736"
      >

      <div class="landing-text">
        <p>
          La fine della nostra moneta come moneta forte: la fine di quella moneta che ci ha
          dato la vera libertà di viaggiare, consumare e fare.
        </p>
        <p>
          Una fine che avverrà a seguito di un "incidente" nucleare, al quale farà seguito un
          corralito bancario, ossia l'impossibilità, da parte dei cittadini europei, di
          disporre liberamente dei propri depositi.
        </p>
        <p>
          Le monete fiduciarie sono per loro natura cannibalizzanti. Oggi tocca all'euro.
          Anche perché le altre hanno praticamente perso tutte tutto.
        </p>
      </div>
    </section>

    <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>

    <p v-else-if="!featured">Non è stato ancora pubblicato nulla.</p>

    <template v-else>
      <article class="featured" :class="{ 'has-cover': featuredCover }">
        <NuxtLink
          v-if="featuredCover"
          class="featured-cover"
          :to="`/blog/${featured.slug}`"
          tabindex="-1"
          aria-hidden="true"
        >
          <img
            :src="featuredCover"
            :alt="featured.cover?.alternativeText ?? ''"
            :width="featured.cover?.width ?? undefined"
            :height="featured.cover?.height ?? undefined"
          >
        </NuxtLink>

        <div class="featured-text">
          <p class="kicker">
            {{ featured.category ? featured.category.name : 'Ultimo' }}
          </p>
          <h2>
            <NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
          </h2>
          <p class="kicker date">
            <time :datetime="isoDate(featured.publishedAt)">
              {{ formatDate(featured.publishedAt) }}
            </time>
          </p>
          <p class="read-more">
            <NuxtLink :to="`/blog/${featured.slug}`">
              Leggi l'ultimo articolo
            </NuxtLink>
          </p>
        </div>
      </article>
    </template>
  </div>
</template>

<style scoped>
.landing {
  max-width: var(--width-prose);
  margin-inline: auto;
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-section);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.landing-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-surface);
}

.landing h1 {
  margin-block: 1.75rem;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
}

.landing-text {
  margin-top: 1.75rem;
  text-align: left;
}

.landing-text p {
  margin-top: 1.1rem;
}

.featured {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}

/* Stacked on phones and portrait tablets — a side-by-side split below this
   width leaves both the image and the headline too cramped to read. The split
   also needs a cover to sit in it, or one column would just be empty. */
@media (min-width: 64rem) {
  .featured.has-cover {
    grid-template-columns: 1.35fr 1fr;
    gap: 3.5rem;
  }
}

/* Without a cover the headline is the whole lead, so it gets the full width
   but stays inside a readable measure. */
.featured:not(.has-cover) .featured-text {
  max-width: 46rem;
}

.featured-cover {
  display: block;
  overflow: hidden;
}

.featured-cover img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-surface);
}

.featured h2 {
  margin-top: 0.6rem;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
}

.featured h2 a {
  text-decoration: none;
}

.featured h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.date {
  margin-top: 1rem;
  font-weight: 400;
}

.read-more {
  margin-top: 1.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.read-more a {
  padding-bottom: 0.35rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
}
</style>