feat: better loading the comments.

This commit is contained in:
Yufan Sheng 2024-11-14 23:02:52 +08:00
parent efaa5a90bb
commit 55ded99e24
Signed by: syhily
GPG Key ID: 9D18A22A7DCD5A9B
6 changed files with 16 additions and 11 deletions

View File

@ -5,6 +5,7 @@ import { partialRender } from '@/helpers/container';
import { decreaseLikes, increaseLikes, queryLikes, queryUserId } from '@/helpers/db/query'; import { decreaseLikes, increaseLikes, queryLikes, queryUserId } from '@/helpers/db/query';
import { pages, posts } from '@/helpers/schema'; import { pages, posts } from '@/helpers/schema';
import { encodedEmail, urlJoin } from '@/helpers/tools'; import { encodedEmail, urlJoin } from '@/helpers/tools';
import options from '@/options';
import { ActionError, defineAction } from 'astro:actions'; import { ActionError, defineAction } from 'astro:actions';
import { z } from 'astro:schema'; import { z } from 'astro:schema';
@ -91,8 +92,9 @@ export const server = {
} }
const content = await partialRender(Comment, { props: { comments: comments } }); const content = await partialRender(Comment, { props: { comments: comments } });
const next = options.settings.comments.size + offset < comments.roots_count;
return { content }; return { content, next };
}, },
}), }),
}; };

View File

@ -172,12 +172,15 @@ if (typeof comments !== 'undefined' && comments !== null) {
return handleActionError(error); return handleActionError(error);
} }
const { content } = data; const { content, next } = data;
if (content === '') {
// Remove the load more button. // Remove the load more button.
if (!next || content === '') {
event.target.remove(); 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); event.target.dataset.offset = Number(offset) + Number(size);
comments.querySelector('.comment-list').insertAdjacentHTML('beforeend', content); comments.querySelector('.comment-list').insertAdjacentHTML('beforeend', content);
} }

View File

@ -17,7 +17,7 @@ const comments = await loadComments(commentKey, title, 0);
await increaseViews(commentKey, title); await increaseViews(commentKey, title);
--- ---
<div id="comments" class="comments py-5"> <div id="comments" class="comments pt-5">
{ {
comments != null ? ( comments != null ? (
<> <>
@ -64,7 +64,7 @@ await increaseViews(commentKey, title);
<ul class="comment-list"> <ul class="comment-list">
<Comment comments={comments} /> <Comment comments={comments} />
</ul> </ul>
{comments.roots_count > options.settings.comments.size && ( {options.settings.comments.size < comments.roots_count && (
<div class="text-center mt-3 mt-md-4"> <div class="text-center mt-3 mt-md-4">
<button <button
id="comments-next-button" id="comments-next-button"

View File

@ -30,7 +30,7 @@ export const loadComments = async (key: string, title: string | null, offset: nu
return null; return null;
}); });
return data != null ? (data as Comments) : data; return data !== null ? (data as Comments) : null;
}; };
export const increaseViews = async (key: string, title: string) => { export const increaseViews = async (key: string, title: string) => {

View File

@ -29,7 +29,7 @@ const metas: Post[] =
? historicalPosts() ? historicalPosts()
: featurePosts : featurePosts
.map((slug) => posts.find((post) => post.slug === slug)) .map((slug) => posts.find((post) => post.slug === slug))
.flatMap((post) => (post == null ? [] : [post])) .flatMap((post) => (typeof post === 'undefined' ? [] : [post]))
.slice(0, 3); .slice(0, 3);
--- ---

View File

@ -64,7 +64,7 @@ export const imageMetadata = async (publicPath: string): Promise<Image> => {
const buffer = await fs.readFile(join(root, publicPath)); const buffer = await fs.readFile(join(root, publicPath));
const img = sharp(buffer); const img = sharp(buffer);
const { width, height } = await img.metadata(); 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}`); throw new Error(`Invalid image path: ${publicPath}`);
} }
const aspectRatio = width / height; const aspectRatio = width / height;