A pain point of the IndieWeb is that it's sometimes not as convenient to share content as it is on the common social media platforms… That’s why I wanted to improve this process for my site.
This was a fantastic walkthrough by Max. And based on this, I’ve just finished implementing an easy-bookmarking feature on my own website.
I already use this site to save Bookmarks so I’m hooking into that. For the bookmark-saving form, I’ve used Stimulus rather than Preact. But otherwise this is very much based on Max’s superb tutorial.
Here’s my bookmarklet code so that future-me can create a new browser bookmark, edit it and paste this in.
javascript:(function(){var title = document.getElementsByTagName('title')[0].innerHTML;title = encodeURIComponent(title);var selection = '';if (window.getSelection) {selection = window.getSelection().toString();} else if (document.selection && document.selection.type != 'Control') {selection = document.selection.createRange().text;}selection = encodeURIComponent(selection);new_window=window.open('https://fuzzylogic.me/bookmarker/?title='+title+'&body='+selection+'&url='+encodeURIComponent(document.location.href),'Sharer','resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=680,height=700,location=0');})();Incidentally, this process also provided a great way to dip my toes into the world of Netlify Functions and their supporting tools, netlify-dev and netlify-lambda.
There’s more to be done but I wanted the first bookmark created with my shiny new system to be a link to Max’s original tutorial – and this post is it.
Many thanks, Max!