Use sidenotes.js to handle sidenote placement

[yuxi-liu-wired]

Description

As previously reported, the sidenotes can overlap with the image captions.

Gwern.net uses sidenotes.js, which is MIT-licensed, and has the features

• folds up overly long sidenotes (Gwern has a tendency to do that)

• lays out sidenotes at runtime to minimize overlap while trying to keep sidenotes within the same window as the anchor, enabling it to handle almost arbitrarily many long endnotes without rendering any unreadable

• sidenotes.js assumes that the document has been generated from Pandoc Markdown and has normal Pandoc endnotes (of the form <a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> for the anchor, and <li id="fn1" role="doc-endnote"><p>Example</p></li> for the endnote body at the end of the document). Hence, implementing sidenotes with it requires little more than a JS import like <script src="/static/js/sidenotes.js" async></script>.