Implementing Bibtexify

[Reed]

Hello,

I would like to go about implementing the solution proposed by xLeitix on https://academia.stackexchange.com/questions/109114/how-to-efficiently-and-aesthetically-display-an-evolving-publications-list-on.

I want to generate an interactive publication list from a .bib file hosted in github.
How would I implement the JS through hooks?

Thanks,
reed

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Reed]

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&gt;
<script src=”https://reedsutton.ml/wp-content/themes/generatepress_child/js/bibtexify.js”></script&gt;

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&#8221; 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&#8221;, “pubTable”);
</script>

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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Reed]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Reed]

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&#8217; from origin ‘https://reedsutton.ml&#8217; 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?

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Reed]

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)

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts