I wrote about a codepen I wrote last week. I found that there are some great libraries for citations but most are wanton overkill for what I wanted, a wikipedia-like simple citation system.

I've since created a much smarter, dependency-free version and you can find the project on Web<cite>.

Project goals

  • 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 previous instance's number.
  • Uses anchor tags to link to the source at the bottom of the page to a specified div
  • No jQuery
  • Very easy to use

Planned Features

  • Code fixes and some basic error checking
  • MORE DOCUMENTATION!
  • Arguments passed in as object for better configuration
  • Demo files
  • ES5 & ES6 variants
  • Source Title (optional)
  • Date retrieved (optional)
  • Author (optional)
  • CSS attributes for each property so lists can easily customized
  • Date Retrieved vs Article Date published
  • Repository contains minified distribution ready code
  • Multiple citation lists on the same page (multi-article support)
  • Optional demo Scss/CSS stylings
  • Generate as an ordered list instead of spans

Demo

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


Find this project at: https://github.com/fuzzywalrus/webcites