From 8dca2c14323b8054ddfeb40b7ebd51d2676ddb36 Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Thu, 14 Nov 2024 23:02:52 +0800
Subject: [PATCH] feat: better loading the comments.

---
 src/actions/index.ts                        |  4 +++-
 src/assets/scripts/yufan.me.js              | 13 ++++++++-----
 src/components/comment/Comments.astro       |  4 ++--
 src/components/comment/artalk.ts            |  2 +-
 src/components/page/post/FeaturePosts.astro |  2 +-
 src/helpers/images.ts                       |  2 +-
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/actions/index.ts b/src/actions/index.ts
index ae6e7c9..0fef424 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -5,6 +5,7 @@ import { partialRender } from '@/helpers/container';
 import { decreaseLikes, increaseLikes, queryLikes, queryUserId } from '@/helpers/db/query';
 import { pages, posts } from '@/helpers/schema';
 import { encodedEmail, urlJoin } from '@/helpers/tools';
+import options from '@/options';
 import { ActionError, defineAction } from 'astro:actions';
 import { z } from 'astro:schema';
 
@@ -91,8 +92,9 @@ export const server = {
       }
 
       const content = await partialRender(Comment, { props: { comments: comments } });
+      const next = options.settings.comments.size + offset < comments.roots_count;
 
-      return { content };
+      return { content, next };
     },
   }),
 };
diff --git a/src/assets/scripts/yufan.me.js b/src/assets/scripts/yufan.me.js
index 0259f71..0d7a917 100644
--- a/src/assets/scripts/yufan.me.js
+++ b/src/assets/scripts/yufan.me.js
@@ -172,12 +172,15 @@ if (typeof comments !== 'undefined' && comments !== null) {
         return handleActionError(error);
       }
 
-      const { content } = data;
-      if (content === '') {
-        // Remove the load more button.
+      const { content, next } = data;
+
+      // Remove the load more button.
+      if (!next || content === '') {
         event.target.remove();
-      } else {
-        // Append the comments into the list.
+      }
+
+      // Append the comments into the list.
+      if (content !== '') {
         event.target.dataset.offset = Number(offset) + Number(size);
         comments.querySelector('.comment-list').insertAdjacentHTML('beforeend', content);
       }
diff --git a/src/components/comment/Comments.astro b/src/components/comment/Comments.astro
index bde653d..4eb67b4 100644
--- a/src/components/comment/Comments.astro
+++ b/src/components/comment/Comments.astro
@@ -17,7 +17,7 @@ const comments = await loadComments(commentKey, title, 0);
 await increaseViews(commentKey, title);
 ---
 
-<div id="comments" class="comments py-5">
+<div id="comments" class="comments pt-5">
   {
     comments != null ? (
       <>
@@ -64,7 +64,7 @@ await increaseViews(commentKey, title);
         <ul class="comment-list">
           <Comment comments={comments} />
         </ul>
-        {comments.roots_count > options.settings.comments.size && (
+        {options.settings.comments.size < comments.roots_count && (
           <div class="text-center mt-3 mt-md-4">
             <button
               id="comments-next-button"
diff --git a/src/components/comment/artalk.ts b/src/components/comment/artalk.ts
index 00eacd2..eefd0b6 100644
--- a/src/components/comment/artalk.ts
+++ b/src/components/comment/artalk.ts
@@ -30,7 +30,7 @@ export const loadComments = async (key: string, title: string | null, offset: nu
       return null;
     });
 
-  return data != null ? (data as Comments) : data;
+  return data !== null ? (data as Comments) : null;
 };
 
 export const increaseViews = async (key: string, title: string) => {
diff --git a/src/components/page/post/FeaturePosts.astro b/src/components/page/post/FeaturePosts.astro
index fe0b44f..28ffbbf 100644
--- a/src/components/page/post/FeaturePosts.astro
+++ b/src/components/page/post/FeaturePosts.astro
@@ -29,7 +29,7 @@ const metas: Post[] =
     ? historicalPosts()
     : featurePosts
         .map((slug) => posts.find((post) => post.slug === slug))
-        .flatMap((post) => (post == null ? [] : [post]))
+        .flatMap((post) => (typeof post === 'undefined' ? [] : [post]))
         .slice(0, 3);
 ---
 
diff --git a/src/helpers/images.ts b/src/helpers/images.ts
index 5d63bae..d22bbbf 100644
--- a/src/helpers/images.ts
+++ b/src/helpers/images.ts
@@ -64,7 +64,7 @@ export const imageMetadata = async (publicPath: string): Promise<Image> => {
   const buffer = await fs.readFile(join(root, publicPath));
   const img = sharp(buffer);
   const { width, height } = await img.metadata();
-  if (width == null || height == null) {
+  if (typeof width === 'undefined' || typeof height === 'undefined') {
     throw new Error(`Invalid image path: ${publicPath}`);
   }
   const aspectRatio = width / height;