search

shuding / nextra

Simple, powerful and flexible site generation framework with everything you love from Next.js.
https://nextra.site
MIT License
11.91k stars 1.29k forks source link

Suggestion for footnotes #802

Open buccalon opened 2 years ago

buccalon commented 2 years ago

Hi @shuding,

Currently, footnotes render right after the main content:

image

I'd like to suggest two alternatives:

  1. Having a horizontal line element (<hr/>) between the main content and footnotes
  2. Rendering the footnotes below the TOC, aligned with the line in which they occur

I find the second option more interesting, and someone can investigate how tufte-css implements it:

image

This would also remove the need for going back and forth between the main content and notes.

Hope you consider these alternatives. Keep up the good work!

shuding commented 2 years ago

Thanks for the ideas! Both sound great to me, also:

For 1) I think our current MDX plugin inserts a ## Footnote title automatically, it would be great to get rid of that and tweak the style a bit. For example my recent blog post: https://shud.in/posts/adaptive-polynomial-curve-fitting#footnotes, and original source: https://github.com/shuding/site/blob/master/pages/posts/adaptive-polynomial-curve-fitting.md. I agree that GitHub's typography looks better there (horizontal line & smaller text)!

For 2) I've been a long time fan of this elegant style but gave up a couple of times due to its complexity. https://paco.me/writing/redesign-2021 and https://vercel.com/blog/introducing-support-for-webassembly-at-the-edge also have it. The complexities are responsive design (I prefer the current footnote style on small screens) and layout issue with our current TOC (which can fill the full viewport height). For our blog theme it will be no problem though.

Open for discussion and if someone comes up with a good implementation I'm glad to accept it!