From 451e86069784c0a48af0dd465481450f9f9e5237 Mon Sep 17 00:00:00 2001 From: Drew Date: Fri, 25 Apr 2025 21:33:57 -0600 Subject: [PATCH] adds headshot resource support --- README.md | 41 ++++++++++++++++ archetypes/articles.md | 2 +- assets/css/article.css | 44 ++++++++++++++++++ assets/css/main.css | 43 ----------------- assets/css/styles.css | 1 + .../headshots/placeholder-headshot.png | Bin content/articles/dorsey-the_gut.md | 2 +- .../articles/ehmke-contributor_covenant.md | 2 +- content/articles/kiessel-good_market.md | 2 +- .../articles/mannan-diplomatic_protocols.md | 2 +- .../prodromou-distributed_social_networks.md | 2 +- content/articles/zargham-ultimate_frisbee.md | 2 +- layouts/articles/single.html | 18 +++---- layouts/partials/image.html | 19 ++++++++ 14 files changed, 122 insertions(+), 58 deletions(-) create mode 100644 assets/css/article.css rename {static => assets}/headshots/placeholder-headshot.png (100%) create mode 100644 layouts/partials/image.html diff --git a/README.md b/README.md index 9657a6b..83edea3 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/archetypes/articles.md b/archetypes/articles.md index af01d0b..94a757e 100644 --- a/archetypes/articles.md +++ b/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: "" diff --git a/assets/css/article.css b/assets/css/article.css new file mode 100644 index 0000000..3f36ffe --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 2663b12..5660e75 100644 --- a/assets/css/main.css +++ b/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; } diff --git a/assets/css/styles.css b/assets/css/styles.css index 8698ad1..8b07905 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -45,3 +45,4 @@ body { @import "components/wompum.css"; @import "main.css"; +@import "article.css"; diff --git a/static/headshots/placeholder-headshot.png b/assets/headshots/placeholder-headshot.png similarity index 100% rename from static/headshots/placeholder-headshot.png rename to assets/headshots/placeholder-headshot.png diff --git a/content/articles/dorsey-the_gut.md b/content/articles/dorsey-the_gut.md index c173e1e..6fce76b 100644 --- a/content/articles/dorsey-the_gut.md +++ b/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" diff --git a/content/articles/ehmke-contributor_covenant.md b/content/articles/ehmke-contributor_covenant.md index 11f151a..bb66e06 100644 --- a/content/articles/ehmke-contributor_covenant.md +++ b/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] --- diff --git a/content/articles/kiessel-good_market.md b/content/articles/kiessel-good_market.md index 4d559f9..4f6ee10 100644 --- a/content/articles/kiessel-good_market.md +++ b/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] --- diff --git a/content/articles/mannan-diplomatic_protocols.md b/content/articles/mannan-diplomatic_protocols.md index b8bc83a..66d4ad1 100644 --- a/content/articles/mannan-diplomatic_protocols.md +++ b/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] --- diff --git a/content/articles/prodromou-distributed_social_networks.md b/content/articles/prodromou-distributed_social_networks.md index b9d35f2..057e8d4 100644 --- a/content/articles/prodromou-distributed_social_networks.md +++ b/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/ diff --git a/content/articles/zargham-ultimate_frisbee.md b/content/articles/zargham-ultimate_frisbee.md index 93b0c50..a72d3ee 100644 --- a/content/articles/zargham-ultimate_frisbee.md +++ b/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] --- diff --git a/layouts/articles/single.html b/layouts/articles/single.html index 983be42..637eefe 100644 --- a/layouts/articles/single.html +++ b/layouts/articles/single.html @@ -5,14 +5,16 @@
{{ partial "article-wompum.html" . }}
-