tabi-test/templates/macros/macros.html

{% macro list_posts(pages) %}
<div class="bloglist-container">
    {%- for page in pages %}
    <section class="bloglist-table-row">
        <div class="bloglist-title">
            <a href={{ page.permalink }}>{{page.title}}</a>
        </div>

        <div class="card-meta">
            {%- if page.date %}
            {{ page.date | date(format=config.extra.timeformat) }}
            {% endif -%}
            <br />
            <span>{{ page.reading_time }} minute read</span>
            {% if page.draft %}
            <span class="draft-label">DRAFT</span>
            {% endif %}

        </div>

        <br />
        <div class="description">
            {% if page.description %}
            {{ page.description }}
            {% elif page.summary %}
            {{ page.summary | safe }}&hellip;
            {% else %}
            {% set hide_read_more = true %}
            {% endif %}
        </div>

        {% if not hide_read_more %}
        <a class="readmore" href={{ page.permalink }}>Read more ⟶</a>
        {% endif %}
    </section>

    {% endfor -%}
</div>
{% endmacro list_posts %}

{% macro tags(page, short=false) %}
{%- if page.taxonomies and page.taxonomies.tags %}
<span class="post-tags-inline">
    {%- if short %}
    ::
    {%- set sep = "," -%}
    {% else %}
    :: tags:&nbsp;
    {%- set sep = "&nbsp;" -%}
    {% endif -%}
    {%- for tag in page.taxonomies.tags %}
    <a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
    {%- if not loop.last %}{{ sep | safe }}{% endif -%}
    {% endfor -%}
</span>
{% endif -%}
{% endmacro tags %}

{% macro page_header(title) %}
<div class="title-container section-title">
    {{ title }}
</div>
{% endmacro page_header %}


{% macro page_desc(desc, page) %}
<div id="banner-container-home">
    <div id="home-banner-text">
            <div class="home-banner-header">{{ desc.title }}</div>
        <section id="banner-home-subtitle">
					{{ page.content | safe }}
        </section>
    </div>
    <div class="image-container-home">
			<img alt="the owner" class="banner-home-img" src={{ desc.img | safe | replace(from="$BASE_URL", to=config.base_url) }} />
    </div>
</div>
{% endmacro page_desc %}


{% macro content(page) %}
<main>
    <article>
        <div>
            <div class="article-title">
                {{ page.title }}
            </div>
            <div class="meta">
                {% if page.date %}
                Posted on {{ page.date | date(format=config.extra.timeformat) }}
                •
                {% endif %}
                <span> {{ page.reading_time }} minute read</span>
                {% if page.draft %}
                <span class="draft-label">DRAFT</span>
                {% endif %}

                {% if page.taxonomies and page.taxonomies.tags %}
                <div class="post-tags">
                    <nav class="nav tags">
                        {% for tag in page.taxonomies.tags %}
                        <svg class="tags-item-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                            <line x1="7" y1="7" x2="7.01" y2="7"></line>
                        </svg>
                        <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>&nbsp;
                        {% endfor %}
                    </nav>
                </div>
                {% endif %}
            </div>
        </div>

        {% if page.extra.tldr %}
        <div class="tldr">
            <strong>tl;dr:</strong>
            {{ page.extra.tldr }}
        </div>
        {% endif %}

        {# Optional table of contents #}
        {% if page.extra.toc | default(value=false) %}
        {% if page.toc %}
        <h2>Table of Contents</h2>
        <ul>
            {% for h1 in page.toc %}
            <li>
                <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
                {% if h1.children %}
                <ul>
                    {% for h2 in h1.children %}
                    <li>
                        <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
                    </li>

                    {% if h2.children %}
                    <ul>
                        {% for h3 in h2.children %}
                        <li>
                            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endif %}

        <section class="body">
            {{ page.content | safe }}
        </section>

    </article>
</main>
{% endmacro content %}

{% macro cards_posts(pages) %}
<div class="cards">
    {%- for page in pages %}
    <div class="card">
        {% if page.extra.local_image %}
        <img class="card-image" alt={{ page.extra.local_image }} src="{{ get_url(path=page.extra.local_image) }}">
        {% elif page.extra.remote_image %}
        <img class="card-image" alt={{ page.extra.remote_image }} src="{{ page.extra.remote_image }}">
        {% else %}
        <div class="card-image-placeholder"></div>
        {% endif %}

        <div class="card-info">
            <h1 class="card-title">
                {% if page.extra.link_to %}
                <a rel="noopener noreferrer" target="_blank" href={{ page.extra.link_to }}>{{page.title}}</a>
                {% else %}
                <a href={{ page.permalink }}>{{page.title}}</a>
                {% endif %}
            </h1>

            <div class="meta">
                {%- if page.date %}
                {{ page.date | date(format=config.extra.timeformat) }}
                {% endif -%}
                {% if page.draft %}
                <span class="draft-label">DRAFT</span>
                {% endif %}
            </div>

            <div class="card-description">
                {% if page.description %}
                {{ page.description }}
                {% endif %}
            </div>
        </div>
    </div>

    {% endfor -%}
</div>
{% endmacro cards_posts %}

{% macro list_title(pages, tag_name=false) %}
{% if tag_name %}
<h1 class="title-container">Entries tagged - "{{ term.name }}"</h1>
{% else %}
<h1 class="page-title">All articles</h1>
{% endif %}

<ul class="posts">
    {% for page in pages %}
    <li class="post">
        <a href="{{ page.permalink }}">{{ page.title }}</a>
        <span class="meta">{{ page.date | date(format=config.extra.timeformat) }}</span>
    </li>
    {% endfor %}
</ul>
{% endmacro list_title %}