Is it possible to support use of this plugin with a React+Headless-WP theme?

[jcklpe]

I'm building a theme using Frontity which is a React+Server Sided Rendered+Headless-WP framework.

The footnotes get correctly output by the framwork but they are at the bottom, rather than being contained in the hyperlinks.

Is there anyway to make this compatible? Do you have any suggestions?

Also love this plugin, and thought you might enjoy this article: https://www.kooslooijesteijn.net/blog/semantic-sidenotes

[dsifford]

Cool framework! Never heard of it before.

Can you explain a bit further what happens with this framework? Having a hard time wrapping my head around your description.

Maybe a screenshot or something?

[jcklpe]

@dsifford At it's simplest level it's basically just a react based ui that fills it's content using data that it grabs via WP-REST-API.

Here's a test blog that you can check out to seen an example [link].

so like you have a component called "Post" made in React, and its contents are just a raw HTML that has been grabbed via a WP-API call to a specific post's content. Another WP-API call to that post's title etc.

By default, ABT just puts all the footnote information in the post content. No additional WP-API calls are needed. (or at least that's what's happening when I'm using my blog as a test source) All the footnotes appear at the bottom of the content rather than as little floating boxes which appear on hover.

I'm thinking there should be a way to grab the footnotes and reinsert them into the react frontend. I'm not quite sure how to do it as I'm not yet super good at react but I thought I might pass the question by you and get your thoughts.

[dsifford]

Okay I think I understand. The functionality that is currently missing is related to the tooltip generation on the frontend?

That should be fairly simple to add in. Not sure why it's currently not working as-is, but my guess is probably due to the framework not loading plugin frontend scripts.

All the functionality that happens on the frontend of this plugin is contained in a single script. Give it a look over and let me know what it is I'd have to do differently to support the framework you're using: https://github.com/dsifford/academic-bloggers-toolkit/blob/master/src/js/frontend.ts

[jcklpe]

@dsifford Yes that makes sense as the nature of the framework is that it does not use any of wordpress's plugin frontend. It just grabs the html via WP-REST-API and then puts it inside react components.

In order to support this, one would simply need to include that script in the post component (example seen here). Looking over that script there would need to be some minor restructuring (such as you wouldn't need to include the domReady wrapper as that's already handled by React), and instead of injecting the HTML using the TOOLTIP_TEMPLATE one could just insert a tooltip reacti component that gets fed the tooltip information as a prop.

I'm not quite up on react yet enough to do this but I think I get the general idea and might try to do this myself soon.

It might even be possible to add in extra functionality to the footnote tooltips, such as adding in the ability to hyperlink things etc.

[jcklpe]

Actually I don't know if the script example you gave is even really necessary per se. I guess I could just have it select the footnote by it's css class and then stick the contents of the footnote in there.

The only thing I'm curious about then is how do you match the footnotes to the footnote content? I see super long IDs with a bunch of numbers. Is that some sort of hash that you assign to both to make them identifiable? How could I have the frontend of the react know what hashes to expect?

[dsifford]

The only thing I'm curious about then is how do you match the footnotes to the footnote content?

Each inline citation has a data attribute data-reflist which contains a stringified array of citation IDs. Those citation IDs are the IDs of each containing reference and are plucked from the bibliography on load to be rendered in the tooltips.