generated from gitea_admin/default
update a lot of change since a while
This commit is contained in:
@@ -1,36 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header_full></Header_full>
|
||||
<main>
|
||||
<div>
|
||||
<div>IMAGE TEST</div>
|
||||
<NuxtImg :src="imageUrl" width="1300" height="600" sizes="100vw sm:50vw md:400px" densities="x1 x2" :modifiers="{ roundCorner: '0:100' }" />
|
||||
<!-- <img :src="imageUrl" alt="" style="max-width: 100%; height: auto;"> -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const STRAPI_URL = "http://localhost:1337"
|
||||
//const STRAPI_URL = runtimeConfig.public.strapiUrl
|
||||
console.log("STRAPI_URL : ",STRAPI_URL) // "Mon site Nuxt"
|
||||
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'
|
||||
|
||||
// Config app (pour ton SEO)
|
||||
// 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: files, error } = await useFetch(
|
||||
const { data, error } = await useFetch(
|
||||
() => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
|
||||
)
|
||||
|
||||
const imageUrl = computed(() => {
|
||||
const file = files.value?.[0]
|
||||
const file = data.value?.[0]
|
||||
console.log("file : ",file)
|
||||
if (!file) return null
|
||||
|
||||
@@ -42,18 +128,57 @@
|
||||
// Si jamais c'était une URL relative
|
||||
return `${STRAPI_URL}${file.url}`
|
||||
})
|
||||
console.log("imageUrl : ",imageUrl)
|
||||
|
||||
|
||||
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>
|
||||
<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>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user