buyfakett/kazoottt-blog-v2
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog-v2.git synced 2025-06-25 03:31:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance notes display with multi-column layout and line clamping

Browse Source
This commit is contained in:
KazooTTT
2025-02-10 17:34:39 +08:00
parent d019565532
commit 513808f4c5
4 changed files with 70 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/note/Note.astro
View File

@ -6,13 +6,15 @@ import GiscusComment from "@/components/componentsBefore/GiscusComment";
import ArticleContainer from "../ArticleContainer.astro";
import ShareButtons from "../ShareButtons.astro";
import ContentFooter from "../ContentFooter.astro";
import { cn } from "@/utils/tailwind";
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
note: CollectionEntry<"note">;
isPreview?: boolean | undefined;
index?: number;
enableLineClamp?: boolean;
};
const { as: Tag = "div", note, isPreview = false, index } = Astro.props;
const { as: Tag = "div", note, isPreview = false, index, enableLineClamp = false } = Astro.props;
const { Content } = await render(note);
const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
? {
@ -36,15 +38,18 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
---
<ArticleContainer
className={isPreview &&
"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
className={cn(
"mb-4 break-inside-avoid-column",
isPreview &&
"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"
)}
dataPagefindBody={isPreview ? false : true}
>
<Tag class="title" class:list={{ "text-base": isPreview }}>
{
isPreview ? (
<>
{index ? `${index + 1}.` : ""}
{index !== undefined && index !== null ? `${index + 1}.` : ""}
<a class="cactus-link" href={`/notes/${note.id}/`}>
{note.data.title}
</a>
@ -66,7 +71,12 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
}
</div>
<div class="group w-full overflow-auto">
<div class="prose prose-base prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0">
<div
class={cn(
"prose prose-base prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0",
enableLineClamp && "line-clamp-4"
)}
>
<Content />
</div>
</div>