UI updates

_includes/layouts/home.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 showPostListHeader: yep
 ---
-<h1>Hi there, friend.</h1>
+<h1>I'm Nathan; welcome&nbsp;friend.</h1>
-<p class="nodropcap page-block">My name is Nathan Upchurch. Welcome to my personal website and blog, where I write about all sorts of <a href="/tags">things</a> that I find interesting. On this website, you can learn more <a href="about">about me</a>, see <a href="now">what I’ve been up to lately</a>, <a href="blog">read my blog</a>, look at some <a href="galleries">pictures</a>, or explore the <a href="sitemap">sitemap</a> to see what else you can do here.</p>
+<p class="nodropcap page-block">My name is Nathan Upchurch, and this is my personal website and blog, where I write about all sorts of <a href="/tags">things</a> that I find interesting. On this website, you can learn more <a href="about">about me</a>, see <a href="now">what I’ve been up to lately</a>, <a href="blog">read my blog</a>, look at some <a href="galleries">pictures</a>, or explore the <a href="sitemap">sitemap</a> to see what else you can do here.</p>
 
 {{ content | safe }}

_includes/layouts/post.njk

@@ -4,7 +4,7 @@ layout: layouts/base.njk
 {# Only include the syntax highlighter CSS on blog posts #}
 {%- css %}{% include "public/css/code.css" %}{% endcss %}
 <article class="post">
-<h1>{{ title }}</h1>
+<h1>{{ title | safe }}</h1>
 {% if not hideMetadata %}
 <div class="post-metadata">
 	{% if author %}
@@ -13,7 +13,7 @@ layout: layouts/base.njk
 	{% endif %}
 	<div class="post-metadata-copy">
 		<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
-		{% if author.name %}{{ author.name }}{% endif %}{% if author.url %}</a>,&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+		{% if author.name %}By {{ author.name }}{% endif %}{% if author.url %}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time></p>
 
 	{% else %}
 	{% if metadata.author.profilePic %}
@@ -21,7 +21,7 @@ layout: layouts/base.njk
 	{% endif %}
 	<div class="post-metadata-copy">
 		<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
-		{% if metadata.author.name %}{{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a>,&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+		{% if metadata.author.name %}By {{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time></p>
 
 	{% endif %}
 
@@ -44,4 +44,3 @@ layout: layouts/base.njk
 {{ content | safe }}
 </article>
 {% include "mastodonComments.njk" %}
-{% include "nextLast.njk" %}

_includes/postslist.njk

@@ -1,23 +1,44 @@
 <section class="postlist">
-{% if showPostListHeader %}<h2>{{ metadata.postlistHeaderText }}</h2>{% endif %}
+	{% if showPostListHeader %}<h2>{{ metadata.postlistHeaderText }}</h2>{% endif %}
-<div class="postlist-item-container">
+	<div class="postlist-item-container">
-	{% for post in postslist | reverse %}
+		{% for post in postslist | reverse %}
-	<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+		<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>
+				<div class="post-image-container">
-					{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}
+					<img class="post-image" {% if post.data.imageURL %} src="{{ post.data.imageURL }}" alt="{{ post.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
-				</h3>
+				</div>
 			</a>
-			<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
+
-			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ post.data.description | truncate(105) | safe }}{% endif %}
+			<div class="post-copy">
-		</div>
+				<a href="{{ post.url }}" class="postlist-link">
-	</article>
+					<h3>
-	{% endfor %}
+						{% if post.data.title %}{{ post.data.title | safe }}{% else %}<code>{{ post.url }}</code>{% endif %}
-</div>
+					</h3>
+				</a>
+
+				<div class="post-metadata">
+					<div class="post-metadata-copy">
+						<p>
+						{% if post.data.author %}
+							{% if post.data.author.url %}<a href="{{ post.data.author.url }}">{% endif %}{% if post.data.author.name %}By {{ post.data.author.name }}{% endif %}{% if post.data.author.url %}</a>&nbsp;•&nbsp;{% endif %}{% else %}<a href="{{ metadata.author.url }}">By {{ metadata.author.name }}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ post.date | htmlDateString }}">{{ post.date | niceDate }}</time>
+						</p>
+						<ul>
+							{%- for tag in post.data.tags | filterTagList %}
+							{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+							<li>
+								<a
+								href="{{ tagUrl }}"
+								class="post-tag">
+									{{ tag }}&nbsp;
+								</a>
+							</li>
+							{%- endfor %}
+						</ul>
+					</div>
+				</div>
+			</div>
+		</article>
+		<hr>
+		{% endfor %}
+	</div>
 </section>

content/about/index.md

@@ -5,7 +5,7 @@ eleventyNavigation:
   order: 2
 ---
 <article>
-<h1>About me and my website.</h1>
+<h1>About me and my&nbsp;website.</h1>
 <p class="page-block nodropcap">I’m a prolific vegan home cook, classical trombonist, incense maker, 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, designer, programmer, music producer, print lover, and human with too many interests and too little time. This is my little corner of the internet where I talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself 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 when I get around to it.</p>
 
 <a href="./colophon/">

content/blog.njk

@@ -6,10 +6,10 @@ eleventyNavigation:
   key: Blog
   order: 3
 ---
-<h1>Nathan’s blog.</h1>
+<h1>My personal blog.</h1>
 
 <p class="page-block nodropcap">
-Thank you for visiting my blog; I write about lots of things here, from <a href="/tags/storytime">personal stories</a>, to <a href="/tags/gnu-linux">tech</a>, <a href="/tags/vegan-cooking">food</a>, and <a href="/tags/incense">incense</a>. Explore all posts below or <a href="/tags/">choose a topic</a>. Want to know what I've been reading? <a href="../blogroll/">Exlore the blogroll</a>.<br />
+I write about whatever I like here, from <a href="/tags/storytime">personal stories</a>, to <a href="/tags/gnu-linux">tech</a>, <a href="/tags/vegan-cooking">food</a>, and <a href="/tags/incense">incense</a>.<br />
 
 <a href="/tags/">
 	<button type="button">Topics »</button>

content/feeds.njk

@@ -33,7 +33,7 @@ permalink: "/feeds/{{ tag | slugify }}.xml"
 	{% 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>
+		<title>{{ post.data.title | safe }}</title>
 		<description>{{ post.data.description | truncate(150) }}</description>
 		<link href="{{ absolutePostUrl }}"/>
 		<updated>{{ post.date | dateToRfc3339 }}</updated>
@@ -44,6 +44,7 @@ permalink: "/feeds/{{ tag | slugify }}.xml"
 			<link href="{{ absolutePostUrl }}"/>
 		</image>
 		<content type="html">{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) }}</content>
+		<hr>
 	</entry>
 	{%- endfor %}
 </feed>

content/galleries/index.njk

@@ -4,9 +4,9 @@ eleventyNavigation:
   key: Pics
   order: 4
 ---
-<h1>Image Galleries</h1>
+<h1>My image galleries.</h1>
 <p class="page-block nodropcap">
-Some pictures I thought would be worth posting.
+Photography trips, memes, and other pictures I thought would be worth sharing.
 </p>
 <section class="postlist">
 <div class="postlist-item-container">
@@ -23,10 +23,15 @@ Some pictures I thought would be worth posting.
 					{{ gallery.title }}
 				</h3>
 			</a>
-			<time class="postlist-date" datetime="{{ gallery.date | htmlDateString}}">{{ gallery.date | readableDate("LLLL yyyy") }}</time>
 			<p>{{ gallery.synopsis | truncate(105) | safe }}</p>
+			<div class="post-metadata">
+				<div class="post-metadata-copy">
+					<p>Posted on the&nbsp;<time class="postlist-date" datetime="{{ gallery.date | htmlDateString}}">{{ gallery.date | niceDate("LLLL yyyy") }}</time></p>
+				</div>
+			</div>
 		</div>
 	</article>
+	<hr>
 	{% endfor %}
 </div>
 </section>

content/index.njk

@@ -3,7 +3,7 @@ layout: layouts/home.njk
 eleventyNavigation:
   key: Home
   order: 1
-numberOfLatestPostsToShow: 5
+numberOfLatestPostsToShow: 3
 numberOfNowPostsToShow: 1
 ---
 <div class="now">
@@ -14,11 +14,15 @@ numberOfNowPostsToShow: 1
 {% set postslistCounter = postsCount %}
 {% set showPostListHeader = false %}
 {% include "postslist.njk" %}
+
+{% set morePosts = postsCount - numberOfNowPostsToShow %}
+{% if morePosts > 0 %}
 	<a href="/now/">
 		<button type="button">
-			See more on the “now” page »
+			See {{ morePosts }} more »
 		</button>
 	</a>
+{% endif %}
 </div>
 
 {% set postsCount = collections.posts | length %}
@@ -32,7 +36,10 @@ numberOfNowPostsToShow: 1
 {% if morePosts > 0 %}
 <a href="/blog/">
 	<button type="button">
-		See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in the blog »
+		See {{ morePosts }} more »
 	</button>
-</a>
+</a>&nbsp;
 {% endif %}
+<a href="/tags/">
+	<button type="button">Topics »</button>
+</a>

content/now.njk

@@ -4,12 +4,12 @@ title: Nathan Upchurch | Now
 structuredData: none
 ---
 <article class="post">
-<h1>Now: What’s Been Going on Lately?</h1>
+<h1>Now: Life updates.</h1>
 {% set now = collections.now | last %}
 <h2>{{ now.data.title }}</h2>
 {{ now.content | safe }}
 </article>
-<p class="metadata">Updated: {{ now.date | readableDate }} |&nbsp;<a href="https://nownownow.com/about">What is a now page?</a></p>
+<p class="metadata">Updated on the {{ now.date | niceDate }} by {{ metadata.author.name }} |&nbsp;<a href="https://nownownow.com/about">What is a now page?</a></p>
 
 {% set postsCount = collections.now | removeMostRecent | length %}
 {% if postsCount > 1 %}

content/tags-list.njk

@@ -4,10 +4,10 @@ layout: layouts/base.njk
 title: Nathan Upchurch | Tags
 structuredData: none
 ---
-<h1>Here are some things I like to talk about.</h1>
+<h1>Some things I like to&nbsp;talk about:</h1>
 
 <p class="page-block nodropcap">
-Click on a tag to see all posts on the topic.
+Click on a tag to see all posts on the topic; you can also subscribe to an RSS feed of any individual topic on the topic page.
 </p>
 
 <ul class="taglist">