home cards

2026-06-22 11:08:49 +02:00
parent 96296bbed9
commit 5c66612821
5 changed files with 105 additions and 25 deletions
--- a/README.md
+++ b/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
--- a/app/components/FilteredCards.vue
+++ b/app/components/FilteredCards.vue
@@ -97,36 +97,38 @@
    // CONTENUS DES CARTES
    //--------------------------------------------------------------------------

-    const { items: homeTousOrchestre } = useStrapi(
-        "/api/__strapi__/home-tous-orchestre",
+    const { items: homeCardsTousOrchestre } = useStrapi(
+        "/api/__strapi__/home-cards",
        {
            locale: "fr-FR",
            populate: {
-                carte: {
                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 = cartes.filter((carte) => carte.publication !== false)
+        const publishedCards = homeCardsTousOrchestre.value.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 || "",
--- a/app/components/concert/ConcertCard.vue
+++ b/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>
--- a/app/pages/index.vue
+++ b/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" >
-              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.
-            </DsText>
+            <StrapiBlocksConvert
+              v-if="homePartoutPourTousDescription?.length"
+              :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,
      },
-      },
      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 = cartes.filter((carte) => carte.publication !== false)
+    const publishedCards = homeCardsPartoutPourTous.value.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,
-      url: media.url,
-      alternativeText: media.alternativeText || media.caption || media.name || "",
+      id: item.id || item.documentId || item.url,
+      url: item.url,
+      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 {
--- a/server/api/strapi/[collection].get.js
+++ b/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",