Citations - a clean way to cite (littlefoot.js) for long form essays

Help Customization
1

Dear Write.as Community,
I hope this finds you well. I am nearing the point of making my blog live (have written a handful of essays to get things going), but given that I am writing scientific articles, citations are plentiful. I really like littlefoot.js (https://littlefoot.js.org/), and I would love to get it working. Here is what I have so far in my javascript (its frankly a mess!), but since I have a young family, I have a lot of research projects to juggle at the moment, plus some writing thrown in as a creative sealant between the tiled tappestry of life…i dont have much time to get this working.

I use pandoc to prepare my essays and I have found it easier to export to html, since all citations are automatically hyperlinked and a TOC is also created etc. Markdown was also nice, but I was not having much luck with hyperlinking citations, needed to use MultiMarkdown or something, then by this point, was time to cook dinner for the kids.

Here is what I have in my CSS section of the blog:

const script = document.createElement(‘script’);
script.setAttribute(‘src’, ‘LINK …unpkg.com/littlefoot/dist/littlefoot.js’);
script.setAttribute(‘type’, ‘application/javascript’);
document.head.appendChild(script)

//src=“LINK …unpkg.com/littlefoot/dist/littlefoot.js”;
//type=“application/javascript”;

/* Add stylesheet to blog */
//const blogTitle = document.getElementById(“post-body”);
//const blogTitleChildNodes = blogTitle.childNodes;
//blogTitleChildNodes[0].innerHTML += ‘’;

script2.setAttribute(‘src’, ‘littlefoot.littlefoot()’);
script2.setAttribute(‘type’, ‘application/javascript’);
document.head.appendChild(script2)

var embedLink = “”;
document.write(embedLink);

var topP = document.createElement(“p”);
//topP.style.textAlign = “center”;

topP.innerHTML = ‘


littlefoot.default({footnoteSelector:“span”}’;
var cont = document.getElementById(“wrapper”);

if (cont !== null) {
// Add to blog index and tag pages
cont.appendChild(topP);
} else {
// Add to individual blog post page
cont = document.getElementById(“post-body”);
cont.insertAdjacentHTML(“afterend”, topP.outerHTML);
}

littlefoot.citation({footnoteSelector:“span”})

So far its not working. Any ideas? Based on my reading of this discussion board, it seems that others would also find littlefoot.js beneficial

Thanks in advance for any pointers

2

Do you have a link to a blog where you’ve tried this?

Also, your code should be in the JS section of the blog, not the CSS section.

Finally, depending on what you want to do, it’s likely faster to just do a basic version in JS yourself rather than embedding an external library (but YMMV).