palina-theme/assets/js/main.js

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

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

    // 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
    // Use document instead of document.body to persist across boosted navigation
    document.addEventListener('htmx:afterSettle', (event) => {
        // Global page fade-in animation - only on full boosted navigations
        if (event.detail.boosted) {
            const mainContent = document.getElementById('main-content');
            if (mainContent) {
                mainContent.classList.remove('animate-fadeInUp');
                void mainContent.offsetWidth; // Force reflow to restart animation
                mainContent.classList.add('animate-fadeInUp');
            }
            animateGridItems();
        }

        // If the settled element is the posts-container or contains grid items
        const target = event.detail.target;
        if (target.id === 'posts-container' || target.querySelector('.post-grid-item')) {
            animateGridItems(target);
        }
    });
});