CHANGE team list: Make number of team members on front page configurable

assets/build/convImages.sh

@@ -20,12 +20,12 @@ for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
     NAME=$(basename "$FILE" | cut -d. -f1)
     EXTENSION=$(basename "$FILE" | cut -d. -f2)
     for size in ${sizes[@]}; do
-        convert "$FILE" -resize ${size}x${size}\> "${DIR}/${NAME}-${size}.${EXTENSION}" 
+        magick convert "$FILE" -resize ${size}x${size}\> "${DIR}/${NAME}-${size}.${EXTENSION}" 
     done
 done
 
 # Web Optimized Formats
 for FILE in public/**/*.@(jpg|jpeg|tif|tiff|png|gif); do 
-    convert $PARAMS "$FILE" "${FILE}".webp;
-    convert $PARAMS "$FILE" "${FILE}".avif;
-done
+    magick convert $PARAMS "$FILE" "${FILE}".webp;
+    magick convert $PARAMS "$FILE" "${FILE}".avif;
+done

assets/build/genIco.sh

@@ -6,4 +6,4 @@
 # 1. The path of the source file
 # 2. The output path (with .ico extension)
 
-convert -density 300 -define icon:auto-resize=96,64,48,32,16 -background none $1 $2
+magick convert -density 300 -define icon:auto-resize=96,64,48,32,16 -background none $1 $2

assets/scss/index.scss

@@ -207,25 +207,30 @@ img {
 .team {
   align-items: center;
   text-align: center;
-}
-
-.team-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  a {
-    color: inherit;
-    margin: 0 auto;
+  .list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+    a {
+      color: inherit;
+      margin: 0 auto;
+      .member {
+        display: inline-block;
+        align-items: center;
+        text-align: center;
+        padding: 1rem;
+        .title {
+          font-size: x-large;
+          padding-bottom: 0.1rem;
+          text-align: center;
+        }
+      }
+    }
   }
 }
 
-.teammember {
-  display: inline-block;
-  align-items: center;
-  text-align: center;
-  padding: 1rem;
-}
-
 .avatar {
   width: 15rem;
   height: 15rem;

layouts/partials/team.html

@@ -8,11 +8,13 @@
 {{else if .id}}
     {{- $id = .id }}
 {{end}}
+{{- $members := where $pages "Params.leaveDate" "==" nil}}
+{{- $first := $team.first | default 4}}
 <div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}}">
     <div class="section-content team">
         {{ partial "components/title.html" $team.title }}
         <div class="list">
-            {{- range first 4 ((where $pages "Params.leaveDate" "==" nil).ByParam "startDate") }}
+            {{- range first $first ($members.ByParam "startDate") }}
             <a href="{{.Permalink}}">
                 <div class="member">
                     {{ if .Params.image }}
@@ -20,7 +22,7 @@
                     {{ else }}
                         {{- partial "components/image.html" (dict "style" "avatar" "url" $defaultimage "alt" "Placeholder") -}}
                     {{ end }}
-                    <h1 class="teammember-title">{{ .Params.name }}</h1>
+                    <h1 class="title">{{ .Params.name }}</h1>
                     {{- range .Params.jobs }}
                     <p>{{ . }}</p>
                     {{- end }}
@@ -39,6 +41,8 @@
             </a>
             {{- end }}
         </div>
-        {{ partial "components/button.html" (dict "type" "text block" "url" $team.id "text" ($team.more | default "More")) }}
+        {{ if gt $members.Len $first }}
+          {{ partial "components/button.html" (dict "type" "text block" "url" $team.id "text" ($team.more | default "More")) }}
+        {{ end }}
     </div>
 </div>

layouts/team/list.html

@@ -1,19 +1,19 @@
 {{ define "main" }}
-<div class="content">
+<div class="team content">
     <article>
         {{ partial "components/title.html" .Title }}
         {{.Content}}
     </article>
-    <div class="team-list">
+    <div class="list">
         {{ range (where .Pages "Params.leaveDate" "==" nil).ByParam "startDate" }}
         <a href="{{.Permalink}}">
-            <div class="teammember">
+            <div class="member">
                 {{ if .Params.image }}
                     {{- partial "components/image.html" (dict "style" "avatar" "url" .Params.image "alt" .Params.name) -}}
                 {{ else }}
                     {{- partial "components/image.html" (dict "style" "avatar" "url" $.Site.Params.defaultimage "alt" "Placeholder") -}}
                 {{ end }}
-                <h1 class="teammember-title">{{ .Params.name }}</h1>
+                <h1 class="title">{{ .Params.name }}</h1>
                 {{- range .Params.jobs }}
                     <p>{{ . }}</p>
                 {{- end }}