search

timlrx / rehype-citation

Rehype plugin to add citation and bibliography from bibtex files
https://rehype-citation.netlify.app
MIT License
40 stars 9 forks source link

Div for inline citation #8

Closed chaichontat closed 2 years ago

chaichontat commented 2 years ago

Hi, thanks for this great plugin! I was about to make my own when I found yours.

I'm looking to make a blog with a similar citation structure with distill.pub with hoverable bibliographies. The easiest way that I could think of is for inline citations to be enclosed in some div. The bibliographic information of those citations would be optionally appended right next to the citation with classes that can be specified in options.inlineBibClass. Would it be possible to add such feature? I could also try submitting a PR.

Thanks a lot!

timlrx commented 2 years ago

Hi, glad you found it useful!

Happy to accept a PR for it. I think you are on the right track:

  1. Wrap the inline citation with a span with a fixed class associated with it.
  2. Add a new option (inlineBibText?) which would render a neighboring div with the bibliographic information. Rather than including inline style like distill.pub, I think it would be better to specify a class and let the user style it accordingly.
  3. Add an example style to get this show on hover feature working.
chaichontat commented 2 years ago

I decided to make a more general solution by adding id to both the inline citations and their bibliographic counterparts. This exposes the link between the two without duplication. In my case, I'd put in some JavaScript to copy the bibliographic entry div to the inline citation.

AlexanderZeilmann commented 2 years ago

The id are nice, but I think most people using this feature want to have the bibliographic entry directly at the point of citation. So it would be nice to have an option that puts it there, so that not every user has to do this themselves.

Beside showing citations on hover, this will also enable margin citations.

chaichontat commented 2 years ago

@AlexanderZeilmann I have added the inline bibliography feature. Although for my use case, I simply used tippy.js to add a popover and copied the content from the bibliography.