Using the script with Jekyll

[tflo]

[This is an informative post, not an issue]

First of all, many thanks for sharing this great script!

It is just the perfect footnote display, because it is simple, unobtrusive and – best of all – with JavaScript disabled the browser just falls back to displaying the footnote as usual.

Currently I’m transferring my old WP blog to Jekyll and I’m going to use your script with Jekyll.

Hence, as info for other Jekyll users: Adapting the script to Jekyll (with kramdown as Markdown engine) is really simple:

The only thing you have to do is adapting the Selector at line 43 to "sup[id^='fnref:']".

Here the patch:

--- a/footnotes.js
+++ b/footnotes.js
@@ -40,7 +40,7 @@ function footnotePopup(showIndex, showCloseBtn) {
         parent.removeChild(fnReturn);
     });
 
-    const fnRefs = document.querySelectorAll("sup.footnote-ref");
+    const fnRefs = document.querySelectorAll("sup[id^='fnref:']");
     fnRefs.forEach(function(fnRef) {
         fnRef.addEventListener("click", handler("refs", fnRef));
     });
-- 

This is because Jekyll/kramdown puts the class into the a (link) element (as opposed to the sup element as in the script). So the easiest way is to just use the id of the sup instead.

The new selector scans for ids that start with fnref:.

Since I’m completely JavaScript-ignorant, this might not be the best solution. So please let me know if there is a more proper way.

– Tom

[vaetas]

Hi @tflo , I tried your edit with my Hugo site and it works. So can I just merge it with current code to make it work for both Jekyll and Hugo or did I miss something?

You did not explicitly said it will work for Hugo too or if you tested it so I want to be sure I have checked all cases.

And sincere thanks for your compliments :rocket:. I am glad you find this useful.

[tflo]

No, I haven’t tested it with Hugo.

For Hugo, your original solution seems more “proper”, since it directly selects all instances of the given class. My Jekyll adaptation is searching the ids for the given string.

So, in theory, I could imagine that my "sup[id^='fnref:']" is less performant (or more resource intensive). But I don’t know if this will ever be noticeable. Maybe on a huge page with lots of footnotes?

Today I’ve edited a page with 14 footnotes and didn’t notice any delay.

So, if Jekyll compatibility is important for you, I would merge it – and wait for any incoming complaints 😉

– Tom

[tflo]

BTW, for Jekyll/kramdown I also have to replace the “footnote-return” class with “reversefootnote”, if I want the removal of the return links.

This is not essential for the script to work, but I just wanted to mention it. So, to make it fully Hugo & Jekyll compatible you’d have to query both classes.

– Tom

[vaetas]

I will add link to this issue to project's README. It would be nice to have support for both Hugo but for now I will keep it this way. I don't use Jekyll anymore so I could not make sure it works all the time.

Thanks again for your issue.

[tflo]

Just a proposal:

• Keep your code clean and Jekyll-free (it is meant for Hugo, so optimize it for Hugo)
• As you said, just add a section to the ReadMe where you explain what has to be done to make it work with Jekyll (or other setups)

As long as I use Jekyll and your script, I can provide you with the necessary infos/updates. Once I stop using Jekyll or your script, I’ll let you know.

– Tom

[vaetas]

OK, that sounds great. I already updated README. Thanks for your help.

[tflo]

No prob.

[tflo]

Yesterday I found another issue (not related to Jekyll). Gonna open a new issue.

Edit: This one.

[hummat]

Hi, thanks to both of you for making this script and pointing out how to modify it, this is great!

I just wanted to quickly share how to modify the footnotes.js for use with markdown set to CommonMarkGhPages, i.e. GFM, instead of kramdown.

• Line 2: Change const id = "fn:" + index; to const id = "fn" + index; (i.e. remove the colon)
• Line 43: Make changes according to @tflo but replace sup by a

GFM places the id inside the a element and doesn't use colon separation.