list available languages and topics for links, and allow for their dynamic display

content/links.md

@@ -5,9 +5,13 @@ page: true
 
 A selection of links to [audio and video recordings](#av), [journalistic articles](#media) I wrote or have been quoted in, some of my [scientific papers](#science), and [organisations I volunteer for](#volunteer).
 
+You can click on the buttons to select only links with the given language or topic.
+
+{{< tags >}}
+
 ## Audio/Video Recordings {#av}
 
-A selection of my presentations and radio shows I participated in. Clicking on the respective icons you can watch the video recording, access the slides and listen to the audio recording. The buttons indicate the spoken language as well as the general topic of the talk.
+A selection of my presentations and radio shows I participated in. By clicking on the respective icons you can watch the video recording, access the slides and listen to the audio recording.
 
 {{< links type="av" >}}
 

data/links.yml

@@ -6,9 +6,8 @@
   links:
     - href: https://www.theregister.co.uk/2019/03/11/eu_directive_ban_rf_radio_firmware_tinkering/
       text: "News @ The Register"
-  tags:
-  - EN
-  - radio lockdown
+  lang: ["EN"]
+  tags: ["radiolockdown"]
 
 - desc: '"Open Source Software: 20-Plus Years of Innovation"'
   type: media
@@ -16,8 +15,7 @@
   links:
     - href: https://www.linuxinsider.com/story/85646.html
       text: "News @ LinuxInsider"
-  tags:
-  - EN
+  lang: ["EN"]
 
 - desc: '"How to push back Google - and optimise Android"'
   type: media
@@ -25,9 +23,8 @@
   links:
     - href: https://www.welt.de/wirtschaft/webwelt/article181237140/Android-Kontrolle-So-verbannen-Sie-Google-vom-Smartphone.html
       text: "News @ WELT"
-  tags:
-  - DE
-  - android
+  lang: ["DE"]
+  tags: ["android"]
 
 - desc: '"Public Money, Public Code pushes for governments to switch to open-source software"'
   type: media
@@ -35,9 +32,8 @@
   links:
     - href: https://www.shareable.net/blog/public-money-public-code-pushes-for-governments-to-switch-to-open-source-software
       text: "News @ Shareable"
-  tags:
-  - EN
-  - publiccode
+  lang: ["EN"]
+  tags: ["publiccode"]
 
 - desc: '"Free Software, Free Society. Why analogue freedom can no longer be thought without digital freedom"'
   type: media
@@ -45,8 +41,7 @@
   links:
     - href: http://www.zurichglobalist.uzh.ch/dam/jcr:3576081b-18a9-4d80-95a9-fcc13071974c/Zurich%20Globalist_Freedom.pdf
       text: "Article @ Zurich Globalist"
-  tags:
-  - DE
+  lang: ["DE"]
 
 - desc: '"Radio Lockdown Directive - Threat for user rights and companies"'
   type: media
@@ -54,9 +49,8 @@
   links:
     - href: https://www.ispa.at/wissenspool/ispa-news.html
       text: Article @ ISPA News
-  tags:
-  - DE
-  - radio lockdown
+  lang: ["DE"]
+  tags: ["radiolockdown"]
 
 - desc: '"About advantages of Free Software and non-techy tech conferences"'
   type: media
@@ -64,8 +58,7 @@
   links:
     - href: https://netzpolitik.org/2016/interview-mit-max-mehl-ueber-die-vorteile-von-freier-software-und-tech-konferenzen-die-keine-sind/
       text: Interview @ Netzpolitik.org
-  tags:
-  - DE
+  lang: ["DE"]
 
 - desc: '"New law lets German internet users connect with their own routers"'
   type: media
@@ -73,9 +66,8 @@
   links:
     - href: https://www.cio.com/article/3101864/new-law-lets-german-internet-users-connect-with-their-own-routers.html
       text: News @ CIO.com
-  tags:
-  - EN
-  - router freedom
+  lang: ["EN"]
+  tags: ["routerfreedom"]
 
 - desc: '"Compulsory Routers abolished - what internet users have to know"'
   type: media
@@ -83,9 +75,8 @@
   links:
     - href: https://www.sueddeutsche.de/wirtschaft/internet-der-routerzwang-endet-was-internetnutzer-jetzt-wissen-muessen-1.3095231
       text: News @ Süddeutsche Zeitung
-  tags:
-  - DE
-  - router freedom
+  lang: ["DE"]
+  tags: ["routerfreedom"]
 
 - desc: '"EU Radio Directive threatens competition and user rights"'
   type: media
@@ -93,9 +84,8 @@
   links:
     - href: https://www.dvtm.net
       text: Article @ DVTM Newsletter
-  tags:
-  - DE
-  - radio lockdown
+  lang: ["DE"]
+  tags: ["radiolockdown"]
 
 - desc: '"Commentary: 10 years Sony Rootkit – Why we should care"'
   type: media
@@ -103,9 +93,8 @@
   links:
     - href: https://www.heise.de/ct/artikel/Kommentar-10-Jahre-Sony-Rootkit-Why-we-should-care-2865608.html
       text: Commentary @ c't magazin
-  tags:
-  - DE
-  - drm
+  lang: ["DE"]
+  tags: ["drm"]
 
 - desc: '"10 years Sony Rootkit: malware by manufacturer"'
   type: media
@@ -113,9 +102,8 @@
   links:
     - href: http://www.heise.de/newsticker/meldung/10-Jahre-Sony-Rootkit-Schadsoftware-vom-Hersteller-2865426.html
       text: Commentary @ heise online
-  tags:
-  - DE
-  - drm
+  lang: ["DE"]
+  tags: ["drm"]
 
 - desc: '"The long road from Compulsory Routers to freedom of choice"'
   type: media
@@ -123,9 +111,8 @@
   links:
     - href: https://netzpolitik.org/2015/der-lange-weg-des-routerzwangs-zur-endgeraetefreiheit/
       text: Article @ Netzpolitik.org
-  tags:
-  - DE
-  - router freedom
+  lang: ["DE"]
+  tags: ["routerfreedom"]
 
 # AUDIO/VIDEO
 
@@ -136,9 +123,8 @@
     - href: https://www.digitale-gesellschaft.ch/kongress/2020/talks/keine_it-sicherheit_ohne_freie_software/
       text: Talk @ Winterkongress DigiGes CH
   slides: https://download.fsfe.org/presentations/20200222-mm-Winterkongress-ITSec.de.pdf
-  tags:
-  - DE
-  - itsec
+  lang: ["DE"]
+  tags: ["itsec"]
 
 - desc: '"Go REUSE to license your code"'
   type: av
@@ -148,9 +134,8 @@
       text: Talk @ FOSDEM
   video: https://www.youtube.com/watch?v=vyAYKROvTO8
   slides: https://download.fsfe.org/presentations/20200202-mm-FOSDEM-REUSE.en.pdf
-  tags:
-  - EN
-  - reuse
+  lang: ["EN"]
+  tags: ["reuse"]
 
 - desc: '"REUSE: Make licensing easy for everyone"'
   type: av
@@ -159,9 +144,8 @@
     - href: https://osseu19.sched.com/event/05a3272287d3def1bcb0a62ace00b730
       text: Talk @ Open Source Summit Europe
   slides: https://download.fsfe.org/presentations/20191028-mm-OSSEU-REUSE.en.pdf
-  tags:
-  - EN
-  - reuse
+  lang: ["EN"]
+  tags: ["reuse"]
 
 - desc: '"No IT security without Free Software"'
   type: av
@@ -171,9 +155,8 @@
       text: Talk @ BalCCon
   video: https://www.youtube.com/watch?v=8SWijSFbMhg
   slides: https://download.fsfe.org/presentations/20190914-mm-BalCCon-ITSec.en.pdf
-  tags:
-  - EN
-  - itsec
+  lang: ["EN"]
+  tags: ["itsec"]
 
 - desc: '"No IT security without Free Software"'
   type: av
@@ -183,9 +166,8 @@
       text: Talk @ Pass the SALT
   video: https://www.youtube.com/watch?v=B0qxm331Q8Q
   slides: https://download.fsfe.org/presentations/20190703-mm-SALT-ITSec.en.pdf
-  tags:
-  - EN
-  - itsec
+  lang: ["EN"]
+  tags: ["itsec"]
 
 - desc: '"IT Security? Free Software!"'
   type: av
@@ -195,9 +177,8 @@
       text: Keynote @ Grazer Linuxtage
   video: https://www.youtube.com/watch?v=DOv_5ZPcFZ8
   slides: https://download.fsfe.org/presentations/20190427-mm-Graz-ITSec.de.pdf
-  tags:
-  - DE
-  - itsec
+  lang: ["DE"]
+  tags: ["itsec"]
 
 - desc: '"Public Code with Free Software: Modernising Public Digital Infrastructure"'
   type: av
@@ -207,9 +188,8 @@
       text: Talk @ BalCCon
   video: https://www.youtube.com/watch?v=tEkCnCtoQ60
   slides: https://download.fsfe.org/presentations/20180915-mm-BalCCon-PMPC.en.pdf
-  tags:
-  - EN
-  - publiccode
+  lang: ["EN"]
+  tags: ["publiccode"]
 
 - desc: '"Public Money? Public Code! - Modernising Digital Public Infrastructure"'
   type: av
@@ -218,9 +198,8 @@
     - href: https://www.drupaleurope.org/session/public-code-free-software-modernising-digital-public-infrastructure
       text: Talk @ DrupalEurope
   slides: https://download.fsfe.org/presentations/20180911-mm-DrupalEurope-PMPC.en.pdf
-  tags:
-  - EN
-  - publiccode
+  lang: ["EN"]
+  tags: ["publiccode"]
 
 - desc: '"Public Money? Public Code! - Modernising Digital Public Infrastructure"'
   type: av
@@ -229,9 +208,8 @@
     - href: 
       text: Talk @ RMLL/LSM
   slides: https://download.fsfe.org/presentations/20180707-mm-RMLL-PMPC.en.pdf
-  tags:
-  - EN
-  - publiccode
+  lang: ["EN"]
+  tags: ["publiccode"]
 
 - desc: '"Sovereignty by Free Software"'
   type: av
@@ -239,9 +217,8 @@
   links:
     - href: 
       text: Talk @ German Armed Forces
-  tags:
-  - DE
-  - publiccode
+  lang: ["DE"]
+  tags: ["publiccode"]
 
 - desc: '"Public Code with Free Software: Modernising Public Digital Infrastructure"'
   type: av
@@ -251,9 +228,8 @@
       text: Keynote @ OW2Con
   video: https://www.youtube.com/watch?v=kQGw25xG_5c
   slides: https://download.fsfe.org/presentations/20180607-mm-OW2Con-PMPC.en.pdf
-  tags:
-  - EN
-  - publiccode
+  lang: ["EN"]
+  tags: ["publiccode"]
 
 - desc: '"EU Radio Equipment Directive: Extensive Device Lockdown"'
   type: av
@@ -262,9 +238,8 @@
     - href: https://fsfe.org/news/2017/news-20170619-01.html
       text: Talk @ Legal and Licensing Workshop
   slides: https://download.fsfe.org/presentations/20170427-mm-LLW-RadioLockdown_verbose.en.pdf
-  tags:
-  - EN
-  - radio lockdown
+  lang: ["EN"]
+  tags: ["radiolockdown"]
 
 - desc: '"Radio Lockdown Directive - Our devices are engangered"'
   type: av
@@ -274,9 +249,8 @@
       text: Talk @ Chemnitzer Linuxtage
   video: https://chemnitzer.linux-tage.de/2017/en/programm/beitrag/266
   slides: https://download.fsfe.org/presentations/20170311-mm-CLT-RadioLockdown.de.pdf
-  tags:
-  - DE
-  - radio lockdown
+  lang: ["DE"]
+  tags: ["radiolockdown"]
 
 - desc: '"Radio Lockdown Directive - Major Threat for Free Software on Radio Devices"'
   type: av
@@ -286,9 +260,8 @@
       text: Talk @ FOSDEM
   video: https://archive.fosdem.org/2017/schedule/event/radio_lockdown_directive/
   slides: https://download.fsfe.org/presentations/20170204-mm-FOSDEM-Radiolockdown.en.pdf
-  tags:
-  - EN
-  - radio lockdown
+  lang: ["EN"]
+  tags: ["radiolockdown"]
 
 - desc: '"Compulsory Routers and Radio Lockdown – What activists can learn from it"'
   type: av
@@ -298,11 +271,8 @@
       text: Talk @ 33. Chaos Communication Congress
   video: https://media.ccc.de/v/33c3-8024-routerzwang_und_funkabschottung
   slides: https://download.fsfe.org/presentations/20161227-mm-33C3-Radio+Router.de.pdf
-  tags:
-  - EN
-  - DE
-  - router freedom
-  - radio lockdown
+  lang: ["EN", "DE"]
+  tags: ["routerfreedom", "radiolockdown"]
 
 - desc: '"No more Compulsory Routers – Free choice of DSL modem and cable modem"'
   type: av
@@ -311,9 +281,8 @@
     - href: https://www.deutschlandfunk.de/dsl-modem-und-kabelrouter-schluss-mit-dem-routerzwang.772.de.html?dram:article_id=362214
       text: Radio Show @ Deutschlandfunk
   audio: https://up.mehl.mx/audio/20160901-dlf-routerzwang.ogg
-  tags:
-  - DE
-  - router freedom
+  lang: ["DE"]
+  tags: ["routerfreedom"]
 
 - desc: '"Compulsory Routers and Radio Lockdown – What activists can learn from it"'
   type: av
@@ -322,10 +291,8 @@
     - href: https://programm.froscon.de/2016/events/1738.html
       text: Talk @ FrOSCon
   video: https://www.youtube.com/watch?v=CdRQtaePiIs
-  tags:
-  - DE
-  - radio lockdown
-  - router freedom
+  lang: ["DE"]
+  tags: ["radiolockdown", "routerfreedom"]
 
 - desc: '"The FSFE uncut"'
   type: av
@@ -333,8 +300,7 @@
   links:
     - href: 
       text: Podcast @ Living Linux
-  tags:
-  - DE
+  lang: ["DE"]
 
 - desc: '"Compulsory Routers and what activists can learn from it"'
   type: av
@@ -343,9 +309,8 @@
     - href: https://chemnitzer.linux-tage.de/2016/de/programm/beitrag/177
       text: Chemnitzer Linuxtage
   video: https://www.youtube.com/watch?v=P5EMZ8VFuME
-  tags:
-  - DE
-  - router freedom
+  lang: ["DE"]
+  tags: ["routerfreedom"]
 
 # SCIENCE
 
@@ -357,8 +322,7 @@
       text: B.A. Thesis
     - href: https://up.mehl.mx/ba/ba-mehl.zip
       text: Data & Code
-  tags:
-  - DE
+  lang: ["DE"]
 
 - desc: '"Once again a surpising crisis?" - Quantitative study of clustering news'
   type: science
@@ -366,8 +330,7 @@
   links:
     - href: https://up.mehl.mx/uni/2014-suprisingnews.zip
       text: Paper & Code
-  tags:
-  - DE
+  lang: ["DE"]
 
 - desc: '"The imprint is still not taken for granted" - Analysis of compliance with the German imprint requirement'
   type: science
@@ -375,8 +338,7 @@
   links:
     - href: https://up.mehl.mx/uni/2014-impressum.zip
       text: Paper & Code
-  tags:
-  - DE
+  lang: ["DE"]
 
 # VOLUNTEER
 

themes/hugo-sustain/layouts/partials/js.html

@@ -1,5 +1,6 @@
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="{{ .Site.BaseURL }}js/jquery-1.11.3.min.js"></script>
+<script src="{{ .Site.BaseURL }}js/filter-tags.js"></script>
 <!-- Bootstrap core JavaScript -->
 <!--<script src="{{ .Site.BaseURL }}js/bootstrap-3.3.7.min.js" ></script>-->
 {{ range .Site.Params.custom_js -}}

themes/hugo-sustain/layouts/shortcodes/links.html

@@ -5,18 +5,22 @@
 {{ end }}
 <ul>
 {{- range sort $data "date" "desc" }}
-  <li>{{.desc}}&nbsp;–&nbsp;
-  {{- $len := (len .links) -}} <!-- amount of elements under .links -->
+  {{- $tags := slice -}}
+  {{- range .lang }}{{ $tags = $tags | append . }}{{ end -}}
+  {{- range .tags }}{{ $tags = $tags | append . }}{{ end -}}
+  <li class="link" tags="{{ delimit $tags " " }}">
+    {{ .desc -}}&nbsp;–&nbsp;
+    {{- $len := (len .links) -}} <!-- amount of elements under .links -->
     {{- range $index, $element := .links -}} <!-- range over links, but keep index -->
-      {{ with .href }}<a href="{{.}}" target="_blank">{{ end }}{{.text}}{{ with .href }}</a>{{end}}
+      {{- with .href }}<a href="{{.}}" target="_blank">{{ end }}{{.text}}{{ with .href }}</a>{{end}}
       {{- if ne (add $index 1) $len -}}, {{- end -}} <!-- only append comma if not last element (index starts with 0) -->
-    {{- end -}}
+    {{ end -}}
     {{- if or (.video) (.audio) (.slides) }},{{ end -}}
     {{ with .video }}&nbsp;<a href="{{ . }}" target="_blank" aria-label="Video Recording"><i class="fas fa-video" aria-hidden="true" title="Video Recording"></i></a>{{ end }}
     {{- with .audio }}&nbsp;<a href="{{ . }}" target="_blank" aria-label="Audio Recording"><i class="fas fa-microphone" aria-hidden="true" title="Audio Recording"></i></a>{{ end }}
     {{ with .slides }}&nbsp;<a href="{{ . }}" target="_blank" aria-label="Slides"><i class="fas fa-desktop" aria-hidden="true" title="Slides"></i></a>{{ end -}}
-    {{- with .date }} ({{.}}){{ end }}
-    {{ range .tags }}<span class="label label-success">{{ . }}</span>&nbsp;{{ end }}
+    {{- with .date }} ({{.}}){{ end -}}
+    {{ range $tags }}&nbsp;<span class="label label-success">{{ . }}</span>{{ end -}}
   </li>
 {{ end }}
 </ul>

themes/hugo-sustain/layouts/shortcodes/tags.html

@@ -0,0 +1,34 @@
+{{- $data := .Site.Data.links -}}
+{{ $scratch := newScratch -}}
+{{- range $data -}}
+  {{- range .tags -}}
+    {{- $scratch.Add "tags" (slice .) -}}
+  {{- end -}}
+  {{- range .lang -}}
+    {{- $scratch.Add "lang" (slice .) -}}
+  {{- end -}}
+{{- end -}}
+<div class="metadata-page">
+  <div class="row vertical-align">
+    <div class="col-xs-3 col-md-2 text-right">
+      <em>Languages:</em>
+    </div>
+    <div class="col-xs-9 col-md-10">
+      <a class="label label-success tag active" tags="all" onclick="selectAllTags()">All</a>
+      {{- range sort ($scratch.Get "lang") | uniq }}
+        <a class="label label-success tag" tags="{{ . }}" onclick="selectTag('{{ . }}')">{{ . }}</a>
+      {{- end -}}
+    </div>
+  </div>
+  <div class="row vertical-align">
+    <div class="col-xs-3 col-md-2 text-right">
+      <em>Topics:</em>
+    </div>
+    <div class="col-xs-9 col-md-10">
+      <a class="label label-success tag active" tags="all" onclick="selectAllTags()">All</a>
+      {{- range sort ($scratch.Get "tags") | uniq }}
+        <a class="label label-success tag" tags="{{ . }}" onclick="selectTag('{{ . }}')">{{ . }}</a>
+      {{- end -}}
+    </div>
+  </div>
+</div>

themes/hugo-sustain/static/js/filter-tags.js

@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Max Mehl <https://mehl.mx>
+ * SPDX-License-Identifier: GPL-3.0-or-later
+*/
+
+function selectTag(tag) {
+  let li_tags = document.querySelectorAll('li.link');
+
+  for (i = 0; i < li_tags.length; i++) {
+    tags = li_tags[i].getAttribute('tags');
+    if (tags.indexOf(tag) !== -1) {
+      li_tags[i].style.display = "list-item";
+    } else {
+      li_tags[i].style.display = "none";
+    }
+  }
+
+  let a_tags = document.querySelectorAll('a.tag');
+
+  for (i = 0; i < a_tags.length; i++) {
+    tags = a_tags[i].getAttribute('tags');
+    if (tags.indexOf(tag) !== -1) {
+      a_tags[i].classList.add("active");
+    } else {
+      a_tags[i].classList.remove("active");
+    }
+  }
+}
+
+function selectAllTags() {
+  let li_tags = document.querySelectorAll('li.link');
+
+  for (i = 0; i < li_tags.length; i++) {
+    li_tags[i].style.display = "list-item";
+  }
+
+  let a_tags = document.querySelectorAll('a.tag');
+
+  for (i = 0; i < a_tags.length; i++) {
+    tags = a_tags[i].getAttribute('tags');
+    if (tags == "all") {
+      a_tags[i].classList.add("active");
+    } else {
+      a_tags[i].classList.remove("active");
+    }
+  }
+}