An automated (zotero) bibliography in a webpage

How we added an auto-updating set of citations to underworld in our publications webpage.

We need to curate all the publications that we can find that use the underworld geodynamics code and provide this information on our website. To avoid needless repetition, we take advantage of the fact that nearly all the information we require is online and automatically construct the bibliography from an online public zotero library.

Javascript Code

The code to collect one year's worth of data using the zotero api and render it online is very simple:

<h2> 2019 </h2>
<div id="pubs-2019"> Loading ... </div>

<script>
groupID = '2386948'
collectionKey = 'QNARWBUC'

fetch(`https://api.zotero.org/groups/${groupID}/collections/${collectionKey}/items?format=bib&style=apa&linkwrap=1&q=2019`)
				.then(function (response) {
					return response.text();
				})
				.then(function(body) {
					document.getElementById("pubs-2019").innerHTML = body;
				}); 
    document.write("<br/>")
</script>

This works by sending a structured query to zotero asking for information for a specific library (here the  library for the underworld-community group which has an ID of 2386948 and a specific collection of data with the Key of QNARWBUC). The result of the query is then loaded into the content of the <div id="pubs-2019"> tag when the query has completed.  

It produces the following output

2019

We build this into a loop for all the years we want to query like this:

<script>
for (let i = 2019; i >= 2005; i--) {
   document.write(`<h2 > ${i} </h2>` );
   document.write(`<div id=year${i}>` + `Loading ${i} publications </div>` );

    fetch(`https://api.zotero.org/groups/2386948/collections/QNARWBUC/items?format=bib&style=apa&linkwrap=1&q=${i}`)
				.then(function (response) {
					return response.text();
				})
				.then(function(body) {
					document.getElementById("year"+i).innerHTML = body;
				}); 
    document.write("<br/>")
}
</script>

The notable change is that we add the using a document.write() call so that we can generate unique tags. The fetch command is acting asynchronously so we do need to be careful to name each tag uniquely as we don't know the order in which the subsitutions will be made.

How can I use this ?

To find the groupID and collectionKey for a particular group library, look at the URL itself. For the library above, the format is https://www.zotero.org/groups/2386948/underworld-geodynamics-community/items/collectionKey/QNARWBUC.

For an individual, you can access the "my publications" public library with the following script (again, looking at the zotero URL to work out who you are — unless you are me in which case this is already just fine).

<script>
for (let i = 2019; i >= 1995; i--) {
   document.write(`<h2 > ${i} </h2>` );
   document.write(`<div id=year${i}>` + `Loading ${i} publications </div>` );

    fetch(`https://api.zotero.org/users/6049345/publications/items?format=bib&style=apa&linkwrap=1&q=${i}`)
				.then(function (response) {
					return response.text();
				})
				.then(function(body) {
					document.getElementById("year"+i).innerHTML = body;
				});
    document.write("<br/>")
}
</script>

For more information on how to use the zotero api consult their documentation and particularly, see the "basics" page to see how to write different queries.

Limitations

This is not an automatically generated list of publications from the whole web that use the underworld code because we ultimately have to curate our references quite carefully.

The same applies if you want a  list of your own publications to be generated automatically — you could just link to google scholar or orcid. However, at the moment, it is hard to access those databases publicly on demand via a webpage, and their automatic discovery of publications can be somewhat hit and miss. You probably have a curating job ahead of you anyway. Hence this semi-automatic but open source / free solution.