While writing a long-form retrospective on how Microsoft lost the browser wars, I realized managing a citation list is a royal pain the ass. With 50+ sources, I want a very simple light-weight way to manage a source list. The requirements were as follows for my auto-citation list generate:

  • Generate a list from all the citations found within the article.
  • Detect multiple instances of the same source.
  • Number each <cite> instance, if used before, use the correct number.
  • Use anchor tags to link to the source at the bottom of the page.

I opted to use jQuery although I might kill the dependency as the biggest thing I used it for was queries, each, appending and writing HTML. All easier to write with jQuery but in the era of wide support for querySelectorAll() hardly necessary. If I go that far, I might just package it up into an ultra-lightweight javascript plugin with a few basic configuration options: a target for the list of citations, what information to collect, and maybe one or two citiation options. For now, it's a very simple citation script meant for non-academic purposes.

The process was pretty easy, the script creates an array of objects based off of the jQuery object, iterates through the array each time a new item is added to make sure there isn't a duplicate URL, and if there isn't already a duplicate, it's that entry to the list. The assembled array is iterated through so its data can be written the DOM. Duplicates are detected using the source URL.

I styled it after Wikipedia and may add in the link to the instance of the citation in the article like Wikipedia. It'd be easy to add additional information to the citation if needed such as "data retrieved", but in the case of my blog post, that'd be the date written.

See the Pen Simple Auto-generated citations using <cite&rt; and javascript by Greg Gant (@fuzzywalrus) on CodePen.