Transforme la liste des conférences en deck de cartes

Ajoute les shortcodes talks/talk affichant chaque conférence en carte
Bootstrap avec couverture extraite du PDF, badge de langue et boutons
transcript/code. Les liens externes s'ouvrent dans un nouvel onglet.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

content/en/talks.md

@@ -7,15 +7,17 @@ menu:
     weight: 40
 ---
 
-Here are slides I used as support to my presentations:
+Here are the slides I used as support for my presentations:
 
-* [[FR] DNS, the hidden backbone of the Internet](/talks/starinux_dns_2025.pdf) ([Atelier Starinux](https://www.starinux.org/?p=1329))
+{{< talks >}}
-* [[FR] Embedding a web front-end in your Go binary: happyDomain example](/talks/happyDomain_golang_meetup_2024.pdf) [(code)](https://git.nemunai.re/nemunaire/meetup-golang-2024-demo) ([Meetup Golang Paris](https://www.meetup.com/fr-FR/golang-paris/events/301188194/))
+{{< talk title="DNS, the hidden backbone of the Internet" lang="fr" year="2025" url="/talks/starinux_dns_2025.pdf" img="/talks/covers/starinux_dns_2025.jpg" event="Atelier Starinux" eventurl="https://www.starinux.org/?p=1329" >}}
-* [[EN] Let's make people love domain names again](https://blog.happydomain.org/files/happyDomain%20FOSDEM%202024.pdf) ([FOSDEM 2024](https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/))
+{{< talk title="Embedding a web front-end in your Go binary: happyDomain example" lang="fr" year="2024" url="/talks/happyDomain_golang_meetup_2024.pdf" img="/talks/covers/happyDomain_golang_meetup_2024.jpg" event="Meetup Golang Paris" eventurl="https://www.meetup.com/fr-FR/golang-paris/events/301188194/" code="https://git.nemunai.re/nemunaire/meetup-golang-2024-demo" >}}
-* [[FR] How can we make the words DNS and simplicity compatible?](https://blog.happydomain.org/files/happyDomain%20Open%20Source%20Experience%202023.pdf) ([Open Source Experience 2023](https://www.opensource-experience.com/event/#conf-13898))
+{{< talk title="Let's make people love domain names again" lang="en" year="2024" url="https://blog.happydomain.org/files/happyDomain%20FOSDEM%202024.pdf" img="/talks/covers/happydomain_fosdem_2024.jpg" event="FOSDEM 2024" eventurl="https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/" >}}
-* [[FR] Rethinking web platform security](/talks/lresw23-moenia.pdf) ([LRE Summer Week](https://www.lre.epita.fr/news_content/summer_week_23/))
+{{< talk title="How can we make the words DNS and simplicity compatible?" lang="fr" year="2023" url="https://blog.happydomain.org/files/happyDomain%20Open%20Source%20Experience%202023.pdf" img="/talks/covers/happydomain_osx_2023.jpg" event="Open Source Experience 2023" eventurl="https://www.opensource-experience.com/event/#conf-13898" >}}
-* [[FR] Strong authentication](/talks/2fa.pdf) (*cryptoparty* GConfs)
+{{< talk title="Rethinking web platform security" lang="fr" year="2023" url="/talks/lresw23-moenia.pdf" img="/talks/covers/lresw23-moenia.jpg" event="LRE Summer Week" eventurl="https://www.lre.epita.fr/news_content/summer_week_23/" >}}
-* [[FR] Self-Hosting](/talks/autohebergement.pdf) (*cryptoparty* GConfs)
+{{< talk title="Strong authentication" lang="fr" url="/talks/2fa.pdf" img="/talks/covers/2fa.jpg" event="cryptoparty GConfs" >}}
-* [[FR] DNS overview](/talks/QTechNote%20DNS.pdf) (QTechNote)
+{{< talk title="Self-Hosting" lang="fr" url="/talks/autohebergement.pdf" img="/talks/covers/autohebergement.jpg" event="cryptoparty GConfs" transcript="post/self-hosting/index.md" >}}
-* [[FR] Docker hands-on](/talks/QTechNote%20Docker.pdf) (QTechNote)
+{{< talk title="DNS overview" lang="fr" url="/talks/QTechNote%20DNS.pdf" img="/talks/covers/qtechnote_dns.jpg" event="QTechNote" >}}
-* [[FR] gRPC/Protobuf overview](/talks/QTechNote%20%231.pdf) (QTechNote)
+{{< talk title="Docker hands-on" lang="fr" url="/talks/QTechNote%20Docker.pdf" img="/talks/covers/qtechnote_docker.jpg" event="QTechNote" >}}
+{{< talk title="gRPC/Protobuf overview" lang="fr" url="/talks/QTechNote%20%231.pdf" img="/talks/covers/qtechnote_grpc.jpg" event="QTechNote" >}}
+{{< /talks >}}

content/fr/conferences.md

@@ -9,15 +9,17 @@ aliases:
   - talks
 ---
 
-Voici les supports des conférences que j'ai données :
+Voici les supports des conférences que j'ai données :
 
-* [[FR] Le DNS, la colonne vertébrale cachée d’Internet](/talks/starinux_dns_2025.pdf) ([Atelier Starinux](https://www.starinux.org/?p=1329))
+{{< talks >}}
-* [[FR] Embarquer un frontal web dans son binaire Go, exemple avec happyDomain](/talks/happyDomain_golang_meetup_2024.pdf) [(code)](https://git.nemunai.re/nemunaire/meetup-golang-2024-demo) ([Meetup Golang Paris](https://www.meetup.com/fr-FR/golang-paris/events/301188194/))
+{{< talk title="Le DNS, la colonne vertébrale cachée d’Internet" lang="fr" year="2025" url="/talks/starinux_dns_2025.pdf" img="/talks/covers/starinux_dns_2025.jpg" event="Atelier Starinux" eventurl="https://www.starinux.org/?p=1329" >}}
-* [[EN] Let's make people love domain names again](https://blog.happydomain.org/files/happyDomain%20FOSDEM%202024.pdf) ([FOSDEM 2024](https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/))
+{{< talk title="Embarquer un frontal web dans son binaire Go, exemple avec happyDomain" lang="fr" year="2024" url="/talks/happyDomain_golang_meetup_2024.pdf" img="/talks/covers/happyDomain_golang_meetup_2024.jpg" event="Meetup Golang Paris" eventurl="https://www.meetup.com/fr-FR/golang-paris/events/301188194/" code="https://git.nemunai.re/nemunaire/meetup-golang-2024-demo" >}}
-* [[FR] Comment rendre les mots DNS et simplicité compatibles ?](https://blog.happydomain.org/files/happyDomain%20Open%20Source%20Experience%202023.pdf) ([Open Source Experience 2023](https://www.opensource-experience.com/event/#conf-13898))
+{{< talk title="Let's make people love domain names again" lang="en" year="2024" url="https://blog.happydomain.org/files/happyDomain%20FOSDEM%202024.pdf" img="/talks/covers/happydomain_fosdem_2024.jpg" event="FOSDEM 2024" eventurl="https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/" >}}
-* [[FR] Repenser la sécurité des plateformes web](/talks/lresw23-moenia.pdf) ([LRE Summer Week](https://www.lre.epita.fr/news_content/summer_week_23/))
+{{< talk title="Comment rendre les mots DNS et simplicité compatibles ?" lang="fr" year="2023" url="https://blog.happydomain.org/files/happyDomain%20Open%20Source%20Experience%202023.pdf" img="/talks/covers/happydomain_osx_2023.jpg" event="Open Source Experience 2023" eventurl="https://www.opensource-experience.com/event/#conf-13898" >}}
-* [[FR] L'authentification forte](/talks/2fa.pdf) (*cryptoparty* GConfs)
+{{< talk title="Repenser la sécurité des plateformes web" lang="fr" year="2023" url="/talks/lresw23-moenia.pdf" img="/talks/covers/lresw23-moenia.jpg" event="LRE Summer Week" eventurl="https://www.lre.epita.fr/news_content/summer_week_23/" >}}
-* [[FR] L'autohébergement](/talks/autohebergement.pdf) (*cryptoparty* GConfs)
+{{< talk title="L'authentification forte" lang="fr" url="/talks/2fa.pdf" img="/talks/covers/2fa.jpg" event="cryptoparty GConfs" >}}
-* [[FR] Le DNS](/talks/QTechNote%20DNS.pdf) (QTechNote)
+{{< talk title="L'autohébergement" lang="fr" url="/talks/autohebergement.pdf" img="/talks/covers/autohebergement.jpg" event="cryptoparty GConfs" transcript="post/self-hosting/index.md" >}}
-* [[FR] Prise en main de Docker](/talks/QTechNote%20Docker.pdf) (QTechNote)
+{{< talk title="Le DNS" lang="fr" url="/talks/QTechNote%20DNS.pdf" img="/talks/covers/qtechnote_dns.jpg" event="QTechNote" >}}
-* [[FR] Prise en main de gRPC/Protobuf](/talks/QTechNote%20%231.pdf) (QTechNote)
+{{< talk title="Prise en main de Docker" lang="fr" url="/talks/QTechNote%20Docker.pdf" img="/talks/covers/qtechnote_docker.jpg" event="QTechNote" >}}
+{{< talk title="Prise en main de gRPC/Protobuf" lang="fr" url="/talks/QTechNote%20%231.pdf" img="/talks/covers/qtechnote_grpc.jpg" event="QTechNote" >}}
+{{< /talks >}}

layouts/shortcodes/talk.html

@@ -0,0 +1,34 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $title := .Get "title" }}
+{{ $url := .Get "url" }}
+{{ $img := .Get "img" }}
+{{/* Open external links (slides, event page, code repo) in a new tab. */}}
+{{ $blank := "" }}
+{{ if hasPrefix $url "http" }}{{ $blank = " target=\"_blank\" rel=\"noopener\"" }}{{ end }}
+<div class="col">
+  <div class="card h-100 shadow-sm talk-card">
+    {{ with $img }}
+    <a href="{{ $url }}"{{ $blank | safeHTMLAttr }} aria-hidden="true" tabindex="-1">
+      <img src="{{ . | relURL }}" class="card-img-top" alt="{{ printf "%s — cover slide" $title }}" loading="lazy">
+    </a>
+    {{ end }}
+    <div class="card-body d-flex flex-column">
+      <h3 class="card-title h6">
+        <a href="{{ $url }}"{{ $blank | safeHTMLAttr }} class="text-reset text-decoration-none">{{ $title }}</a>
+      </h3>
+      <p class="card-text small text-body-secondary mb-3">
+        {{ with .Get "event" }}
+          {{ with $.Get "eventurl" }}<a href="{{ . }}"{{ if hasPrefix . "http" }} target="_blank" rel="noopener"{{ end }}>{{ $.Get "event" }}</a>{{ else }}{{ $.Get "event" }}{{ end }}
+        {{ end }}
+        {{ with .Get "year" }} · {{ . }}{{ end }}
+      </p>
+      <div class="mt-auto d-flex flex-wrap gap-2 align-items-center">
+        {{ with .Get "lang" }}<span class="badge text-bg-secondary text-uppercase align-self-center">{{ . }}</span>{{ end }}
+        <span class="ms-auto d-flex flex-wrap gap-2">
+          {{ with .Get "transcript" }}<a href="{{ relref $.Page . }}" class="btn btn-sm btn-outline-secondary talk-action"><i class="fa-solid fa-align-left"></i>{{ if eq $.Page.Language.Lang "fr" }}transcription{{ else }}transcript{{ end }}</a>{{ end }}
+          {{ with .Get "code" }}<a href="{{ . }}"{{ if hasPrefix . "http" }} target="_blank" rel="noopener"{{ end }} class="btn btn-sm btn-outline-secondary talk-action"><i class="fa-solid fa-code"></i>code</a>{{ end }}
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

layouts/shortcodes/talks.html

@@ -0,0 +1,4 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 my-4 talk-deck">
+  {{ .Inner }}
+</div>

static/css/custom.css

@@ -248,3 +248,40 @@ footer .copyright {
 .img-title {
     margin-bottom: 0.75rem;
 }
+
+/* Talks page: card deck of conference slides */
+.talk-deck .talk-card .card-img-top {
+    height: 180px;
+    width: 100%;
+    object-fit: cover;
+    object-position: top center;
+    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, .1));
+}
+
+/* Undo the theme's `.blog-post :first-child { margin-top: 0 }` reset, which
+   strips the Bootstrap grid vertical gutter from the first card and pulls it up. */
+.blog-post .talk-deck > * {
+    margin-top: var(--bs-gutter-y);
+}
+
+.talk-deck .talk-action {
+    display: inline-flex;
+    align-items: center;
+    font-size: .8rem;
+    --bs-btn-padding-y: .2rem;
+    --bs-btn-padding-x: .6rem;
+}
+
+.talk-deck .talk-action i,
+.talk-deck .talk-action svg {
+    font-size: .85em;
+    margin-right: .45em;
+}
+
+.talk-deck .talk-card {
+    transition: transform .15s ease, box-shadow .15s ease;
+}
+
+.talk-deck .talk-card:hover {
+    transform: translateY(-2px);
+}