update

.zed/settings.json

@@ -0,0 +1,7 @@
+// Folder-specific settings
+//
+// For a full list of overridable settings, and general information on folder-specific settings,
+// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
+{
+  "soft_wrap": "editor_width"
+}

website/public/css/base.css

@@ -2,6 +2,7 @@
 
 :root {
   --colour-primary-10: #060300;
+  --colour-primary-15: #150800;
   --colour-primary-20: #1f1400;
   --colour-primary-30: #3c2b00;
   --colour-primary-40: #5c4300;
@@ -26,19 +27,22 @@
   --colour-primary-fg: var(--colour-primary-90);
   --colour-primary-fg-accent: var(--colour-primary-80);
   --colour-primary-bg: var(--colour-primary-10);
+  --colour-code-fg: var(--colour-primary-90);
+  --colour-code-bg: var(--colour-primary-15);
   --colour-hyperlink: var(--colour-hyperlink-80);
 
   --font-size-sm: 1rem;
-  --font-size-base: 1.25rem;
+  --font-size-base: 1.125rem;
-  --font-size-md: 1.75rem;
+  --font-size-md: 1.5rem;
-  --font-size-lg: 2.5rem;
+  --font-size-lg: 2rem;
-  --font-size-xl: 3.5rem;
+  --font-size-xl: 3rem;
 
   --spacing-block-xs: 0.5rem;
   --spacing-block-sm: 1.75rem;
   --spacing-block-md: 2.5rem;
   --spacing-block-lg: 3.5rem;
   --spacing-block-xl: 5rem;
+  --spacing-inline-xs: 0.25rem;
   --spacing-inline-sm: 0.5rem;
   --spacing-inline-md: 1.5rem;
   --spacing-inline-lg: 3rem;
@@ -92,9 +96,10 @@ body {
 
 img {
   margin-inline: auto;
+  height: auto;
 }
 
-@media (min-width: 36rem) {
+@media (min-width: 48rem) {
   body {
     display: grid;
     grid-template-columns:
@@ -108,7 +113,7 @@ img {
 
     --body-margin-inline-end: 6rem;
     --grid-margin-inline: 6rem;
-    --grid-total-width: 36rem;
+    --grid-total-width: 48rem;
     --grid-max-content-width: calc(
       var(--grid-total-width)
         - var(--body-margin-inline-start)
@@ -133,12 +138,6 @@ img {
   }
 }
 
-@media (min-width: 48rem) {
-  body {
-    --grid-total-width: 48rem;
-  }
-}
-
 /** Headings */
 
 h1 {
@@ -262,3 +261,28 @@ blockquote :is(i, em) {
 .small-caps {
   font-variant: small-caps;
 }
+
+/** Pre-formatted blocks */
+pre {
+  border: 2px solid var(--colour-primary-fg);
+  border-radius: 2px;
+  background-color: var(--colour-code-bg) !important;
+  margin-block-start: var(--spacing-block-sm);
+  padding-inline: var(--spacing-inline-sm);
+  padding-block: var(--spacing-block-xs);
+}
+
+/** Code blocks */
+code {
+  border: 2px solid var(--colour-primary-fg);
+  border-radius: 2px;
+  padding-inline: var(--spacing-inline-xs);
+  color: var(--colour-code-fg);
+  background-color: var(--colour-code-bg);
+  font-size: var(--font-size-sm);
+}
+pre code {
+  border: none;
+  border-radius: none;
+  padding: none;
+}

website/src/components/BlogFeed.astro

@@ -64,7 +64,7 @@ const canonicalBlogUrl = new URL('blog', Astro.site)
 		<ul>
 			{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
 				<li class="h-entry">
-					<a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>.
+					<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>.
 					<Fragment set:html={post.data.description} />
 					Added: <FormattedDate date={post.data.pubDate} />
 				</li>

website/src/components/Me.astro

@@ -45,6 +45,7 @@
                 <a href="https://www.facebook.com/joe.carstairs.5" rel="me">Facebook</a>,
                 <a href="https://mastodon.social/@joe_carstairs" rel="me">Mastodon</a>,
                 <a href="https://www.linkedin.com/in/joe-carstairs-0aa936277" rel="me">LinkedIn</a>,
+                <a href="https://bsky.app/profile/joeacarstairs.bsky.social" rel="me">BlueSky</a>,
                 or <a href="https://github.com/joeacarstairs" rel="me">GitHub</a>.
             </small>
         </p>

website/src/content/blog/2025/01/19/my_feed_and_reading_list.md

@@ -0,0 +1,193 @@
+---
+title: How I read things on the Internet now (no, of course I don't leave the terminal!)
+description: >-
+  I've been sprucing up how I follow what's happening on the Internet. I can
+  now read all the things I want to read pretty efficiently, and enjoy doing
+  it, which is exciting.
+pubDate: 2025-01-19
+---
+
+## The problem
+
+I like to read things on the Internet sometimes. Or listen to things. Or watch
+things.
+
+Some interesting people write blog posts. Some beautiful people make music. Some
+silly people make comedy sketches. Sometimes my friends are sharing stuff with
+their friends, which means me (WIP on that front: I'll get back to that).
+
+I want to know about it. I want to read interesting things that will educate
+me. I want to hear beautiful music. I want to hear about what my friends are up
+to.
+
+I can't read everything as it comes in, it's too much: I'll need to sift a lot
+of it out quickly. I'll need to sift through it regularly to stay on top of it:
+like, several times a week, if not daily. And sometimes, while I'm doing my
+daily sifting, I'll find something I really want to read, but I haven't got
+time right now: I'll save this for the weekend.
+
+For a while, I've been hosting [CommaFeed][commafeed] on [PikaPods][pikapods].
+This has been OK ([OMG, RSS is cool][rss]), but the interface is just clunky
+enough to make it a chore to use. That means I don't sift through stuff
+regularly, and that means my feed piles hundreds of unread posts high.
+
+It also hasn't been any good for distinguishing between stuff I don't want to
+read *ever*, and stuff I don't want to read *right now* but will get round to
+later. I could in theory use the bookmarking feature built-in to my browser,
+but removing things after I've read them is too clunky, so I don't do it.
+
+## The solution
+
+Every morning, I open my terminal and run [newsboat][newsboat].
+
+![newsboat showing how many unread posts I have at a glance in the opening view](./newsboat.webp)
+
+I know the unread count is pretty fresh, because I've set up a systemd service
+to run newsboat at startup to fetch the feeds.
+
+I press `l` twice to open a post. Then I press `n` to navigate to the next
+unread post until I run out of unread posts.
+
+![newsboat displaying a post](./newsboat-post.webp)
+
+If I encounter something I want to read later, but don't have time right now, I
+press `b`, which runs a home-made bookmarking script. Here it is:
+
+```bash
+### readlater.sh ###
+
+# newsboat passes a few arguments:
+# the first one is the post URL
+url="$1"
+
+# I turn the URL into a suitable filename
+filename=$( \
+  echo $url | \
+  sed "s/.*:\/\///" | \
+  sed "s/\//./g" | \
+  sed "s/\.html\$//g" \
+)
+filename="$filename".html
+
+# If I've already got this in my reading list,
+# I don't add it again
+if [[ -a "$HOME/readlist/unread/$filename" ]]
+then
+  exit 0
+fi
+
+# Otherwise, I download the post with curl
+# and pipe it to a file in my reading list
+# folder, ~/readlist/unread
+curl "$url" > "$HOME/readlist/unread/$filename"
+```
+
+I can also run this script manually and pass it a URL of my choice at any time,
+say, if I find an interesting article while browsing the Web.
+
+When I want to read from my reading list, I run `readnow.sh`, which simply
+opens my reading list folder, `~/readlist/unread`, in my terminal file browser
+of choice: namely, [ranger][ranger].
+
+![ranger showing the contents of my reading list with a preview](./ranger.webp)
+
+Although ranger has a preview, I'll typically open the file up in my terminal
+web browser of choice, which is [w3m][w3m] (plus a couple of custom
+key-bindings). I've configured this to be my preferred web browser in ranger by
+shifting it to the top of the list of HTML browsers in
+`~/.config/ranger/rifle.conf`.
+
+```conf
+### ~/.config/ranger/rifle.conf ###
+
+...
+
+ext x?html?, has w3m,               terminal = w3m "$@"
+ext x?html?, ...
+
+...
+```
+
+Having configured my default web browser in my ranger config, all
+I need to do is press `l`.
+
+![A post displaying in w3m](./w3m.webp)
+
+No ads, no cookie popups, no giant banner images taking 2 seconds to load and
+shifting the content all over the place: just the text I want to read. Isn't it
+beautiful?
+
+Once I'm finished reading the post, I'll press `q` to quit w3m and return to
+ranger. Assuming I don't need to read it again, I'll press `dm` to move the
+post to `~/readlist/read` - my way of marking a post as 'read'.
+
+I've done this by writing a super simple script, `markread.sh`:
+
+```bash
+### markread.sh ###
+
+filename="$(basename $1)"
+
+if [[ -a "$HOME/readlist/unread/$filename" ]]
+then
+  mv "$HOME/readlist/unread/$filename" "$HOME/readlist/read/$filename"
+  echo "Marked $filename as read."
+else
+  echo "I couldn't find a file in ~/readlist/unread with the name: $filename"
+fi
+```
+
+...and hooking it onto the custom keybinding, `dm`, in ranger:
+
+```conf
+### ~/.config/ranger/rc.conf ###
+
+...
+
+# map `dm` to run markread.sh in the shell, providing the active filename
+# as the first and only argument
+map dm shell markread.sh %f
+
+...
+```
+
+## The result
+
+I can now keep up to date, and I enjoy doing it.
+
+I get not everyone likes to live in the terminal. I think the key takeaways
+are:
+
+- Make it really easy to sift through new posts
+- When you sift, sift through every post, and for each one, either read it
+  straight away, or add it to your reading list
+- Sift daily
+- Make it really easy to add things to your reading list
+- Make it really easy to browse, read things, and mark things read in your
+  reading list
+- Set aside time to catch up on your reading list
+- Make the whole thing joyful (both because joy is good, and because you won't
+  do it otherwise)
+
+## Next steps
+
+I still haven't really figured out social media. I'd like to stay up to date
+with what my friends are doing, especially the ones I don't see very often. If
+my friends are posting stuff on the Internet, I'd love to see it.
+
+I still need to know:
+
+- Are my friends posting stuff on the Internet?
+- If so, where?
+- What's the best way of subscribing to their posts - even if they live on
+  different websites and in different formats?
+- What's the best way of sending and receiving comments/replies/reactions?
+
+TBC. Answers on a postcard please.
+
+[commafeed]: https://www.commafeed.com
+[pikapods]: https://www.pikapods.com
+[newsboat]: https://newsboat.org
+[ranger]: https://ranger.github.io
+[rss]: /blog/2024/05/02/no_more_youtube
+[w3m]: https://w3m.sourceforge.net