Yesterday I tweeted:
Having a day off is cool because you get to work on your own website instead of someone else’s.
Not only do I have one day off work, I have 11. Owing to the pandemic and the rain, I’ve been indoors and online, cooking up tech debt features.
Here’s a little changelog of what’s new here the past couple of days.
Added post and category types for links
I love when other websites post links with a quote and/or some commentary. Jeremy Keith does it really well, and so does CSS Tricks.
I find myself sharing a lot of links on Twitter or Slack, often about professional topics. I’d like to make a habit of noting what stood out to me, even when I may not have more than a sentence or two to add. I think this offers a great little glimpse into what I’m consuming and also how I’m learning.
In Jekyll, this is easily done by changing the directory structure. Instead of having everything in posts off the root, I moved all the existing articles to articles/_posts and also created links/_posts. Jekyll automatically assigns the corresponding categories to any posts in those directories. Then I can query {% if post.categories contains 'links' %} to add classes, customise content, etc.
In my config file, I can customise the URL for each category type. I’ve long used dylanatsmith.com/wrote/ for articles and I wanted to differentiate links.
defaults:
- scope:
path: "articles"
type: "posts"
values:
layout: "article"
permalink: /wrote/:title
- scope:
path: "links"
type: "posts"
values:
layout: "link"
permalink: /linked/:title
- scope:
path: ""
values:
layout: "home"
Expanded the post list filter to include “articles only” and “links only”
Previously, this was a simple toggle on the homepage that let visitors flip between “all posts” and “highlights” (some handpicked articles I’m more fond of). With the addition of the links category, I wanted to give a bit more control and let people ignore the links if they want.
Implementation of this filter is straightforward. When looping through posts on the homepage, I query their categories and tags and add corresponding classes to the wrapper <li> elements. Articles get article, links get link, etc. When a filter button is pressed, posts with the right class get shown and posts without it are hidden.
At the rate I see the links category growing, I suspect I’ll end up changing the default to articles only.
Completely rewrote my RSS feed’s XML template
I went down a rabbit hole on this. After I added the links category, I didn’t like how the titles appeared on here or in the feed. I wanted to prefix them with “Linked: “ and include the website or author name in parentheses after the title.
I searched long and hard for a way to change the post.title of programmatically but had no luck. I didn’t want to hardcode those strings into the title field since it since I may want to change how I display them in the future.
On the website, I opted for some Liquid logic to achieve my desired result:
{% if post.categories contains 'links' %}Linked: {% endif %}
{{ post.title }}
{% if post.categories contains 'links' %}
{% if post.website_name and post.website_name != "" %}
({{ post.website_name }})
{% elsif post.author_name and post.author_name != "" %}
({{ post.author_name }})
{% endif %}
{% endif %}
Doing the same thing in the feed wasn’t as cut and dry. I’d been using the jekyll-feed plugin to generate my feed.xml file, which doesn’t offer much configuration. I’m always keen to scrap a dependency — especially since I was already unhappy with a few things, like the way the site name was displaying as a full URL in RSS readers — but this meant replicating what it was doing well.
I added a new feed.xml file in my root directory and managed to piece it together by referencing the old XML file generated by jekyll-feed as well as the XML files of some others’ blogs that I read and know display the way I wanted mine. Once I finally got the posts rendering properly, the solution for the titles was copy and pasting the same Liquid used on the site.
Added mailto reply links to posts in my RSS feed
While I was working on RSS stuff, I decided to borrow a concept from Jonnie Hallman that caught on recently. The feed now adds a “reply to Dylan by email” link at the bottom of every email. (On link category posts, I also add “visit original link.”) I liked this idea since Jonnie’s post about it first appeared in my RSS feed. And I know it works because I’ve replied to things he’s written and had some email conversations as a result.
Added Netlify CMS
This is the only thing I did strictly for me and not for visitors/readers. With a blogging process hinging on raw Markdown and git, the barrier to publishing is high. Now that I have the links post category, I wanted to make it easy to add new stuff. I often read and even write on my phone before bed and wanted the option to publish on the spot rather than save a half-baked draft or note of bullet points that I’ll never get back to once the initial spark wanes.
I’ve used Netlify CMS on another site in the past so knew it was a safe bet. If you’re using a static site generator and Netlify, I recommend looking into it. Installation is easy to follow thanks to great documentation and tutorials. You slap a few snippets in your templates, change a couple of settings in your Netlify account, tell it which fields to map to your front matter, and you’re set.
Next I want to:
- re-implement the email link UX pattern I came up with a few iterations of this site ago
- add syntax highlighting for code snippets
- add some new case studies
- sort out a dark mode theme?