From c83e0a5e494346237971cf1b0b3b586ef0b9d3c5 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Thu, 11 Jan 2024 15:47:35 -0800
Subject: [PATCH] chore: link page post

---
 src/posts/2024/link-page-improvements.md | 69 ++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/posts/2024/link-page-improvements.md

diff --git a/src/posts/2024/link-page-improvements.md b/src/posts/2024/link-page-improvements.md
new file mode 100644
index 00000000..ae89fc1c
--- /dev/null
+++ b/src/posts/2024/link-page-improvements.md
@@ -0,0 +1,69 @@
+---
+date: '2024-01-10'
+title: 'Link page improvements'
+description: "I made a few improvements to my link page that's powered by Readwise Reader."
+draft: false
+tags:
+  - 'development'
+  - 'tech'
+  - 'Eleventy'
+---
+
+I made a few quick improvements to my [links page](/links).<!-- excerpt -->
+
+I've fetched the author from Readwise's Reader API and displayed it next to the time, which required the simple addition of a field to my `links.js` data file. Additionally, and perhaps more interestingly, when a link has been shared via [Nicolas Hoizey](https://nicolas-hoizey.com)'s [GitHub action](https://github.com/nhoizey/github-action-feed-to-mastodon), it's rendered with a Mastodon icon linking to said post.
+
+Nicolas' GitHub action stores data about syndicated posts in a `cache` directory and one of the two files it creates contains an object where each post is represented by an object with the shared link used as the key for the object. These objects look like this:
+
+```json
+"https://hypercritical.co/2024/01/11/i-made-this": {
+  "id": "aHR0cHM6Ly9oeXBlcmNyaXRpY2FsLmNvLzIwMjQvMDEvMTEvaS1tYWRlLXRoaXM=",
+  "title": "🔗: I Made This",
+  "url": "https://hypercritical.co/2024/01/11/i-made-this",
+  "content_text": "🔗: I Made This #Tech https://hypercritical.co/2024/01/11/i-made-this",
+  "date_published": "Thu, 11 Jan 2024 18:59:15 +0000",
+  "toots": [
+    "https://social.lol/users/cory/statuses/111739101741733921"
+  ],
+  "lastTootTimestamp": 1705003383562
+}
+```
+
+With this data available, I created a `linkPosts.js` data file:
+
+```javascript
+import { createRequire } from 'module'
+
+const require = createRequire(import.meta.url)
+const mastodonCache = require('../../cache/jsonfeed-to-mastodon.json')
+
+export default async function () {
+  return mastodonCache
+}
+```
+
+A simple filter handles the lookup when provided with the url and the data object:
+
+```javascript
+findPost: (url, posts) => {
+  if (!url || !posts) return null;
+  return posts[url]?.toots?.[0] || null;
+},
+```
+
+This is then implemented in the `links.html` page template:
+
+{% raw %}
+```liquid
+{%- assign shareLink = link.url | findPost: linkPosts -%}
+<!-- template stuff -->
+{%- if shareLink %}
+  <a class="brand-mastodon icon--small" href="{{ shareLink }}">
+    {% tablericon "brand-mastodon" "Mastodon post" %}
+  </a>
+{% endif -%}
+<!-- more template stuff -->
+```
+{% endraw %}
+
+With that in place my site will, eventually, link to the post for each link I share via a small Mastodon icon next to the date.
\ No newline at end of file