Implement now page, add new post "Patience"

.kateproject.notes

@@ -8,6 +8,9 @@ No line breaks in inline code fences
 Style inline code fences with background
 Integrate ins plugin
 
+Fediring?
+Add "Now" to RSS feed.
+
 Performance / Accessibility:
 ---------------------------------------
 Lazy load images

_includes/layouts/base.njk

@@ -83,7 +83,7 @@
 										d="m428.201 404.571-.878-30.757C526.75 378.43 580 450.582 580.67 526.724l-31.197-.44c1.365-48.704-34.665-120.267-121.273-121.713Z"
 									/>
 								</g>
-							</svg>Subscribe
+							</svg>Feed
 						</li>
 					</a>
 				</ul>
@@ -93,9 +93,6 @@
 		<main id="skip">
 			{{ content | safe }}
 		</main>
-
+		<footer>© Nathan Upchurch 2022 - 2024</footer>
-		<footer></footer>
-
-		<!-- Current page: {{ page.url | htmlBaseUrl }} -->
 	</body>
 </html>

_includes/layouts/home.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 showPostListHeader: yep
 ---
-<h1>The personal website and blog of Nathan Upchurch.</h1>
+<h1>Welcome to Nathan’s Website and Blog.</h1>
-<p class="nodropcap page-block">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.</p>
+<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>
 
 {{ content | safe }}

_includes/layouts/post.njk

@@ -6,7 +6,19 @@ layout: layouts/base.njk
 <h1>{{ title }}</h1>
 
 <div class="post-metadata">
-	<p>{% if author.name %}{{ author.name }}, {% else %}{{ metadata.author.name }}, {% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	{% if author %}
+
+	{% if author.url %}<a href="{{ author.url }}">{% endif %}
+	<p>{% if author.name %}{{ author.name }}, {% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+
+	{% else %}
+
+	{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
+	<p>{% if metadata.author.name %}{{ metadata.author.name }}, {% 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 %}

_includes/nextLast.njk

@@ -42,6 +42,5 @@
 	{% endif %}
 
 </div>
-<p>Questions? Comments? <a href="../../me">contact me</a>.</p>
 {%- endif %}
 {%- endif %}

content/about/index.md

@@ -4,13 +4,12 @@ eleventyNavigation:
   key: About
   order: 3
 ---
-# About this website, and the person who made it.
+# Who am I, Anyway?
-<p class="page-block nodropcap">My name is Nathan. 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. <br /><br />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' should I choose to write about them. 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>
+## About Nathan Upchurch and the Website He Made.
+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.
 
-<h2>Contact</h2>
+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' should I choose to write about them. 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>If you would like to say something nice, ask a question, or simply follow me on the fediverse, <a href="../me">here's where you can find me</a>.
+If you would like to say something nice, ask a question, or simply follow me on the fediverse, <a href="../me">here's where you can find me</a>.
 
-<h2>Privacy / Technical</h2>
+This website is made with <a href="https://www.11ty.dev/">11ty</a>, <a href="https://www.gent.media/manrope">Manrope</a>, <a href="https://github.com/clauseggers/Playfair">Playfair Display</a>, and plain-old HTML & CSS. I don't collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a>). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website. Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.
-
-<p>This website is made with <a href="https://www.11ty.dev/">11ty</a>, <a href="https://www.gent.media/manrope">Manrope</a>, <a href="https://github.com/clauseggers/Playfair">Playfair Display</a>, and plain-old HTML & CSS. I don't collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a>). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website. Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.

content/blog/cowsay_2024-01-02.md

@@ -1,5 +1,5 @@
 ---
-title: Cowsay of the Day — Science
+title: Cowsay of the Day – Science
 description:  An ASCII cow postulates on the state of science education in the modern world.
 date: 2024-01-02
 tags:

content/blog/patience.md

@@ -0,0 +1,16 @@
+---
+title: Patience
+description: Learning about patience through an incense-making miscalculation.
+date: 2024-01-10
+tags:
+  - Quick Thoughts
+  - Incense
+synopsis: Learning about patience through an incense-making miscalculation.
+imageURL: /img/dragons_blood_incense_copy.avif
+imageAlt: A small piece of a coreless, Japanese-style incense stick burning in a black cast-iron burner.
+---
+Some time ago, maybe a year or so, I extruded some incense sticks from some ingredients I thought might go well together: sandalwood, cinnamon, dragon's blood resin, a touch of Hojari frankincense for acidity, and some tonka bean for sweetness, if I recall correctly. After leaving the sticks to dry overnight, I was disappointed to see that they didn't stay lit; the stick would shrink behind the ember, and it would fizzle out in short order. Even worse, the little scent I was able to detect during the short burn was terrible: acrid and smoky. Dejected, I put the sticks away, returning to attempt to burn a small fragment every few days or so before I lost interest entirely. A few months later, the tube of crooked red incense sticks caught my eye, and I once again attempted to burn a stick. To my surprise, it stayed lit throughout the entire burn. The fragrance had transformed also, from leafy-campfire to a simple, warm, slightly sweet, and medicinal fragrance. While this was enough of an improvement to encourage me to light one every now and then, I remained disappointed that the fragrance was so far from what I'd hoped to achieve. After half-heartedly burning each stick in the little plastic tube that housed them over a period of weeks, the tube disappeared into a basket on the shelf beneath my coffee table amidst a mess of bundled cables and game-controllers, never to be seen again – until just a few days ago.
+
+[![A small piece of a coreless, Japanese-style incense stick burning in a black cast-iron burner.](/img/dragons_blood_incense_copy.avif "The last fragment.")](/img/dragons_blood_incense_copy.avif)
+
+While rustling around in search of a controller, I discovered the thin plastic tube, noticing two small fragments of incense sliding about as I lifted the tube from the basket. As I lit the first fragment this morning, I was met with a wonderfully clear impression of dragon's blood, uplifted by the bright citrus of Hojari frankincense, on a sweet, warm, woody base; my incense had turned out well after all. Unfortunately, the recipe, written on the tube in dry-erase marker, had long worn off; thinking the batch was a failure, I hadn't recorded it anywhere else. Burning those last two fragments today was bittersweet; all I needed to do was wait. While I'm frustrated about a number of things here, there is something nice about the resulution. By failing to record the recipe, I got to experience something rare and unique today. In those peaceful, fragrant moments, I experienced something lovely for the first and last time – and I learned a thing or two about patience.

content/index.njk

@@ -3,7 +3,7 @@ layout: layouts/home.njk
 eleventyNavigation:
   key: Home
   order: 1
-numberOfLatestPostsToShow: 10
+numberOfLatestPostsToShow: 5
 ---
 {% set postsCount = collections.posts | length %}
 {% set latestPostsCount = postsCount | min(numberOfLatestPostsToShow) %}

content/now.njk

@@ -0,0 +1,51 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  key: Now
+  order: 4
+numberOfLatestPostsToShow: 4
+---
+{% set postsCount = collections.now | length %}
+{% set latestPostsCount = postsCount | min(numberOfLatestPostsToShow) %}
+{% set postslist = collections.now | head(-1 * numberOfLatestPostsToShow) %}
+{% set postslistCounter = postsCount %}
+{% set morePosts = postsCount - numberOfLatestPostsToShow %}
+
+<h1>Now: What's Been Going on Lately?</h1>
+{% set now = collections.now | last %}
+<h2>{{ now.data.title }}</h2>
+{{ now.content | safe }}
+<p><br>Updated: {{ now.date | readableDate }} | <a href="https://nownownow.com/about">What is a now page?</a></p>
+
+{% if postsCount > 1 %}
+<h2>Previous Entries:</h2>
+<section class="postlist">
+<div class="postlist-item-container">
+	{% for post in postslist | reverse %}
+	{% if post.data.title != now.data.title %}
+	<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+		<a href="{{ post.url }}" class="postlist-link">
+			<div class="post-image-container">
+				<img class="post-image" {% if post.data.imageURL %} src="{{ post.data.imageURL }}" alt="{{ post.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
+			</div>
+		</a>
+		<div class="post-copy">
+			<a href="{{ post.url }}" class="postlist-link">
+				<h3>
+					{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}
+				</h3>
+			</a>
+			<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
+			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ post.content | truncate(150) | safe }}{% endif %}
+		</div>
+	</article>
+	{% endif %}
+	{% endfor %}
+</div>
+{% if morePosts > 0 %}
+<a href="/tags/now"><p>See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %}</a>.</p>
+{% endif %}
+
+</section>
+
+{% endif %}

content/now/now.11tydata.js

@@ -0,0 +1,6 @@
+module.exports = {
+	tags: [
+		"now"
+	],
+	"layout": "layouts/post.njk",
+};

content/now/now_2024-01-08.md

@@ -0,0 +1,13 @@
+---
+title: Fragrance, Making Things Last, Rust, and more.
+description: Tentatively making incense sticks, reducing, reusing, and recycling, and doing my best to learn Rust.
+synopsis: Tentatively making incense sticks, reducing, reusing, and recycling, and doing my best to learn Rust.
+date: 2024-01-08
+imageURL: /img/pexels-pixabay-262484_copy.avif
+imageAlt: A black Braun watch with white and yellow hands on a dark background.
+---
+Lately, I've gotten back into the swing of making Japanese style incense - a nerve-wracking endeavour because you never quite know how the expensive aromatics you've spent hours grinding, kneading, and extruding will turn out when you light a stick. Will my latest batch smell like burning tires when it's properly cured? Tune in next time to find out.
+
+I've also been on a mission to reduce what I consume by focusing on buying well once, and buying reusable items wherever possible. Starting with one good fountain pen, I've now got a number of cotton handkerchiefs and some reusable cotton "paper towels."
+
+Rust has been on the top of my mind, and I've been going through a Rust course on Udemy. Coming from JavaScript, it's a lot! I desperately want to begin writing native applications for GNU/Linux using Rust and Qt, so I'm determined to keep going even if using strings is an order of magnitude more complicated than `const myString = 'Hello there.'`.

public/css/dropcap.css

@@ -1,17 +1,14 @@
 main > p:not(.nodropcap):first-of-type:first-letter {
 	float: left;
 	font-size: 4rem;
-	font-weight: 300;
-	line-height: 60px;
 	padding: .5rem .5rem .5rem .5rem;
 	color: var(--contrast-color);
 	border: solid 2px var(--contrast-color);
 	font-family: var(--font-family-headline);
 	font-weight: 700;
-	margin-right: .25em;
+	margin: .25rem .5rem 0 0;
 	border-radius: .2em;
 	border-top-left-radius: 0;
-	margin-bottom: -.2em;
 }
 
 @media(max-width: 556px) {

public/css/index.css

@@ -81,6 +81,7 @@
 /* Global stylesheet */
 * {
 	box-sizing: border-box;
+	line-height: calc(1em + 0.5rem);
 }
 
 html,
@@ -114,6 +115,10 @@ a {
 	white-space: nowrap;
 	width: 1px;
 }
+footer {
+	padding: var(--single-gap);
+	border-top: var(--border-thin);
+}
 h1, h2, h3 {
 	color: var(--text-color);
 }
@@ -122,7 +127,6 @@ h1 {
 	font-weight: var(--weight-extraheavy);
 	font-size: var(--font-xxl);
 	font-style: normal;
-	line-height: 4rem;
 	margin-top: var(--triple-gap);
 	margin-bottom: 0;
 }
@@ -133,7 +137,6 @@ h2 {
 }
 h3 {
 	font-size: var(--font-l);
-	line-height: 1.25;
 }
 hr {
 	border-top: var(--border-thin);
@@ -150,12 +153,11 @@ p:last-child {
 	margin-bottom: 0;
 }
 p, li {
-	line-height: 1.5;
 	font-size: var(--font-n);
 }
 figure {
 	margin: 0;
-	padding: 0 0 2em 0;
+	padding: var(--single-gap) 0 var(--single-gap) 0;
 	width: 100%;
 }
 figure > a > img {
@@ -168,7 +170,7 @@ figcaption {
 	padding-top: var(--single-gap);
 }
 .page-block {
-	margin-top: var(--triple-gap);
+	margin-bottom: var(--triple-gap);
 }
 a[href] {
 	color: var(--text-color-link);
@@ -182,9 +184,9 @@ a[href]:active {
 }
 .links-nextprev {
 	list-style: none;
-	border-top: 1px solid var(--color-gray-20);
+	border-top: var(--border-thin);
-	padding: 1em 0;
+	padding: var(--triple-gap) 0 var(--single-gap) 0;
-	margin-top: var(--double-gap);
+	margin-top: var(--triple-gap);
 }
 
 table {
@@ -202,7 +204,6 @@ code {
 }
 pre:not([class*="language-"]) {
 	margin: .5em 0;
-	line-height: 1.375; /* 22px /16 */
 	-moz-tab-size: var(--syntax-tab-size);
 	-o-tab-size: var(--syntax-tab-size);
 	tab-size: var(--syntax-tab-size);
@@ -310,6 +311,9 @@ nav ul {
 .postlist h2 {
 	margin-bottom: var(--double-gap);
 }
+.postlist h3 {
+	margin-top: 0;
+}
 .postlist-item-container {
 	display: flex;
 	flex-flow: column nowrap;
@@ -453,7 +457,6 @@ h2 + .header-anchor {
 	}
 	h1 {
 		font-size: var(--font-xxl);
-		line-height: 2.75rem;
 		margin-top: var(--single-gap);
 		padding-top: 0;
 	}
@@ -497,9 +500,6 @@ h2 + .header-anchor {
 	}
 
 	/* Posts List */
-	.post-copy a h3 {
-		margin-top: var(--half-gap);
-	}
 	.postlist {
 		padding-top: 0;
 	}
@@ -524,9 +524,8 @@ h2 + .header-anchor {
 		margin-bottom: var(--single-gap);
 	}
 
-	p, p.nodropcap.page-block, .post-copy p {
+	p, p.nodropcap, .post-copy p {
 		font-size: var(--font-n);
-		line-height: 1.25rem;
 		margin-top: var(--single-gap);
 	}
 	.post-metadata time, time.postlist-date {