site/themes/hugo-theme-console/layouts/shortcodes/talks.html

{{ $json := getJSON "data/talks.json" }}

<!-- 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>