wondif_vue/app/pages/index.vue

<template>
  
    <!-- Fond noir -->
    <PageSection tone="dark" :padded="false" content-size="default">
      <SectionTitle tone="invert" pad="md">
        CONCERTS À VENIR …
      </SectionTitle>
    </PageSection>

    <!-- Listes des prochains conncerts -->
    <PageSection content-size="default" class="remonter_concert_list">
      <ConcertCardList>
        <ConcertCard
          id="1"
          title="TITRE DU CONCERT EN MAJUSCULE"
          venue="Nom du lieu, éventuellement de la salle"
          dateISO="2026-01-15T20:30:00+01:00"
          dateLabel="Jeudi 15 janvier 2026 — 20h30"
          description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
          imageUrl="https://picsum.photos/id/56/500/700"
          imageAlt="Orchestre sur scène"
          ctaHref="/concert[id]"
          detailsHref="/concerts/concert_template"
        />
        <ConcertCard
          id="1"
          title="TITRE DU CONCERT EN MAJUSCULE"
          venue="Nom du lieu, éventuellement de la salle"
          dateISO="2026-01-15T20:30:00+01:00"
          dateLabel="Jeudi 15 janvier 2026 — 20h30"
          description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
          imageUrl="https://picsum.photos/id/56/500/700"
          imageAlt="Orchestre sur scène"
          ctaHref="/concert[id]"
          detailsHref="/concerts/concert_template"
        />
        <ConcertCard
          id="1"
          title="TITRE DU CONCERT EN MAJUSCULE"
          venue="Nom du lieu, éventuellement de la salle"
          dateISO="2026-01-15T20:30:00+01:00"
          dateLabel="Jeudi 15 janvier 2026 — 20h30"
          description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
          imageUrl="https://picsum.photos/id/56/500/700"
          imageAlt="Orchestre sur scène"
          ctaHref="/concert[id]"
          detailsHref="/concerts/concert_template"
        />
      </ConcertCardList>
    </PageSection>

    <!-- Carte Île-De-France Par tous et pour tous -->
    <PageSection class="theme_ptpt_wp">
      <SectionContent class="theme_ptpt">
        <DsMedia :src="ptpt_img" alt="Carte Île-De-France" class="theme_ptpt--img"/>
        <SectionContent tone="brand_rouge45" pad="xs" class="theme_ptpt--content">
          <SectionTitle tone="invert" pad="xs">
            PAR TOUS ET POUR TOUS
          </SectionTitle>
          <SectionContent pad="xs" class="theme_ptpt--description">
            <DsText tone="invert" size="lg" class="theme_ptpt--txt" >
              Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions -
            </DsText>
            <DsButtonArrow to="/" variant="invert">
                Carte des événements
            </DsButtonArrow>
          </SectionContent>
        </SectionContent>
      </SectionContent>
    </PageSection>

    <!-- Tous à l'Orchestre -->
    <PageSection tone="brandreverse" :padded="true" content-size="default" padb="xs" class="theme_tao">
      <SectionContent>

          <SectionTitle tone="invert" pad="xs">
            TOUS À L’ORCHESTRE
          </SectionTitle>
          <SectionContent pad="xs" class="theme_ptpt--description">
            <DsText tone="invert" size="lg" class="theme_ptpt--txt" >
              Phrase d’accroche / explicative de cette rubrique par tous et pour tous
            </DsText>
          </SectionContent>

      </SectionContent>
    </PageSection>


</template>

<script setup>
  import { onMounted, computed } from 'vue'
  import { clientLog } from '~/utils/clientLog'
  import SectionContent from '../components/section/SectionContent.vue'
  import DsText from '@root/design-system/primitives/DsText.vue'
  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
  import ptpt_img from '@/assets/img/illustrations/map_idf.jpg'

  // Layout utilisé
  definePageMeta({ layout: 'default' })
  const runtimeConfig = useRuntimeConfig()

  const STRAPI_URL = runtimeConfig.public.strapiUrl
  console.log("STRAPI_URL : ",STRAPI_URL)
  
  // Config app (pour SEO)
  const config = useAppConfig()
  useSeoMeta({
    title: config.title
  })

  // On récupère le fichier le plus récent de la Media Library Strapi
  const { data, error } = await useFetch(
    () => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
  )

  const imageUrl = computed(() => {
    const file = data.value?.[0]
    console.log("file : ",file)
    if (!file) return null

    // Si Strapi renvoie une URL absolue (S3/OVH)
    if (file.url?.startsWith('http')) {
      return file.url
    }

    // Si jamais c'était une URL relative
    return `${STRAPI_URL}${file.url}`
  })

  if (error.value) {
    console.error('Erreur en récupérant les fichiers Strapi :', error.value)
    clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
      endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
      error: error.value?.message || error.value
    })
  }

  const appConfig = useAppConfig()
  console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
  onMounted(() => {
    clientLog('info', 'test de log depuis vuejs', {  })
    clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
  })
</script>

<style lang="scss">
.remonter_concert_list {
  transform: translateY(-170px);
}

.theme_ptpt_wp {
  margin-bottom: 50px;
}
.theme_ptpt {
  display: grid;
  // parce que le bloc du dessus à un transform: translateY(-170px); alors cela laisse un espace vide que l'on comble avec ce margin-top négatif
  margin-top: -170px;

  &--img {
    grid-row: 1;
    grid-column: 1;
  }
  &--content {
    grid-row: 1;
    grid-column: 1;

  }
  &--description {
    max-width: 520px;
    margin-top: 35px;
  }
  &--txt {
    margin-bottom: 35px;
  }
}

.theme_tao {
  margin-bottom: 50px;
}


</style>