Making the <cite> tag sane
a dependency free javascript plugin



Why?

After investigating several javascript solutions for generating citations/references, I found some exceptionally powerful citation that adhered to academic formats like (AMA, Chicago, JM) but none that generated simple Wikipedia-esq lists of inline citations, hencewhich Webcites.js was created..

Simple citations is a script to generate a list of citations from cites within the the article for a lightweight, simple and easy-to-use. Each citation uses the under-utilized <cite><cite> tag.

It can even detect duplicate citings as long as the URL is the same.

Each <cite> tag requires data-title, and date-source, with optional tags for data-date, data-source, data-sourcename and data-dateretreived.

<div><div> with an identifer (class or ID) for the list of sources to be stashed in.



Getting Started

In the body of your HTML, you'll need to add citation marks. The citation number will be rendered inside the tags. Only two tags are required per citation. data-title, and date-source

Example

<cite data-source="https://www.cnet.com/news/netscape-cuts-prices-on-retail-products" data-date="01/30/98" data-title=" Netscape cuts prices on retail products" data-sourcename="Cnet.com" data-dateretrieved="11/01/18"></cite>

Initializing

By default the script targets a div with the ID of "#citations", and by default uses the unicode character, Black Up-Pointing Triangle ▲ in the citation list as an anchor link back to the post

citer.init();

This can be changed by passing in an object with a new target.

Example

citer.init({
  target: ".mydestination",
  citicon: "<img src="link/to/image.png">"
});



Styling

Webcites allows easy CSS styling for custom looks and feels for your blog/article/website/webapp.

Inline citations

Each inline citation uses the cite tag which can be style via CSS. Inside each citation is a class of .subCite

Citations/References list

Each citation has a class of .citeItem. Within each .citeItem is the following:





Download and/or Fork!

The source code is avaliable on GitHub as well as the full documentation or can be downloaded in a zip file .



Other projects

Shameless plugs for a few of my other projects:

cssfiltergenerator.com - a CSS3 Filter Generator (advertisement free)

blog.greggant.com - my personal blog.

Citations/References