Ed Johnson-Williams

I've recently added a page called Reading List to this website. It's a page that shows the unread articles in my Pocket account that I haven't tagged as 'private'.

This post details how this works using Eleventy Javascript data files, the Pocket API, IFTT webhooks, and Netlify build webhooks.

In case you don't know, Pocket is a service that lets you save links to read/watch later. It's really well-integrated into Firefox.

I recently switched this blog from Jekyll to Eleventy. Eleventy is a static-site generator.

Eleventy lets you make any data returned by a Javascript file available to your website. This means you can pull in data from an external API and feed it to your templates to display on your website as static HTML. So the only time a call to the Pocket API is made is when the site is being built on the server.

For my site, I use a Javascript file called readingList.js that 1) pulls in all my items saved in Pocket, 2) reverses the order so they're roughly in descending publication date order, and 3) excludes any items I've tagged in Pocket as 'private'.

The data from Pocket's API is then available to my templates – written in Nunjucks in my case.

I host this website on Netlify. Netlify runs a build of your site when you make a change to the git repository it's linked to. Usually these changes would be things like adding a new blogpost or changing some CSS. But when I add an article to Pocket, no changes are made to the files in the git repository. The readingList.js file stays the same.

So, for automated updating of the Reading List page, I need to trigger a build whenever something changes in my Pocket account.

I'm doing this using IFTT 'Applets'. I've set up triggers to run whenever 1) a new item is added to my Pocket account, 2) if an item is archived, or 3) if an item is tagged as 'private'.

And because IFTT can't detect if a tag is removed from a Pocket item, I've also added a trigger that runs once a day at midnight. This one makes sure any items are displayed which I'd previously tagged as 'private' but then had that tag removed.

When these 'applets' above run, they send a webhook to Netlify to start a new build - using a 'Build hook' from the 'Build & Deploy' settings in Netlify. In IFTT, you set a POST request to a URL generated by Netlify that looks like this: https://api.netlify.com/build_hooks/6rbs0k5tmi3ipx7s8g82k9fm?trigger_title=Midnight+build

Notice you can include a trigger_title parameter which can be unique to each IFTT applet. This shows up in the Netlify build logs so you can check back on what happened.

When these applets start a new build, the site pulls in the updated Pocket data and then rebuilds the HTML using the new Pocket data. I don't have to do anything other than manage my Pocket account for the changes to be replicated on my site.

That's it. I've possibly missed something. Let me know if you have any questions :-)

--

Thanks to Bryan L. Robinson for his blog explaining how to get Eleventy's Javascript data files working with the Meetup API. I've adapted his work for my purposes here.

Thanks also for Felix Neumann's tool that lets you easily generate a Pocket Access Token.