discographie

2026-06-14 16:02:36 +02:00
parent 29914a1041
commit 25a175f89d
9 changed files with 383 additions and 39 deletions
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -203,38 +203,40 @@
  console.log("Bienvenue : ",config.title)


-  //--------------------
-  // DONNÉES POUR LES CONCERTS À VENIR …
-  //--------------------
+    //--------------------
+    // DONNÉES POUR LES CONCERTS À VENIR …
+    //--------------------
    const saisonsFiltre = computed(() => {
      const values = [String(runtimeConfig.public.saison || "").trim(), "2025/2026"]
        .filter(Boolean)

      return [...new Set(values)]
    })
-  const { concerts, refresh } = useConcerts({
-      locale: "fr-FR",
-      populate: {
-          saison_concert: true,
-          image_illustration_concert: true,
-          representation_concert: { lieu_representation: true },
-      },
-      filters: {
-          saison_concert: {
-            nom_saison: {
-                $in: saisonsFiltre.value,
+    console.log("saisonsFiltre.value : ",saisonsFiltre.value)
+    const { concerts, refresh } = useConcerts({
+        locale: "fr-FR",
+        pageSize: 200,
+        populate: {
+            saison_concert: true,
+            image_illustration_concert: true,
+            representation_concert: { lieu_representation: true },
+        },
+        filters: {
+            saison_concert: {
+              nom_saison: {
+                  $in: saisonsFiltre.value,
+              },
            },
-          },
-      },
-      upcomingOnly: true,
-      limit: 3,
-  })
+        },
+        upcomingOnly: true,
+        limit: 3,
+    })

-  onMounted(() => {
-      if (!concerts.value?.length) {
-          refresh()
-      }
-  })
+    onMounted(() => {
+        if (!concerts.value?.length) {
+            refresh()
+        }
+    })



--- a/app/pages/mediation/scolaires.vue
+++ b/app/pages/mediation/scolaires.vue
@@ -398,10 +398,20 @@ et de la programmation jeune public"
    }
    .ressources-pedagogiques__list {
      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 392px));
+      grid-template-columns: repeat(auto-fit, minmax(0, 392px));
      gap: 24px;
      justify-content: center;
    }
+    @media (min-width: 400px) and (max-width: 900px) {
+      .ressources-pedagogiques__list {
+        grid-template-columns: repeat(2, minmax(0, 392px));
+      }
+    }
+    @media (max-width: 399px) {
+      .ressources-pedagogiques__list {
+        grid-template-columns: minmax(0, 392px);
+      }
+    }
    .strapi-blocks {
      h2 {
        color: var(--c-bleu);
--- a/app/pages/orchestre/discographie.vue
+++ b/app/pages/orchestre/discographie.vue
@@ -1,13 +1,267 @@
 <template>
  <div>
-    test
+    <!-- ================== -->
+    <!-- EN-tête Fond noir -->
+    <!-- ================== -->
+    <PageSection tone="dark" content-size="default" class="theme_bandeau--grid">
+      <div>
+        <SectionContent pad="xs" class="">
+          <SectionTitle tone="invert" pad="">
+            DISCOGRAPHIE
+          </SectionTitle>
+          <DsHeading as="h3" tone="invert" class="max-w-[500px]">
+            Collection Orchestre national d’Île-de-France chez NoMadMusic
+          </DsHeading>
+        </SectionContent>
+        <SectionContent pad="xs" class="">
+          <DsText tone="invert" size="lg" align="justify" class="theme_bandeau--grid--right--text" >
+            C’est en 2016 que naît la collaboration fructueuse entre l’Orchestre national d’Île-de-France et l’innovant label NoMad Music. Depuis nombre d’enregistrements salués par la critique sont parus parmi lesquels Bel canto amore mio (2016), un album consacré à Manuel De Falla (2017), La Bien-Aimée de Darius Milhaud et L’Oiseau de feu d’Igor Stravinski (2018), Ludwig, un album consacré à Beethoven avec le pianiste Cédric Tiberghien (2018) et un autre dédié à Gustav Mahler avec le baryton Markus Werba (2019). Sont parus en janvier 2021 deux enregistrements sous la direction de Case Scaglione : la Symphonie n°3 « Eroica » de Beethoven et un disque Wagner avec la mezzo Michelle DeYoung et le ténor Simon O’Neil.
+          </DsText>
+        </SectionContent>
+        <SectionContent pad="xs" class="">
+          <DsHeading as="h3" tone="invert">
+            Collection Solo chez NoMadMusic
+          </DsHeading>
+        </SectionContent>
+        <SectionContent pad="xs" class="">
+          <DsText tone="invert" size="lg" align="justify" class="theme_bandeau--grid--right--text" >
+            Solo, la collection discographique créée par l’Orchestre national d’Île-de-France, a pour vocation de mettre en valeur la richesse des individualités artistiques qui composent l’Orchestre. Au travers de différents enregistrements, à raison d’un à deux par saison, des musiciennes et musiciens de l’Orchestre peuvent ainsi se produire en solo, en duo ou en petit effectif de musique de chambre et présenter des répertoires variés.
+          </DsText>
+        </SectionContent>
+      </div>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- Listes des Disques -->
+    <!-- ================== -->
+    <PageSection padded_size="md" content-size="default" class="pl-2 pr-2">
+      <SectionContent v-if="pending">
+        <DsText>Chargement des disques...</DsText>
+      </SectionContent>
+
+      <SectionContent v-else-if="error">
+        <DsText>Impossible de charger les disques pour le moment.</DsText>
+      </SectionContent>
+
+      <SectionContent v-else>
+        <section
+          v-for="collection in disquesParCollection"
+          :key="collection.nom"
+          class="discographie-collection"
+        >
+          <div class="flex items-center gap-4 mb-8">
+            <h3 class="text-2xl font-bold tracking-tight uppercase">{{ collection.nom }}</h3>
+            <div class="h-[2px] flex-1 bg-surface-container"></div>
+          </div>
+
+          <div class="flex justify-center">
+            <section class="flex flex-wrap gap-y-12 gap-x-6 xl:gap-8 2xl:gap-16 mb-16 w-full max-w-[88rem]">
+              <article
+                v-for="disque in collection.disques"
+                :key="disque.id"
+                class="discographie-disque w-full overflow-hidden rounded-md bg-white shadow-lg xm:max-w-[258px] sm:max-w-[278px] md:max-w-[310px] lg:max-w-[300px] xl:max-w-[345px] 2xl:max-w-[380px]"
+              >
+                <div class="relative flex aspect-[3/2] bg-surface-container-low">
+                  <div class="w-[68%] bg-surface-container-lowest">
+                    <img
+                      v-if="disque.illustration"
+                      :src="disque.illustration.url"
+                      :alt="disque.illustration.alternativeText"
+                      class="h-full w-full object-cover"
+                      loading="lazy"
+                      decoding="async"
+                    >
+                  </div>
+
+                  <div class="discographie-disque__vinyl relative flex-1 bg-[#070707]">
+                    <span
+                      v-if="disque.sortie"
+                      class="absolute right-4 top-4 rounded bg-[#fff3f3] px-2.5 py-1 text-sm font-extrabold text-[#d81938]"
+                    >
+                      {{ disque.sortie }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="p-5">
+                  <h4 class="mb-1 text-2xl font-extrabold leading-tight">
+                    {{ disque.titre }}
+                  </h4>
+
+                  <div v-if="disque.distribution.length" class="discographie-disque__meta mb-4 text-base leading-relaxed">
+                    <StrapiBlocksConvert :blocks="disque.distribution" />
+                  </div>
+                  <div v-if="disque.compositeurs.length" class="discographie-disque__meta mb-5 text-base leading-relaxed">
+                    <StrapiBlocksConvert :blocks="disque.compositeurs" />
+                  </div>
+
+                  <p v-if="disque.descriptionText" class="mb-5 text-base leading-relaxed">
+                    {{ disque.descriptionText }}
+                  </p>
+
+
+
+                  <a
+                    v-if="disque.lienNomadMusic"
+                    :href="disque.lienNomadMusic"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex w-full items-center justify-center gap-3 rounded-md bg-[#E20018] px-5 py-3 text-base font-extrabold text-white transition-colors hover:bg-[#e3061391]"
+                  >
+                    <span class="grid h-4 w-4 place-items-center rounded-full border border-white/80 text-[9px] leading-none">
+                      ◉
+                    </span>
+                    <span>NoMadMusic</span>
+                  </a>
+
+                  <a
+                    v-if="disque.lienAutre"
+                    :href="disque.lienAutre"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex w-full items-center justify-center gap-3 rounded-md bg-[#E20018] px-5 py-3 text-base font-extrabold text-white transition-colors hover:bg-[#e3061391]"
+                  >
+                    <span class="grid h-4 w-4 place-items-center rounded-full border border-white/80 text-[9px] leading-none">
+                      ◉
+                    </span>
+                    <span>En savoir plus</span>
+                  </a>
+                </div>
+              </article>1
+            </section>
+          </div>
+        </section>
+      </SectionContent>
+    </PageSection>
+
  </div>
 </template>

 <script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'

+  const { items: disquesItems, pending, error } = useStrapi(
+    "/api/__strapi__/disques",
+    {
+      locale: "fr-FR",
+      sort: "ordre_disque:asc",
+      fetchAll: true,
+      populate: {
+        illustration_disque: true,
+      },
+    }
+  )
+
+  const disques = computed(() => {
+    return disquesItems.value
+      .map(normalizeDisque)
+      .sort((a, b) => {
+        if (a.ordre !== b.ordre) return a.ordre - b.ordre
+        return a.titre.localeCompare(b.titre, "fr-FR")
+      })
+  })
+
+  const disquesParCollection = computed(() => {
+    const collections = new Map()
+
+    for (const disque of disques.value) {
+      const nom = disque.collection || "Autres disques"
+      if (!collections.has(nom)) {
+        collections.set(nom, {
+          nom,
+          disques: [],
+        })
+      }
+      collections.get(nom).disques.push(disque)
+    }
+
+    return Array.from(collections.values())
+  })
+
+  function normalizeDisque(item) {
+    return {
+      id: item.documentId || item.id,
+      titre: item.titre_disque || "",
+      collection: item.collection_disque || "",
+      sortie: item.sortie_disque || "",
+      distribution: normalizeBlocks(item.distribution_disque),
+      compositeurs: normalizeBlocks(item.compositeurs_disque),
+      description: normalizeBlocks(item.description_disque),
+      descriptionText: blocksToPlainText(item.description_disque),
+      lienNomadMusic: item.lien_nomadmusic || "",
+      lienAutre: item.lien_autre || "",
+      ordre: Number(item.ordre_disque ?? Number.MAX_SAFE_INTEGER),
+      illustration: normalizeStrapiMedia(item.illustration_disque),
+    }
+  }
+
+  function normalizeBlocks(blocks) {
+    return Array.isArray(blocks) ? blocks : []
+  }
+
+  function getFirstBlockLine(blocks) {
+    const text = blocksToPlainText(blocks)
+    return text.split("\n").map((line) => line.trim()).find(Boolean) || ""
+  }
+
+  function blocksToPlainText(blocks) {
+    if (!Array.isArray(blocks)) return ""
+
+    return blocks
+      .map((block) => blockToPlainText(block))
+      .filter(Boolean)
+      .join("\n")
+      .trim()
+  }
+
+  function blockToPlainText(block) {
+    if (!block || typeof block !== "object") return ""
+
+    if (Array.isArray(block.children)) {
+      return block.children.map(blockToPlainText).join("")
+    }
+
+    return typeof block.text === "string" ? block.text : ""
+  }
+
+  function normalizeStrapiMedia(media) {
+    if (!media?.url) return null
+
+    return {
+      id: media.id || media.documentId || media.url,
+      url: media.url,
+      alternativeText: media.alternativeText || media.caption || "",
+    }
+  }
 </script>

 <style lang="scss">
+  .discographie-disque {
+    &__vinyl::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        repeating-radial-gradient(
+          circle at -18% 50%,
+          rgba(255, 255, 255, 0.13) 0,
+          rgba(255, 255, 255, 0.13) 1px,
+          transparent 1px,
+          transparent 15px
+        );
+      opacity: 0.35;
+    }

-</style>
+    &__meta {
+      .strapi-blocks {
+        display: grid;
+        gap: 2px;
+      }
+
+      .strapi-blocks--p {
+        margin: 0;
+      }
+    }
+  }
+</style>