Reeks aan verbeteringen om actieve leden en teamleden te tonen

content/organisatie/_index.rst

@@ -8,6 +8,21 @@ tags:
 - organisatie
 slug:
 title: "Organisatie"
+active_members:
+- brenda-langedijk
+- debbie-reijnders
+- fred-donck
+- hans-van-de-looy
+- jan-sepp
+- jeroen-jonkman
+- koen-de-jonge
+- mark-janssen
+- michael-boelen
+- patrick-reijnen
+- rogier-spoor
+- ronny-lam
+- rudi-van-drunen
+- willem-toorop
 ---
 
 Op dagelijkse basis zijn vrijwilligers actief binnen onze vereniging. De taken variëren van ledenadministratie tot aan het vinden van nieuwe sprekers. Ook niet geheel belangrijk zijn de activiteiten die verricht worden door ons bestuur en ondersteuning van de diverse commissies.
@@ -36,4 +51,4 @@ De PR-Commissie regelt de volledige communicatie rondom evenementen en andere ve
 
 Beheerteam
 ----------
-Dit team onderhoud de diverse sites en systemen van NLUUG
+Dit team onderhoud de diverse sites en systemen van NLUUG

content/organisatie/personen/_index.rst

@@ -1,4 +1,5 @@
 ---
 cascade:
   type: person
+title: "Actieve leden"
 ---

data/personen/jan-sepp.json

@@ -0,0 +1,16 @@
+{
+  "id": "jan-sepp",
+  "name": "Jan Sepp",
+  "email": "",
+  "gender": "male",
+  "nationality": "Dutch",
+  "thumbnail": "/afbeeldingen/personen/jan-sepp-200x200.jpg",
+  "social": {
+    "github": "",
+    "instagram": "",
+    "linkedin": "",
+    "mastodon": "",
+    "mastodon_url": "",
+    "twitter": ""
+  }
+}

data/personen/mark-janssen.json

@@ -0,0 +1,16 @@
+{
+  "id": "mark-janssen",
+  "name": "Mark Janssen",
+  "email": "",
+  "gender": "male",
+  "nationality": "Dutch",
+  "thumbnail": "/afbeeldingen/personen/mark-janssen-200x200.jpg",
+  "social": {
+    "github": "",
+    "instagram": "",
+    "linkedin": "",
+    "mastodon": "",
+    "mastodon_url": "",
+    "twitter": ""
+  }
+}

data/personen/michael-boelen.json

@@ -1,9 +1,10 @@
 {
+  "id": "michael-boelen",
   "name": "Michael Boelen",
-  "thumbnail": "",
   "email": "michael@nluug.nl",
   "gender": "male",
   "nationality": "Dutch",
+  "profile_page": "/organisatie/personen/michael-boelen/",
   "thumbnail": "/afbeeldingen/personen/michael-boelen-200x200.png",
   "websites": [{
     "id": 1,
@@ -15,11 +16,12 @@
     "url": "https://linux-audit.com/"
   }],
   "social": {
+    "facebook": "",
     "github": "mboelen",
-    "twitter": "mboelen",
     "instagram": "",
     "linkedin": "michael-boelen",
     "mastodon": "@mboelen@mastodon.social",
-    "mastodon_url": "https://mastodon.social/@mboelen"
+    "mastodon_url": "https://mastodon.social/@mboelen",
+    "twitter": "mboelen"
   }
 }

data/personen/ronny-lam.json

@@ -0,0 +1,16 @@
+{
+  "id": "ronny-lam",
+  "name": "Ronny Lam",
+  "email": "",
+  "gender": "male",
+  "nationality": "Dutch",
+  "thumbnail": "/afbeeldingen/personen/ronny-lam-200x200.jpg",
+  "social": {
+    "github": "",
+    "instagram": "",
+    "linkedin": "",
+    "mastodon": "",
+    "mastodon_url": "",
+    "twitter": ""
+  }
+}

static/afbeeldingen/iconen/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>

static/afbeeldingen/iconen/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>

static/afbeeldingen/iconen/mastodon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>

static/afbeeldingen/iconen/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>

themes/nluug/assets/scss/styles.scss

@@ -33,6 +33,23 @@ body {
   top: 0;
 }
 
+figure {
+  margin-inline-start: 10px;
+  margin-inline-end: 10px;
+}
+
+.grid-team-members {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 1px;
+}
+
+.grid-team-members-small-photos {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  column-gap: 1px;
+}
+
 h1, h2, h3, h4, h5, strong, b {
     font-size: inherit;
     font-weight: 600;

themes/nluug/layouts/organisatie/section.html

@@ -1,12 +1,20 @@
 {{ define "main" }}
   {{ .Content }}
+
+  <section>
+  <h2>Actieve leden</h2>
+  {{ if .Params.active_members }}
+  {{ .Scratch.Set "active_members" .Params.active_members }}
+  {{ partial "show-active-members-small.html" . }}
+  {{ end }}
+  </section>
+
   <section>
     <p>Relevante pagina's:</p>
-    <ul class="list">
+    <ul>
       {{ range .Pages }}
         <li>
-          <a class="link" href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}
-          </a>
+          <a class="link" href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title | default "Geen titel" }}</a>
         </li>
         {{ end }}
     </ul>

themes/nluug/layouts/partials/show-active-members-small.html

@@ -0,0 +1,23 @@
+
+{{ $size_in_pixels := 150 }}
+
+<div class="grid-team-members-small-photos">
+  {{ range $key,$val := .Scratch.Get "active_members" }}
+      {{ with (index $.Site.Data.personen .) }}
+        <div>
+            {{ if .thumbnail }}
+              <figure>
+                {{ if .profile_page }}
+                  <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}" /></a>
+                {{ else }}
+                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}" />
+                {{ end }}
+                <figcaption>
+                  <small><strong>{{ .name }}</strong></small>
+                </figcaption>
+              </figure>
+            {{ end }}
+        </div>
+      {{ end }}
+    {{ end }}
+  </div>

themes/nluug/layouts/person/single.html

@@ -14,6 +14,11 @@
     {{ end }}
     </ul>
     <h3>Social media</h3>
-    {{ if .social.mastodon }}<a href="{{ .social.mastodon_url }}">{{ .social.mastodon }}</a>{{ end }}
+    {{ if .social.mastodon }}
+      <a href="{{ .social.mastodon_url }}">{{ .social.mastodon }}</a><img src="/afbeeldingen/iconen/mastodon.svg" height="200" width="200" alt="Mastodon" /></a>
+    {{ end }}
+    {{ if .social.twitter }}
+    <a href="https://twitter.com/{{ .social.twitter }}">{{ .social.twitter }}</a><img src="/afbeeldingen/iconen/twitter.svg" height="200" width="200" alt="Twitter" /></a>
+    {{ end }}
   {{ end }}
 {{ end }}

themes/nluug/layouts/team/single.html

@@ -9,13 +9,17 @@
 
   <h2>Team</h2>
 
-  <div style="display: grid;grid-template-columns: 1fr 1fr 1fr;column-gap: 5px;">
+  <div class="grid-team-members">
     {{ range $key,$val := .Params.team_members }}
       {{ with (index $.Site.Data.personen $val) }}
         <div>
             {{ if .thumbnail }}
               <figure>
-                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" />
+                {{ if .profile_page }}
+                  <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" /></a>
+                {{ else }}
+                  <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" />
+                {{ end }}
                 <figcaption>
                   <strong>{{ .name }}</strong>
                 </figcaption>