Add sidenote support

[dgnicholson]

Hi folks.

I've been playing with adding sidenote support. My current implementation puts sidenotes to the right of the text on wider screens:

On mobile, sidenotes appear inline.

They are added via shortcode. For example:

{{< sidenote note="Ut quis turpis quis enim rhoncus vehicula vel et neque. Nullam porta nunc rutrum velit faucibus interdum. Cras in quam non leo mattis feugiat. Fusce interdum nisl nibh, quis pellentesque turpis vehicula sit amet." >}}

I may also add an option for margin notes which leave the number out entirely.

The bulk of the work done, but need to iron out a few things--mainly having it play nice with the ToC. If this is something that fits the project, I can add a PR when it's ready.

[jakewies]

I actually really dig on this. I'm wondering (I'm on mobile) if it's possible to have side notes render at the end of a post. Even if it's just on mobile. But I imagine that would change the implementation drastically. I've noticed blogs include this type of thing towards the end.

But it's just a suggestion. @dgnicholson this project is as much yours as it is mine. If you think it works well enough on your end then it should benefit this project 🚀

[dgnicholson]

@jakewies Thanks for the idea! I'll have a look at that and see what's involved. Another solution I was thinking of was hiding the notes on mobile until the user clicks the superscript numeral which would then expand it inline, but I figured the target is very small and might be too easily overlooked.

[aareet]

Just want to chime in with my support for this! Thanks for working on this @dgnicholson

[jakewies]

@dgnicholson any update? Would love to get this in the project. No pressure!

[dgnicholson]

@jakewies still on my to-do list due to Life™, but not forgotten. I dusted it off today and the functionality is close to being done, except for a counting bug and issues with the sidenote text interacting with the ToC. I'm thinking the latter issue can be addressed easily enough by showing the sidenotes inline once the width of the window starts causing overlapping with the TOC. I'd also like to investigate adding a footnote option but if it's too much work I'll add it a later.

With additional style tweaks, cleanup, testing, and docs I figure I'll have a PR ready sometime in November.

[jakewies]

Awesome! Totes understand about Life, it took me a few months to get some time for this project this weekend. If it makes the structure of this feature easier, implementing as strictly footnotes would be pretty great too. Just a thought.

[dgnicholson]

Quick Update. After a few iterations, I've struggled to get the design work with the way the ToC is implemented. For situations where the ToC overlaps the sidenotes while scrolling I've tried various solutions like changing the background opacity of the ToC to blur out the sidenotes but that and my other solutions look kinda janky.

The only thing I can think of is to have the sidenote appear inline when the ToC overlaps while scrolling down the page. I'll investigate if I can get this to work with my implementation and update either way.

Note that I've also ended up enhancing the markdown footnotes--see PR: https://github.com/jakewies/hugo-theme-codex/pull/144