refactor: Restructure member rendering

Member rendering refactored to use partials and re-use the same code for both current and former members. Additionally redo the avatar URL linking to be consistent.
justcatthefish · Jun 20, 2024 · 0f7d4e9 · 0f7d4e9
1 parent 5ed824a
commit 0f7d4e9
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,11 @@
 # website
 ## Local test
+
+### With docker
+`docker compose up`
+
+### Without docker
+
 Install [hugo](https://gohugo.io/), then start the server
 ```bash
 hugo server

diff --git a/compose.yml b/compose.yml
@@ -0,0 +1,10 @@
+services:
+  overlays:
+    image: hugomods/hugo:latest
+    volumes:
+      - "./:/src/"
+    command: [
+      "hugo", "server", "--disableFastRender", "--bind", "0.0.0.0",
+    ]
+    ports:
+      - "1313:1313"
diff --git a/layouts/partials/member-image.html b/layouts/partials/member-image.html
@@ -0,0 +1,14 @@
+      {{- if .gravatar }}
+          {{ $avatar := printf "https://gravatar.com/avatar/%s.jpg?s=142" .gravatar }}
+          {{ $image := resources.GetRemote $avatar}}
+          <img class="avatar" src="{{ $image.RelPermalink }}" />
+      {{ else }}
+        {{ $avatar := printf "avatars/%s.png" .name  }}
+        {{ $image := resources.Get $avatar }}
+        {{- if $image }}
+          {{ $image := $image.Process "fit 200x200" }}
+          <img class="avatar" src="{{ $image.RelPermalink }}" />
+        {{ else }}
+          <img class="blank-avatar" src="/blank_avatar.png" alt="No avatar image" />
+        {{end -}}
+      {{end -}}
diff --git a/layouts/partials/member.html b/layouts/partials/member.html
@@ -0,0 +1,16 @@
+    <li>
+      {{- if .link }}
+        <a href="{{ .link }}">
+          {{- partial "member-image" . }}
+        </a>
+      {{- else }}
+        {{- partial "member-image" . }}
+      {{ end -}}
+      <h4 class="member-name">
+          {{- if .link }}<a href="{{ .link }}"><u>{{ .name }}</u></a>{{ else }}{{ .name }}{{ end -}}
+      </h4>
+      <div class="member-tags">
+          {{- range .tags }}<span class="tag tag-{{ . }}">{{ . }}</span>{{ end -}}
+      </div>
+      <p class="member-desc">{{ .bio | markdownify }}</p>
+    </li>
diff --git a/layouts/shortcodes/memberlist.html b/layouts/shortcodes/memberlist.html
@@ -8,51 +8,15 @@
 
 <ul class="member-list">
     {{ range .Site.Data.members.current }}
-    <li>
-      {{- if .gravatar }}
-        <a href="{{ .link }}">
-          {{ $avatar := printf "https://gravatar.com/avatar/%s.jpg?s=142" .gravatar }}
-          {{ $image := resources.GetRemote $avatar}}
-          <img class="avatar" src="{{ $image.RelPermalink }}" />
-        </a>
-      {{ else }}
-        {{ $avatar := printf "avatars/%s.png" .name  }}
-        {{ $image := resources.Get $avatar }}
-        {{- if $image }}
-          {{ $image := $image.Process "fit 200x200" }}
-            <a href="{{ .link }}">
-              <img class="avatar" src="{{ $image.RelPermalink }}" />
-            </a>
-        {{ else }}
-          <img class="blank-avatar" src="/blank_avatar.png" alt="No avatar image" />
-        {{end -}}
-      {{end -}}
-      <h4 class="member-name">
-          {{- if .link }}<a href="{{ .link }}"><u>{{ .name }}</u></a>{{ else }}{{ .name }}{{ end -}}
-      </h4>
-      <div class="member-tags">
-          {{- range .tags }}<span class="tag tag-{{ . }}">{{ . }}</span>{{ end -}}
-      </div>
-      <p class="member-desc">{{ .bio | markdownify }}</p>
-    </li>
+      {{ partial "member" . }}
     {{ end }}
 </ul>
 
 <details>
     <summary class="former-details-header member-former-header">Former</summary>
     <ul class="member-list">
         {{ range .Site.Data.members.former }}
-        <li>
-            <h4 class="member-name">
-                {{- if .link }}<a href="{{ .link }}">{{ .name }}</a>{{ else }}{{ .name }}{{ end -}}
-            </h4>
-            {{/*
-            <div class="member-tags">
-                {{- range .tags }}<span class="tag tag-{{ . }}">{{ . }}</span>{{ end -}}
-            </div>
-            <p class="member-desc">{{ .bio | markdownify }}</p>
-            */}}
-        </li>
+          {{ partial "member" . }}
         {{ end }}
     </ul>
 </details>