Hugo Shortcode for (inline) Footnotes

My Problem: inline explanations and annotations, no JavaScript (just because)

My Solution: create a shortcode for footnotes; toggled entirely with CSS; using state of HTML checkbox toggling the label via CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{{ $id := add .Ordinal 1 }}
{{ with .Inner }}
<span class="footnote">
    <input type="checkbox" id="footnote-cb-{{$id}}"/>
    <label for="footnote-cb-{{$id}}">
        <span class="footnote-expand-label">*</span>
        <span class="footnote-text">{{ . | markdownify }}</span>
    </label>
</span>
{{ end }}

The respective styles are (SCSS):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


.footnote {

  input {
    display: none;

    & + label {
      display: inline;
      cursor: pointer;

      & .footnote-expand-label {
        @extend .px-1;
        @extend sup;

        color: $primary;
        background-color: $gray-200;
      }

      & .footnote-text {
        display: none;
        @extend .px-1;
        color: $primary;
        background-color: $gray-200;
      }
    }

    &:checked + label .footnote-text {
      display: inline;
    }

    &:checked + label .footnote-expand-label {
      display: none;
    }
  }
}

The shortcode is used like this in the content .md-files:

...
Mine even works perfectly fine over the WLAN.{{<footnote>}}I *plan* to lay a cable, though.{{</footnote>}}
...

The result looks like this:

…
Mine even works perfectly fine over the WLAN. * I plan to lay a cable, though.
…

To expand the footnote, click on the *. Because the footnote.html pipes its text content through markdownify in line 7, I can even use Markdown syntax in footnotes.