Retain footnote content in article summary

#1

I have added bigfoot.js to my Middleman blog site. On post pages, everything works as expected. On the main, index page, however, footnotes aren’t handled by Bigfoot.

Ok. I’ve actually had a realization, which alters and specifies the problem. The issue is not bigfoot.js nor jQuery. Both are loading and in the proper order. Rather the problem is with the article.summary HTML used on the index page. The HTML generated by redcarpet (the Markdown engine I’m using) puts the footnotes text in an li element at the bottom of the page. So, if there is a footnote sup element within the article.summary, it will be within the summary on the index page, but the corresponding footnote text will not. Without the footnote text, bigfoot.js can’t render properly.

So, my new issue is how to keep both the footnote link and the footnote content in the article summary?

For clarity’s sake, here’s some example HTML of the footnotes generated by redcarpet in Middleman:

<p>This is the content of my blog post. That&rsquo;s some text with a footnote.<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup></p>

...

<div class="footnotes">
  <hr>
  <ol>
    <li id="fn1">
      <p>And that&rsquo;s the footnote.&nbsp;<a href="#fnref1" rev="footnote">&#8617;</a></p>
    </li>
  </ol>
</div>

I need a custom article summary generator that will go and get div.footnotes and add it to the article summary. Unfortunately, I am a bit of a Ruby noob, so I’m uncertain how exactly to achieve this.

#3

I have worked up an initial solution, tho I do think it is liable to breaking. Using the informative content in this post on these forums, I’ve written the following custom article summary generator:

def setup_summary_generator(separator = /(READMORE)/i)

  return Proc.new  do |resource, rendered, length, ellipsis|
    require 'middleman-blog/truncate_html'
    footnote_content = /<div class="footnotes">(.*?)<\/div>/m.match(rendered)
    footnotes = if footnote_content.nil? then '' else footnote_content end

    if rendered =~ separator
      # The separator is found in the text
      summary = rendered.split(separator).first
      summary + footnotes.to_s   # return
    elsif length
      summary = TruncateHTML.truncate_html(rendered, length, ellipsis)
      summary + footnotes.to_s   # return
    else
      rendered   # return
    end
  end
end

I simply use a RegEx to grab the contents of the div.footnotes section from the article body HTML (the rendered var in this case) and append it to whatever summary is generated.

This solution is working for now. Hopefully there are no edge-cases that will break my RegEx.