go_blog/templates/pages/home.html

{{define "home"}}
{{template "header" .}}
<section class="max-w-5xl mx-auto px-4 py-20 text-center">
    <h1 class="text-5xl font-extrabold text-gray-900 mb-4">
        {{if .SiteHomeWelcome}}{{.SiteHomeWelcome}}{{else}}{{index .Tr "home_welcome"}}{{end}}
    </h1>
    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
        {{if .SiteHomeSubtitle}}{{.SiteHomeSubtitle}}{{else}}{{index .Tr "home_subtitle"}}{{end}}
    </p>
</section>

<section class="max-w-4xl mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">{{index .Tr "home_latest"}}</h2>

    <!-- Articles Container -->
    <div id="articlesContainer" class="space-y-6">
        {{range .Articles}}
        <article class="article-card bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow" data-cover="{{.Cover}}">
            <a href="/article/{{.Slug}}" class="block article-link">
                <div class="article-content">
                    <!-- Cover will be positioned by JS -->
                    {{if .Cover}}
                    <div class="article-cover">
                        <img src="{{.Cover}}" alt="{{.Title}}" class="article-image" loading="lazy">
                    </div>
                    {{end}}

                    <div class="article-text p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">
                            {{.Title}}
                            {{if .IsTop}}<span class="align-middle text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded ml-1">{{index $.Tr "article_is_top"}}</span>{{end}}
                        </h3>
                        {{if .Summary}}
                        <p class="text-gray-500 text-sm line-clamp-3 mb-3">{{.Summary}}</p>
                        {{end}}
                        <span class="text-sm text-blue-600 font-medium">{{index $.Tr "home_read_more"}} →</span>
                    </div>
                </div>
            </a>
        </article>
        {{else}}
        <div class="text-center text-gray-500 py-12">{{index .Tr "home_no_posts"}}</div>
        {{end}}
    </div>

    <!-- Loading indicator -->
    <div id="loadingIndicator" class="hidden text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="text-gray-500 mt-2">{{if eq .Lang "zh"}}加载中...{{else}}Loading...{{end}}</p>
    </div>

    <!-- No more articles message -->
    <div id="noMoreArticles" class="hidden text-center text-gray-500 py-8">
        {{if eq .Lang "zh"}}没有更多文章了{{else}}No more articles{{end}}
    </div>
</section>

<style>
/* Article card layouts */
.article-card {
    position: relative;
}

.article-link {
    text-decoration: none;
    color: inherit;
}

.article-content {
    display: flex;
}

/* Default: no cover or loading */
.article-content {
    flex-direction: column;
}

/* Horizontal layout (landscape image on top) */
.article-card.layout-horizontal .article-content {
    flex-direction: column;
}

.article-card.layout-horizontal .article-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}

.article-card.layout-horizontal .article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vertical layout (portrait/square image on left) */
.article-card.layout-vertical .article-content {
    flex-direction: row;
}

.article-card.layout-vertical .article-cover {
    width: 280px;
    min-width: 280px;
    height: 200px;
    overflow: hidden;
    background: #f3f4f6;
}

.article-card.layout-vertical .article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card.layout-vertical .article-text {
    flex: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-card.layout-vertical .article-content {
        flex-direction: column;
    }

    .article-card.layout-vertical .article-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Line clamp utility */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>

<script>
(function() {
    let currentPage = 1;
    let isLoading = false;
    let hasMore = true;

    const container = document.getElementById('articlesContainer');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const noMoreArticles = document.getElementById('noMoreArticles');

    // Determine layout based on image aspect ratio
    function determineLayout(card) {
        const cover = card.getAttribute('data-cover');
        if (!cover) {
            return; // No cover, default column layout
        }

        const img = card.querySelector('.article-image');
        if (!img) return;

        // Wait for image to load
        if (!img.complete) {
            img.addEventListener('load', function() {
                applyLayout(card, img);
            });
        } else {
            applyLayout(card, img);
        }
    }

    function applyLayout(card, img) {
        const width = img.naturalWidth;
        const height = img.naturalHeight;
        const aspectRatio = width / height;

        // If aspect ratio > 1.2, use horizontal (landscape)
        // Otherwise use vertical (portrait/square on left)
        if (aspectRatio > 1.2) {
            card.classList.add('layout-horizontal');
        } else {
            card.classList.add('layout-vertical');
        }
    }

    // Initialize existing articles
    document.querySelectorAll('.article-card').forEach(determineLayout);

    // Load more articles
    function loadMoreArticles() {
        if (isLoading || !hasMore) return;

        isLoading = true;
        loadingIndicator.classList.remove('hidden');

        fetch('/api/articles?page=' + (currentPage + 1))
            .then(response => response.json())
            .then(data => {
                if (data.articles && data.articles.length > 0) {
                    currentPage++;
                    data.articles.forEach(article => {
                        const articleHTML = createArticleCard(article);
                        container.insertAdjacentHTML('beforeend', articleHTML);
                    });

                    // Determine layout for new cards
                    const newCards = container.querySelectorAll('.article-card:not(.layout-horizontal):not(.layout-vertical)');
                    newCards.forEach(determineLayout);
                }

                hasMore = data.hasMore;

                if (!hasMore) {
                    noMoreArticles.classList.remove('hidden');
                }

                isLoading = false;
                loadingIndicator.classList.add('hidden');
            })
            .catch(error => {
                console.error('Error loading articles:', error);
                isLoading = false;
                loadingIndicator.classList.add('hidden');
            });
    }

    // Create article card HTML
    function createArticleCard(article) {
        const topBadge = article.is_top ?
            '<span class="align-middle text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded ml-1">{{index .Tr "article_is_top"}}</span>' : '';

        const coverHTML = article.cover ?
            `<div class="article-cover">
                <img src="${article.cover}" alt="${escapeHtml(article.title)}" class="article-image" loading="lazy">
            </div>` : '';

        const summaryHTML = article.summary ?
            `<p class="text-gray-500 text-sm line-clamp-3 mb-3">${escapeHtml(article.summary)}</p>` : '';

        return `
            <article class="article-card bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow" data-cover="${article.cover || ''}">
                <a href="/article/${article.slug}" class="block article-link">
                    <div class="article-content">
                        ${coverHTML}
                        <div class="article-text p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">
                                ${escapeHtml(article.title)}
                                ${topBadge}
                            </h3>
                            ${summaryHTML}
                            <span class="text-sm text-blue-600 font-medium">{{index .Tr "home_read_more"}} →</span>
                        </div>
                    </div>
                </a>
            </article>
        `;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Infinite scroll
    function checkScroll() {
        const scrollPosition = window.innerHeight + window.scrollY;
        const threshold = document.documentElement.scrollHeight - 500;

        if (scrollPosition >= threshold && !isLoading && hasMore) {
            loadMoreArticles();
        }
    }

    // Throttle scroll event
    let scrollTimeout;
    window.addEventListener('scroll', function() {
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        scrollTimeout = setTimeout(checkScroll, 100);
    });

    // Initial check in case content is short
    setTimeout(checkScroll, 500);
})();
</script>

{{template "footer" .}}
{{end}}