https://www.integratedfitnesscoaching.com/docs/annotations/

Annotation System

This site includes a shared annotation system for glossary terms, inline citations, and in-page bibliographies.

Authoring

Glossary annotations:

<span class="ifc-annotation ifc-annotation--glossary" data-annotation data-annotation-trigger data-annotation-kind="glossary" data-entry-id="calorie-balance" tabindex="0" aria-label="Show glossary note for calorie balance"><span class="ifc-annotation__trigger-text">calorie balance</span></span>
<span class="ifc-annotation ifc-annotation--glossary" data-annotation data-annotation-trigger data-annotation-kind="glossary" data-entry-id="calorie-balance" tabindex="0" aria-label="Show glossary note for energy balance"><span class="ifc-annotation__trigger-text">energy balance</span></span>
<span class="ifc-annotation ifc-annotation--glossary" data-annotation data-annotation-trigger data-annotation-kind="glossary" data-entry-id="calorie-balance" data-extra-html="&lt;span class=&quot;ifc-annotation__para&quot;&gt;This article uses the term in the bodyweight-regulation sense.&lt;/span&gt;" tabindex="0" aria-label="Show glossary note for calorie balance"><span class="ifc-annotation__trigger-text">calorie balance</span></span>

Citation annotations:

<!-- ifc-citation-start --><span class="ifc-annotation ifc-annotation--citation" data-annotation data-annotation-trigger data-annotation-kind="citation" data-annotation-style="site" data-citation-label="3" role="button" tabindex="0" aria-haspopup="dialog" aria-expanded="false" aria-controls="ifc-annotation-popover" aria-label="Show citation 3"><span class="ifc-citation-marker" aria-hidden="true" data-citation-label="3">3</span></span><!-- ifc-citation-end -->
<!-- ifc-citation-start --><span class="ifc-annotation ifc-annotation--citation" data-annotation data-annotation-trigger data-annotation-kind="citation" data-annotation-style="site" data-citation-label="3" data-extra-html="&lt;span class=&quot;ifc-annotation__para&quot;&gt;Cited here specifically for the adaptive thermogenesis discussion.&lt;/span&gt;" role="button" tabindex="0" aria-haspopup="dialog" aria-expanded="false" aria-controls="ifc-annotation-popover" aria-label="Show citation 3"><span class="ifc-citation-marker" aria-hidden="true" data-citation-label="3">3</span></span><!-- ifc-citation-end -->
<!-- ifc-citation-start --><span class="ifc-annotation ifc-annotation--citation" data-annotation data-annotation-trigger data-annotation-kind="citation" data-annotation-style="site" data-source-id="hall-2022-metabolism" data-citation-label="7" role="button" tabindex="0" aria-haspopup="dialog" aria-expanded="false" aria-controls="ifc-annotation-popover" aria-label="Show citation 7"><span class="ifc-citation-marker" aria-hidden="true" data-citation-label="7">7</span></span><!-- ifc-citation-end -->

Bibliography:

On this Jekyll 3 stack, label is the stable recommended parameter for page-local citation numbers. n remains a best-effort alias in the include, but label should be preferred in authored content.

Citation Mapping

The simplest page-level mapping is a hash in front matter:

citations:
  "1": hall-2022-metabolism
  "2": schoenfeld-2018-protein
  "3": brown-2020-circadian

If you want an explicit sequence or non-numeric labels, you can use an ordered array:

citations:
  - label: "1"
    id: hall-2022-metabolism
  - label: "2"
    id: schoenfeld-2018-protein

Data Files

Glossary entries are keyed by canonical IDs and can include:

  • term
  • short
  • long
  • see_also
  • links

Glossary links entries can include:

  • label
  • url
  • newtab

Citation records are keyed by canonical IDs and use a broad schema that works for the current site renderer while leaving room for later style-specific renderers. Common fields include:

  • type
  • title
  • subtitle
  • authors
  • organization
  • container_title
  • publisher
  • place
  • issued
  • url
  • doi
  • isbn
  • court
  • reporter
  • notes
  • quote or excerpt

Citation link-related fields can include:

  • url
  • url_newtab
  • doi
  • doi_newtab
  • links

Citation links open in a new tab by default. Glossary links stay in the same tab by default. Any individual link can override that behavior with a sibling newtab boolean.

Implementation Notes

  • _includes/_annotation.html is the shared popover shell targeted by CSS and JavaScript.
  • _includes/_citation_reference.html centralizes the default citation rendering logic used by both popovers and bibliography output.
  • assets/js/annotations.js handles click/tap, outside-click dismissal, Escape dismissal, and viewport-aware positioning.
  • Popovers still reveal on hover and focus without JavaScript; JavaScript enhances the interaction model rather than creating the content from nothing.