index.html

---
title: Apoxicam Blog
description: Saya bukan penulis, saya hanya ingin mendokumentasikan apa yang menurut saya penting kepada dunia.
keyword: blog, apoxicam blog, apoxicam
cover: /asset/index/cover.webp
layout: layout.html
---
<div class="container is-max-desktop">
    <section class="hero">
        <div class="hero-body no-padding-mobile">
            <!-- card again -->
            <div class="card no-border-radius-mobile">
                <!-- cover page -->
                <div class="card-image">
                    <figure class="image">
                        <img class="card-no-border-radius-mobile" src={{ cover }} alt="cover">
                    </figure>
                </div>
                <!-- navbar -->
                <div class="card-content has-no-padding-top-bottom" style="border-bottom: var(--bulma-card-footer-border-top);">
                    <div class="navbar-brand">
                        <a aria-label="Home" class="navbar-item hoverable" href="/">{% feather "home" %}</a>
                        <div class="navbar-item has-text-weight-semibold">{{ title }}</div>
                        <div class="item-nav-end">
                            <!-- help me with this search -->
                            <!-- Search modal -->
                            <a aria-label="Search" class="modal-trigger navbar-item hoverable" href="#searchAll">{% feather "search" %}</a>
                            <!-- tag filter -->
                            <div class="navbar-item hoverable dropdown is-right" onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" 
                            onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')">
                            {% feather "menu" %}
                                <div class="dropdown-menu" role="menu">
                                    <div class="dropdown-content">
                                        {% for tag in collections.blogTags %}
                                            <!-- list tag here -->
                                        <a class="dropdown-item" href="/blog/tag/{{ tag | slugify }}">{{ tag }}</a>
                                        {% endfor %}
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    <div class="content>">
                        <ul>
                            {% for post in collections.posts reversed %}
                            <li class="content">
                                <p class="no-margin-bottom is-size-5 has-text-weight-semibold"><a href="{{ post.url }}">{{ post.data.title }}</a></p>
                                <!-- content preview -->
                                <p>{{ post.data.description }}</p>
                                <!-- Date here -->
                                <p class="is-size-7">{{ post.data.date | date: "%a, %d %b %Y" }}</p>
                            </li>
                            {% endfor %}
                        </ul>    
                    </div>
                </div>
                <!-- here is footer -->
                <footer class="card-footer">
                    <div class="card-footer-item has-text-centered">
                        <p class="is-size-7 has-text-weight-semibold">
                            © 2024 <a href="https://instagram.com/apoxicam">Apoxicam</a><br>
                            Powered by <a href="https://www.11ty.dev/">Eleventy</a> and <a href="https://bulma.io/">Bulma</a><br>
                            Sauce is available on <a href="https://github.com/sira313/eleventy-card">Github</a>
                        </p>
                    </div>
                </footer>
            </div>
        </div>
    </section>
</div>