add team pictures to the focus area pages (#750)

* add team pictures to the focus area pages

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* refactor: move core logic to Ruby

* refactor: use find instead of manual loops

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Henry Schreiner <[email protected]>
Co-authored-by: Henry Schreiner <[email protected]>

Author: 3 people

_includes/list_project_team.html

@@ -10,31 +10,21 @@ <h3>Team</h3>
 {%- endif -%}
 
 {% for contact in include.team %}
-  {% assign written = false %}
-  {% if contact contains "](" %}
+  {% assign person = site.data.people | find: "shortname", contact %}
+
+  {% if person %}
+    {%- if inline and person.e-mail -%}
+      {{ li }} <a href="mailto:{{person.e-mail}}">{{person.name}}</a> {{ eli }}
+    {%- elsif person.website -%}
+      {{ li }} <a href="{{person.website}}">{{ person.name }}</a> {{ eli }}
+    {% else %}
+      {{ li }} {{person.name}} {{ eli }}
+    {% endif %}
   {% elsif contact contains "@" %}
     <a href="mailto:{{contact}}"> <em>{{contact}}</em> </a>
-    {% assign written = true %}
-  {% else %}
-    {% for person_hash in site.data.people -%}
-      {% assign person = person_hash[1] -%}
-      {% if person.shortname == contact %}
-        {%- if inline and person.e-mail -%}
-          {{ li }} <a href="mailto:{{person.e-mail}}">{{person.name}}</a> {{ eli }}
-          {% assign written = true %}
-        {%- elsif person.website -%}
-          {{ li }} <a href="{{person.website}}">{{ person.name }}</a> {{ eli }}
-          {% assign written = true %}
-        {% else %}
-          {{ li }} {{person.name}} {{ eli }}
-          {% assign written = true %}
-        {% endif %}
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-  {% unless written %}
+  {{ else }}
     {{ li }} {{ contact | markdownify | remove: '<p>' | remove: '</p>' }} {{ eli }}
-  {% endunless %}
+  {% endif %}
 {% endfor %}
 
 {%- unless include.inline  %}

_layouts/focus-area.html

@@ -16,6 +16,26 @@
 {% assign page_focus_area = page.name | basename %}
 {% assign sorted = site.pages | smart_page_sort: "focus-area", page_focus_area %}
 
+{% assign fa_team = sorted | get_set: "team" | sort | key_to_value: site.data.people %}
+
+{% unless fa_team.empty %}
+<div class="container-fluid">
+  <div class="row">
+    {% for person in fa_team %}
+    <div class="card" style="font-size:10px;width: 87px;height: 135px;margin-bottom:-15px;">
+      <img style="width: 85px;height: 85px; object-fit:cover;" src="{{person.photo}}"  alt="Card image cap">
+      {%- if person.website -%}
+        <a href="{{person.website}}">{{ person.name }}</a>
+      {%- else -%}
+        {{ person.name }}
+      {%- endif -%}
+      </div>
+    {% endfor %}
+  </div>
+  <br>
+</div>
+{% endunless %}
+
 {% unless sorted.empty %}
 <div class="container-fluid projects">
   <h2 class="alt-h2 text-center mb-3 mt-lg-6" id="projects">{{ page.short_title | upcase }} Projects</h2><br>

_plugins/smart_sort.rb

@@ -7,6 +7,14 @@ def smart_page_sort(input, field, match)
       input.select { |p| p['pagetype'] == 'project' && p[field].include?(match) }
            .sort_by { |p| [p['position'] || 0, p['title'].downcase] }
     end
+
+    def get_set(input, key)
+      input.flat_map { |p| p[key] || [] }.uniq
+    end
+
+    def key_to_value(input, hash)
+      input.map { |k| hash.fetch(k, nil) }.compact
+    end
   end
 end