davila7__claude-code-templates/docs/blog/js/blog-loader.js

/**
 * Blog Articles Dynamic Loader
 * Loads and renders blog articles from blog-articles.json
 */

class BlogLoader {
    constructor() {
        this.articles = [];
        this.filteredArticles = [];
        this.featuredArticles = [];
        this.articlesContainer = null;
        this.featuredCarousel = null;
        this.searchInput = null;
        this.sortSelect = null;
        this.currentSearchTerm = '';
        this.currentSortBy = 'date-desc';
        this.carouselScrollPosition = 0;
    }

    /**
     * Initialize the blog loader
     */
    async init() {
        try {
            this.articlesContainer = document.querySelector('.articles-grid');
            this.featuredCarousel = document.getElementById('featured-carousel');
            this.searchInput = document.getElementById('blog-search');
            this.sortSelect = document.getElementById('sort-by');

            if (!this.articlesContainer) {
                console.error('Articles container not found');
                return;
            }

            // Show loading state
            this.showLoading();

            // Load articles from JSON
            await this.loadArticles();

            // Render featured posts
            this.renderFeaturedPosts();

            // Setup event listeners
            this.setupEventListeners();

            // Setup carousel navigation
            this.setupCarouselNavigation();

            // Render articles
            this.renderArticles();

        } catch (error) {
            console.error('Error initializing blog loader:', error);
            this.showError();
        }
    }

    /**
     * Setup event listeners for search and sort
     */
    setupEventListeners() {
        // Search input
        if (this.searchInput) {
            this.searchInput.addEventListener('input', (e) => {
                this.currentSearchTerm = e.target.value.trim().toLowerCase();
                this.applyFiltersAndSort();
                this.updateClearButton();
            });
        }

        // Clear search button
        const clearSearchBtn = document.getElementById('clear-search');
        if (clearSearchBtn) {
            clearSearchBtn.addEventListener('click', () => {
                this.searchInput.value = '';
                this.currentSearchTerm = '';
                this.applyFiltersAndSort();
                this.updateClearButton();
                this.searchInput.focus();
            });
        }

        // Sort select
        if (this.sortSelect) {
            this.sortSelect.addEventListener('change', (e) => {
                this.currentSortBy = e.target.value;
                this.applyFiltersAndSort();
            });
        }

        // Clear filters button
        const clearFiltersBtn = document.getElementById('clear-filters');
        if (clearFiltersBtn) {
            clearFiltersBtn.addEventListener('click', () => {
                this.searchInput.value = '';
                this.currentSearchTerm = '';
                this.sortSelect.value = 'date-desc';
                this.currentSortBy = 'date-desc';
                this.applyFiltersAndSort();
                this.updateClearButton();
            });
        }
    }

    /**
     * Update clear button visibility
     */
    updateClearButton() {
        const clearSearchBtn = document.getElementById('clear-search');
        if (clearSearchBtn) {
            clearSearchBtn.style.display = this.currentSearchTerm ? 'flex' : 'none';
        }
    }

    /**
     * Apply filters and sorting
     */
    applyFiltersAndSort() {
        // Start with all articles
        this.filteredArticles = [...this.articles];

        // Apply search filter
        if (this.currentSearchTerm) {
            this.filteredArticles = this.filteredArticles.filter(article => {
                const searchableText = [
                    article.title,
                    article.description,
                    article.category,
                    ...article.tags
                ].join(' ').toLowerCase();

                return searchableText.includes(this.currentSearchTerm);
            });
        }

        // Apply sorting
        this.sortArticles(this.currentSortBy);

        // Update results info
        this.updateResultsInfo();

        // Re-render articles
        this.renderArticles();
    }

    /**
     * Sort articles based on selected option
     */
    sortArticles(sortBy) {
        const difficultyOrder = { basic: 1, intermediate: 2, advanced: 3 };

        switch (sortBy) {
            case 'difficulty-asc':
                this.filteredArticles.sort((a, b) =>
                    difficultyOrder[a.difficulty] - difficultyOrder[b.difficulty]
                );
                break;
            case 'difficulty-desc':
                this.filteredArticles.sort((a, b) =>
                    difficultyOrder[b.difficulty] - difficultyOrder[a.difficulty]
                );
                break;
            default:
                // Keep original order from JSON (by order field, newest first)
                this.filteredArticles.sort((a, b) => (b.order || 0) - (a.order || 0));
                break;
        }
    }

    /**
     * Update results info display
     */
    updateResultsInfo() {
        const resultsInfo = document.getElementById('results-info');
        const resultsCount = document.getElementById('results-count');
        const clearFiltersBtn = document.getElementById('clear-filters');

        if (!resultsInfo || !resultsCount) return;

        const isFiltered = this.currentSearchTerm || this.currentSortBy !== 'date-desc';
        const total = this.articles.length;
        const showing = this.filteredArticles.length;

        if (this.currentSearchTerm && showing === 0) {
            resultsInfo.style.display = 'flex';
            resultsCount.textContent = `No articles found for "${this.currentSearchTerm}"`;
            clearFiltersBtn.style.display = 'inline-flex';
        } else if (this.currentSearchTerm) {
            resultsInfo.style.display = 'flex';
            resultsCount.textContent = `Showing ${showing} of ${total} articles`;
            clearFiltersBtn.style.display = 'inline-flex';
        } else {
            resultsInfo.style.display = 'none';
            clearFiltersBtn.style.display = 'none';
        }
    }

    /**
     * Load articles from JSON file
     */
    async loadArticles() {
        try {
            const response = await fetch('blog-articles.json');

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();

            // Sort articles by order field descending (newest first)
            this.articles = data.articles.sort((a, b) => b.order - a.order);
            this.filteredArticles = [...this.articles];

            // Extract featured articles
            this.featuredArticles = this.articles.filter(article => article.featured === true);

            console.log(`Loaded ${this.articles.length} articles (${this.featuredArticles.length} featured)`);

        } catch (error) {
            console.error('Error loading articles:', error);
            throw error;
        }
    }

    /**
     * Render all articles to the DOM
     */
    renderArticles() {
        if (!this.filteredArticles || this.filteredArticles.length === 0) {
            if (this.currentSearchTerm) {
                this.showNoResults();
            } else {
                this.showEmpty();
            }
            return;
        }

        // Clear container
        this.articlesContainer.innerHTML = '';

        // Render each filtered article
        this.filteredArticles.forEach(article => {
            const articleCard = this.createArticleCard(article);
            this.articlesContainer.appendChild(articleCard);
        });
    }

    /**
     * Show no results message
     */
    showNoResults() {
        this.articlesContainer.innerHTML = `
            <div style="text-align: center; padding: 4rem; color: #666; grid-column: 1 / -1;">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin: 0 auto 1rem;">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.35-4.35"></path>
                    <line x1="11" y1="8" x2="11" y2="14"></line>
                    <line x1="11" y1="16" x2="11.01" y2="16"></line>
                </svg>
                <h3 style="margin-bottom: 0.5rem; color: #00D084;">No articles found</h3>
                <p>Try adjusting your search terms or filters</p>
            </div>
        `;
    }

    /**
     * Create article card HTML element
     * @param {Object} article - Article data
     * @returns {HTMLElement} Article card element
     */
    createArticleCard(article) {
        const articleElement = document.createElement('article');
        articleElement.className = 'article-card';

        // Determine if it's external or local
        const isExternal = article.url.startsWith('http');
        const linkAttrs = isExternal
            ? 'target="_blank" rel="noopener noreferrer"'
            : '';

        // Create difficulty badge
        const difficultyBadge = this.getDifficultyBadge(article.difficulty);

        // Generate tags HTML
        const tagsHTML = article.tags
            .map(tag => `<span class="tag">${this.escapeHtml(tag)}</span>`)
            .join('');

        articleElement.innerHTML = `
            <a href="${this.escapeHtml(article.url)}" ${linkAttrs} class="article-link">
                <div class="article-image">
                    <img src="${this.escapeHtml(article.image)}"
                         alt="${this.escapeHtml(article.title)}"
                         loading="lazy">
                    <div class="article-category">${this.escapeHtml(article.category)}</div>
                </div>
                <div class="article-content">
                    <div class="article-meta">
                        <span class="read-time">${this.escapeHtml(article.readTime)}</span>
                        ${difficultyBadge}
                    </div>
                    <h2>${this.escapeHtml(article.title)}</h2>
                    <p>${this.escapeHtml(article.description)}</p>
                    <div class="article-tags">
                        ${tagsHTML}
                    </div>
                </div>
            </a>
        `;

        return articleElement;
    }

    /**
     * Get difficulty badge HTML
     * @param {string} difficulty - Difficulty level (basic, intermediate, advanced)
     * @returns {string} Badge HTML
     */
    getDifficultyBadge(difficulty) {
        const difficultyConfig = {
            basic: {
                label: 'Basic',
                color: '#00D084',
                textColor: '#000'
            },
            intermediate: {
                label: 'Intermediate',
                color: '#FFA500',
                textColor: '#000'
            },
            advanced: {
                label: 'Advanced',
                color: '#FF4444',
                textColor: '#FFF'
            }
        };

        const config = difficultyConfig[difficulty] || difficultyConfig.basic;

        return `<span class="tag difficulty-badge" style="margin-left: 8px; background: ${config.color}; color: ${config.textColor};">${config.label}</span>`;
    }

    /**
     * Show loading state
     */
    showLoading() {
        this.articlesContainer.innerHTML = `
            <div style="text-align: center; padding: 4rem; color: #00D084;">
                <div class="loading-spinner"></div>
                <p style="margin-top: 1rem;">Loading articles...</p>
            </div>
        `;
    }

    /**
     * Show error state
     */
    showError() {
        this.articlesContainer.innerHTML = `
            <div style="text-align: center; padding: 4rem; color: #ff4444;">
                <p>⚠️ Error loading articles. Please try again later.</p>
            </div>
        `;
    }

    /**
     * Show empty state
     */
    showEmpty() {
        this.articlesContainer.innerHTML = `
            <div style="text-align: center; padding: 4rem; color: #666;">
                <p>No articles available at the moment.</p>
            </div>
        `;
    }

    /**
     * Escape HTML to prevent XSS
     * @param {string} text - Text to escape
     * @returns {string} Escaped text
     */
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    /**
     * Render featured posts carousel
     */
    renderFeaturedPosts() {
        if (!this.featuredCarousel || !this.featuredArticles || this.featuredArticles.length === 0) {
            return;
        }

        // Show featured section
        const featuredSection = document.getElementById('featured-posts-section');
        if (featuredSection) {
            featuredSection.style.display = 'block';
        }

        // Clear carousel
        this.featuredCarousel.innerHTML = '';

        // Render each featured article
        this.featuredArticles.forEach(article => {
            const featuredCard = this.createFeaturedCard(article);
            this.featuredCarousel.appendChild(featuredCard);
        });
    }

    /**
     * Create featured article card
     * @param {Object} article - Article data
     * @returns {HTMLElement} Featured card element
     */
    createFeaturedCard(article) {
        const cardElement = document.createElement('article');
        cardElement.className = 'featured-card';

        const isExternal = article.url.startsWith('http');
        const linkAttrs = isExternal ? 'target="_blank" rel="noopener noreferrer"' : '';

        const tagsHTML = article.tags
            .slice(0, 3)
            .map(tag => `<span class="tag">${this.escapeHtml(tag)}</span>`)
            .join('');

        cardElement.innerHTML = `
            <div class="featured-star">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/>
                </svg>
            </div>
            <a href="${this.escapeHtml(article.url)}" ${linkAttrs} class="featured-link">
                <div class="featured-image">
                    <img src="${this.escapeHtml(article.image)}"
                         alt="${this.escapeHtml(article.title)}"
                         loading="lazy">
                </div>
                <div class="featured-content">
                    <div class="featured-meta">
                        <span class="read-time">${this.escapeHtml(article.readTime)}</span>
                    </div>
                    <h3>${this.escapeHtml(article.title)}</h3>
                    <p>${this.escapeHtml(article.description)}</p>
                    <div class="featured-tags">
                        ${tagsHTML}
                    </div>
                </div>
            </a>
        `;

        return cardElement;
    }

    /**
     * Setup carousel navigation
     */
    setupCarouselNavigation() {
        const prevBtn = document.getElementById('carousel-prev');
        const nextBtn = document.getElementById('carousel-next');

        if (!prevBtn || !nextBtn || !this.featuredCarousel) return;

        // Check if navigation is needed
        this.checkCarouselNavigation(prevBtn, nextBtn);

        // Scroll carousel on button click
        prevBtn.addEventListener('click', () => {
            this.featuredCarousel.scrollBy({
                left: -280,
                behavior: 'smooth'
            });
        });

        nextBtn.addEventListener('click', () => {
            this.featuredCarousel.scrollBy({
                left: 280,
                behavior: 'smooth'
            });
        });

        // Update button states on scroll
        this.featuredCarousel.addEventListener('scroll', () => {
            this.updateCarouselButtons(prevBtn, nextBtn);
        });

        // Re-check on window resize
        window.addEventListener('resize', () => {
            this.checkCarouselNavigation(prevBtn, nextBtn);
        });

        // Initial button state
        this.updateCarouselButtons(prevBtn, nextBtn);
    }

    /**
     * Check if carousel navigation buttons should be visible
     */
    checkCarouselNavigation(prevBtn, nextBtn) {
        if (!this.featuredCarousel) return;

        // Wait for images to load before checking
        setTimeout(() => {
            const isOverflowing = this.featuredCarousel.scrollWidth > this.featuredCarousel.clientWidth;

            if (isOverflowing) {
                prevBtn.style.display = 'flex';
                nextBtn.style.display = 'flex';
            } else {
                prevBtn.style.display = 'none';
                nextBtn.style.display = 'none';
            }
        }, 100);
    }

    /**
     * Update carousel button states based on scroll position
     */
    updateCarouselButtons(prevBtn, nextBtn) {
        if (!this.featuredCarousel) return;

        const scrollLeft = this.featuredCarousel.scrollLeft;
        const maxScroll = this.featuredCarousel.scrollWidth - this.featuredCarousel.clientWidth;

        // Disable/enable previous button
        if (scrollLeft <= 0) {
            prevBtn.disabled = true;
        } else {
            prevBtn.disabled = false;
        }

        // Disable/enable next button
        if (scrollLeft >= maxScroll - 1) {
            nextBtn.disabled = true;
        } else {
            nextBtn.disabled = false;
        }
    }
}

// Initialize blog loader when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    const blogLoader = new BlogLoader();
    blogLoader.init();
});

// Add loading spinner CSS
const style = document.createElement('style');
style.textContent = `
    .loading-spinner {
        border: 3px solid rgba(0, 208, 132, 0.1);
        border-top: 3px solid #00D084;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
`;
document.head.appendChild(style);