Render table footnotes below their table

What does this MR do and why?

Goldmark's footnote extension is already enabled on the docs site, so [^1] renders a superscript link and a page-bottom endnotes block today. No page uses it, because footnotes referenced from a table land at the bottom of the page rather than the bottom of the table.

Our current process is that we use <sup>N</sup> plus a **Footnotes**: list. There is no link to the note, no link back, and the numbers are kept in sync by hand.

Findings

  • No renderer work was needed for the superscript links. They already render.
  • /help needs no change.
  • Vale was a hard blocker. gitlab_docs.ReferenceLinks flagged every [^1]: text line as an error. Fixed. Syncing to the other content repos is a follow-up.
  • scroll-margin-top cannot offset a reference inside a table. .table-container computes overflow-y: hidden (forced by overflow-x: auto), making it a scroll container that consumes the margin before the document scroll sees it. Without this, a return link lands the row behind the sticky table header. Fixed. The same offset is applied to deep links (#fn:N) that target a definition relocated below its table, and to deep links to a reference inside a table.
  • The sticky header clone duplicated IDs from the source header, so fragment navigation could resolve to the hidden clone. Fixed.

Limitation

Footnotes inside shortcodes (tabs): Hugo renders shortcode inner content in a separate pass. A reference to a definition outside the shortcode renders as literal text; a definition inside restarts numbering at 1 and emits a second footnotes block, producing duplicate fn:1 IDs.

Suggestion: Update the style guide with something like this:

Do not use footnotes inside shortcodes

Follow-ups, not in this MR

  • Sync the ReferenceLinks.yml fix to gitlab and charts/omnibus/runner/operator/cli.
  • Rewrite the footnotes style guide section to document [^label]. Should land only after this deploys.
  • locales/en-us.json gains a tables.footnotes string with no ja-jp counterpart. It falls back to English until the next translation push.

Table footnotes

Light Dark
1-table-footnotes-light 2-table-footnotes-dark

Others

Deep link clears table header Body text footnotes
3-deep-link-clears-sticky-header 4-page-level-block-for-prose

How to set up and validate locally

  1. Check out this branch.
  2. Run yarn build then mise exec -- hugo serve -D.
  3. Open http://localhost:1313/footnote-tests/.
  4. Select a superscript marker, then the return link next to the definition.
  5. Scroll until the sticky table header is showing, then use a return link and confirm the row is not hidden behind it.
  6. Load http://localhost:1313/footnote-tests/#fnref:3 directly and confirm the same.
  7. Load http://localhost:1313/footnote-tests/#fn:3 directly and confirm the relocated definition clears the sticky header. Goldmark numbers footnote IDs sequentially by first reference, so the [^runner] definition is fn:3. There is no fn:runner.
  8. Confirm the two prose footnotes stay in the page-level block at the bottom.

Merge request acceptance checklist

  • I have evaluated the MR acceptance checklist for this merge request.
  • If this MR changes how markdown is interpreted, share this MR in the #tech-docs-localization slack channel.
Edited by Brendan Lynch

Merge request reports

Loading
Loading