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');

            // Clean up animation class after it finishes to allow hover transforms
            item.addEventListener('animationend', () => {
                item.classList.remove('animate-fadeInUp');
                item.style.opacity = '1';
            }, { once: true });
        });
    };

    // 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
        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');
        }

        // 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);
        }

        // Handle global boost re-animation
        if (event.detail.boosted) {
             animateGridItems();
        }
    });
});