Hugo annotation shortcode

annotate.html

{{ $mardowned := .Inner | markdownify }}
{{ $optOrg := dict "markup" "html" }}
{{ replaceRE "\\((\\d+)\\)" (trim `<aside id="annotation_$1"><i id="annotation_$1-button" class="fa fa-plus-circle"></i></aside>` "\n") $mardowned | $.Page.RenderString $optOrg }}

annotations.html

{{ with $.Parent }}
{{- if ne $.Parent.Name "annotate" -}}
{{- errorf "annotations must be used within an annotate block" -}}
{{- end -}}
{{- end -}}

{{ $script := slice }}
{{- range $index, $annotation := (findRE "\\d+.*" .Inner) -}}
{{ $annotation_content := replaceRE "\\d+\\." "" $annotation | markdownify }}
{{ $annotation_id := (add $index 1) | printf "%s%d" "annotation_" }}
{{ partial "my-inline-partial.html" (dict "annotation_id" $annotation_id "annotation_content" $annotation_content) }}
{{- end -}}

{{ define "partials/my-inline-partial.html" }}
<script>

$('#{{ .annotation_id }}-button').click(function() {
    var annotation = $('#{{ .annotation_id }}')
    var annotationButton = $('#{{ .annotation_id }}-button')
    var popup = $('#{{ .annotation_id }}-popup')

    annotationButton.toggleClass("fa-plus-circle")
    annotationButton.toggleClass("fa-times-circle")
    if (popup.length) {
        popup.remove()
    } else {
        var popup = $('<div>', {
            id: '{{ .annotation_id }}-popup',
            class: 'some-class some-other-class',
            title: 'now this div has a title!',
            css: {
                "padding": "0.8rem",
                "position": "absolute",
                "z-index": 1,
                "background": "#eee",
                "border-radius": "0.1rem",
                "box-shadow": "0 0.2rem 0.5rem rgba(0,0,0,.1),0 0 0.05rem rgba(0,0,0,.25)",
                "top": Math.floor(annotationButton.position().top) + 5 + "px",
                "left": Math.floor(annotationButton.position().left) + 5 + "px",
            }
        })
        .html("{{ .annotation_content }}")

        popup.appendTo(annotation)
    }
})
</script>
{{ end }}

example.md

title
foo

{{< annotate >}}

this is a codeblock with annotation # (1)

• this is a list (2) with annotation

  {{< annotations >}}

  1. An annotation 👋
  2. Another annotation 🐶 {{< /annotations >}} {{< /annotate >}}