All the likes
As you might have already read in one of the older posts, this redesign process is full of silly sub-projects that sidetrack me towards my ultimate goal of finishing the redesign at some point in the future. This post tells the story of one of these sub-projects.
Things I've liked
At some point in February, different posts bubbled into my timeline with a similar topic: self-hosted “like pages”. One post that stuck with me the most was written by Robin Rendle. Robin summarized his thoughts in a blogpost on his own blog called RSS favorites. After reading it, I knew, I wanted something similar. I quickly collected some ideas and after a while, I had a clear goal:
I want a way to display specific bookmarks, I saved in my Pinboard.in account, to also appear publicly on my website.
With a goal in mind, I looked into technical solutions to archive the desired outcome. Thankfully, 11ty offers help with a feature called JavaScript Data Files. With this feature, you run code at build time to fetch data — exactly the thing I needed to do.
Connecting everything with Pinboard
With the power of JavaScript Data Files and a good amount of inspiration and learning from the 11ty Feedbin Plugin, I quickly got a first version up and running. Besides some fancy caching stuff (which I took from the 11ty Feedbin Plugin), the primary task was to call the Pinboard API and get the data I wanted.
Therefore, I stored my Pinboard credentials inside a .env file and imported it later via the dotenv package.
const fs = require('fs');
const fetch = require('node-fetch');
require('dotenv').config();
const USERNAME = process.env.PINBOARD_USERNAME;
const PASSWORD = process.env.PINBOARD_PASSWORD;
...
Besides that, I imported the node-fetch package to use the fetch() functionality, which is available inside of modern browsers, in a Node.js environment. With all of this, the part of getting the content from Pinboard was only some lines of JavaScript:
...
async function fetchPinboard() {
if (!USERNAME || !PASSWORD) {
console.warn(`>>> unable to fetch Pinboard: missing username or password`);
return false;
}
let url = `https://${USERNAME}:${PASSWORD}@api.pinboard.in/v1/posts/all?format=json&tag=like`;
const response = await fetch(url);
if (response.status === 200) {
const feed = await response.json();
return feed;
}
return null;
}
...
One side note: I'm only asking for my Pinboard entries with the tag like. This is my mechanism of only showing the bookmarks I want to have accessible here.
Now, every time Netlify is building this site, 11ty automatically asks Pinboard for new data and refreshes the /likes pages with it.