HTMLWriter: Improve footnote rendering

- add return link from footnote definitions -> footnote reference
- wrap footnote definition content in div for easier styling
- class rather than id bc idk consistency

org/html.go

@@ -134,10 +134,12 @@ func (w *HTMLWriter) writeBlock(b Block) {
 }
 
 func (w *HTMLWriter) writeFootnoteDefinition(f FootnoteDefinition) {
+	n := f.Name
 	w.WriteString(`<div class="footnote-definition">` + "\n")
-	w.WriteString(fmt.Sprintf(`<sup id="footnote-%s">%s</sup>`, f.Name, f.Name) + "\n")
+	w.WriteString(fmt.Sprintf(`<sup id="footnote-%s"><a href="#footnote-reference-%s">%s</a></sup>`, n, n, n) + "\n")
+	w.WriteString(`<div class="footnote-body">` + "\n")
 	w.writeNodes(f.Children...)
-	w.WriteString("</div>\n")
+	w.WriteString("</div>\n</div>\n")
 }
 
 func (w *HTMLWriter) writeFootnotes(d *Document) {
@@ -145,7 +147,7 @@ func (w *HTMLWriter) writeFootnotes(d *Document) {
 	if len(fs.Definitions) == 0 {
 		return
 	}
-	w.WriteString(`<div id="footnotes">` + "\n")
+	w.WriteString(`<div class="footnotes">` + "\n")
 	w.WriteString(`<h1 class="footnotes-title">` + fs.Title + `</h1>` + "\n")
 	w.WriteString(`<div class="footnote-definitions">` + "\n")
 	for _, definition := range d.Footnotes.Ordered() {
@@ -180,9 +182,8 @@ func (w *HTMLWriter) writeLinebreak(l Linebreak) {
 }
 
 func (w *HTMLWriter) writeFootnoteLink(l FootnoteLink) {
-	name := html.EscapeString(l.Name)
+	n := html.EscapeString(l.Name)
-	w.WriteString(fmt.Sprintf(`<sup class="footnote-reference"><a href="#footnote-%s">%s</a></sup>`, name, name))
+	w.WriteString(fmt.Sprintf(`<sup class="footnote-reference"><a id="footnote-reference-%s" href="#footnote-%s">%s</a></sup>`, n, n, n))
-
 }
 
 func (w *HTMLWriter) writeRegularLink(l RegularLink) {

org/testdata/example.html

@@ -259,25 +259,26 @@ Bar paragraph
 <ul>
 <li>
 <p>
-normal footnote reference <sup class="footnote-reference"><a href="#footnote-1">1</a></sup> <sup class="footnote-reference"><a href="#footnote-6">6</a></sup>
+normal footnote reference <sup class="footnote-reference"><a id="footnote-reference-1" href="#footnote-1">1</a></sup> <sup class="footnote-reference"><a id="footnote-reference-6" href="#footnote-6">6</a></sup>
 </p>
 </li>
 <li>
 <p>
-further references to the same footnote should not <sup class="footnote-reference"><a href="#footnote-1">1</a></sup> render duplicates in the footnote list
+further references to the same footnote should not <sup class="footnote-reference"><a id="footnote-reference-1" href="#footnote-1">1</a></sup> render duplicates in the footnote list
 </p>
 </li>
 <li>
 <p>
-inline footnotes are also supported via <sup class="footnote-reference"><a href="#footnote-2">2</a></sup>.
+inline footnotes are also supported via <sup class="footnote-reference"><a id="footnote-reference-2" href="#footnote-2">2</a></sup>.
 </p>
 </li>
 </ul>
-<div id="footnotes">
+<div class="footnotes">
 <h1 class="footnotes-title">Footnotes</h1>
 <div class="footnote-definitions">
 <div class="footnote-definition">
-<sup id="footnote-1">1</sup>
+<sup id="footnote-1"><a href="#footnote-reference-1">1</a></sup>
+<div class="footnote-body">
 <p>
 <a href="https://www.example.com">https://www.example.com</a>
 </p>
@@ -320,36 +321,47 @@ and tables
 </li>
 </ul>
 </div>
+</div>
 <div class="footnote-definition">
-<sup id="footnote-3">3</sup>
+<sup id="footnote-3"><a href="#footnote-reference-3">3</a></sup>
+<div class="footnote-body">
 <p>
 <a href="http://example.com/unused-footnote">example.com/unused-footnote</a>
 </p>
 </div>
+</div>
 <div class="footnote-definition">
-<sup id="footnote-4">4</sup>
+<sup id="footnote-4"><a href="#footnote-reference-4">4</a></sup>
+<div class="footnote-body">
 <p>
 another unused footnote
 </p>
 </div>
+</div>
 <div class="footnote-definition">
-<sup id="footnote-5">5</sup>
+<sup id="footnote-5"><a href="#footnote-reference-5">5</a></sup>
+<div class="footnote-body">
 <p>
 another unused footnote
 </p>
 </div>
+</div>
 <div class="footnote-definition">
-<sup id="footnote-6">6</sup>
+<sup id="footnote-6"><a href="#footnote-reference-6">6</a></sup>
+<div class="footnote-body">
 <p>
 Footnotes break after two consecutive empty lines - just like paragraphs - see <a href="https://orgmode.org/worg/dev/org-syntax.html.">https://orgmode.org/worg/dev/org-syntax.html.</a>
 This shouldn&#39;t happen when the definition line and the line after that are empty.
 </p>
 </div>
+</div>
 <div class="footnote-definition">
-<sup id="footnote-2">2</sup>
+<sup id="footnote-2"><a href="#footnote-reference-2">2</a></sup>
+<div class="footnote-body">
 <p>
 the inline footnote definition
 </p>
 </div>
 </div>
 </div>
+</div>