Feature Suggestion: Collapsible Section Shortcode for Detailed Content

[berkidem]

First, thank you for making this theme public—I'm a big fan!

I use extensive math and code in some of my posts, sometimes beyond what can be managed with floating footnotes. To address this, I added a shortcode that collapses some sections, which helps readers skip over the details if they prefer. Below is the code for the shortcode I implemented.

I'd be happy to contribute this as a pull request, but I’ve encountered a few issues when collapsing sections that contain footnotes (details below). Some of these may be edge cases, but I wanted to get your input on how to best approach them. I'm not deeply familiar with the Hugo framework, so any pointers would be appreciated.

Issues Observed:

When there is a footnote in the collapsed section:

• Footnotes within collapsed sections still float, but footnotes from the rest of the post get placed at the end of the page.
• Footnote numbering restarts within the collapsed section, leading to confusion. The next issue is probably related to this one.
• Footnotes inside collapsed sections appear in unpredictable positions. (I think this is due to a confusion with the footnotes in the original text; the first footnote from the collapsed section appears where the first footnote outside the text should appear.)
• When a footnote inside a collapsed section has its own sub-footnote, their order is reversed.

Although these issues aren’t related to the original theme (see the edit below), resolving them would be helpful for similar use cases. I would appreciate your advice on how difficult these issues might be to fix or how they could be approached within the Hugo framework.

EDIT: Actually, some of the issues are reproducible within the theme itself without any changes. When a footnote has a footnote, this causes (i) numbering to get weird and (ii) positioning to get even weirder. I know, using footnotes in footnotes is kind of on me but it would be nice to fix it anyway. Specifically, what happens is if footnote A has a footnote B, then, B is numbered much earlier than footnote A, A gets its correct number + 1 because B comes before it now. And, the positioning is such that B is in the right place, and many of the footnotes before A are below B but not all. It is very confusing and I haven't been able to pin down exactly what is going on here. I guess I can just use two consecutive footnotes instead, as a workaround for now.

I added the following code in layouts/shortcodes/collapse.html:

<details {{ with .Get "open" }}open{{ end }}>
    <summary style="color: #2aa198; font-weight: bold; cursor: pointer;">
        {{ .Get "title" | default "Details" }} (Click to Expand)
    </summary>
    <br>
    {{ .Inner | markdownify }}
</details>

<br>

[capnfabs]

Hello! Sorry for the delay here.

I think you're running into a few separate issues here.

There are two Hugo issues that I think you're running into:

First: footnotes within partials are a bit wonky. I'm pretty sure this is a Hugo issue. I haven't tested this recently, but remember running into it in something I wrote in 2021. There's a few forum posts about it, e.g. this one.

Second: Footnote-within-footnote numbering is weird. This also appears to be a Hugo issue, unrelated to this theme. I tested with a popular theme, PaperMod, and Hugo v0.140.1+extended. This markdown:

## Footnote stress test
Hello [^outer]

[^outer]: some more content, lots of content[^inner1] including more footnotes

[^inner1]: Does this even work?

consistently produces footnotes out of the expected order for me. I get this. Here's a screenshot:

I'd expect them to be swapped. I think it's basically in the order that Hugo first sees them when processing the markdown for a file.

---

What's remaining are almost certainly issues with the theme:

1. Footnotes within collapsed sections still float, but footnotes from the rest of the post get placed at the end of the page (I'd bet the layout code is crashing because it's expecting something to have dimensions which doesn't).
2. Footnotes in collapsed sections appear in unpredictable positions
3. Footnotes in footnotes appear in unpredictable positions.

I almost certainly didn't take these cases into account when I wrote the footnote layout code.

The expected behaviour for footnotes-within-footnotes seems pretty clear - stack them on top of each other. I'd be open for a PR for that.

I'm less sure what should happen for footnotes in collapsible sections - what I'd ideally like here would be if it were possible to have Hugo put the footnotes inside the collapsible section. But that definitely wasn't supported last time I looked into it.