feat: better loading the comments.

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

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

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"

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) => {

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

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;