Implementing Bibtexify

Hi there,

general rule is to load JS in the Footer ( WP_footer Hook ) to prevent render blocking or in the case of a page where the content is primarily generated through JS then immediately after the container that will render the output.

In this particular instance i couldn't advise whether either of these is a valid solution. This would require custom development.

Following these examples:
https://academia.stackexchange.com/questions/109114/how-to-efficiently-and-aesthetically-display-an-evolving-publications-list-on
https://awesomeopensource.com/project/vkaravir/bib-publication-list (https://github.com/vkaravir/bib-publication-list)
https://libraries.io/github/rpng/bib-publication-list (https://github.com/rpng/bib-publication-list)

I have taken the following actions:

1. Child theme created

2. Bibtexify.js uploaded to wp-content/themes/generatepress_child/js

3. Bibtexify.css uploaded to wp-content/themes/generatepress_child/css

4. Three elements added

I) Bibtexify - Hook into wp_footer, displays on Publications page only
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://reedsutton.ml/wp-content/themes/generatepress_child/js/bibtexify.js"></script>

II) Bibtexify - CSS - Hook into wp_head, displays on Publications page only
<link rel="stylesheet" href="https://reedsutton.ml/wp-content/themes/generatepress_child/css/bibtexify.css" type="text/css">

III) Bibtexify - i/o - Hook into inside_container, displays on Publications page only
<script type="text/javascript">
bibtexify("https://github.com/reedtsutton/publication_list/publications.bib", "pubTable");
</script>

However; I am still getting a blank page and not loading the bibtex table. Any idea where I might be going wrong?

Hi there,

It depends on the javascript. It's possible that the function isn't firing since the .js hasn't loaded yet.

I'm not able to confirm anything as your site isn't viewable.

Where can I message you to give you private access.
Site is not published yet.

Hi there,

you can send the links and login via the Account issue form here:

https://generatepress.com/contact/

Please add the URL of this topic so we can track.

There is an error in the code on line 2934 :

if ($("#shutter").size() === 0) {

the .size function was removed from jQuery - use the .length instead:

https://api.jquery.com/size/

Thanks, fixed.
Now I'm getting the following errors:

Failed to load resource: the server responded with a status of 404 (Not Found)
(index):1 Access to XMLHttpRequest at 'https://github.com/reedtsutton/publication_list/publications.bib' from origin 'https://reedsutton.ml' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Do I need to add some code to authorize it to parse the bib file on github?

You might need to host that file on your own server. The browser is preventing it from loading from another URL for security reasons.

Even when hosting on my own server, I am getting a multitude of errors:

Uncaught TypeError: Cannot read property 'id' of undefined
at Bib2HTML.addBarChart (bibtexify.js:2871)
at Bib2HTML.initialize (bibtexify.js:2817)
at new Bib2HTML (bibtexify.js:2779)
at Object.callbackHandler [as success] (bibtexify.js:2950)
at c (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at l (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)

That's an issue in the javascript file itself, unfortunately. It's looking for an element that doesn't exist (as a guess).