Add article

mastodon comments inside cards, added fleuron to indicate end of article

_data/metadata.js

@@ -8,7 +8,7 @@ export default {
 		name: "Nathan Upchurch",
 		email: "blog@upchur.ch",
 		url: "https://nathanupchurch.com/me",
-		profilePic: "/img/CN20191025_301_Srt_SQUARE.jpg"
+		profilePic: "/img/CN20191025_301_Srt_SQUARE_crop.jpg"
 	},
 	copyrightNotice: "© Nathan Upchurch 2022 - 2024",
 	defaultPostImageURL: "/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif",

_includes/layouts/home.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 showPostListHeader: yep
 ---
-<h1>Welcome to Nathan’s Website and Blog.</h1>
-<p class="nodropcap page-block">Hi there, I’m Nathan Upchurch. Welcome to my personal website and blog, where I write about tech, free and open source software, design, vegan cooking, incense, music, and all sorts of <a href="/tags">other topics</a> that I find interesting. Learn more <a href="about">about me,</a> see <a href="now">what I’ve been up to lately,</a> or have a look at my latest posts below.</p>
+<h1>Hi there, friend.</h1>
+<p class="nodropcap page-block">My name is Nathan Upchurch. Welcome to my personal website and blog, where I write about <a href="./tags/incense/">incense,</a> <a href="./tags/foss-floss/">free and open source software,</a> design, <a href="./tags/vegan-cooking/">vegan cooking,</a> music, and all sorts of <a href="/tags">other topics</a> that I find interesting. Learn more <a href="about">about me,</a> see <a href="now">what I’ve been up to lately,</a> or have a look at my latest blog posts below.</p>
 
 {{ content | safe }}

_includes/layouts/post.njk

@@ -8,30 +8,37 @@ layout: layouts/base.njk
 {% if not hideMetadata %}
 <div class="post-metadata">
 	{% if author %}
-
-	<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
-	{% if author.name %}{{ author.name }},&nbsp;{% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	{% if author.profilePic %}
+	<img class="profilePic" src="{{ author.profilePic }}">
+	{% endif %}
+	<div class="post-metadata-copy">
+		<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
+		{% if author.name %}{{ author.name }},&nbsp;{% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% else %}
-
-	<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
-	{% if metadata.author.name %}{{ metadata.author.name }},&nbsp;{% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	{% if metadata.author.profilePic %}
+	<img class="profilePic" src="{{ metadata.author.profilePic }}">
+	{% endif %}
+	<div class="post-metadata-copy">
+		<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
+		{% if metadata.author.name %}{{ metadata.author.name }},&nbsp;{% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% endif %}
 
 
-	<ul>
-		{%- for tag in tags | filterTagList %}
-		{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-		<li>
-			<a
-			href="{{ tagUrl }}"
-			class="post-tag">
-				{{ tag }}&nbsp;
-			</a>
-		</li>
-		{%- endfor %}
-	</ul>
+		<ul>
+			{%- for tag in tags | filterTagList %}
+			{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+			<li>
+				<a
+				href="{{ tagUrl }}"
+				class="post-tag">
+					{{ tag }}&nbsp;
+				</a>
+			</li>
+			{%- endfor %}
+		</ul>
+	</div>
 </div>
 {% endif %}
 {{ content | safe }}

_includes/mastodonComments.njk

@@ -15,14 +15,16 @@
 </section>
 
 <template id="comment-template">
-	<wc-comment
-	author_name=""
-	author_url=""
-	avatar_url=""
-	comment_content=""
-	publish_date=""
-	sharp_corner="">
-	</wc-comment>
+	<wc-card>
+		<wc-comment
+		author_name=""
+		author_url=""
+		avatar_url=""
+		comment_content=""
+		publish_date=""
+		sharp_corner="">
+		</wc-comment>
+	</wc-card>
 </template>
 
 <script type="module">

content/about/index.md

@@ -6,8 +6,7 @@ eleventyNavigation:
 ---
 <article>
 <h1>About me and this website I’ve built.</h1>
-<h2>All about Nathan</h2>
-<p>I’m a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.</p>
+<p>I’m a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense maker and appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.</p>
 
 <p>This is my personal website and blog, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to those topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself as a human and have fun writing about topics I enjoy. If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here soon.</p>
 

content/blog/learning-to-love-myrrh-by-making-a-myrrh-and-rose-incense.md

@@ -0,0 +1,37 @@
+---
+title: "Learning to Love Myrrh: Myrrh & Rose Incense"
+description: "I finally figure out how to make myrrh work in a composition."
+date: 2024-08-05
+tags:
+  - Incense
+synopsis: "I finally figure out how to make myrrh work in a composition."
+imageURL: /img/pexels-david-roberts-940521-8323579.webp
+imageAlt: A beautiful light-pink dog rose, rosa canina.
+mastodon_id: ""
+---
+Myrrh can be a challenging note. I've seen the resins collected from various members of the Commiphora genus described as everything from loamy, bitter, and mushroomy, to reminiscent of cleaning fluid or a dental clinic; whatever impression you take from the fragrance of myrrh resin, there's no denying that it's unique; there is no mistaking myrrh. While I'm rarely a fan of myrrh alone, or as the predominant note in a sparse composition, I've always felt that there is something compelling about it. Despite its overall unpleasantness, I find heated myrrh resin to produce a dark, mysterious, and somehow sexy fragrance. When balanced well, such as in Mystic Jade from Shoyeido's Magnifiscents collection, it adds a wonderful, earthy warmth to a composition that's hard to beat.
+
+For some time I've struggled to incorporate myrrh into a stick that I can be proud of; it isn't a resin that you can just drop into a composition with the expectation that it'll work. My experiments with commiphora kua, opoponax, and wightii have all ended in disappointment… until recently.
+
+I've long had an inkling that myrrh would pair well with rose. It's challenging to incorporate flowers into combustible incense; some say it's close to impossible to do without winding up with an incense that smells of acrid burning plant material with, if you're lucky, a touch of whatever flower you've added. Certainly, I have found that often other methods of incorporating floral fragrances work best. Recently I have found, however, that if you start with very good material, and methodically try varying ratios in a series of trail-burning tests, you may wind up surprised by how close a fragrance you can achieve to the fragrance of fresh flowers while minimizing acrid notes. For instance, in my testing, I found that a combination of 30% Rosa Canina and 70% Santalum Spicatum, both very high quality powders given to me by [Dave of *The World Makes Scents*,](../visiting-chicago-incense-maker-dave-of-the-world-makes-scents/) smells absolutely wonderful.
+
+[![A beautiful light-pink dog rose, rosa canina.](/img/pexels-david-roberts-940521-8323579.webp "Rosa Canina in bloom, by [David Roberts on Pexels](https://www.pexels.com/photo/close-up-shot-of-a-dog-rose-in-bloom-8323579/)")](/img/pexels-david-roberts-940521-8323579.webp)
+
+
+With that knowledge, I composed a stick featuring myrrh, rose, and sandalwood. While the build isn't perfect, I'm already really enjoying the small batch of sticks that I made only a few days ago. The fragrance is gentle and powdery, with a hint of smoke, a soft rose note and that fruitiness that occurs when rose petals are heated. Benzoin lends a subtle sweetness alongside the sandalwood, while the myrrh adds it's unmistakable fragrance and a bittersweet molasses note. The whole ensemble is lifted and brought together by a smidgen of borneol camphor. The myrrh reduces the need for binders, so I've gone with a weak binder, acacia gum, which also helps to firm up and strengthen the extruded sticks once dried.
+
+## The Build
+Note that this is a test build that produces less than four grams of dough; you may want to double the amount.
+
+|Ingredient|Grams|% of Build|
+|-|-|-|
+|Myrrh Resin (Commiphora Kua) |0.2|5.6%|
+|Rose Petal  (Rosa Canina)|1|27.9%|
+|Sandalwood (Santalum Spicatum)|2|55.9%|
+|Benzoin Siam|0.14|3.9%|
+|Acacia Gum|0.2|5.6%|
+|Borneol Camphor|0.04|1.1%|
+
+## Thoughts
+
+I really like this stick, but I do think that it could stand some improvement. Some spices might round out the profile a little, maybe a little clove and cinnamon. It's not the *cleanest* fragrance in the world, likely due to both the myrrh and the high ratio of flowers, but I have been finding it incredibly moreish nonetheless. I hope someone will try to make this and let me know their thoughts!

content/blog/visiting-chicago-incense-maker-dave-of-the-world-makes-scents.md

@@ -0,0 +1,33 @@
+---
+title: "Visiting Chicago Incense Maker Dave of The World Makes Scents"
+description: "I had the pleasure of meeting Dave at The World Makes Scents studio in Bridgeport, Chicago."
+date: 2024-08-04
+tags:
+  - Incense
+  - Chicago
+synopsis: "I had the pleasure of meeting Dave at The World Makes Scents studio in Bridgeport, Chicago."
+imageURL: /img/pexels-harris-rigorad-478484242-25261413.webp
+imageAlt: The Chicago flag.
+mastodon_id: "112906515155787958"
+---
+Whether due to trauma inflicted by gas-station sticks laden with synthetic patchouli oil or the stigma unfairly landed upon the fragrant sticks by association with generations of teenagers seeking to obscure the olfactory remnants of their smoky intemperance, in the part of the world that I currently occupy, incense remains a niche interest — not only with respect to those who enjoy it; fewer yet ever attempt the art of incense-making. Western incense makers seem to huddle together into whatever dusty corner of the internet they can occupy, often knowing each other by handle and legal name alike, where together they scratch and scrape into one small pile whatever little crumbs of knowledge regarding this ancient craft are to be had in languages written with Latin-script alphabets. You can imagine, then, how thrilled I was to be invited by Dave of [The World Makes Scents](https://theworldmakesscents.com/) to see the studio that he shares with his wife, Raksmey.
+
+The workshop is situated in an arts complex: part gallery, and part studio and event space. The walls are lined with pieces from the artists who let space there; as your footsteps echo across the lacquered wooden floors, you can't help but allow your attention to be arrested every few steps by some piece or another. In particular, I recall several striking pieces not far from The World Makes Scents' small studio featuring large nude figures at the fore of a shallow depth of field, a lenticular effect making the images appear to shift and change as you walk by them.
+
+When we reached the studio a stick from a recent test batch was burning; coated with coarsely ground orange zest, it emitted an impressively clear and sweet note of orange oil. Dave told me the story of how Raksmey learned to make incense from women at a Buddhist temple near her home in Cambodia, how the two met, traveled through Vietnam together, rescued their pet dog from perilous circumstances, and disembarked from a plane in the U.S. right as the pandemic was entering the American collective consciousness. It's not my story to tell, so I'll leave it there, but the tale of how the pair came to be making such lovely incense in Chicago's Bridgeport neighborhood is nothing short of miraculous, and likely the most compelling pandemic hobby success story I've heard.
+
+Since first sampling their incense through [the incense exchange subreddit,](https://www.reddit.com/r/IncenseExchange/) I had been impressed with how clean the fragrances were from their cones. I had chalked this up to the cones' golf-tee shape, which keeps the ember from becoming too large, and consequently, the burn temperature from becoming too high; seeing how the materials were processed, however, showed me how much more there was to the story. As if sourcing high quality fragrant materials wasn't enough of a challenge, processing them when they arrive is fraught.
+
+Incense materials should, ideally, be reduced down to a particle size of 100 microns or less. The fastest methods of grinding introduce heat, which breaks down fragrant oils, and renders resins sticky and impossible to work with. Most small incense makers throughout history have thus resorted to processes such as stone grinding or the even more agonizingly slow filing of fragrant woods. Quietly humming in the background was Dave's solution to this conundrum: an array of ball mills, like giant rock-tumblers designed to carefully mill heat-sensitive materials such as black powder for firearms and pyrotechnics; the machines each consist of a rubber-lined drum atop a pair of motorized rollers that turns the drum continuously. The material to be ground is loaded into the machine alongside a series of stainless-steel balls that collide with material inside the spinning drum to break down everything from dried rose petals to cedar wood into a stunningly fine powder. The process takes hours, sometimes days, but at least it's hands-off. Following this, the ground plant matter is run through a series of increasingly fine sieves stacked atop a machine that shakes them so violently that it will soon be bolted to the floor of the studio. Suitably fine material will be used to produce incense; the rest will undergo the process once more.
+
+The results of this procedure are striking; among the samples I left with was a bag of ground patchouli leaf, the texture of talcum powder, so redolent with its natural oils and aromatics that it almost smelled of fresh mint and myrrh resin. Once ground, ingredients are blended together with a small amount of binder; water is then added to form a dough. If destined to become cones, the dough is loaded into a sort of caulking-gun, which is used to extrude a long sausage which will be cut at regular intervals and shaped by hand into those signature golf-tee cones. To make sticks, the dough is packed into a large hand-cranked extrusion machine, capable of extruding some eight to ten noodles of incense at a time which are collected onto a wooden board before being straightened and transferred to a screen for drying. When the cones or sticks have dried completely, they are packaged by hand, labeled, and sent out to incense appreciators world-over.
+
+Of course, the recipes that result in various fragrant doughs to extrude don't spring from nowhere; research and development is an area for which Dave clearly has a great interest and affinity. A whirlwind in the workshop, he produced innumerable ingredients, from wormwood to various frankincense varieties, sprinkling them atop a burning coal to give an impression of the fragrance of each as it burns. The small space housed many drawers and shelves of powders, tinctures, and oils, experiments both successful and otherwise. Vanilla was present in every form and variety as a part of the development process for an upcoming product, from simple extracts to pastes and a high end powdered variety that smelled rich, complex, and tobacco-like. Boxes of incense samples were produced from makers across the globe, from independent makers to large incense houses; all styles were represented, from Tibetan rope incense to bakhoor.
+
+Very much in-line with the brand's emphasis on transparency, Dave's openness regarding processes and ingredients was impressive in an industry where players keep secrets close to their chests. Further, scaling up incense making into a viable business is no mean feat when you're not willing to compromise on quality. Even the famed Singapore incense maker [Kyara Zen wrote](https://www.kyarazen.com/incense-stick-making-a-walk-through/) of this difficulty:
+
+> The truth is, I’ve not been able to scale up production as everything’s still very much purely hand made, from converting the raw material into powder, to the ingredient blending, to the extrusion, drying, collection etc.
+
+Outside of large incense houses that use industrial hammer mills to break down whole aromatics, it's a painstaking endeavor to produce even small amounts of incense for personal enjoyment, let alone managing to increase output and reduce labor time such that it's viable to sell the incense you make. There is a reason quick and easy to make "hand dipped" incense is seen so often in stores despite its clear inferiority to its traditionally made, non-synthetic counterpart. What Dave and Raksmey have achieved in such a short time is nothing short of remarkable.
+
+I'm very grateful to Dave for the invitation, for showing me the studio, offering a fascinating insight into The World Makes Scents' incense production methods, and for all of the incredible samples and goodies I left with. It's a wonderful thing to be able to meet with another incense maker and share knowledge and enthusiasm over the topic, and hopefully we'll be able to meet again soon; I'll no doubt have some samples to share myself when that time arrives!

content/now.njk

@@ -4,13 +4,13 @@ eleventyNavigation:
   key: Now
   order: 4
 ---
-<article>
+<article class="post">
 <h1>Now: What’s Been Going on Lately?</h1>
 {% set now = collections.now | last %}
 <h2>{{ now.data.title }}</h2>
 {{ now.content | safe }}
-<p class="metadata">Updated: {{ now.date | readableDate }} |&nbsp;<a href="https://nownownow.com/about">What is a now page?</a></p>
 </article>
+<p class="metadata">Updated: {{ now.date | readableDate }} |&nbsp;<a href="https://nownownow.com/about">What is a now page?</a></p>
 
 {% set postsCount = collections.now | removeMostRecent | length %}
 {% if postsCount > 1 %}

public/css/index.css

@@ -18,10 +18,9 @@
 	--font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0;
 	--font-variation-ui: "wght" 500;
 	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
-	--meta-font-family: var(--font-family-ui);
-	--meta-font-size: var(--step--2);
+	--meta-font-family: "Fraunces", serif;
+	--meta-font-size: var(--step--1);
 	--meta-font-style: normal;
-	--meta-font-variation-settings: var(--font-variation-ui);
 	--ui-letter-spacing: calc(var(--space-3xs) * 0.5);
 }
 
@@ -123,12 +122,13 @@
 	/* Web Component Tokens */
 	--wc-card-background-color: var(--card-color);
 	--wc-card-border-radius: var(--border-radius);
+	--wc-card-margin: 0 0 var(--space-s) 0;
 	--wc-card-box-shadow: var(--box-shadow);
 	--wc-link-color: var(--text-color);
 	--wc-link-decoration-color: var(--contrast-color);
 	--wc-link-decoration-thickness: var(--link-decoration-thickness);
-	--wc-comment-text-margin: auto auto auto 4rem;
-	--wc-profile-pic-size: 3rem;
+	--wc-comment-text-margin: var(--space-xs) 0 0 0;
+	--wc-profile-pic-size: var(--space-l);
 	--wc-profile-pic-border-radius: 10rem;
 }
 
@@ -221,6 +221,10 @@ section {
 	display: grid;
 	grid-column: 1 / span 12;
 }
+::selection {
+	background: var(--contrast-color);
+	color: var(--background-color);
+}
 .page-block {
 	grid-column: 1 / span 12;
 	font-size: var(--step-1);
@@ -265,13 +269,13 @@ h1, h2, h3 {
 h1 {
 	font-family: var(--font-family-headline);
 	font-variation-settings: "opsz" 100, "wght" 500, "SOFT" 10, "WONK" 1;
-	font-size: var(--step-6);
+	font-size: var(--step-5);
 	font-style: normal;
-	line-height: calc(var(--step-6) * 0.25 + var(--step-6));
+	line-height: calc(var(--step-5) * 0.25 + var(--step-5));
 }
 h2 {
-	font-size: var(--step-3);
-	font-variation-settings: "opsz" 50, "wght" 300, "SOFT" 60, "WONK" 1;
+	font-size: var(--step-2);
+	font-variation-settings: "opsz" 50, "wght" 350, "SOFT" 20, "WONK" 1;
 	padding-bottom: var(--space-l);
 	padding-top: var(--space-xl);
 }
@@ -402,14 +406,13 @@ wc-comment::part(author-link), wc-toot::part(author-link) {
 	text-decoration: none;
 }
 wc-comment::part(main) {
-	margin-bottom: var(--space-l);
+	padding: var(--space-m);
 }
 wc-comment::part(publish-date), wc-toot::part(publish-date) {
 	font-family: var(--meta-font-family);
 	font-size: var(--meta-font-size);
 	font-style: var(--meta-font-style);
 	font-variation-settings: var(--font-variation-settings);
-	margin-top: -.25rem;
 }
 wc-toot::part(main) {
 	color: white;
@@ -573,7 +576,7 @@ nav ul {
 .postlist-date,
 .postlist-item:before {
 	color: var(--color-gray-90);
-	font-size: var(--step--1); /* 13px /16 */
+	font-size: var(--meta-font-size); /* 13px /16 */
 }
 .postlist-date {
 	word-spacing: -0.5px;
@@ -673,8 +676,18 @@ a.post-tag:hover {
 
 /* Post Metadata */
 .post-metadata {
+	display: flex;
+	flex-flow: row nowrap;
 	padding: var(--space-m) 0 var(--space-l) 0;
 }
+
+.post-metadata-copy {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: center;
+	padding-left: var(--space-s);
+}
+
 .post-metadata p, .post-metadata ul, .post-metadata ul li, time, .metadata {
 	display: flex;
 	flex-flow: row wrap;
@@ -691,6 +704,11 @@ a.post-tag:hover {
 	padding-left: .15rem;
 }
 
+.profilePic:not(.links-container > img.profilePic) {
+	width: var(--space-xl);
+	border-radius: 100%;
+}
+
 /* Direct Links / Markdown Headers */
 a.header-anchor {
 	font-style: normal;
@@ -719,6 +737,12 @@ article.post {
 	container: article / inline-size;
 }
 
+/* Adds fleuron to article end */
+article.post > p:not(blockquote > p):last-child:after {
+	content: "\2766";
+	display: inline;
+	font-size: var(--step-1);
+}
 /* Utilities */
 .grid-container {
 	max-width: var(--grid-max-width);

public/js/webComponents/card.js

@@ -10,6 +10,7 @@ template.innerHTML = `
 		display: flex;
 		flex-flow: row nowrap;
 		justify-content: flex-start;
+		margin: var(--wc-card-margin);
 		padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
 		width: 100%;
 	}

public/js/webComponents/profilePic.js

@@ -3,9 +3,9 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
 #profilePic {
-	border-radius: var(--wc-profile-pic-border-radius);
-	width: var(--wc-profile-pic-size);
-	height: var(--wc-profile-pic-size);
+border-radius: var(--wc-profile-pic-border-radius);
+width: var(--wc-profile-pic-size);
+height: var(--wc-profile-pic-size);
 }
 </style>