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

2 years ago · 7be63977ac
6 changed files with 160 additions and 108 deletions
--- a/content/links.md
+++ b/content/links.md
@ -5,9 +5,13 @@ page: true
				@@ -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" >}}

--- a/data/links.yml
+++ b/data/links.yml
@ -6,9 +6,8 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -375,8 +338,7 @@
  links:
    - href: https://up.mehl.mx/uni/2014-impressum.zip
      text: Paper & Code
-  tags:
-  - DE
+  lang: ["DE"]

 # VOLUNTEER

--- a/themes/hugo-sustain/layouts/partials/js.html
+++ b/themes/hugo-sustain/layouts/partials/js.html
@ -1,5 +1,6 @@
				@@ -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 -}}
--- a/themes/hugo-sustain/layouts/shortcodes/links.html
+++ b/themes/hugo-sustain/layouts/shortcodes/links.html
@ -5,18 +5,22 @@
				@@ -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>
--- a/themes/hugo-sustain/layouts/shortcodes/tags.html
+++ b/themes/hugo-sustain/layouts/shortcodes/tags.html
@ -0,0 +1,34 @@
				@@ -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>
--- a/themes/hugo-sustain/static/js/filter-tags.js
+++ b/themes/hugo-sustain/static/js/filter-tags.js
@ -0,0 +1,47 @@
				@@ -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");
+    }
+  }
+}