How to combine markdown footnotes with bindery footnotes?

[tomcritchlow]

Hey - firstly thanks so much for bindery!

I am trying to convert a series of HTML posts (authored in markdown) into a bindery PDF book.

Example post: https://tomcritchlow.com/2019/11/18/yes-and/

Markdown puts the footnotes at the bottom of the doc. Something like this:

In-line:

<p>I recently read the book <a href="https://www.amazon.com/Impro-Improvisation-Theatre-Keith-Johnstone/dp/0878301178">Impro - Improvisation and the Theatre</a> by Keith Johnstone<sup id="fnref:vgr" role="doc-noteref"><a href="#fn:vgr" class="footnote">1</a></sup>. It’s a delightful book all about improvisational theatre and importantly <em>how to teach</em> improvisational theatre.</p>

At the bottom of the post:

<div class="footnotes" role="doc-endnotes">
<ol>
  <li id="fn:vgr" role="doc-endnote">
  <p>I loved the book and as Venkatesh said <em>‘it is a textbook that teaches you how to see the world differently.’</em> so consider it recommended. <img src="/images/Impro-by-Keith-Johnstone.jpg" alt="" /> <a href="#fnref:vgr" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
  </li>
  <li id="fn:unfair" role="doc-endnote">
  <p>Yes actually internal company politics and performance <em>are</em> unfair but changing that is not the scope of this post… <a href="#fnref:unfair" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
  </li>
  <li id="fn:arendt" role="doc-endnote">
  <p>Handily Venkatesh has a <a href="https://www.ribbonfarm.com/2016/12/21/the-computational-condition/">more formal summary of Hannah Arendt’s work here</a> - the first 22 slides are most of what you need for this post. <a href="#fnref:arendt" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
  </li>
  <li id="fn:speech" role="doc-endnote">
  <p>I’ve not delved into it but I think there are insights to be had from studying <a href="https://archive.org/details/HowToDoThingsWithWordsAUSTIN">speech act theory</a> here. <a href="#fnref:speech" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
  </li>
  <li id="fn:sparring" role="doc-endnote">
  <p><a href="https://tomcritchlow.com/2020/05/28/sparring-and-tenure/">More on sparring here</a> <a href="#fnref:sparring" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
 </li>
 </ol>
 </div>

How do I convert these into bindery footnotes? And can I combine these with auto-generated ahref footnotes?

Thanks!

[tomcritchlow]

Not sure if this is the most elegant way to do this but I wrote this JS to pre-process the footnotes:

var footnotes = $(".footnotes p"); $("sup").each(function(index){ var fn = footnotes[index].removeChild(footnotes[index].lastChild); $(this).replaceWith("<span class='marginnote' data-title='"+footnotes[index].innerHTML+"'></span>"); }); $(".footnotes").hide()

Then convert them as normal using bindery:

let marginFootnotes = Bindery.Footnote({ selector: '.marginnote', render: (element, number) => '${number}: ${element.getAttribute("data-title")}' });

[evnbr]

Hi @tomcritchlow, glad you're getting use out of bindery! Yes, that works, there's not really a more elegant way of doing it right now. Have had a few requests to make footnotes more flexible... I suspect that footnotes added at the end is pretty common. Will see if I can simplify this in a future version of bindery.

[tomcritchlow]

Yeah - esp for URLs. I think what I'm going to do is use JS to pre-process all my links and turn them into endnotes that look something like this: https://photos.app.goo.gl/mbArDucBja1YUarR8 and then use the bindery library to handle my actual footnotes as per above.

[evnbr]

Got it. Just to check, what is your preferred design for the book page— both the link URLs and your markdown endnotes intermixed as footnotes on the bottom, in the order they occur? Or something else.

[tomcritchlow]

The code I posted above combined with the default link -> footnote code from the examples does the job of combining the links and endnotes as footnotes.

But when I look at it - it's kind of strange having some footnotes be for links and some being "real" content like an endnote/margin note. So I think my plan is to move all of the links to endnotes at the end of the book like in the photo I showed above and leave the page by page footnotes to be for my margin notes. Does that make sense?

I can post a link when I've got it up and working

[evnbr]

Ah yeah misspoke, just wanted to see if you are working around a limitation in bindery, or had something else in mind. Makes sense to me. Definitely send a link, I'm always curious to see how people translate web content to print.