feat: implement waterfall layout with smart image positioning and infinite scroll

- Add single-column layout for homepage articles
- Implement smart image positioning based on aspect ratio:
  * Landscape images (ratio > 1.2) displayed on top
  * Portrait/square images (ratio ≤ 1.2) displayed on left side
- Add infinite scroll with lazy loading
- Create new API endpoint /api/articles for pagination
- Add loading indicator and 'no more articles' message
- Optimize performance with image lazy loading and scroll throttling
- Add responsive layout for mobile devices

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

templates/pages/home.html

@@ -7,39 +7,283 @@
     <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
         {{if .SiteHomeSubtitle}}{{.SiteHomeSubtitle}}{{else}}{{index .Tr "home_subtitle"}}{{end}}
     </p>
-    <!-- <div class="flex justify-center gap-4">
-        <a href="/login" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
-            {{index .Tr "home_sign_in"}}
-        </a>
-        <a href="/admin" class="inline-block bg-gray-200 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors">
-            {{index .Tr "home_to_dash"}}
-        </a>
-    </div> -->
 </section>
 
-<section class="max-w-5xl mx-auto px-4 py-16">
+<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>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+    <!-- Articles Container -->
+    <div id="articlesContainer" class="space-y-6">
         {{range .Articles}}
-        <a href="/article/{{.Slug}}"
-            class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow flex flex-col">
-            {{if .Cover}}
-            <div class="aspect-video w-full overflow-hidden bg-gray-100">
-                <img src="{{.Cover}}" alt="{{.Title}}" class="w-full h-full object-cover">
-            </div>
-            {{end}}
-            <div class="p-6 flex flex-col flex-1">
-                <h3 class="text-lg 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-2">{{.Summary}}</p>{{end}}
-                <span class="mt-4 text-sm text-blue-600 font-medium">{{index $.Tr "home_read_more"}} →</span>
-            </div>
-        </a>
+        <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="col-span-full text-center text-gray-500 py-12">{{index .Tr "home_no_posts"}}</div>
+        <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}}