Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Interactive publications lists with JavaScript + Bibtex

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 build
Octocat-spinner-32 lib
Octocat-spinner-32 src
Octocat-spinner-32 tools
Octocat-spinner-32 Jakefile
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.md
Octocat-spinner-32 bib-publication-list.css
Octocat-spinner-32 example.bib
Octocat-spinner-32 example.html
README.md

bib-publication-list to automatically generate an interactive HTML publication list from a BibTeX file

Getting Started

First, load the required JavaScript files:

<script src="jquery.min.js"></script>
<script src="bib-list-min.js"></script>

All you need to do is to include the BibTeX into an HTML page and tell the script to turn it into a sortable and searchable table. For example:

<table id="pubTable" class="display"></table>
<pre id="bibtex">@article{Karavirta:JVLCTaxonomy,
   title = {A comprehensive taxonomy of algorithm animation languages},
   journal = {Journal of Visual Languages \& Computing},
   volume = {20},
   number = {1},
   pages = {1--22},
   year = {2010},
   issn = {1045-926X},
   doi = {DOI: 10.1016/j.jvlc.2009.09.001},
   author = {Ville Karavirta and Ari Korhonen and Lauri Malmi and Thomas Naps}
}
</pre>

Finally, the bib-publication-list needs to know the input data element and the output table. So, one line of JavaScript:

bibtexify("#bibtex", "pubTable");

Alternatively, the bibtex can be loaded from a file. Personally I prefer including it in the HTML, though. This way, browsers without JavaScript enabled get at least to see the bibtex instead of a blank page. This causes an ugly-looking flash of unstyled content, though.

bibtexify("example-biblist.bib", "pubTable");

The result looks like my publication list at: http://villekaravirta.com/publications/.

If you want to fix the flash of unstyled content, you can hide the #bibtex element and make it visible when JavaScript is disabled. To do that, add

#bibtex { display: none; }

to your CSS and

<noscript><style>#bibtex { display: block; }</style></noscript>

to your HTML.

Configuration Options

The bibtexify function accepts an optional third parameter for configuration options. These options include:

visualization A boolean to control addition of the visualization. Defaults to true.
tweet Twitter username to add Tweet links to bib items with a url field.
sorting Control the default sorting of the list. Defaults to `[[0, "desc"], [1, "desc"]]`. See (http://datatables.net/api#fnSort) for details on formatting.

Building from source

There is a Jakefile for building the combined and minified versions with Jake and a Makefile for building with make.

Credits

This code uses some great libraries: jQuery, DataTables, and JavaScript BibTeX Parser.

Something went wrong with that request. Please try again.