adds headshot resource support

README.md

@@ -8,6 +8,47 @@ Developed in Hugo.
 
 Navigate to the project directory and:
 
+```
+npm install
+```
+
+Then, to serve the site locally:
+
 ```
 hugo server
 ```
+
+## Articles
+
+see `/archetypes/article.md` for the article template. You can create a new article with:
+
+```
+hugo new articles/2023-01-01-my-new-article.md
+```
+This will create a new article in the `content/articles` directory with the current date and the title you provide. You can then edit the file to add your content.
+
+### Head shots
+
+Optionally you can add a headshot photo to your article. To do this:
+
+1. Place your image file in the `/assets/headshots/` directory
+2. Add a `headshot` field to your article's front matter with just the filename. For example:
+
+```yaml
+headshot: "firstname-lastname.jpg"
+```
+
+*Note: Name is case sensitive, might as well use lowercase letters and hyphens in your filename.*
+
+### Narrator links
+
+You can add links to an article that relate to the narrator. To do this, add a `links` field to the front matter of the article. The value should be a list of objects, each with a `text` and `url` field. For example:
+
+```
+links:
+  - text: "My Website"
+    url: "https://example.com"
+  - text: "My Twitter"
+    url: "https://twitter.com/example"
+```
+This will include the links in the article page. The links will be displayed as a list with the text as the link text and the URL as the link target.

archetypes/articles.md

@@ -7,7 +7,7 @@ approved: "" # YYYY-MM-DD
 summary: ""
 location: ""
 topics: []
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 links:
   - text: ""
     url: ""

assets/css/article.css

@@ -0,0 +1,44 @@
+.interviewer-question {
+  font-style: italic;
+  color: #444;
+  margin-left: -1rem;
+}
+
+.article-title--single .article-title__narrator {
+  @apply mb-2 block font-light;
+}
+
+.article-title--single .article-title__subject {
+  font-size: 1.5em;
+}
+
+.article-title--list .article-title__narrator::after {
+  content: ":";
+}
+
+.article-title--list .article-title__subject {
+  @apply font-light;
+}
+
+.wompum-radial-grid {
+  @apply absolute w-full h-full top-0 left-0;
+}
+
+/* Narrator headshot */
+
+.narrator__container {
+  @apply relative w-48 mb-2 mx-auto md:mx-0 bg-white rounded-full border-4 border-white;
+}
+
+.narrator__frame {
+  @apply relative p-4;
+}
+
+.narrator__frame img {
+  @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
+  aspect-ratio: 1;
+}
+
+.narrator__wompum {
+  @apply absolute inset-0 w-full h-full;
+}

assets/css/main.css

@@ -6,49 +6,6 @@ a:hover {
   @apply text-pine-900;
 }
 
-.interviewer-question {
-  font-style: italic;
-  color: #444;
-  margin-left: -1rem;
-}
-
-.article-title--single .article-title__narrator {
-  @apply mb-2 block font-light;
-}
-
-.article-title--single .article-title__subject {
-  font-size: 1.5em;
-}
-
-.article-title--list .article-title__narrator::after {
-  content: ":";
-}
-
-.article-title--list .article-title__subject {
-  @apply font-light;
-}
-
-.wompum-radial-grid {
-  @apply absolute w-full h-full top-0 left-0;
-}
-
-.narrator__container {
-  @apply relative;
-}
-
-.narrator__frame {
-  @apply relative p-4;
-}
-
-.narrator__image {
-  @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
-  aspect-ratio: 1;
-}
-
-.narrator__wompum {
-  @apply absolute inset-0 w-full h-full;
-}
-
 .tag {
   @apply p-2 bg-sand-100 border border-transparent hover:border-sand-500 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100 no-underline;
 }

assets/css/styles.css

@@ -45,3 +45,4 @@ body {
 
 @import "components/wompum.css";
 @import "main.css";
+@import "article.css";

content/articles/dorsey-the_gut.md

@@ -7,7 +7,7 @@ approved: 2025-03-20
 summary: "Drawing on many ancestral traditions and the experience of her own body, Asia Dorsey learns and teaches the pattern language of a healthy gut."
 location: "Denver CO"
 topics: [ancestors, food, health, indigeneity]
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 links:
   - text: "Bugs Bones & Botany"
     url: "https://www.bonesbugsandbotany.com"

content/articles/ehmke-contributor_covenant.md

@@ -6,7 +6,7 @@ date: 2024-10-10
 approved: 2024-10-11
 summary: "After widespread resistance to codes of conduct in open-source software communities, Coraline Ada Ehmke's Contributor Covenant became the most popular code of conduct in the ecosystem."
 location: "Chicago, USA"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [code of conduct, dispute resolution, gender, open source, organizations, software]
 ---
 

content/articles/kiessel-good_market.md

@@ -6,7 +6,7 @@ date: 2024-10-29
 approved: 2024-12-16
 summary: "Good Market is a digital commons for enterprises that prioritize people and the planet over profit. It enables communities to set and enforce their own standards for doing business."
 location: "Sri Lanka / United States"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [economics, organizations, ecology, standards]
 ---
 

content/articles/mannan-diplomatic_protocols.md

@@ -6,7 +6,7 @@ date: 2024-12-13
 approved: 2025-03-04
 summary: "A diplomat for Bangladesh describes the role of protocol in high-profile international visits and treaty negotiations."
 location: "Dhaka, Bangladesh"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [diplomacy, government, friendship]
 ---
 

content/articles/prodromou-distributed_social_networks.md

@@ -6,7 +6,7 @@ date: 2024-12-06
 approved: 2025-04-01
 summary: "A career-long journey to build online social networks that cannot be controlled by a single company, culminating with the ActivityPub standard."
 location: "Montreal, Canada"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 links:
   - text: Website
     url: https://evanp.me/

content/articles/zargham-ultimate_frisbee.md

@@ -6,7 +6,7 @@ date: 2024-11-04
 approved: 2024-12-02
 summary: "As a sport often played with no referees, ultimate frisbee has developed a strong set of norms for addressing conflict and self-governing."
 location: "East Greenbush, NY USA"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [frisbee, sports, organizations, dispute resolution]
 ---
 

layouts/articles/single.html

@@ -5,14 +5,16 @@
       <header class="mb-4 wompum-container wompum-container--wide-gap aspect-2/1 md:aspect-3/1">{{ partial "article-wompum.html" . }}</header>
 
       <div class="flex md:flex-row flex-col gap-4 mt-4">
-        <aside class="md:sticky md:top-0 md:h-screen md:overflow-y-auto lg:w-1/3 p-4 font-iosevka
+        <aside class="md:sticky md:top-24 md:h-screen lg:w-1/3 p-4 font-iosevka">
-          {{ if .Params.headshot }}-mt-24{{ end }}
+          {{ $headshot := resources.GetMatch (printf "**/%s" (strings.TrimPrefix "/" .Params.headshot)) }}
-        ">
+          {{ if and .Params.headshot $headshot }}
-          {{ if .Params.headshot }}
+          <div class="narrator__container -mt-24" data-text="{{ .Params.narrator }}">
-          <div class="narrator__container w-48 mb-2 mx-auto md:mx-0 bg-white rounded-full border-4 border-white" data-text="{{ .Params.narrator }}">
+            {{ partial "image.html" (dict 
-            <div class="narrator__frame">
+              "resource" $headshot 
-              <img src="{{ .Params.headshot }}" alt="Photo of {{ .Params.narrator }}" class="narrator__image" loading="lazy">
+              "width" "192" 
-            </div>
+              "class" "narrator__frame"
+              "alt" (printf "Photo of %s" .Params.narrator)
+            ) }}
           </div>
           {{ end }}
           <div class="md:block hidden">{{ partial "article-metadata.html" . }}</div>

layouts/partials/image.html

@@ -0,0 +1,19 @@
+{{ $width := .width }}
+{{ $height := default $width .height }}
+{{ $class := .class }}
+{{ $resource := .resource }}
+{{ $alt := .alt }}
+
+{{ with $resource }}
+  {{ $image := .Fit (printf "%dx%d webp" (int $width) (int $height)) }}
+  {{ $fallback := .Fit (printf "%dx%d" (int $width) (int $height)) }}
+  <picture class="{{ $class }} block">
+    <source srcset="{{ $image.RelPermalink }}" type="image/webp">
+    <img 
+      src="{{ $fallback.RelPermalink }}" 
+      alt="{{ $alt }}"
+      width="{{ $width }}"
+      height="{{ $height }}"
+      loading="lazy">
+  </picture>
+{{ end }}