Staff socials (#2244)

* Simplify templates

* Add staff socials

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.
-"""
+"""

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;
-        }
     }
 }
 

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>

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>