home tous à l'orchestre

README.md

@@ -124,7 +124,15 @@ https://bo.orchestre-ile.com/api/pro-programmer?locale=fr-FR&populate[bios]=true
 API Instruments
 https://bo.orchestre-ile.com/api/parc-instruments?locale=fr-FR&populate=illustration_instrument
 
-https://bo.orchestre-ile.com/api/home-partout-pour-tous?locale=fr-FR&populate[carte]=true&populate[carte][populate]=illustration=true
+
+https://bo.orchestre-ile.com/api/home-partout-pour-tous?locale=fr-FR&populate[carte][populate][illustration]=true
+
+https://bo.orchestre-ile.com/api/home-tous-orchestre?locale=fr-FR&populate[carte][populate][illustration]=true
+
+/api/home-partout-pour-tous?locale=fr-FR&populate[carte][populate][illustration]=true
+
+
+j'ai créé le endpoint home-tous-orchestre strapi pour saisir le contenu de cards. Donc peux-tu le remplacer par ce contenu strapi ?
 
 ### Afficher les données récupérées ou les erreurs dans la console
   const { items: scolaires, pending, error } = useStrapi(

app/components/FilteredCards.vue

@@ -13,8 +13,8 @@
             textColor="invert"
             size="aplati"
             borderColor="invert"
-            :aria-pressed="activeFilter === f.key"
+            :aria-pressed="selectedFilterKey === f.key"
-            :class="{ 'is-active': activeFilter === f.key }"
+            :class="{ 'is-active': selectedFilterKey === f.key }"
             @click="activeFilter = f.key"
         >
             {{ f.label }}
@@ -34,14 +34,23 @@
         >
 
             <DsCard
-                v-for="card in filteredCards"
+                v-for="card in cards"
                 :key="card.id"
+                v-show="isCardVisible(card)"
                 class="theme_tao--cardlist--card"
             >
                 <div class="theme_tao--cardlist--card--wp">
                     <!-- Image -->
                     <div class="theme_tao--cardlist--card--img">
-                    <NuxtImg :src="card.imgSrc" :alt="card.imgAlt" />
+                        <NuxtImg
+                            v-if="card.imgSrc"
+                            :src="card.imgSrc"
+                            :alt="card.imgAlt"
+                            :width="card.imgWidth"
+                            :height="card.imgHeight"
+                            loading="lazy"
+                            sizes="(max-width: 399px) 280px, 350px"
+                        />
                     </div>
 
                     <!-- Content -->
@@ -51,9 +60,12 @@
                                 {{ card.title }}
                             </DsHeading>
                         </NuxtLink>
-                        <DsText as="p" tone="default" :clamp="6">
+                        <DsHeading v-else as="h5" tone="default">
-                            <span v-html="card.descriptionHtml" />
+                            {{ card.title }}
-                        </DsText>
+                        </DsHeading>
+                        <div v-if="card.descriptionBlocks" class="theme_tao--cardlist--card--description">
+                            <StrapiBlocksConvert :blocks="card.descriptionBlocks" />
+                        </div>
                     </div>
                 </div>
             </DsCard>
@@ -65,7 +77,7 @@
 
 <script setup>
 
-    import { ref, computed, watch, nextTick } from 'vue'
+    import { ref, computed, watch } from 'vue'
     import DsCard from '@root/design-system/components/DsCard.vue'
     import DsHeading from '@root/design-system/primitives/DsHeading.vue'
     import DsButton from '@root/design-system/primitives/DsButton.vue'
@@ -77,83 +89,91 @@
     //--------------------------------------------------------------------------
 
 
-    // Variable qui contient les catégories qui permettront de filtrer
-    const filters = [
-        { key: 'action_culturelle', label: 'Action Culturelle' },
-    ]
     // variable pour donner le filtre actif
     // filtre par défaut : le premier
-    const activeFilter = ref(filters[0].key)
+    const activeFilter = ref("")
 
     //--------------------------------------------------------------------------
     // CONTENUS DES CARTES
     //--------------------------------------------------------------------------
 
-    const cards = ref([
+    const { items: homeTousOrchestre } = useStrapi(
+        "/api/__strapi__/home-tous-orchestre",
         {
-            id: 'insta-1',
+            locale: "fr-FR",
-            imgSrc: '/contenus/insta_ondif_7.jpg',
+            populate: {
-            imgAlt: 'le titre du post',
+                carte: {
-            title: "TOUS À VÉRONE LE TEMPS D'UN CONCERT!",
+                    illustration: true,
-            descriptionHtml: `✨Tous à l’orchestre !
-            Ces dernières semaines, l’Orchestre a vibré bien au-delà de la scène, au fil d’actions culturelles et éducatives riches en échanges et en découvertes.
-            
-            Entre ateliers d’enregistrement, éveil musical, et rencontres avec les musiciens de l’orchestre, chaque instant a permis de créer du lien et de faire vivre la musique autrement.
-            
-            Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.
-            
-            Retour en images sur ces instants qui font vivre l’Orchestre.🎶✨`,
-            tags: ['action_culturelle'],
-            url: ""
                 },
-        {
-            id: 'insta-2',
-            imgSrc: '/contenus/insta_ondif_9.jpg',
-            imgAlt: 'le titre du post',
-            title: "LA MUSIQUE POUR LES TOUT-PETITS!",
-            descriptionHtml: `Les petites oreilles explorent l'univers d'un compositeur et découvrent la contrebasse de près, lors d'un atelier 0-3 ans à la médiathèque de Rungis. Un beau moment d'éveil musical, avec le soutien de la Fondation Groupe ADP`,
-            tags: ['action_culturelle'],
-            url: ""
             },
-        {
+            limit: 1,
-            id: 'insta-3',
+        }
-            imgSrc: '/contenus/insta_ondif_6.jpg',
-            imgAlt: 'le titre du post',
-            title: "C'EST L'HISTOIRE D'UN CHIEN MÉLOMANE",
-            descriptionHtml: `✨ Ça c’est fait ! Retour sur février et mars ✨ Ces deux derniers mois, l’Orchestre a surpris son public à chaque instant !<br>
-            Entre concerts symphoniques, spectacles mêlant danse et musique, et concerts commentés, nous avons eu le plaisir d’offrir des expériences inédites et reçu des retours enthousiastes de spectateurs conquis.<br>
-            Retour en images sur ces temps forts qui font vibrer l’Orchestre ! 🎶`,
-            tags: ['action_culturelle'],
-            url: ""
-        },
-        {
-            id: 'insta-4',
-            imgSrc: '/contenus/insta_ondif_8.jpg',
-            imgAlt: 'le titre du post',
-            title: "LEVER DE RIDEAU À MONTEREAU",
-            descriptionHtml: `Les élèves du conservatoire de Montereau-Fault-Yvonne assurent la première partie du concert "La Symphonie des corps" au Majestic, avec une performance de vocal painting débordante d'énergie et de créativité !`,
-            tags: ['action_culturelle'],
-            url: ""
-        },
-        {
-            id: 'insta-5',
-            imgSrc: '/contenus/insta_ondif_2.jpg',
-            imgAlt: 'le titre du post',
-            title: "À LA DÉCOUVERTE DES INSTRUMENTS À VENT",
-            descriptionHtml: `Guidés avec bienveillance par Annouck et Hélène, les enfants explorent les instruments à vent : le cor et la flûte éveillent leur curiosité`,
-            tags: ['action_culturelle'],
-            url: ""
-        },
-    ])
-
-    //--------------------------------------------------------------------------
-    // Computed : cartes filtrées
-    //--------------------------------------------------------------------------
-    const filteredCards = computed(() => {
-        return cards.value.filter(card =>
-            card.tags.includes(activeFilter.value)
     )
+
+    const homeTousOrchestreContent = computed(() => homeTousOrchestre.value?.[0] || null)
+
+    const cards = computed(() => {
+        const cartes = homeTousOrchestreContent.value?.carte || []
+        const publishedCards = cartes.filter((carte) => carte.publication !== false)
+
+        return publishedCards.map((carte, index) => {
+            const image = getStrapiCardImage(carte)
+            const category = carte.categorie || ""
+
+            return {
+                id: carte.id || String(index + 1),
+                imgSrc: image?.url || "",
+                imgAlt: image?.alternativeText || image?.caption || carte.titre || "",
+                imgWidth: image?.width || undefined,
+                imgHeight: image?.height || undefined,
+                title: carte.titre || "",
+                descriptionBlocks: carte.description || null,
+                tags: category ? [category] : [],
+                url: carte.url || "",
+            }
         })
+    })
+
+    const filters = computed(() => {
+        const categories = new Map()
+
+        cards.value.forEach((card) => {
+            card.tags.forEach((tag) => {
+                if (!categories.has(tag)) {
+                    categories.set(tag, tag)
+                }
+            })
+        })
+
+        return Array.from(categories, ([key, label]) => ({ key, label }))
+    })
+
+    watch(
+        filters,
+        (availableFilters) => {
+            if (!availableFilters.length) {
+                activeFilter.value = ""
+                return
+            }
+
+            if (!availableFilters.some((filter) => filter.key === activeFilter.value)) {
+                activeFilter.value = availableFilters[0].key
+            }
+        },
+        { immediate: true }
+    )
+
+    const selectedFilterKey = computed(() => activeFilter.value || filters.value[0]?.key || "")
+
+    function isCardVisible(card) {
+        return !selectedFilterKey.value || card.tags.includes(selectedFilterKey.value)
+    }
+
+    function getStrapiCardImage(carte) {
+        const image = carte.illustration || null
+
+        return Array.isArray(image) ? image[0] : image
+    }
 
 </script>
 
@@ -193,21 +213,34 @@
                     align-items: center;
                 }
                 &--img {
-                    max-width: 280px;
+                    width: min(100%, 280px);
+                    aspect-ratio: 4 / 5;
+                    display: grid;
+                    place-items: center;
+                    background: #f2f2f2;
                     overflow: hidden;
+
                     img {
-                        max-height: 280px;
+                        width: 100%;
+                        height: 100%;
+                        display: block;
+                        object-fit: cover;
                     }
+
                     @media (min-width: 400px) {
-                        img {
+                        width: min(100%, 350px);
-                            max-height: 350px;
-                        }
                     }
                 }
                 &--content {
                     max-width: 320px;
                     padding-top: 20px;
                 }
+                &--description {
+                    display: -webkit-box;
+                    overflow: hidden;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 12;
+                }
             }
             &--card {
                 /* base: mobile-first */

server/api/__strapi__/[collection].get.js

@@ -22,6 +22,7 @@ const COLLECTION_MAP = {
   "parametres": "/api/parametres",
   instruments: "/api/parc-instruments",
   "home-partout-pour-tous": "/api/home-partout-pour-tous",
+  "home-tous-orchestre": "/api/home-tous-orchestre",
 }
 
 export default defineEventHandler(async (event) => {