feat: mise à jour présentation Malika Zirari

.eleventy.js

@@ -16,7 +16,7 @@ const parseDate = (date) => typeof date === 'string' ?
   DateTime.fromISO(date).setZone("Europe/Paris") :
   DateTime.fromJSDate(date, {zone: 'utc'}).setZone("Europe/Paris")
 
-async function imageShortcode(src, alt, sizes) {
+async function imageShortcode(src, alt, sizes, classes) {
   let metadata = await Image(src, {
     widths: [300, 600, 1200],
     formats: ["webp", "jpg"],
@@ -29,6 +29,7 @@ async function imageShortcode(src, alt, sizes) {
     sizes,
     loading: "lazy",
     decoding: "async",
+    class: classes
   };
 
   // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)

src/_includes/layouts/base.njk

@@ -11,13 +11,13 @@
     <meta property="og:title" content="Compagnie Kalimat">
     {% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
     <meta property="og:url" content="https://compagniekalimat.fr/">
-    <meta property="og:image" content="/images/logo-compagnie-kalimat-960.png">
+    <meta property="og:image" content="{{ image or "/images/logo-compagnie-kalimat-960.png" }}">
     <meta property="article:published_time" content="{{ page.date | htmlDateTimeISO }}">
     <meta property="article:modified_time" content="{{ page.date | htmlDateTimeISO }}">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="Compagnie Kalimat">
     {% if description %}<meta name="twitter:description" content="{{ description }}">{% endif %}
-    <meta name="twitter:image" content="/images/logo-compagnie-kalimat-960.png">
+    <meta name="twitter:image" content="{{ image or "/images/logo-compagnie-kalimat-960.png" }}">
 
     <meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Bienvenue sur le site de la compagnie de théâtre Kalimat !">
     <meta name="robots" content="index, follow">

src/malika-zirari.njk

@@ -1,5 +1,8 @@
 ---
 layout: layouts/base.njk
+title: Malika Zirari
+description: Malika Zirari, actrice et metteuse en scène, a suivi une formation approfondie en improvisation, écriture et interprétation théâtrale, notamment aux Cours Florent et auprès d'Antoine Herbez. Fondatrice de la Compagnie Kalimat, elle a dirigé et joué dans diverses productions, notamment 'IL' et se prépare à lancer 'Araberlin'. Son engagement envers le théâtre se manifeste aussi dans son travail éducatif à Nador et Casablanca
+image: /images/malika_zirari.png
 ---
 
 <h1>Malika Zirari</h1>
@@ -13,7 +16,23 @@ layout: layouts/base.njk
 </p><p>
     Avant de créer sa propre compagnie, elle a dirigé des ateliers de formation et de pratique théâtrale à Nador (Maroc) et conduit une résidence artistique bilingue avec des étudiants à l’Institut Français de Casablanca en collaboration avec InstantMix. Elle développe sa pratique par une formation à L’Ecole de Mise en Scène EMS-BAROUF sous la direction de Laurent Leclerc.
 </p><p>
-    En 2019, elle crée la Compagnie Kalimat et met en scène « IL » de l’écrivain dramaturge marocain Driss Ksikes. La pièce a été jouée douze fois à Paris.
+    En 2019, elle crée la Compagnie Kalimat et met en scène <a href="/il">« IL »</a> de l’écrivain dramaturge marocain Driss Ksikes. La pièce a été jouée douze fois à Paris.
 </p><p>
-    Actuellement son travail porte sur la pièce Araberlin de Jalila Baccar.
+    Actuellement son travail porte sur la pièce a Araberlin de Jalila Baccar dont la création est
+    <a href="http://www.comedienation.fr/content/araberlin" target="_blank">
+        prévue en Janvier 2023 à La comédie Nation à Paris
+    </a>.
 </p>
+
+<div class="flex flex-wrap justify-between lg:flex-nowrap">
+    <figure class="m-6 lg:ml-0 flex-grow-0 flex-shrink-0 w-full lg:w-1/3 flex flex-col justify-between lg:content-start" >
+        {% image "./src/images/malika_zirari_avec_driss_ksikes_a_rabat.jpg", "Malika Zirari avec Driss Ksikes à Rabat", "(min-width: 30em) 50vw, 100vw", "h-96 object-cover w-full" %}
+        <figcaption>Malika Zirari avec Driss Ksikes à Rabat</figcaption>
+    </figure>
+
+    <figure class="m-6 lg:mr-0 flex-grow-0 flex-shrink-0 w-full lg:w-2/3 flex flex-col lg:content-end justify-between" >
+        {% image "./src/images/malika_avec_jalila_baccar.jpg", "Malika Zirari avec Jalila Baccar à Tunis", "(min-width: 30em) 50vw, 100vw", "h-96 object-cover w-full" %}
+        <figcaption>Jalila Baccar avec Malika Zirari à Tunis</figcaption>
+    </figure>
+</div>
+