leilukin-site/src/_includes/main/changelogs.njk

---
layout: main/content
---

{% set currentUrl %}{{ page.url }}{% endset %}

<nav class="changelog__nav">
    <p class="changelog__nav--title">Changelog Archive:</p>
    <ul class="changelog__nav--links">
        <li><a
            {% if currentUrl === "/changelogs/" %}aria-current="page"{% endif %}
            href="/changelogs"
        >Latest</a></li>
        {% set navPages = collections.all | eleventyNavigation("Changelogs") | reverse %}
        {%- for entry in navPages %}
            <li><a
                {% if entry.url == page.url %}aria-current="page"{% endif %}
                href="{{ entry.url }}"
            >{{ entry.title }}</a></li>
        {%- endfor %}
    </ul>
</nav>

<p>To get notified of the updates on this website, you can subscribe to the <a href="/feed.xml" target="blank">Leilukin's Hub RSS feed</a>, which contains new articles, blog posts and website changelogs, or follow <a href="https://neocities.org/site/leilukin">my Neocities profile</a>.</p>
<div class="web-btn-wrapper center-el" style="margin-top: 0.7em;">
    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
        <img src="/assets/buttons/rss-button.gif" alt="RSS feed button">
    </a>
</div>

{{ content | safe }}

<style>
    .changelog__nav,
    .changelog__nav--links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .changelog__nav {
        flex-direction: column;
        gap: 0.2em;
        align-self: center;
        font-weight: 600;
        gap: 0.5em;
    }

    .changelog__nav--links {
        margin: 0;
        padding: 0;
        line-height: 1.1;
    }

    .changelog__nav--links {
        list-style: none;
        gap: 0.5em;
    }

    .changelog__nav--links li {
        text-align: center;
        align-self: center;
    }

    .changelog__nav--links li:not(:last-child)::after {
        content: '|';
        padding-left: 0.5em;
    }

    .changelog__nav--links [aria-current="page"] {
        text-decoration: none;
        color: var(--clr-bold-txt);
    }

    @media (min-width: 640px) {
        .changelog__nav {
            flex-direction: row;
            gap: 1em;
        }
    }
</style>