June 19, 2019

Using Bookmarklets to Script Static Sites

Auto-generating text snippets using a little javascript and bookmarklet magic

I’ve been tending to my digital garden / wiki recently. See my other post on using Screenotate to power my screenshot->wiki workflow.

But I found that I’ve been saving too many links to my wiki without any context. I was finding the links while in some other context and wanting a quick way to dump the link into my wiki. The challenge became - how to quickly add context to the link I’m dropping in?

The way I’m solving this is by experimenting with upgrading my workflow by using bookmarklets to make it easy to “script” workflows. I run this blog on Jekyll and Github Pages so it’s entirely static, but that doesn’t mean my workflow has to be.

So I wrote a little javascript:

And turned it into a bookmarklet here (drag this link to your bookmarks bar):]

Quote text

When you’re on a page you select the text you want to quote and hit the bookmarklet. It’ll grab the text and spit out some markdown for you to copy like this:

>quoted text here

Source: [title of page](url of page)

Which renders in markdown like this:

quoted text here

Source: title of page

Yes, for now you need to hit cmd+c to copy the text because I was too lazy to auto-copy the text to my clipboard… But for now this is already making it easier to drop links into my wiki while preserving some context via a quote and the title of the page.

What would you like to script for your static site? Let me know and I’ll try and help you build a bookmarklet for it!

By the way - this technique is great for more structured data too. I have a bookmarklet that is powering this books list too. You run it on an Amazon page and it spits out the necessary Markdown frontmatter to add to my page in a structured way.

Update 8/20/19 - A few posts that came across my stream that extend this idea. Firstly this that walks through a full end to end publish experience: indieweb link sharing and this that seems to predate mine Saving Links to My Site With a Bookmarklet.

More blog posts:

A Lil' Website Refresh

March 20, 2024

This post was written by Tom Critchlow - blogger and independent consultant. Subscribe to join my occassional newsletter: