Epub popup notes

config/epub.yaml

@@ -1,21 +1,7 @@
 # docs https://pandoc.org/MANUAL.html#default-files
 input-files:
-  - book/colophon.md
-  - book/foreword.md
-  - book/title.md
-  - book/preface.md
-  - book/01.md
-  - book/02.md
-  - book/03.md
   - book/04.md
-  - book/05.md
-  - book/06.md
   - book/07.md
-  - book/08.md
-  - book/09.md
-  - book/glossary.md
-  - book/bibliography.md
-  - book/authors.md
 output-file: "debord-guy-the-society-of-the-spectacle.epub"
 metadata-files:
   - "book/metadata.yaml"

src/epub.css

@@ -183,17 +183,12 @@ h2 + blockquote p:first-child + p {
 }
 
 .fn {
-  display: block;
-  float: right;
-  clear: both;
-  width: 16em;
-  margin: 0 -0.5em 0 1.5em;
-  font-size: 0.625em;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1.4;
-  letter-spacing: normal;
-  text-align: left;
+  display: none;
+}
+.fn-marker {
+  text-decoration: underline;
+  vertical-align: super;
+  line-height: 0;
 }
 
 .colophon {

src/filter-anchorlinks.js

@@ -7,18 +7,12 @@ function action({ t: type, c: value }) {
   if (type === "Span") {
     // c is typed as a three-tuple
     let [attrs, inlines] = value;
-    let [id, classNames, keyValues] = attrs;
+    let [id, classNames] = attrs;
     if (classNames.includes("fn")) {
-      var closeBtn = Link(
-        ["", ["close"], []],
-        [Str("[Close]")],
-        [`#close`, ""]
-      );
-      inlines = inlines.concat([Str(" "), closeBtn]);
-      var fn = Span([id, classNames, keyValues], inlines);
+      var fn = Span([id, classNames, [["epub:type", "footnote"]], inlines);
       var fnLink = Link(
-        [`fn-ref-${id}`, ["fn-marker"], []],
-        [Str("fn")],
+        [`fn-ref-${id}`, ["fn-marker"], [["epub:type", "noteref"]]],
+        [Str("*")],
         [`#${id}`, ""]
       );
       return [fnLink, fn];

src/filter-notes.js

@@ -0,0 +1,35 @@
+var pandoc = require("pandoc-filter");
+var Link = pandoc.Link;
+var Span = pandoc.Span;
+var Str = pandoc.Str;
+var RawInline = pandoc.RawInline;
+var stringify = pandoc.stringify;
+
+function action({ t: type, c: value }) {
+  if (type === "Span") {
+    // c is typed as a three-tuple
+    let [attrs, inlines] = value;
+    let [id, classNames, keyValues] = attrs;
+    if (classNames.includes("fn")) {
+      var content = stringify(inlines);
+      var aside =
+        '<aside id="' +
+        id +
+        '"' +
+        ' class="' +
+        classNames.join(" ") +
+        '" epub:type="footnote">' +
+        content +
+        "</aside>";
+      var fn = RawInline("html", aside);
+      var fnLink = Link(
+        [`fn-ref-${id}`, ["fn-marker"], [["epub:type", "noteref"]]],
+        [Str("*")],
+        [`#${id}`, ""]
+      );
+      return [fnLink, fn];
+    }
+  }
+}
+
+pandoc.stdio(action);