html: Wrap headline+content & headline content in containers

Org mode does it.

org/html_writer.go

@@ -249,6 +249,7 @@ func (w *HTMLWriter) WriteHeadline(h Headline) {
 		}
 	}
 
+	w.WriteString(fmt.Sprintf(`<div id="outline-container-%s" class="outline-%d">`, h.ID(), h.Lvl+1) + "\n")
 	w.WriteString(fmt.Sprintf(`<h%d id="%s">`, h.Lvl+1, h.ID()) + "\n")
 	if w.document.GetOption("todo") != "nil" && h.Status != "" {
 		w.WriteString(fmt.Sprintf(`<span class="todo">%s</span>`, h.Status) + "\n")
@@ -267,7 +268,10 @@ func (w *HTMLWriter) WriteHeadline(h Headline) {
 		w.WriteString(fmt.Sprintf(`<span class="tags">%s</span>`, strings.Join(tags, "&#xa0;")))
 	}
 	w.WriteString(fmt.Sprintf("\n</h%d>\n", h.Lvl+1))
-	WriteNodes(w, h.Children...)
+	if content := w.WriteNodesAsString(h.Children...); content != "" {
+		w.WriteString(fmt.Sprintf(`<div id="outline-text-%s" class="outline-text-%d">`, h.ID(), h.Lvl+1) + "\n" + content + "</div>\n")
+	}
+	w.WriteString("</div>\n")
 }
 
 func (w *HTMLWriter) WriteText(t Text) {

org/testdata/footnotes.html

@@ -6,9 +6,11 @@
 </li>
 </ul>
 </nav>
+<div id="outline-container-headline-1" class="outline-2">
 <h2 id="headline-1">
 Using some footnotes
 </h2>
+<div id="outline-text-headline-1" class="outline-text-2">
 <ul>
 <li>
 <p>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-2" href="#footnote-2">2</a></sup> <sup class="footnote-reference"><a id="footnote-reference-3" href="#footnote-3">3</a></sup> (footnote names can be anything in the format <code class="verbatim">[\w-]</code>)</p>
@@ -30,12 +32,18 @@ Rather, they are gathered and exported at the end of the document in the footnot
 <p>footnotes that reference a non-existant definition are rendered but log a warning <sup class="footnote-reference"><a id="footnote-reference-7" href="#footnote-7">7</a></sup></p>
 </li>
 </ul>
+</div>
+</div>
+<div id="outline-container-headline-2" class="outline-2">
 <h2 id="headline-2">
 Footnotes
 </h2>
+<div id="outline-text-headline-2" class="outline-text-2">
 <p>Please note that the footnotes section is not automatically excluded from the export like in emacs. <sup class="footnote-reference"><a id="footnote-reference-8" href="#footnote-8">8</a></sup></p>
 <p>
 this is not part of <sup class="footnote-reference"><a id="footnote-reference-8" href="#footnote-8">8</a></sup> anymore as there are 2 blank lines in between!</p>
+</div>
+</div>
 <div class="footnotes">
 <hr class="footnotes-separatator">
 <div class="footnote-definitions">

org/testdata/footnotes_in_headline.html

@@ -4,9 +4,11 @@
 </li>
 </ul>
 </nav>
+<div id="outline-container-headline-1" class="outline-2">
 <h2 id="headline-1">
 Title <sup class="footnote-reference"><a id="footnote-reference-1" href="#footnote-1">1</a></sup>
 </h2>
+</div>
 <div class="footnotes">
 <hr class="footnotes-separatator">
 <div class="footnote-definitions">

org/testdata/headlines.html

@@ -18,9 +18,11 @@
 </li>
 </ul>
 </nav>
+<div id="outline-container-headline-1" class="outline-2">
 <h2 id="headline-1">
 Simple Headline <code class="statistic">[1/2]</code>
 </h2>
+<div id="outline-text-headline-1" class="outline-text-2">
 <ul>
 <li class="checked">
 <p>checked</p>
@@ -34,28 +36,42 @@ not just where they are actually meant to be - even here &gt; <code class="stati
 (Org mode proper does the same)</p>
 </li>
 </ul>
+</div>
+</div>
+<div id="outline-container-headline-2" class="outline-2">
 <h2 id="headline-2">
 <span class="todo">TODO</span>
 <span class="priority">[B]</span>
 Headline with todo status &amp; priority
 </h2>
+</div>
+<div id="outline-container-this-will-be-the-id-of-the-headline" class="outline-2">
 <h2 id="this-will-be-the-id-of-the-headline">
 <span class="todo">DONE</span>
 Headline with TODO status
 </h2>
+<div id="outline-text-this-will-be-the-id-of-the-headline" class="outline-text-2">
 <p>
 we can link to headlines that define a custom_id: <a href="#this-will-be-the-id-of-the-headline">#this-will-be-the-id-of-the-headline</a></p>
+</div>
+</div>
+<div id="outline-container-headline-4" class="outline-2">
 <h2 id="headline-4">
 <span class="priority">[A]</span>
 Headline with tags &amp; priority&#xa0;&#xa0;&#xa0;<span class="tags"><span>foo</span>&#xa0;<span>bar</span></span>
 </h2>
+<div id="outline-text-headline-4" class="outline-text-2">
 <p>Still outside the drawer</p>
 <p>This is inside the drawer</p>
 <p>Still outside the drawer</p>
+</div>
+</div>
+<div id="outline-container-headline-5" class="outline-2">
 <h2 id="headline-5">
 <span class="todo">CUSTOM</span>
 headline with custom status
 </h2>
+<div id="outline-text-headline-5" class="outline-text-2">
 <p>it&#39;s possible to use <code class="verbatim">#+SETUPFILE</code> - in this case the setup file contains the following</p>
 <div class="src src-org">
 <div class="highlight">
@@ -65,24 +81,44 @@ headline with custom status
 </pre>
 </div>
 </div>
+</div>
+</div>
+<div id="outline-container-headline-7" class="outline-2">
 <h2 id="headline-7">
 malformed property drawer
 </h2>
+<div id="outline-text-headline-7" class="outline-text-2">
 <p>:PROPERTIES:
 not a property</p>
 <p>:END:</p>
+</div>
+</div>
+<div id="outline-container-headline-8" class="outline-2">
 <h2 id="headline-8">
 level limit for headlines to be included in the table of contents
 </h2>
+<div id="outline-text-headline-8" class="outline-text-2">
 <p>The toc option allows setting a <a href="https://orgmode.org/manual/Export-settings.html">level limit</a>. For this file we set it to 1 - which means that the following headlines
 won&#39;t be included in the table of contents.</p>
+<div id="outline-container-headline-9" class="outline-3">
 <h3 id="headline-9">
 headline 2 not in toc
 </h3>
+<div id="outline-text-headline-9" class="outline-text-3">
+<div id="outline-container-headline-10" class="outline-4">
 <h4 id="headline-10">
 headline 3 not in toc
 </h4>
+</div>
+</div>
+</div>
+<div id="outline-container-headline-11" class="outline-3">
 <h3 id="headline-11">
 anoter headline 2 not in toc
 </h3>
+<div id="outline-text-headline-11" class="outline-text-3">
 <p>you get the gist…</p>
+</div>
+</div>
+</div>
+</div>

org/testdata/misc.html

@@ -78,18 +78,26 @@
 </li>
 </ul>
 </nav>
+<div id="outline-container-headline-1" class="outline-3">
 <h3 id="headline-1">
 issues from goorgeous (free test cases, yay!)
 </h3>
+<div id="outline-text-headline-1" class="outline-text-3">
+<div id="outline-container-headline-2" class="outline-4">
 <h4 id="headline-2">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/19">#19</a>: Support #+HTML
 </h4>
+<div id="outline-text-headline-2" class="outline-text-4">
 <p style="border: 1px dotted grey">neato!</p>
+</div>
+</div>
+<div id="outline-container-headline-3" class="outline-4">
 <h4 id="headline-3">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/29">#29:</a> Support verse block
 </h4>
+<div id="outline-text-headline-3" class="outline-text-4">
 <div class="verse-block">
 <p>This
 <strong>is</strong>
@@ -99,15 +107,23 @@ verse</p>
 <p>or even a <strong>totally</strong> <em>custom</em> kind of block
 crazy ain&#39;t it?</p>
 </div>
+</div>
+</div>
+<div id="outline-container-headline-4" class="outline-4">
 <h4 id="headline-4">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/30">#30</a>: Support #+SETUPFILE
 </h4>
+<div id="outline-text-headline-4" class="outline-text-4">
 <p>see <code class="verbatim">./headlines.org</code></p>
+</div>
+</div>
+<div id="outline-container-headline-5" class="outline-4">
 <h4 id="headline-5">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/31">#31</a>: Support #+INCLUDE
 </h4>
+<div id="outline-text-headline-5" class="outline-text-4">
 <p>Note that only src/example/export block inclusion is supported for now.
 There&#39;s quite a lot more to include (see the <a href="https://orgmode.org/manual/Include-files.html">org manual for include files</a>) but I
 don&#39;t have a use case for this yet and stuff like namespacing footnotes of included files
@@ -198,10 +214,14 @@ deploy:
 </pre>
 </li>
 </ul>
+</div>
+</div>
+<div id="outline-container-headline-6" class="outline-4">
 <h4 id="headline-6">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/33">#33</a>: Wrong output when mixing html with Org mode
 </h4>
+<div id="outline-text-headline-6" class="outline-text-4">
 <div class="outline-2" id="meta" style="color: green;">
 <table>
 <tbody>
@@ -216,14 +236,20 @@ deploy:
 </tbody>
 </table>
 </div>
+</div>
+</div>
+<div id="outline-container-headline-7" class="outline-4">
 <h4 id="headline-7">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/41">#41</a>: Support Table Of Contents
 </h4>
+</div>
+<div id="outline-container-headline-8" class="outline-4">
 <h4 id="headline-8">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/46">#46</a>: Support for symbols like ndash and mdash
 </h4>
+<div id="outline-text-headline-8" class="outline-text-4">
 <ul>
 <li>
 <p>ndash –</p>
@@ -241,17 +267,25 @@ deploy:
 <p>note that —— is replaced with 2 mdashes and …. becomes ellipsis+. and so on - that&#39;s how org also does it</p>
 </li>
 </ul>
+</div>
+</div>
+<div id="outline-container-headline-9" class="outline-4">
 <h4 id="headline-9">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/47">#47:</a> Consecutive <code>code</code> wrapped text gets joined
 </h4>
+<div id="outline-text-headline-9" class="outline-text-4">
 <p>either <code>this</code> or <code>that</code> foo.
 either <code>this</code>
 or <code>that</code> foo.</p>
+</div>
+</div>
+<div id="outline-container-headline-10" class="outline-4">
 <h4 id="headline-10">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/50">#50</a>: LineBreaks in lists are preserved
 </h4>
+<div id="outline-text-headline-10" class="outline-text-4">
 <ul>
 <li>
 <p>this list item
@@ -275,22 +309,34 @@ lists</p>
 <p>foo</p>
 </li>
 </ol>
+</div>
+</div>
+<div id="outline-container-headline-11" class="outline-4">
 <h4 id="headline-11">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/68">#68</a>: Quote block with inline markup
 </h4>
+<div id="outline-text-headline-11" class="outline-text-4">
 <blockquote>
 <p><a href="https://www.example.com"><em>this</em> <strong>is</strong> <span style="text-decoration: underline;">markup</span>!</a></p>
 </blockquote>
+</div>
+</div>
+<div id="outline-container-headline-12" class="outline-4">
 <h4 id="headline-12">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/72">#72</a>: Support for #+ATTR_HTML
 </h4>
+<div id="outline-text-headline-12" class="outline-text-4">
 <img src="https://golang.org/doc/gopher/pkg.png" alt="Go is fine though." title="https://golang.org/doc/gopher/pkg.png" id="gopher-image" width="300" style="border:2px solid black;"/>
+</div>
+</div>
+<div id="outline-container-headline-13" class="outline-4">
 <h4 id="headline-13">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/75">#75</a>: Not parsing nested lists correctly
 </h4>
+<div id="outline-text-headline-13" class="outline-text-4">
 <ul>
 <li>
 <p>bullet 1</p>
@@ -301,42 +347,72 @@ lists</p>
 </ul>
 </li>
 </ul>
+</div>
+</div>
+<div id="outline-container-headline-14" class="outline-4">
 <h4 id="headline-14">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/77">#77</a>: Recognize <code class="verbatim">code</code>— as code plus dash
 </h4>
+</div>
+<div id="outline-container-headline-15" class="outline-4">
 <h4 id="headline-15">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/78">#78</a>: Emphasis at beginning of line
 </h4>
+<div id="outline-text-headline-15" class="outline-text-4">
 <p><em>italics</em></p>
 <p>
 Text
 <em>italics</em></p>
+</div>
+</div>
+<div id="outline-container-headline-16" class="outline-4">
 <h4 id="headline-16">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/82">#82</a>: Crash on empty headline
 </h4>
+<div id="outline-text-headline-16" class="outline-text-4">
+<div id="outline-container-headline-17" class="outline-5">
 <h5 id="headline-17">
 
 </h5>
+<div id="outline-text-headline-17" class="outline-text-5">
 <p>just a space as title…</p>
+</div>
+</div>
+</div>
+</div>
+<div id="outline-container-headline-18" class="outline-4">
 <h4 id="headline-18">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/84">#84</a>: Paragraphs that are not followed by an empty line are not parsed correctly
 </h4>
+<div id="outline-text-headline-18" class="outline-text-4">
+<div id="outline-container-headline-19" class="outline-5">
 <h5 id="headline-19">
 Foo
 </h5>
+<div id="outline-text-headline-19" class="outline-text-5">
 <p>Foo paragraph.</p>
+</div>
+</div>
+<div id="outline-container-headline-20" class="outline-5">
 <h5 id="headline-20">
 Bar
 </h5>
+<div id="outline-text-headline-20" class="outline-text-5">
 <p>Bar paragraph</p>
+</div>
+</div>
+</div>
+</div>
+<div id="outline-container-headline-21" class="outline-4">
 <h4 id="headline-21">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/86">#86</a>: Multiple hyphens not converted to dashes
 </h4>
+<div id="outline-text-headline-21" class="outline-text-4">
 <p>just like #46</p>
 <ul>
 <li>
@@ -369,15 +445,23 @@ Bar
 </pre>
 </li>
 </ul>
+</div>
+</div>
+<div id="outline-container-headline-22" class="outline-4">
 <h4 id="headline-22">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/87">#87</a>: Markup in footnotes is rendered literally
 </h4>
+<div id="outline-text-headline-22" class="outline-text-4">
 <p>footnotes can contain <strong>markup</strong> - and other elements and stuff <sup class="footnote-reference"><a id="footnote-reference-1" href="#footnote-1">1</a></sup> <sup class="footnote-reference"><a id="footnote-reference-2" href="#footnote-2">2</a></sup></p>
+</div>
+</div>
+<div id="outline-container-headline-23" class="outline-4">
 <h4 id="headline-23">
 <span class="todo">DONE</span>
 <a href="https://github.com/chaseadamsio/goorgeous/issues/92">#92</a>: src blocks only render in caps
 </h4>
+<div id="outline-text-headline-23" class="outline-text-4">
 <p>The behaviour of Org mode <code class="verbatim">&lt;s TAB</code> changed and it now inserts lowercased src blocks (go-org already handled this one)</p>
 <ul>
 <li>
@@ -401,18 +485,30 @@ uname -a
 </div>
 </li>
 </ul>
+</div>
+</div>
+</div>
+</div>
+<div id="outline-container-headline-24" class="outline-3">
 <h3 id="headline-24">
 issues (wrongly) filed with hugo
 </h3>
+<div id="outline-text-headline-24" class="outline-text-3">
+<div id="outline-container-headline-25" class="outline-4">
 <h4 id="headline-25">
 <a href="https://github.com/gohugoio/hugo/issues/3874">#3874</a> exporting images in org mode
 </h4>
+<div id="outline-text-headline-25" class="outline-text-4">
 <p>Hello, I&#39;m writing hugo blogs using org-mode.</p>
 <p>
 When inserting an image link like <img src="/home/amos/Pictures/Screenshots/img-2017-09-11-165647.png" alt="/home/amos/Pictures/Screenshots/img-2017-09-11-165647.png" title="/home/amos/Pictures/Screenshots/img-2017-09-11-165647.png" />, hugo doesn&#39;t export the image.</p>
+</div>
+</div>
+<div id="outline-container-headline-26" class="outline-4">
 <h4 id="headline-26">
 <a href="https://github.com/gohugoio/hugo/issues/4006">#4006</a> source code blocks in org not rendered correctly
 </h4>
+<div id="outline-text-headline-26" class="outline-text-4">
 <div class="src src-emacs-lisp">
 <div class="highlight">
 <pre>
@@ -425,22 +521,42 @@ When inserting an image link like <img src="/home/amos/Pictures/Screenshots/img-
 </pre>
 </div>
 </div>
+</div>
+</div>
+</div>
+</div>
+<div id="outline-container-headline-27" class="outline-3">
 <h3 id="headline-27">
 misc fuzz / regression / edge case
 </h3>
+<div id="outline-text-headline-27" class="outline-text-3">
+<div id="outline-container-headline-28" class="outline-4">
 <h4 id="headline-28">
 index out of range in headline priority parsing
 </h4>
+<div id="outline-text-headline-28" class="outline-text-4">
+<div id="outline-container-headline-29" class="outline-5">
 <h5 id="headline-29">
 [#B
 </h5>
+</div>
+</div>
+</div>
+<div id="outline-container-headline-30" class="outline-4">
 <h4 id="headline-30">
 index out of range in explicit line break parsing
 </h4>
+<div id="outline-text-headline-30" class="outline-text-4">
 <p>0\\ </p>
+</div>
+</div>
+</div>
+</div>
+<div id="outline-container-headline-31" class="outline-2">
 <h2 id="headline-31">
 Footnotes
 </h2>
+</div>
 <div class="footnotes">
 <hr class="footnotes-separatator">
 <div class="footnote-definitions">

org/testdata/options.html

@@ -1,8 +1,10 @@
+<div id="outline-container-headline-1" class="outline-2">
 <h2 id="headline-1">
 <span class="todo">DONE</span>
 <span class="priority">[A]</span>
 <code class="verbatim">#+OPTIONS:</code> toggles supported by <code class="verbatim">go-org</code>&#xa0;&#xa0;&#xa0;<span class="tags"><span>tag1</span>&#xa0;<span>tag2</span></span>
 </h2>
+<div id="outline-text-headline-1" class="outline-text-2">
 <p><code class="verbatim">go-org</code> supports multiple export toggles as described in the <a href="https://orgmode.org/manual/Export-settings.html">export settings</a> section of the Org mode manual.
 By default (most of?) those toggles are enabled. This file starts with <code class="verbatim">#+OPTIONS: toc:nil f:nil e:nil</code> and thus
 disables the table of contents, footnotes &amp; entities.
@@ -45,3 +47,5 @@ As buffer options are merged with the defaults, the above headline will be expor
 </tr>
 </tbody>
 </table>
+</div>
+</div>