Duct Taping A Hypothes.is RSS Feed Widget

Do you remember the scene of Web Apocalypse Not Now where Lieutenant Colonel Bill Feedmore boasts, “I love the smell of an RSS feed in the morning!”

I hope not.

But tinkering with RSS never tires, the technology that is always declared dead, but just keeps working.

A current project I am doing with Gardner Campbell involves a lot of web annotation activity on a single, major document in Hypothes.is (you might as well peek, it’s almost ready).

I wanted to put a widget in the footer of the WordPress site showing the latest activity, so naturally, RSS feeds are the way to go, since Hypothes.is provides a few, one of them for all annotations on a single URL; for ours it is https://hypothes.is/stream.atom?uri=http://dougengelbart.org/content/view/138/000/

And quick peek at the results confirms, yup, there are the standard fields there. So using the standard WordPress widget it goes, Pretty easy.

Entry fields for WordPress RSS Feed widget, options checked for showing item content, author, and date.

And it works. Sort of.

Output of RSS Feed Widget for an Annotation activity on a single document

I’m not linking much that it outputs the long title for every item; the feed is for all activity on this paper, and it seems… redundant.

The other thing is that the links in the feed lead you to the annotation all on it’s very own URL, e.g. https://hypothes.is/a/nXrt4BUeEem1Vzf6WTaujQ

The link in the feed leads to its full content floating alone

whereas what I might want to see is where the first link from here leads to, the annotation opened in the Hypothesis tool in the context of the content being annotated, or in this case https://hyp.is/nXrt4BUeEem1Vzf6WTaujQ/dougengelbart.org/content/view/138/000/

Looking at both of these URLs, I see the ID number for the annotation, so maybe there is a way to rejig the feed.

So what I would like to do is replace the title item in the feed with something like “View Annotation” and re-write the URL. With some thought, this seems like a job for jQuery.

To do this I make a static HTML save of the page (really just the widget output), and start hacking away at the jQuery need to select all list item links. After about 45 minutes of lots of back and forth to Stack Exchange, I got this bit working:

$( document ).ready(function() {
    
    $("li a.rsswidget[href^='https://hypothes.is']").each(function() {
	// no need for title
    	$(this).html( 'See Annotation' );
    	
    	// make direct link to annotation in document
	$(this).attr("href", $(this).attr("href").replace("hypothes.is/a", "hyp.is") + '/dougengelbart.org/content/view/138/000/' )
	});   
});

$( document ).ready(function() {

$("li a.rsswidget[href^='https://hypothes.is']").each(function() {

// no need for title

$(this).html( 'See Annotation' );

// make direct link to annotation in document

$(this).attr("href", $(this).attr("href").replace("hypothes.is/a", "hyp.is") + '/dougengelbart.org/content/view/138/000/' )

});

It selects all list items with links having a class name of rsswidget and also (kist in case there might be some other feed widget in play) just ones linking to hypothes.is (this may be the fanciest selector I have ever done).

Then, cycling through each one, $(this).html lets me replace the visible hyperlink text, and then modifying the link itself to swap the URL bits and append the part that provides the actual target document link.

My, is my Javascript getting terse?

How to put it into the WordPress site? Despite my best hunches, I had not planned any theme hacking for this project, so I did not start it with a child theme. But no reason why my wee hack, which is just some extra JavaScript to be loaded, could not be done from a plugin. The working parts of this plugin are tiny roo.

// register jquery for custom scripts
add_action('init', 'aughelper_register_script');

// register the script, depends on jQuery being loaded
function aughelper_register_script() {
    wp_register_script( 'aughelper', plugins_url('/js/framework.js', __FILE__), array('jquery') );
}

// use the registered jquery
add_action('wp_enqueue_scripts', 'aughelper_enqueue_style');

function aughelper_enqueue_style(){
   wp_enqueue_script('aughelper');

}

// register jquery for custom scripts

add_action('init', 'aughelper_register_script');

// register the script, depends on jQuery being loaded

function aughelper_register_script() {

wp_register_script( 'aughelper', plugins_url('/js/framework.js', __FILE__), array('jquery') );

}

// use the registered jquery

add_action('wp_enqueue_scripts', 'aughelper_enqueue_style');

function aughelper_enqueue_style(){

wp_enqueue_script('aughelper');

}

This is really just a one off. If I were to make it more of a general plugin, I’d probably add options for some things I have hard coded.

But it does the job.

Almost.

The date and the “author” name (actually annotator) are just hanging out there, I’d like to make it a bit more readable.

The date and the name of the annotator are just hanging out there. Can I make it a wee bit better?

The journey starts in inspecting the structure of the widget content, each item is in a list. The date is tucked into an HTML span amd the author is in a cite tag (how often to you them?).

This is where some new CSS magic I learned for another project come into play. using ::after and ::before after a selector, and using content:"something to add"; is a nifty way to add text before or after any thing in a web page (just text, no HTML).

With this added to the Custom CSS in the Customizer, I have the feed display a bit better dressed:

With just a bit of css I am able to add some verbs to the output! Verbs!

This CSS did this trick (rather hard wired to the ID of this widget, sue me)

#rss-2 .rss-date::before {
    content: "added ";
}

#rss-2 cite::before {
    content: "noted by ";
}

#rss-2 .rss-date::before {

content: "added ";

}

#rss-2 cite::before {

content: "noted by ";

}

And back in the browser inspector one can see that the text “noted by ” is not in the source, but actually the CSS (and to the person looking at the page, they just see it as I planned)

The ::before in the source is a placeholder filled by CSS.

This is all sounding like some minor gibberish, but I like how with a little bit of effort I am not stuck with what a widget provided. Were I more motivated, I might write my own widget code which would do this without all the duct tape.

Well maybe a little less duct tape.

Featured Image: Duct_Tape_2016 Wikimedia Commons image by Santeri Viinamäki shared under a Creative Commons CC BY-SA license. Modified by added RSS text with Duct Tape font.