TinyLifeWeb/web/_includes/devlog_category.html

<div class="devlogs">
    {% assign slug = include.tag | slugify %}
    <h2 class="devlog-category" id="{{ slug }}">{{ include.emoji }} {{ include.tag }}</h2>
    <p>{{ include.description }}</p>

    {% assign total = 0 %}
    {% for post in site.posts %}
        {%- if post.tags contains include.tag -%}
            {%- assign total = total | plus: 1 -%}
            <div class="devlog devlog-{{ slug }}" {% if total > 6 %}hidden{% endif %}>
                {%- if post.image -%}
                    {%- assign start = post.image | slice: 0, 4 -%}
                    {%- if start == "http" -%}
                        {%- assign url = post.image -%}
                    {%- else -%}
                        {%- assign url = post.url | append: post.image -%}
                    {%- endif -%}
                    <img src="{{ url }}" class="devlog-image" width="100%" height="120px" alt="Cover image for post {{ post.title }}">
                {%- endif -%}
                <h4 class="devlog-title">{{ post.title }}</h4>
                <div class="text-muted">{{ post.date | date_to_string }}</div>
                <div>
                    <a href="{{ post.url }}">Read this post</a>
                    {%- if post.itch %}
                        &ndash; <a href="{{ post.itch }}">Read on itch</a>
                    {%- endif -%}
                    {%- if post.steam %}
                        &ndash; <a href="{{ post.steam }}">Read on Steam</a>
                    {%- endif -%}
                </div>
            </div>
        {%- endif -%}
    {% endfor %}

    {% if total > 6 %}
        <button type="button" class="btn btn-link devlog-more" id="devlog-more-{{ slug }}"><strong>Show more {{ include.tag }} posts</strong></button>
        <script>
            $("#devlog-more-{{ slug }}").on("click", function () {
                $(".devlog-{{ slug }}").removeAttr("hidden");
                $(this).attr("hidden", true);
            });
        </script>
    {% endif %}
</div>