@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.js^{willighagen2019} and gracefully degrades when citations and references are malformed or JavaScript is disabled. @celine/bibhtml takes significant inspiration from @citation-js/replacer, References Web Component^avellar2021 and Nota's citations^{crichton2021nota}.

GitHub	MaxwellBo/celine + /issues	License	MIT
JSR	jsr.io/@celine/bibhtml + /docs	Version	0.2.0, Nov 29 2024

Installation

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

API

@celine/bibhtml is structured around 3 custom elements:

`<bibhtml-bibliography>`

The <bibhtml-bibliography> contains <bibhtml-reference>s and renders them in a formatted list (like at the bottom of the page). References are rendered in the order they are cited by <bibhtml-cite> elements, not the order they are declared in <bibhtml-bibliography>.

The format attribute sets the citation style. Currently only "apa" (default) is supported.

<bibhtml-bibliography format="apa">
  <bibhtml-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}
    }
  </bibhtml-reference>
  ...
</bibhtml-bibliography>

`<bibhtml-reference>`

Each <bibhtml-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 <bibhtml-reference> can contain unstructured text. This format is useful when:

The reference is not in a machine readable format
The reference is malformed
The machine readable format is not supported by bibhtml or Citation.js

The Sun is hot^dunbar2017.

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.

`<bibhtml-cite>`

Say we wanted to cite Citation.js^{willighagen2019}, we'd use the <bibhtml-cite> element:

Alternatively, rather than citing Citation.js^Link with the reference ID as the inner text, we can use the ref attribute to specify the ID. This allows you to put a fallback in the element if JavaScript fails to load:

When citing a reference^freud2012 that is not in the bibliography, the inner text of the element will be displayed as a fallback:

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