my-website/templates/blog.html

{% extends "base.html" %}

{% block title %} Blogs {% endblock title %}

{% block content %}
<h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-center">
    {{ section.title }}
</h1>

<!-- Search Input -->
<div class="mb-8 text-center">
    <input
        id="search-input"
        type="text"
        placeholder="Search blogs..."
        class="w-full max-w-2xl px-4 py-2 rounded-md bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600"
    />
</div>

<!-- Blog Posts Container -->
<div id="blog-posts" class="grid gap-8 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
    {% for page in section.pages %}
    <a
        href="{{ page.permalink | safe }}"
        class="blog-card rounded-2xl overflow-hidden bg-gray-900/80 border border-gray-600 shadow-lg backdrop-blur-md transition-transform hover:scale-[1.02]"
        data-title="{{ page.title | safe }}"
        data-description="{{ page.description | safe }}"
        data-url="{{ page.permalink | safe }}"
    >
        {% if page.extra.image %}
            {% set image = page.extra.image %}
            {% if image is starting_with("http") %}
                {% set image_url = image %}
            {% else %}
                {% set image_url = get_url(path=image) %}
            {% endif %}
        {% else %}
            {% set image_url = get_url(path='assets/blog-default.png') %}
        {% endif %}

        <!-- Card Image -->
        <img
            src="{{ image_url | safe }}"
            alt="{{ page.title }}"
            class="w-full h-50 object-cover"
            loading="lazy"
            decoding="async"
        />

        <div class="flex flex-col flex-grow p-6">
            <!-- Title with min-height to reserve space for 2 lines -->
            <h2 class="text-2xl font-semibold text-white min-h-[4.2rem] leading-snug">
                {{ page.title }}
            </h2>

            <!-- Spacer pushes below content to the bottom -->
            <div class="mt-auto">
                <!-- Date -->
                <p class="subtitle text-blue-400 mt-2">
                    {{ page.date | date(format="%B %d, %Y") }}
                </p>

                <!-- Description -->
                <p class="text-gray-300 text-sm mt-3 line-clamp-3">
                    {{ page.description }}
                </p>
            </div>
        </div>
    </a>
    {% endfor %}
</div>

<!-- Load ElasticLunr and Zola's search index -->
<script src="{{ get_url(path='elasticlunr.min.js') | safe }}"></script>
<script src="{{ get_url(path='search_index.en.js') | safe }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const input = document.getElementById("search-input");
    const cards = [...document.querySelectorAll(".blog-card")];

    const index = elasticlunr(function () {
        this.addField("title");
        this.addField("description");
        this.addField("date");
        this.setRef("id");
    });

    const docs = window.searchIndex.documentStore.docs;
    for (const id in docs) {
        if (docs.hasOwnProperty(id)) {
            index.addDoc(docs[id]);
        }
    }

    input.addEventListener("input", function () {
        const query = this.value.trim().toLowerCase();
        if (!query) {
            cards.forEach(c => c.style.display = "");
            return;
        }

        const resultUrls = index.search(query, { expand: true }).map(r => r.ref);

        cards.forEach(card => {
            const url = card.dataset.url;
            card.style.display = resultUrls.includes(url) ? "" : "none";
        });
    });
});
</script>
{% endblock content %}