feat(shortcodes): external card link (youtube)

assets/sass/card.scss

@@ -1,6 +1,49 @@
 .card {
-    padding: 1rem;
+    padding: 0.5rem;
     border: 1px solid gray;
     border-radius: 2px;
     background-color: #ecf0f1;
+    display: flex; 
+    gap: 2rem;
+
+    .card-image {
+        display: block;
+        margin-right: 0rem;
+        overflow: hidden;
+        height: 100%;
+        width: 300px;
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .card-action {
+        text-decoration: underline;
+    }
+
+    color: black;
+    text-decoration: none;
 }
+
+@media (max-width: $sm-breakpoint) {
+    .card-link {
+        gap: 1rem;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .card-link {
+        .card-image {
+            width: 200px;
+            height: 100%;
+        }
+    }
+}
+
+@media (max-width: $xs-breakpoint) {
+    .card-link {
+        .card-image {
+            width: 100% !important;
+        }
+    }
+}
+

assets/sass/figures.scss

@@ -1,5 +1,6 @@
 .fig-img {
     display: inline-block;
+    text-align: center;
     figcaption {
         font-size: .9rem;
         color: $hidden;
@@ -20,6 +21,7 @@
     justify-content: center;
     flex-wrap: wrap;
     gap: 2rem;
+    padding-top: 1rem;
     margin-bottom: 1rem;
     
     figure {

assets/sass/main.scss

@@ -46,3 +46,10 @@ $hidden: #2C3E50;
 @import 'sliding_gallery.scss';
 @import 'alert.scss';
 
+.small-icon {
+    width: 20px;
+    height: 20px;
+}
+.youtube-icon {
+    fill: #FF0202;
+}

content/actualites/2024-01-10_flechage-panneaux/index.md

@@ -18,8 +18,6 @@ Maintenant la Chapelle n’aura plus de secret pour personne ! 💫
 
 🔎 Nous sommes à la recherche d’une personne au talent de pyrograveur pour remplacer les affiches plastifiées par une pyrogravure comme sur la photo. Merci de vous rapprocher de nous si vous êtes candidat.
 
-<br>
-
 {{<figures-grid>}}
     {{<fig-img
     src="modele_panneau.jpg"

content/geocaching/2023/vierge-noire/index.md

@@ -16,15 +16,21 @@ title: La Vierge noire
 >}}
 </div>
 
-<div class="highlighted">
+## Bravo ! Vous venez de découvrir la Vierge noire, Notre Dame d'Aubevoye.
-Bravo ! Vous venez de découvrir la Vierge noire, Notre Dame d'Aubevoye.
-</div>
 
 Offerte en 1864 à la commune par François Frédéric Alaboissette, un notable, bienfaiteur et érudit local, cette sculpture métallique du XVIIeme siècle posée sur un socle de briques maçonnées fut inaugurée à l'occasion d'une grande cérémonie le 8 septembre 1866. 
-Un pèlerinage annuel du dimanche le plus proche du 8 septembre, date de la fête de la Nativité de Marie, a perduré jusqu'au début de la seconde moitié du XXème siècle comme en atteste l'ex-voto déposé à ses pieds en 1949 par les habitants d'Aubevoye, après la deuxième guerre mondiale.
 
-Cette statue est elle effectivement une Vierge noire ? 
+Un pèlerinage annuel du dimanche le plus proche du 8 septembre, date de la fête de la Nativité de Marie, a perduré jusqu'au début de la seconde moitié du XXème siècle comme en atteste l'ex-voto, une offrande déposée à ses pieds en 1949 par les habitants d'Aubevoye, après la deuxième guerre mondiale.
-En général, les Vierges noires sont des statues médiévales, sculptées entre le XIème et le XVème siècle, pas nécessairement de couleur noire à l'origine, mais qui s'assombrissent au fil du temps, par vieillissement de la matière, oxydation du métal ou effet de la combustion des cierges votifs. Il en est aussi à qui sont prêtées des origines paléochrétiennes, celtes, romaines, voire égyptiennes.  La tentation pourrait être grande de relier cette statue à une telle tradition. Aubevoye appartenait après tout à l'ancien Pagus de la Madrie (étymologiquement "Domaine de la Mère"), antérieurement à la création du Duché de Normandie. Toutefois, sa facture paraît trop récente pour s'y rattacher
+
+## Cette statue est elle effectivement une Vierge noire ?
+
+En général, les Vierges noires sont des statues médiévales, sculptées entre le XIème et le XVème siècle, pas nécessairement de couleur noire à l'origine, mais qui s'assombrissent au fil du temps, par vieillissement de la matière, oxydation du métal ou effet de la combustion des cierges votifs. Il en est aussi à qui sont prêtées des origines paléochrétiennes, celtes, romaines, voire égyptiennes.  La tentation pourrait être grande de relier cette statue à une telle tradition. Aubevoye appartenait après tout à l'ancien Pagus de la Madrie (étymologiquement "Domaine de la Mère"), antérieurement à la création du Duché de Normandie. Toutefois, sa facture paraît trop récente pour s'y rattacher.
+
+{{< youtube-card
+    id="jLobXIttLhs"
+    title="Vidéo : La Vierge Noire à Aubevoye"
+    description="Montage vidéo montrant un historique de cartes postales ainsi que la récente rénovation de la statue de la Vierge noire d'Aubevoye"
+>}}
 
 </div>
 

layouts/shortcodes/youtube-card.html

@@ -0,0 +1,16 @@
+<!-- Youtube card -->
+
+{{ $videoUrl :=  printf "https://youtube.com/watch?v=%s" (.Get "id") }}
+{{ $thumbnailUrl :=  printf "https://img.youtube.com/vi/%s/0.jpg" (.Get "id") }}
+
+<a href="{{ $videoUrl }}" class="card card-link card-youtube" title="Voir la vidéo &quot;{{ .Get "title" }}&quot; sur YouTube">
+    <img class="card-image" src="{{ $thumbnailUrl }}" alt="Miniature youtube" />
+    <div class="card-content">
+        <h3>{{ .Get "title" }}</h3>
+        <p>{{ .Get "description" }}</p>
+        <p class="card-action">
+        {{ partial "helpers/svg" (dict "path" "icons/youtube" "class" "small-icon youtube-icon") }}
+        Voir la vidéo sur YouTube {{ partial "helpers/svg" (dict "path" "icons/external" "class" "icon_inline") }}
+        </p>
+    </div>
+</a>