Emacs, scripting and anything text oriented.

Fragmentions

 
Kaushal Modi
Table of Contents

Have you ever got tired of having to find the a heading’s id (view site source using Ctrl + U) so that you can send someone a link like https://example.com/#foo?1

And then becoming even more frustrated when you find that the heading that you want to link does not even have an id attribute!?

And then in the end you resort to just telling them “Go to that page, and search for `foo’“? —

Today I came across this wonderful Javascript utility script called fragmentions.js by Jonathan Neal (the idea for that was pitched by Kevin Marks) that alleviates that pain — at least on this site (or more, if that site also uses this script, or you use one of the extensions listed in below reference).

As I have this script loaded in the footer of all pages on this site, if you want to link to a phrase “frobnicate foobar” on a page (like this one), simply prefix that with #, and append that to that page’s link.. like https://scripter.co/replies/fragmentions/#frobnicate%20foobar2Go ahead, click that link, try it.

You too can do that for your sites by downloading the fragmentions.js from the above linked project repo and loading it in your site footer.

Fragmention(er) #

Kartik Prabhu then goes an extra mile, and comes up with fragmentioner.js (and fragmentioner.css) that’s designed to be used along with fragmentions.js.

This project adds a nifty feature — While fragmentions.js allows you to link to #any arbitrary phrase, fragmentioner.js allows you to select a phrase and derive a fragmentions link using that.

I have now added that to this site too. To try it, select any phrase, and click the “Link to text” popup.

Reference #


  1. No wonder you will see, what I call “headline hashes”, for all post sub-headings on my blog 😄. [return]
  2. I replaced the space with %20 so that you can click that link right away, but you can type the literal space when typing in the browser address bar. [return]

If you have written a response to this, enter your response post's URL below.

Or, you can send a "comment" webmention (it's OK if you don't know what that means). When asked about your website on an IndieAuth login screen, simply type https://commentpara.de.

Markdown Support**bold**, _italics_, ~~strikethrough~~, [descr](link), `monospace`, ```LANG\nline1\nline2\n``` (Yep, multi-line code blocks too, with syntax highlighting!), auto-hyperlinking.

Webmentions #

Comment by Anonymous on Mon Apr 2, 2018 18:34 EDT

The best solution for code would be a micropub client that supports that out of the box, and generates correctly formatted HTML that is then sent to the micropub endpoint.

I don’t think that you should try to parse the plain text HTML sent by Quill to commentpara.de.

Mentioned by Kaushal on Mon Apr 2, 2018 16:04 EDT
New blog post: scripter.co/replies/fragme…
Comment by Anonymous on Wed Mar 28, 2018 02:45 EDT
On my blog, I have a script that automatically adds clickable fragment links to all main elements: http://cweiske.de/tagebuch/html-contentlinks.htm