gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
app/pages/agenda.vue
View File

@@ -1,68 +1,15 @@
<template>
<div>
<h1>Page Agenda</h1>
<div>
<p>Lien interne</p>
<div>
<button_link to="/">Voir l'accueil</button_link>
</div>
<div>
<button_link to="/" variant="primary">Voir l'accueil</button_link>
</div>
<div>
<button_link to="/" variant="secondary">Voir l'accueil</button_link>
</div>
<div>
<button_link to="/" variant="outline">Voir l'accueil</button_link>
</div>
</div>
<div v-if="errorApi1">Erreur : {{ errorApi1.message }}</div>
<div v-else-if="!api1">Chargement en cours...</div>
<div v-else>
<h2 v-if="api1">{{ api1.message }}</h2>
<h2 v-if="api1">api1 = {{ api1 }}</h2>
</div>
<testcomponentpage />
<div v-if="errorTotos">Erreur : {{ errorTotos.message }}</div>
<div v-else-if="!totos">Chargement en cours...</div>
<div v-else>
<pre v-if="totos">
{{ totos }}
</pre>
<div v-if="totos">
<article v-for="toto in totos" :key="toto.id">
<h2>{{ toto.title }}</h2>
<p>{{ toto.body.slice(0, 1000) }}</p>
<p>
<NuxtLink :to="`/concerts/concert-${toto.id}`">Lire la suite</NuxtLink>
</p>
</article>
</div>
</div>
</div>
<ConcertCard
v-for="c in concerts"
:key="c.id"
:title="c.title"
:date-label="c.dateLabel"
:venue="c.venue"
:city="c.city"
:image="{ src: c.imageUrl, alt: c.imageAlt }"
:tags="c.tags"
:price-from="c.priceFrom"
:is-sold-out="c.soldOut"
:href="`/concerts/${c.slug}`"
/>
</template>
<script setup>
import button_link from '~/components/button_link.vue'
const {data: totos, error: errorTotos} = await useFetch(() => 'https://jsonplaceholder.typicode.com/posts?_limit=20')
const {data: api1, error: errorApi1} = await useFetch('/api/hello')
const config = useAppConfig()
useSeoMeta({
title: config.title
})
const appConfig = useAppConfig()
console.log("test 4 : ",appConfig.title) // "Mon site Nuxt"
</script>
<style>
</style>

66
app/pages/agendatest.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div>
<h1>Page Agenda</h1>
<div>
<p>Lien interne</p>
<div>
<NuxtLink to="/" class="btn btn--primary">Voir l'accueil</NuxtLink>
</div>
<div>
<NuxtLink to="/" class="btn btn--primary">Voir l'accueil</NuxtLink>
</div>
<div>
<NuxtLink to="/" class="btn btn--secondary">Voir l'accueil</NuxtLink>
</div>
<div>
<NuxtLink to="/" class="btn btn--outline">Voir l'accueil</NuxtLink>
</div>
</div>
<div v-if="errorApi1">Erreur : {{ errorApi1.message }}</div>
<div v-else-if="!api1">Chargement en cours...</div>
<div v-else>
<h2 v-if="api1">{{ api1.message }}</h2>
<h2 v-if="api1">api1 = {{ api1 }}</h2>
</div>
<testcomponentpage />
<div v-if="errorTotos">Erreur : {{ errorTotos.message }}</div>
<div v-else-if="!totos">Chargement en cours...</div>
<div v-else>
<pre v-if="totos">
{{ totos }}
</pre>
<div v-if="totos">
<article v-for="toto in totos" :key="toto.id">
<h2>{{ toto.title }}</h2>
<p>{{ toto.body.slice(0, 1000) }}</p>
<p>
<NuxtLink :to="`/concerts/concert-${toto.id}`">Lire la suite</NuxtLink>
</p>
</article>
</div>
</div>
</div>
</template>
<script setup>
const {data: totos, error: errorTotos} = await useFetch(() => 'https://jsonplaceholder.typicode.com/posts?_limit=20')
const {data: api1, error: errorApi1} = await useFetch('/api/hello')
const config = useAppConfig()
useSeoMeta({
title: config.title
})
const appConfig = useAppConfig()
console.log("test 4 : ",appConfig.title) // "Mon site Nuxt"
</script>
<style lang="scss">
</style>

2
app/pages/concerts/concert-[id].vue
View File

@@ -19,6 +19,6 @@
})
</script>
<style>
<style lang="scss">
</style>

138
app/pages/design-system.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<div class="ds-preview">
<DsHeading class="titre" as="h1" size="">Design du site internet de l'Orchestre National d'Île-de-France</DsHeading>
<DsHeading class="centrer" as="h1" tone="brand_rouge" size="">TYPOGRAPHIE</DsHeading>
<div class="category">
<DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Roboto Flex (police par défaut des titres)</DsHeading>
<DsHeading as="h1" size="">Titres niveau 1 (h1) Roboto extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" size="">Titres niveau 2 (h2) Roboto bold Taille xl/32px</DsHeading>
<DsHeading as="h3" size="">Titres niveau 3 (h3) Roboto semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" size="">Titre de carte niveau 4 (h4) Roboto black Taille lg2/30px</DsHeading>
<DsHeading as="h5" size="">Titres de carte niveau 5 (h5) Roboto medium Taille md2/23px</DsHeading>
<DsHeading as="h6" size="">Titres de carte niveau 6 (h6) Roboto extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Brandon</DsHeading>
<DsHeading as="h1" font="brandon" size="">Titres niveau 1 (h1) Brandon extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" font="brandon" size="">Titres niveau 2 (h2) Brandon bold Taille xl/32px</DsHeading>
<DsHeading as="h3" font="brandon" size="">Titres niveau 3 (h3) Brandon semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" font="brandon" size="">Titres de carte niveau 4 (h4) Brandon black Taille lg2/30px</DsHeading>
<DsHeading as="h5" font="brandon" size="">Titres de carte niveau 5 (h5) Brandon medium Taille md2/23px</DsHeading>
<DsHeading as="h6" font="brandon" size="">Titres de carte niveau 6 (h6) Brandon extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3" font="barlow" size="">Les titres avec la police Barlow</DsHeading>
<DsHeading as="h1" font="barlow" size="">Titres niveau 1 (h1) Barlow extrabold Taille 2xl/40px</DsHeading>
<DsHeading as="h2" font="barlow" size="">Titres niveau 2 (h2) Barlow bold Taille xl/32px</DsHeading>
<DsHeading as="h3" font="barlow" size="">Titres niveau 3 (h3) Barlow semibold Taille lg/24px</DsHeading>
<br>
<hr>
<br>
<DsHeading as="h4" font="barlow" size="">Titres de carte niveau 4 (h4) Barlow black Taille lg2/30px</DsHeading>
<DsHeading as="h5" font="barlow" size="">Titres de carte niveau 5 (h5) Barlow medium Taille md2/23px</DsHeading>
<DsHeading as="h6" font="barlow" size="">Titres de carte niveau 6 (h6) Barlow extralight Taille xs2/17px</DsHeading>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3">Les textes</DsHeading>
<DsText as="p" tone="brand_rouge">
Texte standard police Roboto Flex / Taille 16px / couleur rouge ONDIF: info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" font="brandon">
Texte police Brandon / Taille 16px : info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" font="barlow">
Texte police Barlow / Taille 16px : info éditoriale, description, contenu d’article.
</DsText>
<br>
<hr>
<br>
<DsText as="p" :clamp="2">
Texte police Roboto Flex / Taille 16px / clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
</DsText>
</div>
<div class="category">
<DsHeading class="centrer rempli" as="h3">Carte concert</DsHeading>
<DsText as="p" tone="brand_rouge">
Pour les endroits où il y a une liste de concert page d'accueil, page agenda, page saison...
</DsText>
<br>
<hr>
<br>
<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"
/>
</div>
</div>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
</script>
<style lang="scss">
.ds-preview {
display: grid;
//gap: var(--sp-4);
padding: var(--sp-48);
justify-content: center;
}
.titre {
justify-self: center;
margin-bottom: 50px;
}
.category {
max-width: 1000px;
justify-self: flex-start;
margin-bottom: 30px;
padding: 40px;
border-radius: 14px;
}
.centrer {
justify-self: center;
margin-bottom: 30px;
}
.rempli {
width: 100%;
background-color: #ebebeb;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 5px;
border-radius: 5px;
}
</style>

90
app/pages/index copie.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<!-- Cas avec “cadre couleur” full page mais contenu dans marge -->
<PageSection tone="dark" :padded="true" content-size="default">
<DsHeading as="h1" size="">CONCERTS À VENIR...</DsHeading>
<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"
/>
</PageSection>
<!-- Cas normal : toute la section est contenu dans les marges -->
<PageSection :padded="true" content-size="default">
<DsHeading as="h1" size="">PAR TOUS ET POUR TOUS</DsHeading>
</PageSection>
<div>
<div>IMAGE TEST</div>
<NuxtImg v-if="imageUrl" :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>
</template>
<script setup>
import { onMounted, computed } from 'vue'
import { clientLog } from '~/utils/clientLog'
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
const runtimeConfig = useRuntimeConfig()
const STRAPI_URL = runtimeConfig.public.strapiUrl
console.log("STRAPI_URL : ",STRAPI_URL)
// Config app (pour ton 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>
</style>

169
app/pages/index.vue
View File

@@ -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>

64
app/pages/orchestre.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div>
<div>IMAGE TEST</div>
<!-- <NuxtImg v-if="imageUrl" :src="imageUrl" width="1300" height="600" sizes="100vw sm:50vw md:400px" densities="x1 x2" :modifiers="{ roundCorner: '0:100' }" /> -->
</div>
</template>
<script setup>
import { onMounted, computed } from 'vue'
import { clientLog } from '~/utils/clientLog'
// Layout utilisé
definePageMeta({ layout: 'pageheaderfull' })
const runtimeConfig = useRuntimeConfig()
//const STRAPI_URL = "http://localhost:1337"
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">
</style>

2
app/pages/test_header_2.vue
View File

@@ -34,7 +34,7 @@
console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
</script>
<style>
<style lang="scss">
</style>