resolves #309 add support for footnotes (#550)

* resolves #511 upgrade to paged.js 0.2.0
* resolves #309 add support for footnotes

css/document.css

@@ -26,6 +26,7 @@ nested elements once that breaks across two pages.
   width: 100%;
   cursor: default;
 }
+
 .admonitionblock > table td.icon .fa-layers {
   height: 100%;
   width: 100%;
@@ -270,3 +271,28 @@ The leader works by filling the li with dots, and arranging for the <a> and a::a
 #content {
   counter-reset: page 1;
 }
+
+/* footnotes */
+@page {
+  @footnote {
+    float: bottom;
+    /*border-top: solid black thin;
+    padding-top: 8pt;*/
+  }
+}
+
+span.footnote {
+  float: footnote;
+}
+
+[data-footnote-call]::after {
+  content: "[" counter(footnote) "]";
+}
+
+.pagedjs_area a[data-footnote-call] {
+  cursor: pointer;
+}
+
+[data-footnote-call]::after {
+  content: "[" counter(footnote) "]";
+}

lib/document/document-converter.js

@@ -106,7 +106,7 @@ ${this.docinfoContent(node, 'footer', '-pdf.html')}
 </html>`
   }
 
-  convert_outline(node, opts = {}) {
+  convert_outline (node, opts = {}) {
     if (!node.hasSections()) {
       return
     }
@@ -125,7 +125,7 @@ ${this.docinfoContent(node, 'footer', '-pdf.html')}
         if (slevel < 2 && node.getDocument().getDoctype() === 'book') {
           if (section.getSectionName() === 'chapter') {
             const signifier = node.getDocument().getAttributes()['chapter-signifier']
-            stitle =  `${signifier ? `"${signifier} "` : ''}${section['$sectnum']()} ${section.getTitle()}`
+            stitle = `${signifier ? `"${signifier} "` : ''}${section['$sectnum']()} ${section.getTitle()}`
           } else if (section.getSectionName() === 'part') {
             const signifier = node.getDocument().getAttributes()['part-signifier']
             stitle = `${signifier ? `"${signifier} "` : ''}${section['$sectnum'](Opal.nil, ':')} ${section.getTitle()}`
@@ -318,6 +318,19 @@ ${node.getContent()}
 </div>`
   }
 
+  convert_inline_footnote (node) {
+    if (node.getDocument().isAttribute('nofootnotes')) {
+      return this.baseConverter.$convert_inline_footnote(node)
+    }
+    const index = node.getAttribute('index')
+    const text = node.getText()
+    if (index) {
+      return `<span id="_footnote_${index}" class="footnote">${text}</span>`
+    }
+    const idAttribute = node.getId() ? ` id="_footnote_${node.getId()}"` : ''
+    return `<span${idAttribute} class="footnote">${text}</span>`
+  }
+
   resolveStylesheet (requirePath, cwd = process.cwd()) {
     // NOTE appending node_modules prevents require from looking elsewhere before looking in these paths
     const paths = [cwd, ospath.dirname(__dirname)].map((start) => ospath.join(start, 'node_modules'))
@@ -404,15 +417,7 @@ ${this.documentTypeStyle(node)}
     return doc.getDoctype() === 'book' || doc.hasAttribute('title-page')
   }
 
-  footnotes (node) {
-    if (node.hasFootnotes() && !(node.isAttribute('nofootnotes'))) {
-      return `<div id="footnotes">
-        <hr/>
-        ${node.getFootnotes().map((footnote) => `<div class="footnote" id="_footnotedef_${footnote.getIndex()}">
-        <a href="#_footnoteref_${footnote.getIndex()}">${footnote.getIndex()}</a>. ${footnote.getText()}
-        </div>`).join('')}
-      </div>`
-    }
+  footnotes (_) {
     return ''
   }
 
@@ -425,7 +430,7 @@ ${faDom.css()}
     return ''
   }
 
-  docinfoContent(node, docinfoLocation, suffix) {
+  docinfoContent (node, docinfoLocation, suffix) {
     const docinfoContent = node.getDocinfo(docinfoLocation, suffix)
     if (docinfoContent) {
       return docinfoContent
@@ -530,6 +535,7 @@ module.exports.templates = {
   admonition: node => instance.convert_admonition(node),
   inline_callout: node => instance.convert_inline_callout(node),
   inline_image: node => instance.convert_inline_image(node),
+  inline_footnote: node => instance.convert_inline_footnote(node),
   colist: node => instance.convert_colist(node),
   page_break: node => instance.convert_page_break(node),
   preamble: node => instance.convert_preamble(node)

package.json

@@ -48,7 +48,7 @@
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@ggrossetie/pagedjs": "0.1.43-next.1613141153",
+    "@ggrossetie/pagedjs": "0.2.0-next.1623590414",
     "chokidar": "3.5.2",
     "file-url": "3.0.0",
     "fs-extra": "9.1.0",

test/fixtures/footnotes.adoc

@@ -0,0 +1,13 @@
+= Footnotes
+
+The hail-and-rainbow protocol can be initiated at five levels:
+
+. doublefootnote:[The double hail-and-rainbow level makes my toes tingle.]
+. tertiary
+. supernumerary
+. supermassive
+. apocalyptic
+
+A bold statement!footnote:disclaimer[Opinions are my own.]
+
+Another outrageous statement.footnote:disclaimer[]