Use grid of cards for team gallery (#510)

Author: jarrodmillman

Makefile

@@ -2,23 +2,23 @@
 .DEFAULT_GOAL := doc-serve
 
 GH_ORG = scientific-python
-TEAMS_DIR = doc/static/teams
+TEAMS_DIR = doc/content/about
 TEAMS = theme-team
 TEAMS_QUERY = python tools/team_query.py
 
 $(TEAMS_DIR):
 	mkdir -p $(TEAMS_DIR)
 
-$(TEAMS_DIR)/%.md: $(TEAMS_DIR)
+$(TEAMS_DIR)/%.toml: $(TEAMS_DIR)
 	$(eval TEAM_NAME=$(shell python -c "import re; print(' '.join(x.capitalize() for x in re.split('-|_', '$*')))"))
-	$(TEAMS_QUERY) --org $(GH_ORG) --team "$*"  >  $(TEAMS_DIR)/$*.html
+	$(TEAMS_QUERY) --org $(GH_ORG) --team "$*"  >  $(TEAMS_DIR)/$*.toml
 
 teams-clean:
 	for team in $(TEAMS); do \
-	  rm -f $(TEAMS_DIR)/$${team}.html ;\
+	  rm -f $(TEAMS_DIR)/$${team}.toml ;\
 	done
 
-teams: | teams-clean $(patsubst %,$(TEAMS_DIR)/%.md,$(TEAMS))
+teams: | teams-clean $(patsubst %,$(TEAMS_DIR)/%.toml,$(TEAMS))
 
 doc/content/shortcodes.md: $(wildcard layouts/shortcodes/*.html)
 	(cd layouts && python ../tools/render_shortcode_docs.py > ../doc/content/shortcodes.md)

doc/content/about/_index.md

@@ -7,4 +7,4 @@ The **Scientific Python Hugo Theme** is a theme for the
 [Hugo](https://gohugo.io) static site generator built on the
 [Fresh](https://github.com/StefMa/hugo-fresh) theme.
 
-{{< include-html "static/teams/theme-team.html" >}}
+{{< grid1 file="theme-team.toml" columns="2 3 4 5" />}}

doc/content/about/theme-team.toml

@@ -0,0 +1,44 @@
+[[item]]
+type = 'card'
+header = 'Adam Porter'
+body = '''{{< image >}}
+src = 'https://avatars.githubusercontent.com/u/601365?v=4"'
+alt = 'Avatar of Adam Porter'
+{{< /image >}}'''
+link = 'https://github.com/alphapapa'
+
+[[item]]
+type = 'card'
+header = 'Brian Hawthorne'
+body = '''{{< image >}}
+src = 'https://avatars.githubusercontent.com/u/352264?u=1fd523aa28b0451454989400579d97a8c1bc1b9a&v=4"'
+alt = 'Avatar of Brian Hawthorne'
+{{< /image >}}'''
+link = 'https://github.com/brianhawthorne'
+
+[[item]]
+type = 'card'
+header = 'Jarrod Millman'
+body = '''{{< image >}}
+src = 'https://avatars.githubusercontent.com/u/123428?v=4"'
+alt = 'Avatar of Jarrod Millman'
+{{< /image >}}'''
+link = 'https://github.com/jarrodmillman'
+
+[[item]]
+type = 'card'
+header = 'Stefan van der Walt'
+body = '''{{< image >}}
+src = 'https://avatars.githubusercontent.com/u/45071?u=c779b5e06448fbc638bc987cdfe305c7f9a7175e&v=4"'
+alt = 'Avatar of Stefan van der Walt'
+{{< /image >}}'''
+link = 'https://github.com/stefanv'
+
+[[item]]
+type = 'card'
+header = 'Pamphile Roy'
+body = '''{{< image >}}
+src = 'https://avatars.githubusercontent.com/u/23188539?u=64445b52dbf3f75de8006ed4264fdd2afaed97a3&v=4"'
+alt = 'Avatar of Pamphile Roy'
+{{< /image >}}'''
+link = 'https://github.com/tupui'

doc/static/teams/theme-team.html

@@ -61,38 +61,22 @@ def api(query):
 members = resp["data"]["organization"]["team"]["members"]["nodes"]
 team_name = resp["data"]["organization"]["team"]["name"]
 
-team_template = string.Template(
-    """\
-<div class="team">
-  <h3 id="${team}" class="team-name">${team_name}</h3>
-  <div class="team-members">
-${members}
-  </div>
-</div>"""
-)
-
 member_template = string.Template(
     """\
-    <div class="team-member">
-      <a href="${url}" class="team-member-name">
-        <div class="team-member-photo">
-          <img
-            src="${avatarUrl}"
-            loading="lazy"
-            alt="Avatar of ${name}"
-          />
-        </div>
-        ${name}
-      </a>
-    </div>"""
+[[item]]
+type = 'card'
+header = '${name}'
+body = '''{{< image >}}
+src = '${avatarUrl}"'
+alt = 'Avatar of ${name}'
+{{< /image >}}'''
+link = '${url}'
+"""
 )
 
 members_list = []
 for m in members:
     m["name"] = m["name"] or m["login"]
     members_list.append(member_template.substitute(**m))
 
-members_str = "".join(members_list)
-team_str = team_template.substitute(members=members_str, team=team, team_name=team_name)
-
-print(team_str)
+print("\n".join(members_list).rstrip())