wordpress shortcode implementation for embedding hypothesis annotations

hypothesis shortcode

add_action( "wp_enqueue_scripts", "hypothesis_annotation_enqueue_scripts_styles" );

function hypothesis_annotation_enqueue_scripts_styles() {
   wp_enqueue_style("hlib.css", "https://jonudell.info/hlib/hlib.css");
   wp_enqueue_script("hlib.bundle.js", "https://jonudell.info/hlib/hlib.bundle.js");
   wp_enqueue_script("showdown.js", "https://jonudell.info/hlib/showdown.js");
}

function hypothesis_annotation($args) {
	$id = $args["id"];
	$alphaNumericId = preg_replace("/[^A-Za-z0-9 ]/", '', $id);
	$return = <<<EOD

<div style="background-color:#ebebe970; padding-left:20px; padding-right:20px; padding-top:2px; padding-bottom:2px; margin-bottom:20px" id="{$alphaNumericId}">
<script>
function process{$alphaNumericId}(annos, replies) {
  annos = annos.map(anno => {
    return hlib.parseAnnotation(anno)
  })
  replies = replies.map(reply => {
    return hlib.parseAnnotation(reply)
  })
  let all = annos.concat(replies)
  all.forEach(anno => {
    let level = 0
    if (anno.refs) {
      level = anno.refs.length
    }  
    hlib.getById('{$alphaNumericId}').innerHTML +=
	  hlib.showAnnotation(anno, level, 'https://hypothes.is/search?q=tag:')
  })
}
var params = {
  'id': '{$id}',
}
hlib.hApiSearch(params, process{$alphaNumericId})
</script>
</div>

EOD;

	return $return;
}

add_shortcode('h_anno', 'hypothesis_annotation');

To deploy this code on my server, I added the above at the top of functions.php file in my current theme. In my case, the file was /var/www/html/wp-content/themes/twentyseventeen/functions.php

A post that uses this:

An annotation:

[h_anno id="y4t89icBEeiQWq-H730U4A"]

Another annotation:

[h_anno id="zSnXfHsYEeiH83u3VpVijQ"]

I'm trying to find the right place to add this in my functions.php file. I currently have a ton of shortcodes added in the theme. I'm using the ReadMe Theme from PixelWars.

My current functions files begins with this structure of listing a function...and then a dashed line to break it up from the next function: