generated from gitea_admin/default
discographie
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user