home cards

README.md

@@ -171,6 +171,9 @@ https://bo.orchestre-ile.com/api/ressources-pedagogiques?populate[illustration_r
 
 https://bo.orchestre-ile.com/api/disques?populate[illustration_disque]=true
 
+https://bo.orchestre-ile.com/api/home-cards?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 ?
 
@@ -379,3 +382,8 @@ Exemple pour un export tous les jours à 02:15 :
 ```bash
 15 2 * * * cd /var/www/ton-projet && npm run export:lycee-excel >> /var/log/lycee-export.log 2>&1
 ```
+
+
+# Couleurs
+Ajouter de la couleur dans du texte blocks strapi
+dire à la personne qui saisie de mettre ceci<span data-color="brand_rouge">95</span> et le configurer VueJS

app/components/FilteredCards.vue

@@ -97,36 +97,38 @@
     // CONTENUS DES CARTES
     //--------------------------------------------------------------------------
 
-    const { items: homeTousOrchestre } = useStrapi(
+    const { items: homeCardsTousOrchestre } = useStrapi(
-        "/api/__strapi__/home-tous-orchestre",
+        "/api/__strapi__/home-cards",
         {
             locale: "fr-FR",
             populate: {
-                carte: {
+                illustration: true,
-                    illustration: true,
+            },
+            filters: {
+                type: {
+                    $eq: "Tous à l'orchestre",
                 },
             },
-            limit: 1,
+            sort: "ordre:asc",
+            pageSize: 100,
         }
     )
 
-    const homeTousOrchestreContent = computed(() => homeTousOrchestre.value?.[0] || null)
-
     const cards = computed(() => {
-        const cartes = homeTousOrchestreContent.value?.carte || []
+        const publishedCards = homeCardsTousOrchestre.value.filter((carte) => carte.publication !== false)
-        const publishedCards = cartes.filter((carte) => carte.publication !== false)
 
         return publishedCards.map((carte, index) => {
             const image = getStrapiCardImage(carte)
             const category = carte.categorie || ""
+            const title = carte.titre || ""
 
             return {
                 id: carte.id || String(index + 1),
                 imgSrc: image?.url || "",
-                imgAlt: image?.alternativeText || image?.caption || carte.titre || "",
+                imgAlt: image?.alternativeText || image?.caption || title,
                 imgWidth: image?.width || undefined,
                 imgHeight: image?.height || undefined,
-                title: carte.titre || "",
+                title,
                 descriptionBlocks: carte.description || null,
                 tags: category ? [category] : [],
                 url: carte.url || "",

app/components/concert/ConcertCard.vue

@@ -12,7 +12,7 @@
       <!-- Content -->
       <div class="concert-card__content">
         <NuxtLink v-if="href" :to="href" class="concert-card__link">
-          <DsHeading as="h4" tone="default" class="concert-card__title">
+          <DsHeading as="h4" tone="default" class="concert-card__title uppercase">
             {{ title }}
           </DsHeading>
         </NuxtLink>

app/pages/index.vue

@@ -41,7 +41,7 @@
     <PageSection padded_size="" class="theme_ppt_wp remonter_bloc_dessous">
       <SectionContent class="theme_ppt">
         <!-- PHOTO DE L'ORCHETSRE -->
-          <DsMedia :src="orchestre_img" alt="L'Orchestre" class="theme_ppt--img"/>
+          <DsMedia :src="homePartoutPourTousImageSrc" :alt="homePartoutPourTousImageAlt" class="theme_ppt--img"/>
         <!-- PHOTO DE LA CARTE IDF -->
         <!-- <DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/> -->
         <!-- Avec couleur rouge par dessus -->
@@ -52,9 +52,11 @@
             {{ homePartoutPourTousTitle }}
           </SectionTitle>
           <SectionContent pad="xs" class="theme_ppt--description">
-            <DsText tone="invert" size="lg" class="theme_ppt--txt" >
+            <StrapiBlocksConvert
-              Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos <span class="gros_chiffres">95</span> musiciennes et musiciens. L'Orchestre donne <span class="gros_chiffres">120</span> concerts par saison dans les <span class="gros_chiffres">8</span> départements d'Île-de-France, aussi bien dans des salles traditionnelles que dans des lieux variés.
+              v-if="homePartoutPourTousDescription?.length"
-            </DsText>
+              :blocks="homePartoutPourTousDescription"
+              class="theme_ppt--txt theme_ppt--txt-strapi"
+            />
             <!-- UN CTA / LIEN SUR L'IMAGE -->
             <!-- <DsButtonArrow to="/" variant="invert"> -->
                 <!-- Carte des événements -->
@@ -249,23 +251,72 @@
     {
       locale: "fr-FR",
       populate: {
-        carte: {
+        illustration: true,
-          illustration: true,
-        },
       },
       limit: 1,
     }
   )
 
+  const { items: homeCardsPartoutPourTous } = useStrapi(
+    "/api/__strapi__/home-cards",
+    {
+      locale: "fr-FR",
+      populate: {
+        illustration: true,
+      },
+      filters: {
+        type: {
+          $eq: "Partout et pour tous",
+        },
+      },
+      sort: "ordre:asc",
+      pageSize: 1000,
+    }
+  )
+
   const homePartoutPourTousContent = computed(() => homePartoutPourTous.value?.[0] || null)
 
   const homePartoutPourTousTitle = computed(() =>
     homePartoutPourTousContent.value?.titre || "LA MUSIQUE PARTOUT ET POUR TOUS"
   )
 
+  const homePartoutPourTousDescription = computed(() => {
+    const description = homePartoutPourTousContent.value?.description
+
+    if (Array.isArray(description)) return description
+    if (typeof description === "string" && description.trim()) {
+      return [
+        {
+          type: "paragraph",
+          children: [
+            {
+              type: "text",
+              text: description,
+            },
+          ],
+        },
+      ]
+    }
+
+    return []
+  })
+
+  const homePartoutPourTousIllustration = computed(() =>
+    normalizeStrapiMedia(homePartoutPourTousContent.value?.illustration)
+  )
+
+  const homePartoutPourTousImageSrc = computed(() =>
+    homePartoutPourTousIllustration.value?.url || orchestre_img
+  )
+
+  const homePartoutPourTousImageAlt = computed(() =>
+    homePartoutPourTousIllustration.value?.alternativeText ||
+    homePartoutPourTousContent.value?.titre ||
+    "L'Orchestre"
+  )
+
   const cards_ppt = computed(() => {
-    const cartes = homePartoutPourTousContent.value?.carte || []
+    const publishedCards = homeCardsPartoutPourTous.value.filter((carte) => carte.publication !== false)
-    const publishedCards = cartes.filter((carte) => carte.publication !== false)
 
     return publishedCards.map((carte, index) => {
       const image = getStrapiCardImage(carte)
@@ -374,12 +425,13 @@
   ])
 
   function normalizeStrapiMedia(media) {
-    if (!media?.url) return null
+    const item = Array.isArray(media) ? media[0] : media
+    if (!item?.url) return null
 
     return {
-      id: media.id || media.documentId || media.url,
+      id: item.id || item.documentId || item.url,
-      url: media.url,
+      url: item.url,
-      alternativeText: media.alternativeText || media.caption || media.name || "",
+      alternativeText: item.alternativeText || item.caption || item.name || "",
     }
   }
 
@@ -470,6 +522,23 @@
     &--txt {
       margin-bottom: 35px;
     }
+    &--txt-strapi {
+      color: var(--c-text-invert, #fff);
+
+      .strapi-blocks--p {
+        color: inherit;
+        font-family: var(--font-roboto);
+        font-size: var(--text-lg);
+        font-weight: var(--fw-regular);
+        line-height: var(--lh-base);
+        margin: 0 0 var(--sp-6);
+      }
+
+      strong {
+        font-size: var(--fs-18);
+        font-weight: var(--fw-black);
+      }
+    }
 
   }
   .theme_ppt_cards_wp {

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

@@ -23,6 +23,7 @@ const COLLECTION_MAP = {
   instruments: "/api/parc-instruments",
   "home-partout-pour-tous": "/api/home-partout-pour-tous",
   "home-tous-orchestre": "/api/home-tous-orchestre",
+  "home-cards": "/api/home-cards",
   actualites: "/api/actualites",
   disques: "/api/disques",
   "ressources-pedagogiques": "/api/ressources-pedagogiques",