Improve reference display

[LukasWallrich]

The website is full of citations that are currently not systematically linked to references - so that they are of little use. We have a standing promise to change that in the glossary (#135) but the issue also arises in many other places.

Could we fix this across the webpage? I can think of three options:

• project-specific reference pages, with links from the specific mentions
• FORRT wide reference page, with links from the specific mentions

Or, my favorite:

• when clicking on the citation, a popup appears with full reference and abstract - linking to the original source. Very simple dummy (with ChatGPT generated code) below, should of course be prettier.

popup_test.html.zip

@flavioazevedo would this solution make sense for you?

[LukasWallrich]

Add copy reference button in corner of popup

[LukasWallrich]

This would be the possible steps - from conversation with @seunolufemi123

Maybe you can try to first implement it prettily on one page, with one reference, just using HTML, CSS and JS, as needed? Then the next step would be to move the elements to their appropriate homes: CSS into our global CSS file (see https://hugo-mini-course.netlify.app/sections/styling/custom/), the JS into a central place (header.html or footer.html in layouts/partials or maybe baseof.html) and then generate a short code based on the HTML (https://gohugo.io/templates/shortcode/). To then avoid having to include full reference details into the shortcode, we would want to look up the reference in a database - according to ChatGPT, that should be very easy: https://chatgpt.com/share/673dc36e-23e4-800e-b3a9-0a5e57494bfc, though I expect we might have to do some touble-shooting.