selfdefined/11ty/_includes/components/definition-content.njk
David Peter a3271a9470
⚒️ Add optional category support for alt words. (#199)
* Add optional category support for alt words.

In the frontmatter for Markdown word definitions, the `alt_words` key
now supports any number of categories, though it functionally only
supports one level in the look & feel of the website.

If we wish to use multi-level categories, we can add a class to the <ul>
in order to cleanly style nested lists.

Resolves #170

* Fix: Digital Blackface lint issues.
2020-06-12 13:12:15 -07:00

53 lines
1.6 KiB
Plaintext

{% 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>