Add about-feeds images

_includes/postslist.njk

@@ -15,7 +15,7 @@
 				</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(200) | safe }}</p>{% else %}{{ post.content | truncate(140) | safe }}{% endif %}
+			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ post.content | truncate(150) | safe }}{% endif %}
 		</div>
 	</article>
 	{% endfor %}

content/about-feeds/index.md

@@ -0,0 +1,68 @@
+---
+layout: layouts/base.njk
+---
+# How to use feeds.
+<p><!-- a <p> just to stop the dropcap from happening --></p>
+
+Get all the latest content from your favorite creators with no algorithm, no spam, and no spying. This page is based on [Matt Webb](https://interconnected.org)'s *[About Feeds](https://aboutfeeds.com/)*.
+
+[![A screenshot of the akregator newsreader showing lists of feed categories in a left sidebar, an inbox full of posts from feeds, and a post display window - much like a desktop email client.](../img/akregator.png "Akregator, the newsreader I use on my desktop, showing a list of posts from feeds I've subscribed to.")](../img/akregator.png)
+
+## What is a feed?
+
+* A "web feed," or an "RSS feed," is a stream of all latest content from a blog or a website. You can subscribe to these feeds using a newsreader app.
+
+* Many websites such as news sites and blogs already have feeds. You'll often see a link at the top or bottom of the page that says "RSS," "Feed," or an icon like this: <img src="../img/RSS-Orange.svg" style="height: .75rem;">.
+
+* Whenever you see a website with a feed, that means you can subscribe to that site.
+
+## Why use feeds?
+
+* Subscribing to feeds is a quick way to access news and content from many different sources in one place: your newsreader.
+
+* With feeds, there's no spam, no social media drama, and no algorithm choosing what you see — just a curated collection of all the content you want to see, for free.
+
+## How do I get a newsreader app?
+
+**To subscribe to feeds, you'll need a newsreader app.** Once you've subscribed to a feed, your newsreader will check it regularly and show you the latest in an inbox, a bit like email.
+
+There are many different newsreader apps to choose from. Below are a few you could try; find more by searching "RSS Feed Reader" on the internet, or in the app store on your device.[^1]
+
+* Feeder (Android — [Google Play](https://play.google.com/store/apps/details?id=com.nononsenseapps.feeder.play), [F-Droid](https://f-droid.org/packages/com.nononsenseapps.feeder/))
+
+* [Fluent Reader (Windows, macOS)](https://hyliu.me/fluent-reader/)
+
+* [Raven (GNU/Linux, Windows, macOS)](https://ravenreader.app/)
+
+* [NetNewsWire (macOS, iOS)](https://ravenreader.app/)
+
+* [FreshRSS (Online)](https://www.freshrss.org/)
+
+* [Akregator (GNU/Linux)](https://apps.kde.org/akregator/)
+
+* [RSSOwl (GNU/Linux, Windows, macOS)](https://www.rssowl.org/)
+
+* [RSS Guard (GNU/Linux, Windows, macOS, BSD, OS/2)](https://github.com/martinrotter/rssguard)
+
+
+It doesn't matter which you choose; newsreaders usually make it fairly easy to export your list of subscriptions and move them to another app in the future.
+
+## How do I use my new newsreader app to subscribe to a feed?
+
+[![A screenshot of the akregator newsreader with an "add feed dialog" visible.](../img/akregator_add_feed.png "Adding a feed to my newsreader.")](../img/akregator_add_feed.png)
+
+1. Get the Feed URL. To get this, go to the website you want to subscribe to and find that RSS link or the feed icon. Then...
+	* On **desktop**, right click on the link and choose "Copy Link Address" or similar.
+	* On **mobile**, tap and hold the link until a menu comes up. Choose "Copy Link" or similar.
+
+2. Add the URL to your newsreader; go to your newsreader app and look for something like "Subscribe," "Add Web Feed," or maybe you'll just see a "+" icon. Once you've found this, paste in the feed URL and you're done!
+
+
+## What next?
+
+* Find more to read: Browse [Blogroll](https://blogroll.org) and [ooh.directory](https://ooh.directory), both hand-curated directories of blogs, organised by topic.
+
+* Why not start a blog of your own? [Get Blogging!](https://getblogging.org) is a guide to the practicalities of starting a blog.
+
+
+[^1]: Please note that I haven't tested all of these options personally; your mileage may vary.

content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md

@@ -8,8 +8,8 @@ tags:
   - Code Tutorial
   - SVG
 synopsis: In this tutorial, we'll learn how to make a configurable SVG graphic of a grid of circles in random colors and sizes with p5.js.
-imageURL: /img/terminal.svg
-imageAlt: A stylized illustration of a terminal prompt.
+imageURL: /img/circle-grid-post-image.webp
+imageAlt: A grid of multicolored circles.
 ---
 Processing is a fantastic language for creative programming and learning how to code, allowing programmers of all skill levels to quickly and simply create complex graphics, data visualizations, and generative art. Its Javascript implementation, p5.js, is perfect for those already familiar with Javascript, or who want to use processing to make graphics for the web without the complexity of SVG, or the insanity of using CSS for complex graphics. Today we're going to build [a simple but pretty graphic using P5](#et-voila).
 

content/feed/feed.njk

@@ -17,16 +17,17 @@ permalink: /feed/feed.xml
 	</author>
 	{%- for post in collections.posts | reverse %}
 	{% set absolutePostUrl %}{{ post.url | htmlBaseUrl(metadata.url) }}{% endset %}
-	{% if post.image-url %}{% set imageURL %}{{ post.image-url | htmlBaseUrl(metadata.url) }}{% endset %}{% endif %}
+	{% if post.data.imageURL %}{% set imageURL %}{{ post.data.imageURL | htmlBaseUrl(metadata.url) }}{% endset %}{% endif %}
 	{% set defaultImageURL %}{{ metadata.defaultPostImageURL | htmlBaseUrl(metadata.url) }}{% endset %}
 	<entry>
 		<title>{{ post.data.title }}</title>
+		<description>{{ post.data.description | truncate(150) }}</description>
 		<link href="{{ absolutePostUrl }}"/>
 		<updated>{{ post.date | dateToRfc3339 }}</updated>
 		<id>{{ absolutePostUrl }}</id>
 		<image>
-			<url>{% if post.image-url %}{{ imageURL }}{% else %}{{ defaultImageURL }}{% endif %}</url>
-			<title>{% if post.image-alt %}{{ post.image-alt }}{% else %}{{ metadata.defaultPostImageAlt }}{% endif %}</title>
+			<url>{% if post.data.imageURL %}{{ imageURL }}{% else %}{{ defaultImageURL }}{% endif %}</url>
+			<title>{% if post.data.imageAlt %}{{ post.data.imageAlt }}{% else %}{{ metadata.defaultPostImageAlt }}{% endif %}</title>
 			<link href="{{ absolutePostUrl }}"/>
 		</image>
 		<content type="html">{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) }}</content>

content/index.njk

@@ -15,12 +15,3 @@ numberOfLatestPostsToShow: 10
 {% if morePosts > 0 %}
 <p>See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in <a href="/blog/">the blog</a>.</p>
 {% endif %}
-
-{# List every content page in the project #}
-{#
-<ul>
-	{%- for entry in collections.all %}
-	<li><a href="{{ entry.url }}"><code>{{ entry.url }}</code></a></li>
-	{%- endfor %}
-</ul>
-#}

public/css/index.css

@@ -16,7 +16,7 @@
 	--background-color: #FAF5F5;
 	--text-color: var(--color-gray-90);
 	--text-color-link: var(--text-color);
-	--text-color-tag: rgba(255,255,255,1);
+	--text-color-tag: var(--contrast-color);
 
 	/* Space & Size */
 	--syntax-tab-size: 2;
@@ -25,9 +25,10 @@
 	/* Spacing */
 	--single-gap: 1rem;
 	--double-gap: 2rem;
+	--triple-gap: 3rem;
 
-	/* Animation Timing */
-	--transition-time: .3s;
+	/* Transitions */
+	--transition-normal: all .3s;
 
 	/* Font Sizes */
 	--font-xxl: 3.75rem;
@@ -80,13 +81,13 @@
 
 html,
 body {
-	padding: 0;
-	margin: 0 auto;
-	font-family: var(--font-family);
-	font-weight: var(--weight-normal);
-	font-variant-Ligatures: normal;
-	color: var(--text-color);
 	background-color: var(--background-color);
+	color: var(--text-color);
+	font-family: var(--font-family);
+	font-variant-Ligatures: normal;
+	font-weight: var(--weight-normal);
+	margin: 0 auto;
+	padding: 0;
 }
 html {
 	overflow-y: scroll;
@@ -97,7 +98,7 @@ body {
 a {
 	text-decoration-color: var(--contrast-color);
 	text-decoration-thickness: .1rem;
-	transition: all .5s;
+	transition: var(--transition-normal);
 }
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
 .visually-hidden {
@@ -118,7 +119,7 @@ h1 {
 	font-size: var(--font-xxl);
 	font-style: normal;
 	line-height: 4rem;
-	margin-top: 3rem;
+	margin-top: var(--triple-gap);
 	margin-bottom: 0;
 }
 h2 {
@@ -130,6 +131,9 @@ h3 {
 	font-size: var(--font-l);
 	line-height: 1.25;
 }
+hr {
+	border-top: var(--border-thin);
+}
 main {
 	padding: var(--single-gap);
 }
@@ -159,8 +163,7 @@ figcaption {
 	padding-top: var(--single-gap);
 }
 .page-block {
-	margin-top: 3rem;
-	margin-bottom: 3rem;
+	margin-top: var(--triple-gap);
 }
 a[href] {
 	color: var(--text-color-link);
@@ -251,7 +254,7 @@ nav ul {
 	height: .8rem;
 	margin-right: .25rem;
 	padding-bottom: .3rem;
-	transition: all .5s;
+	transition: var(--transition-normal);
 	width: var(--single-gap);
 }
 .nav-item {
@@ -269,7 +272,7 @@ nav ul {
 	margin-right: .5em;
 	margin-bottom: 0;
 	text-transform: uppercase;
-	transition: all .5s;
+	transition: var(--transition-normal);
 	letter-spacing: .15rem;
 }
 .nav-item li:hover {
@@ -361,21 +364,20 @@ nav ul {
 	align-items: center;
 	color: var(--text-color-tag);
 	display: inline-flex;
-	font-size: .75rem;
 	justify-content: center;
 	padding: .2rem .4rem .2rem .4rem;
 	text-decoration: none;
 	text-transform: capitalize;
 }
-
+a.post-tag:before {
+	content: "#";
+}
 a.post-tag:visited {
 	color: var(--text-color-tag);
 }
-
 a.post-tag:hover {
 	color: var(--text-color-tag);
 }
-
 .taglist {
 	display: flex;
 	flex-flow: row wrap;
@@ -387,12 +389,6 @@ a.post-tag:hover {
 }
 .taglist li a {
 	font-size: var(--font-l);
-	font-weight: var(--weight-extraheavy);
-	padding: .4rem .8rem .4rem .8rem;
-	text-decoration-color: var(--contrast-color);
-	text-decoration-thickness: .1rem;
-	text-decoration-skip: none;
-	transition: all .5s;
 }
 .postlist-item > .post-tag {
 	align-self: center;
@@ -403,15 +399,15 @@ a.post-tag:hover {
 	align-items: center;
 	display: inline-flex;
 	flex-wrap: wrap;
-	font-size: var(--font-s);
+	font-size: var(--font-n);
 	gap: .5em;
 	list-style: none;
-	margin-bottom: 5em;
+	margin-bottom: var(--triple-gap);
 	padding: 0 0 0 .4em;
 }
 .post-metadata time {
-	font-size: var(--font-n);
 	margin-right: .5em;
+	font-size: var(--font-n);
 }
 
 /* Direct Links / Markdown Headers */

public/img/RSS-Orange.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="153.34879"
+   height="152.90941"
+   id="svg2"
+   version="1.0"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:creator>
+        <dc:subject>
+          <rdf:Bag />
+        </dc:subject>
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
+        <dc:description />
+        <dc:contributor>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:contributor>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/publicdomain/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-427.32264,-373.81385)">
+    <ellipse
+       style="opacity:1;fill:#ff8a00;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path5270"
+       transform="matrix(0.8699574,0,0,0.8699574,135.15631,330.52863)"
+       cx="360.35715"
+       cy="200.64285"
+       rx="24.642859"
+       ry="23.928572" />
+    <path
+       style="fill:#ff8a00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 427.83482,455.05681 -0.0728,-30.27316 c 64.70607,3.37545 100.61878,49.67317 101.50021,101.93961 H 498.944 c -0.50301,-45.94077 -31.74065,-69.99522 -71.10918,-71.66645 z"
+       id="path5805" />
+    <path
+       style="fill:#ff8a00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 428.20143,404.57149 -0.87879,-30.75764 c 99.4284,4.61626 152.67764,76.76812 153.34879,152.90941 l -31.19703,-0.4394 C 550.83932,477.58037 514.80871,406.01731 428.20143,404.57149 Z"
+       id="path5807" />
+  </g>
+</svg>

public/xsl/basic.xsl

@@ -13,23 +13,49 @@
       <link rel="stylesheet" href="../css/webfonts/webfonts.css"/>
     </head>
     <body>
-      <p>
-        This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? Visit
-        <a href="https://aboutfeeds.com">About Feeds</a>
-        to learn more and get started. It’s free.
-      </p>
-      <h1>RSS Feed Preview</h1>
-      <h2>Recent blog posts</h2>
-      <xsl:for-each select="/atom:feed/atom:entry">
-        <h3><a>
-          <xsl:attribute name="href">
-            <xsl:value-of select="atom:link/@href"/>
-          </xsl:attribute>
-          <xsl:value-of select="atom:title"/>
-        </a></h3>
-        Last updated:
-        <xsl:value-of select="substring(atom:updated, 0, 11)" />
-      </xsl:for-each>
+			<main>
+				<p>
+					<i>This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? <a href="../about-feeds/">Learn more and get started</a>. It’s free.</i>
+				</p><hr />
+				<h1>RSS Feed Preview</h1>
+				<p class="nodropcap page-block">Here's the sort of thing you'll see in your newsreader when you subscribe. Done here? <a href="../">Go back to nathanupchurch.com</a></p>
+				<h2>Latest posts</h2>
+				<xsl:for-each select="/atom:feed/atom:entry">
+					<article class="postlist-item">
+						<a class="postlist-link">
+							<xsl:attribute name="href">
+								<xsl:value-of select="atom:link/@href"/>
+							</xsl:attribute>
+							<div class="post-image-container">
+								<img class="post-image">
+									<xsl:attribute name="src">
+										<xsl:value-of select="atom:image/atom:url" />
+									</xsl:attribute>
+								</img>
+							</div>
+						</a>
+						<div class="post-copy">
+							<a class="postlist-link">
+								<xsl:attribute name="href">
+									<xsl:value-of select="atom:link/@href"/>
+								</xsl:attribute>
+								<h3>
+									<xsl:value-of select="atom:title"/>
+								</h3>
+							</a>
+							<time class="postlist-date">
+								<xsl:attribute name="datetime">
+									<xsl:value-of select="substring(atom:updated, 0, 11)" />
+								</xsl:attribute>
+								<xsl:value-of select="substring(atom:updated, 0, 11)" />
+							</time>
+							<p>
+								<xsl:value-of select="atom:description" />
+							</p>
+						</div>
+					</article>
+				</xsl:for-each>
+			</main>
     </body>
     </html>
   </xsl:template>