TL;DR, a jQuery plugin for bloggers

[Tweet : nvALT]

I made a jQuery plugin called “TL;DR”1 live on GitHub last night. It’s designed for bloggers who write long posts: it adds a block with summaries and skip links automatically. It was inspired in part by QuikScan, which was pointed out to me by Christopher Allen.

It’s basically a table of contents with short snippets of text. There are a ton of options that can be configured (all detailed on the project page).

It scans headers and determines sections based on your settings, then it can summarize the text automatically, or you can provide snippets using a data-tldr attribute on your headlines. You can tell it how long to make auto-generated snippets, how many paragraphs to pull from and how many sentences deep it should go into each paragraph.

It can figure out where an intro ends and the post begins and insert the summary at that point, if you want. You can also have it collapse the summaries and apply an animated reveal-on-click. You can even control most of the markup and classes that it outputs, so styling it is relatively easy.

Check out the project page for more info. To see the experimental version in action on this site, go to the gear menu in the upper right and turn on “TL;DR.” Then head to a longer post and click the “TL;DR” block near the top2. To see one with manually curated (and hastily created) summaries, check this post.

Grab the plugin on GitHub. I’ll really only be updating it as needed for my own site, but I’m open to suggestions and pull requests. I kind of plan to add templating to it, and possibly an algorithm that can summarize longer texts without headlines. Maybe.

  1. “Too long, didn’t read,” but you knew that.

  2. Moving forward I plan to add snippets and summaries to my posts manually, but what you’re seeing on previous posts is the auto-generated summaries.