Footnotes do not render correctly

[shumvgolove]

Zola version: 0.11.0

Current Behavior

Write in markdown something like this:

Some footnote.[^1]

[^1]: Hello there.

After building the site (for example, terminimal), Zola renders footnote-definition in the same place as footnote-reference:

Besides that:

1. In footnote-definition only Hello there. text wrapped into <p> so the whole footnote appears broken.
2. footnote-reference doesn't wrapped into <div> and doesn't contain something like href="#1ref, so there is no way to return to footnote-reference from footnote-definition.

Expected Behavior

Ideally, as the name implies, footnote <div class="footnotes"> should be rendered at the bottom of the page (like Hugo and Jekyll do) and shouldn't be buggy :^)

Here is the modified, correct structure:

Which renders like this:

and works as expected.

[shumvgolove]

After further investigation, it appears like pulldown-cmark limitation:

• pulldown-cmark#116
• pulldown-cmark#142

Should I close this issue?

[Keats]

Let's close this

[fuzzypixelz]

At the time of writing pulldown-cmark/pulldown-cmark#142 is still open.

Until then, for anyone coming across this, here's some hacky JavaScript to "fix" this.

// The DOMContentLoaded event fires when the initial HTML
// document has been completely loaded and parsed, without
// waiting for stylesheets, images, and subframes to finish loading.
document.addEventListener('DOMContentLoaded', (_event) => {
  const references = document.getElementsByClassName('footnote-reference')
  // For each footnote reference, set an id so we can refer to it from the definition.
  // If the definition had an id of 'some_id', then the reference has id `some_id_ref`.
  for (const reference of references) {
    const link = reference.firstChild
    const id = link.getAttribute('href').slice(1) // skip the '#'
    link.setAttribute('id', `${id}_ref`)
  }

  const footnotes = document.getElementsByClassName('footnote-definition')
  // For each footnote-definition, add an anchor element with an href to its corresponding reference.
  // The text used for the added anchor is 'Leftwards Arrow with Hook' (U+21A9).
  for (const footnote of footnotes) {
    const id = footnote.getAttribute('id')
    const backReference = document.createElement('a')
    backReference.setAttribute('href', `#${id}_ref`)
    backReference.textContent = '↩'
    footnote.append(backReference)
  }
});

You can put it in your static folder. Enjoy.

[acro5piano]

@fuzzypixelz Thank you. Your solution works like a charm.