{
  "$type": "site.standard.document",
  "canonicalUrl": "https://www.simoncox.com/post/2025-04-04-creating-a-blogroll-page-from-mastodon-bookmarks/",
  "description": "How I used the Mastodon API to turn my bookmarked toots into a living blogroll page on my website — despite JavaScript being a bit of a dark art.",
  "path": "/post/2025-04-04-creating-a-blogroll-page-from-mastodon-bookmarks/",
  "publishedAt": "2025-04-04T00:00:00.000Z",
  "site": "at://did:plc:tki7vwlanxbwrz2er67eaeqa/site.standard.publication/3mp4h4md7zv2y",
  "tags": [
    "Web",
    "Eleventy"
  ],
  "textContent": "Why did I want a bookmarks page?\nA thing that has been on my ideas list for quite some time is to create a links type page from the Toots I bookmark on Mastodon. The mastodon bookmarks are really handy for items that I want to go back to, to read more or as a prompt to get me to do something. Having them actually on my website makes it more like a blogroll of old and here is my bookmarks page. \n\nMastodon API\nMastodon has an API that you can pull many interesting things out of and this was what got me thinking about this idea in the first place. It has been on the ideas list for a few years because I can't really write Javascript. I can look through it and make some good assumptions to whats happening but coding this is still a dark art to me. The Mastodon API docs are available to peruse and I had a glance at one point.\n\nDown the rabbit hole of code I go\nSo I turned to AI. Of course I did, and if you think less of me for it then that's just fine with me and no doubt you will give me some grief on Mastodon. Off you toddle.\n\nMeanwhile for those of you that are still interested I went through a fair bit of prompting and trial and error to get this working in the first place and then how I wanted it to work. It wasn't 5 mins time of ChatGPT and there it was. No, it was a week of spare moments pulling out hair, trying to understand things and then trying again. In the end I got there and I did learn a lot from it.\n\nWith the Mastodon API you can pull out 40 bookmarks in one go - you can pull out more but then you have to call the API again asking for pagination and I have not had time to work out how to do that properly yet. I may not ever bother as 40 takes me back quite a while as I don't bookmark that often, though I might do more of it now!\n\nThe environment file\nFirst I had to set up a .env file with my Instance and Access token at root level in my 11ty folder so that the script to make the authenticated call. In this file I added the following two lines (I have not filled in the instance or token in this example!):\n\nMy instance being the Mastodon server I am on. The Mastodon Access Token I needed to create by going to my Mastodon Preferences > Development to create New application. I give the Application a name and then at the top of the page I found my access token - it's a long string. Next I choose the Scope - read:bookmarks is all that I needed for this and then I saved the application down at the bottom with the Save Changes button. \n\nI added those two values to my .env file.\n\nThe bookmarks Script\nNext I created a bookmarks.js file in my _data folder and this is my current script:\n\n Page code\nTo display the output I set up the following. I have the styles inline at the moment as I am still mucking around with it so they may well end up in the site css.\n\nProcess of adding the bookmarks\nI did not want this process to be client side as it would have taken too long to load the page and there was a bigger risk of exposing my token. So I have this setup to build out the page when I run my build command locally. the html page gets build and the images added from cache to the img folder. That is then submitted to Github and deployed to the server.\n\nThe disadvantage with this is that I need to go through a build process to get the latest 40 bookmarks onto the page. I am always tinkering with this site though so that's not a problem for me!\n\nWhat next? \nHopefully some others will find this useful and create something similar if not a lot better and I await for you to post on Mastodon so that I can bookmark them!",
  "title": "Creating a blogroll page from Mastodon bookmarks"
}