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

    // Handle Lightbox for post images specifically (if needed beyond the global Alpine listener)
    // The global listener in default.hbs should handle most cases.
});