/celine, /libertine

@celine/bibhtml

Max Bo

@celine/bibhtml is a Web Components-based referencing system for HTML documents. It aims to provide a similar user experience to referencing in LaTeX/BibTeX. It's a thin wrapper around Citation.jswillighagen2019 and gracefully degrades when citations and references are malformed or JavaScript is disabled.

@celine/bibhtml takes significant inspiration from @citation-js/replacer, References Web Componentavellar2021 and Nota's citationscrichton2021nota.

GitHub MaxwellBo/celine + /issues License MIT
JSR jsr.io/@celine/bibhtml + /docs Version 0.9.0β,

Installation

Add the following script to your HTML file's <head> element:

API

@celine/bibhtml is structured around 3 custom elements:

  1. <bh-cite>
  2. <bh-reference>
  3. <bh-bibliography> 


<bh-cite>willighagen2019</bh-cite>
...
<bh-reference id="willighagen2019">
  @article{willighagen2019,
  title = {Citation.js: a format-independent, modular bibliography tool for the browser and command line},
  author = {Willighagen, Lars G.},
  year = 2019,
  month = aug,
  keywords = {Bibliography, Javascript},
  volume = 5,
  pages = {e214},
  journal = {PeerJ Computer Science},
  issn = {2376-5992},
  url = {https://doi.org/10.7717/peerj-cs.214},
  doi = {10.7717/peerj-cs.214}
  }
</bh-reference>
...
<bh-bibliography format="apa">
</bh-bibliography>

The bh- prefix was chosen to make the use of <bh-cite> relatively short.

<bh-cite>

To cite Citation.jswillighagen2019 as a reference, we can use the <bh-cite> element:

If we cite a missing referencefreud2012 that is not in the HTML document, the inner text of the element is displayed as a fallback:

The inner text of a <bh-cite> element is displayed instead of its reference number when:

The <bh-cite>'s ref attribute allows us to provide a more graceful fallback, by parsing the reference ID from the ref attribute rather than the inner text. We'll cite Citation.jswillighagen2019 again, but with an inner <a href="#willighagen2019"> to the <bh-reference> element.

We can use <bh-cite>'s href attribute with a reference ID to force the inner text to always be displayed.

This permits us to cite references with flexible inline citation formatting, like (Birol et al., 2013) or Birol et al. [2013].

We can still use an inner fallback link with the href attribute: [Birol et al. 2013].

<bh-reference>

Each <bh-reference> must be tagged with an id attribute, and contain reference information in 4 supported formats:

BibTeX

This expands to reference , and is backed by @citation-js/plugin-bibtex.

Unstructured text

A <bh-reference> can contain unstructured text. This format is useful when:

Observe that the reference dunbar2017 is unchanged.

DOI

This expands to reference , and is backed by @citation-js/plugin-doi.

Wikidata

This expands to reference , and is backed by @citation-js/plugin-wikidata.

<bh-bibliography>

The <bh-bibliography> finds <bh-reference>s and renders them in a formatted list (like at the bottom of the page).

</bh-bibliography> has very simple calling semantics. Just: 


<bh-bibliography format="apa">
</bh-bibliography>

Do not put <bh-reference> elements inside the <bh-bibliography> element. Everything will break.

The format attribute sets the citation style. Currently only 1 is supported, "apa".

References are rendered in the order they are cited by <bh-cite> elements, not the order they are declared in the HTML document.

Extras

<bh-cite> has an appropriate implementation of disconnectedCallback to remove the citation from the bibliography when the <bh-cite> element is removed from the DOM.

References

@article{willighagen2019, title = {Citation.js: a format-independent, modular bibliography tool for the browser and command line}, author = {Willighagen, Lars G.}, year = 2019, month = aug, keywords = {Bibliography, Javascript}, volume = 5, pages = {e214}, journal = {PeerJ Computer Science}, issn = {2376-5992}, url = {https://doi.org/10.7717/peerj-cs.214}, doi = {10.7717/peerj-cs.214} } @misc{avellar2021, author = {Matheus Avellar}, title = {References Web Component}, howpublished = {\url{https://lab.avl.la/references-webcomponent/}}, note = {GitHub: \url{https://github.com/MatheusAvellar/references-webcomponent}}, year = {2021}, month = aug, } @inproceedings{crichton2021nota, title={A New Medium for Communicating Research on Programming Languages}, author={Crichton, Will}, booktitle={Proceedings of the 1st Workshop on Human Aspects of Types and Reasoning Assistants}, year={2021} } Brian Dunbar (2017-08-03). The Sun | NASA. National Aeronautics and Space Administration. Accessed on 2021-08-30. 10.1080/15588742.2015.1017687 Q21972834 @misc{griesemer2020featherweight, title={Featherweight Go}, author={Robert Griesemer and Raymond Hu and Wen Kokke and Julien Lange and Ian Lance Taylor and Bernardo Toninho and Philip Wadler and Nobuko Yoshida}, year={2020}, eprint={2005.11710}, archivePrefix={arXiv}, primaryClass={cs.PL}, url={https://arxiv.org/abs/2005.11710}, }