feat: better loading the comments.
This commit is contained in:
parent
efaa5a90bb
commit
55ded99e24
@ -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 };
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
|
@ -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) => {
|
||||||
|
@ -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);
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user