palina-theme/assets/js/main.js

// Main JavaScript file for Palina theme
// Using HTMX and Alpine.js for enhanced functionality

// Initialize Alpine Store for mobile menu
document.addEventListener('alpine:init', () => {
    Alpine.store('mobileMenu', {
        open: false,
        toggle() {
            this.open = !this.open;
        },
        close() {
            this.open = false;
        }
    });
});

document.addEventListener('DOMContentLoaded', () => {
    console.log('Palina theme loaded!');

    // Close mobile menu on any link click inside it
    document.addEventListener('click', (e) => {
        const mobileMenuLink = e.target.closest('#mobile-menu a');
        if (mobileMenuLink) {
            if (window.Alpine) {
                Alpine.store('mobileMenu').close();
            }
        }
    });

    // Staggered fade-in animation for post grid
    const animateGridItems = (container = document) => {
        const gridItems = container.querySelectorAll('.post-grid-item:not(.animated)');
        gridItems.forEach((item, index) => {
            item.style.animationDelay = `${index * 100}ms`;
            item.classList.add('animate-fadeInUp');
            item.classList.add('animated');
        });
    };

    // Initial animation
    animateGridItems();

    // Re-run animation and other setup when HTMX settles new content
    document.body.addEventListener('htmx:afterSettle', (event) => {
        // If the settled element is the posts-container or contains grid items
        if (event.detail.target.id === 'posts-container' || event.detail.target.querySelector('.post-grid-item')) {
            animateGridItems(event.detail.target);
        }

        // If it was a full page boost, we might need to reset some things
        if (event.detail.boosted) {
             animateGridItems();
        }
    });
});