Markdown footnotes enhancement

[digitalresistor]

Enhancement

Environment

Zola version: 0.12.2 compiled from git

Have footnotes link back to where they were footnoted

It would be great if there was a way to have a link-back to the location of the footnote. So if the site visitor is reading an article, they can click the footnote and then click the little return icon to go back to where the footnote was declared.

[Keats]

If that's implemented, that should be a site-wide option in the config.toml

[digitalresistor]

Looks like this is something that others asked about here: pulldown-cmark/pulldown-cmark#142

Would you like me to leave this issue open?

[Keats]

Let's leave it open for now and see if there is progress on the pulldown-cmark issue

[shumvgolove]

Related #1070

[meithecatte]

In the meantime, I implemented this on my side with some JavaScript:

<script type="text/javascript">
    window.addEventListener('load', function() {
        for (const ref of document.getElementsByClassName('footnote-reference')) {
            const hash = ref.children[0].hash.substring(1);
            const refhash = 'ref:' + hash;
            ref.id = refhash;
        }

        for (const footnote of document.getElementsByClassName('footnote-definition')) {
            const hash = footnote.id;
            const refhash = 'ref:' + hash;
            const backlink = document.createElement('a');
            backlink.href = '#' + refhash;
            backlink.className = 'footnote-backlink';
            backlink.innerText = '↩';
            const paras = footnote.children;
            const lastPara = paras[paras.length - 1];
            lastPara.appendChild(backlink);
        }
    });
</script>

[blueglyph]

@meithecatte Thanks for the script, it's very helpful!

For information, I've replaced the line with the link back to the reference as below to avoid confusion when there are several references to the same footnote (the arrow only sends back to the 1st reference).

        backlink.href = 'javascript:if (window.location.href.endsWith("#' + hash + '")) history.back()';

That way, the arrow will send back to where the reader came from, and only if it comes from that reference. The drawback is that it's not possible to tell where the footnotes are referenced by scrolling down and using the added arrows, but I don't think people often do that.

Another solution would be to add several arrows but I find this confusing.

The whole script becomes (with an option in comment):

<script type="text/javascript">
    window.addEventListener('load', function () {
        for (const ref of document.getElementsByClassName('footnote-reference')) {
            const hash = ref.children[0].hash.substring(1);
            const refhash = 'ref:' + hash;
            ref.id = refhash;
        }
    
        for (const footnote of document.getElementsByClassName('footnote-definition')) {
            const hash = footnote.id;
            const refhash = 'ref:' + hash;
            const backlink = document.createElement('a');
            backlink.href = 'javascript:if (window.location.href.endsWith("#' + hash + '")) history.back()';
            // To get back by clicking any arrow, use this instead:
            // backlink.href = 'javascript:if (window.location.href.search("#") >= 0) history.back()';
            backlink.className = 'footnote-backlink';
            backlink.innerText = '↩';
            const paras = footnote.children;
            const lastPara = paras[paras.length - 1];
            lastPara.appendChild(backlink);
        }
    });
</script>

[si14]

I believe this is now unblocked after pulldown-cmark/pulldown-cmark#654 got merged, example: https://github.com/raphlinus/pulldown-cmark/blob/master/examples/footnote-rewrite.rs

[DerDrodt]

This issue would be closed by #2326.