Category collection macro example(s)

{% import "macros/collections.njk" as collection with context %}

<section>{{ collection.category('experience') }}</section>

<section>{{ collection.category('interaction') }}</section>

<section>{{ collection.category('engineering') }}</section>

<section>{{ collection.category() }}</section>

Collection Macro

{%- macro category(tag = 'posts') %}

{%- set data = collections[tag] %}

{% for content in data %}
<article>
    <h3 id="{{ content.data.title or 'no-slug' | slug }}">
        <a href="{{ content.url }}">{{ content.data.title }}</a>
    </h3>
    <p>
        {% if content.data.summary.length -%}
        {{ content.data.summary }}
        {% else %}
        {{ hlp.11ty.noHtml(content.templateContent) |
    truncate(300) }}
        {% endif -%}
    </p>
    <p>
        <time datetime="{{ page.date.toLocaleString() }}">
            Posted:
            {{ hlp.11ty.timeAgo(content.date) }}
        </time>
    </p>
    <footer>
        <a href="{{ content.url }}" role="button">
            <em>Continue reading</em>
        </a>
    </footer>
    {# <hr /> #}
</article>
{% endfor %}
{% endmacro %}

Features Macro (file)

<!--  system\_includes\_macros\collections\featured.njk -->

{# adds a grid styled collection to the page #}
{# attributes tag - tag, limit - number of items, words - word count #}
{%- macro featured(tag = 'posts', limit = 3, words = 200) -%}
{%- set feature = hlp.11ty.limit(collections[tag], limit) | reverse -%}
<section>
    <div role="list">
        {%- for item in feature %}
        <div role="listitem">
            {% if item.data.image %}
            <picture>
                <img src="{{ item.data.image }}" alt="{{ item.data.title | slug }}" />
            </picture>

            {% endif %}
            <h3>
                <i class="{{ item.data.icon }}"></i>
                {{ item.data.title }}
            </h3>
            <p>
                {{ hlp.11ty.stripHtml(item.templateContent) |
    truncate(words) | safe }}
            </p>
        </div>
        {%- endfor %}
    </div>
</section>
{%- endmacro -%}

{# display a list with title and links #}
{# attributes tag - tag, limit - number of items #}
{%- macro postLinks(tag = 'posts', limit = 3) -%}
{%- set feature = hlp.11ty.limit(collections[tag], limit) | reverse -%}
<section>
    <span>
        <ul role="list">
            {%- for item in feature %}
            <li role="listitem">
                {% if item.data.image %}
                <picture>
                    <img src="{{ item.data.image}}" alt="item.data.title | slug" />
                </picture>
                {% endif %}
                <h3>
                    <i class="{{ item.data.icon }}"></i>
                    <a href="{{ content.url }}" title="{{ item.data.title | slug}}">
                        {{ item.data.title }}
                    </a>
                </h3>
            </li>
            {%- endfor %}
        </ul>
    </span>
</section>
{%- endmacro -%}

{# display a list with image/links or title #}
{# attributes tag - tag, limit - number of items #}
{%- macro postImages(tag = 'posts', limit = 3) -%}
{%- set feature = hlp.11ty.limit(collections[tag], limit) | reverse -%}
<section>
    <span>
        <ul role="list">
            {%- for item in feature %}
            <li role="listitem">
                <a href="" title="{{ item.data.title | slug}}">
                    {% if item.data.image %}
                    <picture>
                        <img src="{{ item.data.image}}" alt="Image" />
                    </picture>
                    {% else %}
                    <h3>
                        <i class="{{ item.data.icon }}"></i>
                        <a href="{{ content.url }}" title="{{ item.data.title | slug}}">
                            {{ item.data.title }}
                        </a>
                    </h3>
                    {% endif %}

                </a>
            </li>
            {%- endfor %}
        </ul>
    </span>
</section>
{%- endmacro -%}