Support for Tufte CSS style sidenotes

[henrikje]

I use Markdown footnotes in many of my blog posts to add comments or extra information which does not fit in the regular text. Currently, they render as footnotes/endnotes at the bottom of the page. While that is pretty good, I would ideally have them as sidenotes in the margin near where they are referenced. Similar in style to Tufte CSS. On a narrower screen, the sidenotes could go back to being footnotes again.

I should note that I do not have table of contents enabled for my blog posts, so my sidebar is otherwise empty.

I understand that this may be a larger change, but one can wish, right? :-)

[shin-sforzando]

Have you tried it? https://jpanther.github.io/congo/docs/advanced-customisation/#overriding-the-stylesheet

[henrikje]

No, I have not. Not sure if it can be achieved by simply overriding the stylesheet. Would guess it requires changes to html rendering and/or some JS. In any case, it is beyond my templating skills.

[wolfspyre]

I like this too. and yeah. it's likely that support for this will need to be via a custom shortcode.

the markdown parser in hugo is a lil finicky¹².
getting markdown footnotes to render properly from within shortcodes requires some interesting contortions due to parsing³

I do a lot of link-to-a-thing-and-make-a-footnote-with-the-url-of-it-as-well in my docs... and that gets cumbersome.
so I was thinking about making a shortcode which essentially does that for me

{{< lazywolf title="mylinkypoo" link="http://somecoolthing.com" >}}

as opposed to

[linkypoo][linkypoo][^linkypoo]

(and at the bottom of the page:)

[linkypoo]: <http://somecoolthing.com>
[^linkypoo]: <http://somecoolthing.com>

which is both excessive and frustrating and I'm a horrible typist, so it's also error prone ;)

but I REALLY like the idea of sidenotes... I'd never seen that before and you're ABSOLUTELY right that these would fit really well in the sidebar...

take a look at some of my insanity⁴

Footnotes

1. https://wolfspyrelabs.static.wolfspyre.io/hugo-kisso/wplshortcodes/snippits/wplshortcodes/shortcodes/expand/ ↩

2. https://oostens.me/posts/hugo-shortcodes-with-markdown-gotchas/ ↩

3. (altho I think BEP's addressed a lot of this with some of the more recent feature changes lately... I'll have to revisit this later to see) ↩

4. https://wolfspyrelabs.static.wolfspyre.io/hugo-kisso/wplshortcodes/ ↩

[henrikje]

Lots of good stuff on your page. I like the "hint" shortcode. Will see if I create something similar for my blog. 🤔

[wolfspyre]

thanks!!
once I finish getting contributors attribution working, i’m gonna be adapting all the rest of my sites to use this.

after that i’ll try and look at side notes an see how “easy” it’ll be to implement.
but if someone else opts to implement it before i get the chance all the better.

good find! thanks for sharing