feat: add contributors to home page (#23)

Author: greatislander

src/_data/contributors.json

@@ -0,0 +1,3 @@
+{
+  "contributors": []
+}

src/_includes/layouts/home.njk

@@ -34,6 +34,7 @@
     </div>
   </div>
 </div>
+{% if contributors.contributors | length %}
 <div class="[ bg bg--green-85 ]">
   <div class="[ wrapper ]">
     <div class="[ flow center prose ]">
@@ -44,10 +45,21 @@
 </div>
 <div>
   <div class="[ wrapper ]">
-    <div class="[ flow prose ]">
+    <div class="[ contributors ]">
+      {% for contributor in contributors.contributors %}
+        <a href="{{ contributor.link }}" rel="external">
+        {% if contributor.image %}
+        <img src="{{ contributor.image }}" width="150" height="150" alt="" />
+        {% else %}
+        <img src="https://source.boringavatars.com/ring/150/{{ contributor.name | replace(' ', '%20') }}?colors=516d95,d2a27a,882211,337777,f75322" width="150" height="150" alt="" />
+        {% endif %}
+        <span>{{ contributor.name }}</span>
+        </a>
+      {% endfor %}
     </div>
   </div>
 </div>
+{% endif %}
 <div class="[ bg bg--orange-75 ]">
   <div class="[ wrapper ]">
     <div class="[ flow center prose ]">

src/admin/config.yml

@@ -184,3 +184,15 @@ collections:
           - {label: Author Name, name: authorName, widget: string}
           - {label: Author Email, name: authorEmail, widget: string}
           - {label: Author Website, name: authorWebsite, widget: string}
+      - label: Contributors
+        name: contributors
+        file: src/_data/contributors.json
+        fields:
+          - label: Contributors
+            name: contributors
+            widget: list
+            summary: "{{fields.name}}"
+            fields:
+              - {label: Name, name: name, widget: string}
+              - {label: Link, name: link, widget: string}
+              - {label: Photo, name: photo, widget: image, required: false}

src/assets/styles/pages/_home.scss

@@ -5,3 +5,33 @@
 .home article .header .prose {
   margin-inline: auto;
 }
+
+.home .contributors {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-inline: auto;
+  row-gap: calc(5 * var(--space-md));
+
+  a {
+    display: block;
+    font-weight: bold;
+    text-align: center;
+
+    img {
+      border-radius: 50%;
+      display: block;
+      margin-inline: auto;
+    }
+
+    span {
+      display: block;
+      margin-block-start: var(--space-sm);
+    }
+  }
+}
+
+@media (min-width: 960px) {
+  .home .contributors {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}