Links en iconen voor social media toevoegen en corrigeren

config/_default/params.toml

@@ -13,8 +13,14 @@ logo = "/assets/favicon.ico"
 
 # Grootte van iconen (SVG-bestanden) zoals van social media
 smallIconSize = 16
+mediumIconSize = 32
 
 # Kanarie: Deze tekst (en vogel) gebruiken we om lege waardes op te sporen in output
 textNoTitle = "Geen titel 🐦"
 
+# Social
+mastodon_instance = "https://nluug.social/"
+mastodon_handle = "nluug"
+twitter_handle = "nluug"
+
 # EOF

themes/nluug/layouts/partials/footer.html

@@ -1,14 +1,24 @@
 <footer>
 
   <h2>Help mee</h2>
-  {{ with .File }}<a class="button" href="https://github.com/NLUUG/website/edit/main/content/{{ .Path }}">Verbeter deze pagina</a>{{ end }}
+  {{ with .File }}<a class="btn btn-cta" href="https://github.com/NLUUG/website/edit/main/content/{{ .Path }}">Verbeter deze pagina</a>{{ end }}
 
   <h2>Volg ons</h2>
+  {{ $iconsize := .Site.Params.mediumIconSize }}
+  {{ with .Site.Params.twitter_handle }}
+    <a href="https://twitter.com/{{ . }}"><img src="/afbeeldingen/iconen/twitter.svg" height="{{ $iconsize }}" width="{{ $iconsize }}" alt="Twitter"></a>
+  {{ end }}
+  {{ if and
+    (.Site.Params.mastodon_handle)
+    (.Site.Params.mastodon_instance)
+  }}
+    <a href="{{ .Site.Params.mastodon_instance }}@{{ .Site.Params.mastodon_handle }}"><img src="/afbeeldingen/iconen/mastodon.svg" height="{{ $iconsize }}" width="{{ $iconsize }}" alt="Mastodon"></a>
+  {{ end }}
   <p>Beschikbare feeds:
 <a href="{{ absURL "atom.xml" }}">Atom</a> | <a href="{{ absURL "feed.json" }}">JSON</a>
-{{ with .Site.GetPage "/website/laatste-wijzigingen.rst" }}| <a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}
+{{ with .Site.GetPage "/website/laatste-wijzigingen.rst" }} | <a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}
-{{ with .Site.GetPage "/website" }}| <a href="{{ .Permalink }}">Website details</a>{{ end }}
+{{ with .Site.GetPage "/website/sitemap" }} | <a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}
-  </p>
+</p>
 
 {{ if .Site.IsServer }}
   <div style="background-color: yellow;">

themes/nluug/layouts/person/single.html

@@ -1,5 +1,4 @@
 {{ define "main" }}
-  {{ $icon_size := 20 }}
   {{ $text := .Content }}
   {{ with (index .Site.Data.personen (substr $.File.LogicalName 0 -4)) }}
     {{ if .thumbnail }}<img src="{{ .thumbnail }}" alt="Foto van {{ .name }}">{{ end }}
@@ -9,7 +8,7 @@
     {{ if .email }}<li>E-mail: {{ .email }}</li>{{ end }}
     {{ if .websites }}
         {{ range .websites }}
-          <li><a href="{{ .url }}" rel="nofollow">{{ .name }}</a></li>
+          <li><a href="{{ .url }}" rel="nofollow noopener">{{ .name }}</a></li>
           {{ end }}
     {{ end }}
     </ul>
@@ -19,12 +18,13 @@
       (.social.twitter)
     }}
       <h3>Social media</h3>
+
       <ul class="list">
       {{ if .social.mastodon }}
-      <li><a href="{{ .social.mastodon_url }}"><img src="/afbeeldingen/iconen/mastodon.svg" height="{{ $icon_size }}" width="{{ $icon_size }}" alt="Mastodon" /> {{ .social.mastodon }}</a></li>
+        <li><img src="/afbeeldingen/iconen/mastodon.svg" height="{{ $.Site.Params.smallIconSize }}" width="{{ $.Site.Params.smallIconSize }}" alt="Mastodon"> <a href="{{ .social.mastodon_url }}">{{ .social.mastodon }}</a></li>
       {{ end }}
       {{ if .social.twitter }}
-      <li><a href="https://twitter.com/{{ .social.twitter }}"><img src="/afbeeldingen/iconen/twitter.svg" height="{{ $icon_size }}" width="{{ $icon_size }}" alt="Twitter" /> {{ .social.twitter }}</a></li>
+        <li><img src="/afbeeldingen/iconen/twitter.svg" height="{{ $.Site.Params.smallIconSize }}" width="{{ $.Site.Params.smallIconSize }}" alt="Twitter"> <a href="https://twitter.com/{{ .social.twitter }}">{{ .social.twitter }}</a></li>
       {{ end }}
       </ul>
     {{ end }}