From 06bdcf83529a012bd16ed9e95463cd4cb96ce46d Mon Sep 17 00:00:00 2001
From: Thibault Martin <thibaultamartin@users.noreply.github.com>
Date: Tue, 19 Mar 2024 17:43:28 +0100
Subject: [PATCH] Staff socials (#2244)

* Simplify templates

* Add staff socials
---
 content/about/staff.toml            | 10 +++++++++-
 sass/_about-bios.scss               | 28 ++++++++++++++++++++--------
 templates/shortcodes/guardians.html | 10 +---------
 templates/shortcodes/staff.html     | 15 ++++++---------
 4 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/content/about/staff.toml b/content/about/staff.toml
index 1296dc7b3..815ca6d62 100644
--- a/content/about/staff.toml
+++ b/content/about/staff.toml
@@ -2,6 +2,9 @@
 name = "Josh Simmons"
 title = "Managing Director"
 picture = "josh.jpg"
+website = "https://joshsimmons.com/"
+linkedin = "https://www.linkedin.com/in/joshsimmons/"
+fediverse = "https://josh.tel/@josh"
 bio = """
 Josh is a community organiser, web developer, nonprofit geek, and activist based in Petaluma, California. Best known for his time in leadership at the Open Source Initiative, Josh is also Vice President of Petaluma Pride, author of the Public Health Pledge, and an advisor to Independent Federated Trust & Safety (IFTAS). In the past, Josh has worked in community-facing roles focused on open source at Tidelift, Salesforce, Google, and O’Reilly Media.
 """
@@ -18,6 +21,9 @@ Jim brings a calm optimism to building a safer, kinder Internet. He has worked w
 name = "Thibault Martin"
 title = "Director of Program Development"
 picture = "thibault.jpg"
+website = "https://ergaster.org"
+linkedin = "https://www.linkedin.com/in/thibault-martin-84a6522a3/"
+fediverse = "https://mamot.fr/@thibaultamartin"
 bio = """
 Thib has as many silent letters in his first name as regular ones. He is a chronic enthusiast who believes software should improve people's lives but doesn't fall for techno-solutionism. Thib connects the Foundation's strategy and delivery by overseeing programmes. He ensures that the programmes stay on track and that they feed the vision of the Foundation in return.
 """
@@ -34,6 +40,8 @@ Travis is an avid volunteer, free software developer, Spec Core Team (SCT) membe
 name = "Denise Almeida"
 title = "Data Protection Officer"
 picture = "denise.jpg"
+website = "https://denisealcom.wordpress.com/"
+linkedin = "https://www.linkedin.com/in/denisersalmeida/"
 bio = """
 Denise is passionate about justice and inclusion, which translates into her work in public policy and compliance. She has been working for Element, and Matrix.org, since early 2020 as their designated DPO and compliance lead. Denise is also in the final stages of her PhD, which focuses on the intersection of privacy, privilege and technology.
-"""
\ No newline at end of file
+"""
diff --git a/sass/_about-bios.scss b/sass/_about-bios.scss
index 41ce2baa5..0bde99433 100644
--- a/sass/_about-bios.scss
+++ b/sass/_about-bios.scss
@@ -1,21 +1,33 @@
 .guardian,
 .staff {
     display: flex;
+    flex-direction: row;
     align-items: flex-start;
     margin: 2.5em 0;
+    gap: 1.25rem;
+
+    &.reverse {
+        flex-direction: row-reverse;
+    }
+
+    .staff-details {
+        p {
+            margin-block: 0;
+        }
+
+        .socials {
+            display: flex;
+            flex-direction: row;
+            padding-inline: 0;
+            list-style: none;
+            gap: .6em
+        }
+    }
 
     img {
         width: 128px;
         max-width: 25vw;
         border-radius: 100%;
-
-        &:first-child {
-            margin-right: 20px;
-        }
-
-        &:last-child {
-            margin-left: 20px;
-        }
     }
 }
 
diff --git a/templates/shortcodes/guardians.html b/templates/shortcodes/guardians.html
index a8d56c3c0..deba527ac 100644
--- a/templates/shortcodes/guardians.html
+++ b/templates/shortcodes/guardians.html
@@ -1,20 +1,12 @@
 <div>
     {% set guardians_data = load_data(path="content/about/guardians.toml") %}
     {% for guardian in guardians_data.guardians %}
-    <div class="guardian">
-        {% if loop.index % 2 == 0 %}
+    <div class="guardian {% if loop.index % 2 != 0 %}reverse{% endif %}">
         <div class="guardian-details">
             <h4 class="guardian-name">{{ guardian.name }}</h4>
             <p>{{ guardian.bio }}</p>
         </div>
         <img src="/about/{{ guardian.picture }}" alt="Portrait of {{ guardian.name }}" />
-        {% else %}
-        <img src="/about/{{ guardian.picture }}" alt="Portrait of {{ guardian.name }}" />
-        <div>
-            <h4 class="guardian-name">{{ guardian.name }}</h4>
-            <p>{{ guardian.bio }}</p>
-        </div>
-        {% endif %}
     </div>
     {% endfor %}
 </div>
diff --git a/templates/shortcodes/staff.html b/templates/shortcodes/staff.html
index 9c1e6822d..bad5f1074 100644
--- a/templates/shortcodes/staff.html
+++ b/templates/shortcodes/staff.html
@@ -1,20 +1,17 @@
 <div>
     {% set staff_data = load_data(path="content/about/staff.toml") %}
     {% for staff in staff_data.staff %}
-    <div class="staff">
-        {% if loop.index % 2 == 0 %}
+    <div class="staff {% if loop.index % 2 != 0 %}reverse{% endif %}">
         <div class="staff-details">
             <h4 class="staff-name">{{ staff.name }}, {{ staff.title }}</h4>
             <p>{{ staff.bio }}</p>
+            <ul class="socials">
+                {% if staff.website %}<li><a href="{{ staff.website }}">Website</a></li>{% endif %}
+                {% if staff.linkedin %}<li><a href="{{staff.linkedin}}">LinkedIn</a></li>{% endif %}
+                {% if staff.fediverse %}<li><a href="{{ staff.fediverse }}">Fediverse</a></li>{% endif %}
+            </ul>
         </div>
         <img src="/about/{{ staff.picture }}" alt="Portrait of {{ staff.name }}" />
-        {% else %}
-        <img src="/about/{{ staff.picture }}" alt="Portrait of {{ staff.name }}" />
-        <div>
-            <h4 class="staff-name">{{ staff.name }}, {{ staff.title }}</h4>
-            <p>{{ staff.bio }}</p>
-        </div>
-        {% endif %}
     </div>
     {% endfor %}
 </div>