selfdefined/11ty/_includes/components/definition-content.njk

{% macro renderAltWords(words, labels) %}
  {%- if words | isArray -%}
    {# Array #}
    <ul
      class="list-semicolon"
      {% if labels %}aria-labelledby="{{ labels | join(' ') }}"{% endif %}
    >
      {%- for word in words -%}
        <li>
          {{ word | linkIfExistsInCollection(collections.definedWords) | safe }}
        </li>
      {%- endfor -%}
    </ul>
  {%- else -%}
    {# Object #}
    {# With class="", the list loses padding via the CSS reset style. #}
    {# For multi-level category support, we may want an actual class. #}
    <ul class="">
      {%- for category, list in words -%}
        <li>
          {% set categoryId = ("alt-words-" + category) | replace(' ', '-') %}
          <strong id="{{ categoryId }}">{{ category }}</strong>
          {{ renderAltWords(list, labels.concat(categoryId)) }}
        </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
{% endmacro %}

<section class="definition-content">
  <section class="definition-content__content">
    {{ content | safe }}
  </section>
  {%- if alt_words -%}
    <section class="definition-content__content">
      <h2 id="alt-words">Alt Words</h2>
      {{ renderAltWords(alt_words, ["alt-words"]) }}
    </section>
  {% endif %}
  {%- if reading -%}
    <section class="definition-content__content">
      <h2 id="further-reading">Further Reading</h2>
      <ul class="list-semicolon" aria-labelledby="further-reading">
        {% for link in reading %}
          <li>
            <a href="{{link.href}}">{{ link.text }}</a>
          </li>
        {% endfor %}
      </ul>
    </section>
  {% endif %}
</section>