Wednesday, June 19, 2019

Citation.js: Usability Update

Citation.js: Usability Update

Citation.js just had a bunch of tooling updated, which should make a lot of use cases easier. Let’s go through them:

Replacer (GitHub, Demo)

Replacer demo

Replacer is an HTML API for Citation.js that I recently updated for the new version so that it works with components. Basic usage:

<div
  class="citation-js"
  data-input="Wikidata ID/DOI/ISBN/GitHub repo/..."
  data-output-format="bibliography"
  data-output-template="apa"
  ...
  >
  Fallback text for if things go wrong. This is treated
  as input if data-input is ommitted.
</div>

<script src="replacer.js">

Additional features:

To get a replacer.js with the tools you want, use the Bundle tool:

Bundle Tool (GitHub, Demo)

Bundle tool screenshot

The Bundle tool is a small website where you can compose a bundle of Citation.js components, choosing exactly what you need. You can pick the plugins you want, choose to add Replacer functionality or leave the core out altogether to split some files.

After clicking Create Bundle you are redirected to a page where you can download your live-created bundle. Please do not include that script on your page; there is no caching so every time you load your page it would have to re-run Browserify and that could be a bit problematic for other users and for Glitch, where it is hosted.

To still be available in such cases, and because I have to manually update component versions and I might not have done that yet at that moment, you can host it yourself to. The code is on GitHub, and npm install && npm start should work perfectly fine. Alternatively, you can remix the project on Glitch, which is probably a lot easier (just one click).

CLI (GitHub)

The CLI is also updated to include some of the new options. Specifically, with some tricks special output options are now supported, as well as input options and plugin configuration. For example:

# Prefer Japanese when picking Wikidata labels
citation-js --plugin-config "@wikidata.langs=[ja,en]"

# Force the parser to assume it is a generic URL (and not a
# specific one)
citation-js --input-force-type "@else/url"

# Load the ISBN plugin (not included by default)
# Note: this still loads the plugins that are included by default
citation-js --plugins isbn

# Do not sort the bibliography with the algorithm specified by the
# style/template, but rather keep the original (input) order.
# Note: you still need "-s citation-apa" et cetera
citation-js --formatter-opts "nosort=false"

So, hopefully that improves the ways people use Citation.js. As always, feedback is welcome on the various GitHub repos or on Gitter.