From e8c481e9d8e70a41b7baee7869e9451ed9e648bb Mon Sep 17 00:00:00 2001
From: filippo-ferrari <filippo.ferrari.pr@gmail.com>
Date: Thu, 8 Feb 2024 20:51:12 +0100
Subject: [PATCH] feat: improved talks.md and talks.html

---
 data/talks.json                               | 27 +++++++-
 .../layouts/shortcodes/talks.html             | 65 +++++++++++++++----
 2 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/data/talks.json b/data/talks.json
index 75c380e..e0807fb 100644
--- a/data/talks.json
+++ b/data/talks.json
@@ -371,7 +371,32 @@
       "url": "https://www.youtube.com/watch?v=r8mtXJh3hzM",
       "duration": "PT43M7S",
       "description": "Microservices are just a bunch hip new framework plus some AngularJS frontend or React, right? So, if you want to make sure that you absolutely and definitely fail at your Microservice project, then watch this talk and learn how. Using real world experience from multiple green field and brown field projects, I can show you: - how to ignore the mandatory organizational impact - how to focus on the code only without any regard towards ops and testing - continuous deployment is for losers. Real projects use their meat cloud for delivery - jumping onto every new and untested framework is a must - EventSourcing and CQRS are both free lunches. So, you can add complexity without any real need - ...and more. If you mind my tips, then surely you will fail at Microservices and your boss will never again try to move away from your beloved vintage monolith.",
-      "liked": true
+      "liked": true,
+      "attended": false
+    },
+    {
+      "title": "From phone hardware to mobile Linux",
+      "speakers": ["Luca Weiss"],
+      "date": "2024-02-03T10:30:00",
+      "location": "Fosdem23",
+      "tags": ["linux", "mobile"],
+      "url": "https://ftp.belnet.be/mirror/FOSDEM/video/2024/h1309/fosdem-2024-2234-from-phone-hardware-to-mobile-linux.mp4",
+      "duration": "PT25M",
+      "description": "An exploration from the chips on the PCB to how Linux makes the phone work. We'll go into how the hardware and the Linux device tree files are connected, how the different chips communicate, etc. Things I wish I had learned years ago!",
+      "liked": true,
+      "attended": true
+    },
+    {
+      "title": "The state of OpenJDK",
+      "speakers": ["Dalibor Topic"],
+      "date": "2024-02-03T10:30:00",
+      "location": "Fosdem23",
+      "tags": ["java"],
+      "url": "https://mirror.as35701.net/video.fosdem.org/2024/ub5132/fosdem-2024-3254-the-state-of-openjdk.mp4",
+      "duration": "PT30M",
+      "description": "A review of the past four years in the life of the OpenJDK Community, and a look at what’s ahead.",
+      "liked": true,
+      "attended": true
     }
   ]
 }
diff --git a/themes/hugo-theme-console/layouts/shortcodes/talks.html b/themes/hugo-theme-console/layouts/shortcodes/talks.html
index a42a9ae..1cf7218 100644
--- a/themes/hugo-theme-console/layouts/shortcodes/talks.html
+++ b/themes/hugo-theme-console/layouts/shortcodes/talks.html
@@ -1,15 +1,54 @@
 {{ $json := getJSON "data/talks.json" }}
-<ul>
-{{ range $json.talks }}
-    <li>
-        <h2>{{ .title }}</h2>
-        <p><strong>Subtitle:</strong> {{ .subtitle }}</p>
-        <p><strong>Speakers:</strong> {{ range .speakers }}{{ . }}, {{ end }}</p>
-        <p><strong>Location:</strong> {{ .location }}</p>
-        <p><strong>URL:</strong> <a href="{{ .url }}">{{ .url }}</a></p>
-        <p><strong>Liked:</strong> {{ .liked }}</p>
-        <p><strong>Attended:</strong> {{ .attended }}</p>
-    </li>
-{{ end }}
-</ul>
+
+<!-- Extract unique locations -->
+{{ $locations := slice }}
+{{ range $json.talks }}
+    {{ $location := .location }}
+    {{ if not (in $locations $location) }}
+        {{ $locations = $locations | append $location }}
+    {{ end }}
+{{ end }}
+
+<!-- Display location buttons -->
+<div id="locationButtons">
+    {{ range $locations }}
+        <button class="locationButton" data-location="{{ . }}">{{ . }}</button>
+    {{ end }}
+</div>
+An exploration from the chips on the PCB to how Linux makes the phone work. We'll go into how the hardware and the Linux device tree files are connected, how the different chips communicate, etc. Things I wish I had learned years ago!
+<!-- Display talks for each location -->
+{{ range $locations }}
+    <div class="talksContainer" id="talks_{{ . }}" style="display: none;">
+        <h2>{{ . }}</h2>
+        <ul>
+            {{ $currentLocation := . }}
+            {{ range $json.talks }}
+              {{ if eq .location $currentLocation }}
+                <li>
+                    <strong>Title:</strong> {{ .title }}<br>
+                    <strong>Subtitle:</strong> {{ .subtitle }}<br>
+                    <strong>Speaker:</strong> {{ .speaker }}<br>
+                    <strong>Date:</strong> {{ .date }}<br>
+                    <strong>URL:</strong> <a href="{{ .url }}">{{ .url }}</a><br>
+                    <strong>Description:</strong> {{ .description }}<br>
+                    <br>
+                </li>              
+                {{ end }}
+            {{ end }}
+        </ul>
+    </div>
+{{ end }}
+
+<script>
+    // Add click event listener to location buttons
+    var locationButtons = document.getElementsByClassName("locationButton");
+    for (var i = 0; i < locationButtons.length; i++) {
+        locationButtons[i].addEventListener('click', function() {
+            var location = this.dataset.location;
+            var talksContainer = document.getElementById("talks_" + location);
+            // Toggle visibility of talks container
+            talksContainer.style.display = talksContainer.style.display === "none" ? "block" : "none";
+        });
+    }
+</script>