From 503c44ac17b31320040e98a1cdd6eed3bbe242d0 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Wed, 2 Sep 2026 21:57:04 +0800
Subject: [PATCH] add preview to posts

---
 src/lib/components/FeedRow.svelte     |  8 ++++++++
 src/lib/markdown.spec.ts              | 14 ++++++++++++++
 src/lib/markdown.ts                   | 27 +++++++++++++++++++++++++++
 src/routes/notes/+page.svelte         |  1 +
 src/routes/questions/+page.svelte     |  1 +
 src/routes/search/+page.svelte        |  2 ++
 src/routes/topics/[slug]/+page.svelte |  2 ++
 src/routes/units/+page.svelte         |  2 ++
 src/routes/units/[code]/+page.svelte  |  2 ++
 9 files changed, 59 insertions(+)
 create mode 100644 src/lib/markdown.spec.ts

diff --git a/src/lib/components/FeedRow.svelte b/src/lib/components/FeedRow.svelte
index bc743c8..77e0cc8 100644
--- a/src/lib/components/FeedRow.svelte
+++ b/src/lib/components/FeedRow.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { previewMarkdown } from "$lib/markdown";
 	import { unitPath } from "$lib/paths";
 	import VoteStack from "./VoteStack.svelte";
 
 	let {
 		href,
 		title,
+		content,
 		unitCode,
 		meta,
 		voteCount = 0,
@@ -14,6 +16,7 @@
 	}: {
 		href: string;
 		title: string;
+		content?: string;
 		unitCode?: string;
 		meta: string;
 		voteCount?: number;
@@ -40,6 +43,11 @@
 		>
 			{title}
 		</a>
+		{#if content?.trim()}
+			<p class="text-muted mt-1 line-clamp-2 text-sm leading-relaxed">
+				{previewMarkdown(content)}
+			</p>
+		{/if}
 		<p class="kicker mt-1.5">{meta}</p>
 	</div>
 </article>
diff --git a/src/lib/markdown.spec.ts b/src/lib/markdown.spec.ts
new file mode 100644
index 0000000..794a922
--- /dev/null
+++ b/src/lib/markdown.spec.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { previewMarkdown } from "./markdown";
+
+describe("previewMarkdown", () => {
+	it("returns readable text without markdown formatting", () => {
+		expect(previewMarkdown("# Heading\n\nA **bold** [link](https://example.com).")).toBe(
+			"Heading A bold link.",
+		);
+	});
+
+	it("includes code and truncates long previews", () => {
+		expect(previewMarkdown("Use `const value = 1` here.", 18)).toBe("Use const value =…");
+	});
+});
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index 3479b3e..d671d03 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -9,3 +9,30 @@ const md = new MarkdownIt({
 export function renderMarkdown(source: string): string {
 	return md.render(source ?? "");
 }
+
+export function previewMarkdown(source: string, maxLength = 180): string {
+	const text = md
+		.parse(source ?? "", {})
+		.map((token) => {
+			console.log(token);
+			if (token.type === "inline") {
+				return (token.children ?? [])
+					.filter((child) => child.type !== "image")
+					.map((child) =>
+						child.type === "softbreak" || child.type === "hardbreak"
+							? " "
+							: child.content,
+					)
+					.join("");
+			}
+
+			if (token.type === "fence" || token.type === "code_block") return token.content;
+			return "";
+		})
+		.join(" ")
+		.replace(/\s+/g, " ")
+		.trim();
+
+	if (text.length <= maxLength) return text;
+	return `${text.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`;
+}
diff --git a/src/routes/notes/+page.svelte b/src/routes/notes/+page.svelte
index 4031465..6eb70f8 100644
--- a/src/routes/notes/+page.svelte
+++ b/src/routes/notes/+page.svelte
@@ -82,6 +82,7 @@
 			<FeedRow
 				href={postPath(note.unit!.code, note._id)}
 				title={note.title}
+				content={note.content}
 				unitCode={note.unit
 					? note.unit.code + (note.unit.code2 ? ` / ${note.unit.code2}` : "")
 					: undefined}
diff --git a/src/routes/questions/+page.svelte b/src/routes/questions/+page.svelte
index f14110b..6ff1f80 100644
--- a/src/routes/questions/+page.svelte
+++ b/src/routes/questions/+page.svelte
@@ -89,6 +89,7 @@
 			<FeedRow
 				href={postPath(question.unit!.code, question._id)}
 				title={question.title}
+				content={question.content}
 				unitCode={question.unit
 					? question.unit.code + (question.unit.code2 ? ` / ${question.unit.code2}` : "")
 					: undefined}
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index b64345a..747514d 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -54,6 +54,7 @@
 				<FeedRow
 					href={postPath(result.unit!.code, result._id)}
 					title={result.title}
+					content={result.content}
 					unitCode={result.unit
 						? result.unit.code + (result.unit.code2 ? ` / ${result.unit.code2}` : "")
 						: undefined}
@@ -69,6 +70,7 @@
 				<FeedRow
 					href={postPath(result.unit!.code, result._id)}
 					title={result.title}
+					content={result.content}
 					unitCode={result.unit
 						? result.unit.code + (result.unit.code2 ? ` / ${result.unit.code2}` : "")
 						: undefined}
diff --git a/src/routes/topics/[slug]/+page.svelte b/src/routes/topics/[slug]/+page.svelte
index 4bef178..c4912a7 100644
--- a/src/routes/topics/[slug]/+page.svelte
+++ b/src/routes/topics/[slug]/+page.svelte
@@ -48,6 +48,7 @@
 				<FeedRow
 					href={postPath(note.unit!.code, note._id)}
 					title={note.title}
+					content={note.content}
 					unitCode={note.unit
 						? note.unit.code + (note.unit.code2 ? ` / ${note.unit.code2}` : "")
 						: undefined}
@@ -67,6 +68,7 @@
 				<FeedRow
 					href={postPath(question.unit!.code, question._id)}
 					title={question.title}
+					content={question.content}
 					unitCode={question.unit
 						? question.unit.code +
 							(question.unit.code2 ? ` / ${question.unit.code2}` : "")
diff --git a/src/routes/units/+page.svelte b/src/routes/units/+page.svelte
index 64d2f4b..ed1bf99 100644
--- a/src/routes/units/+page.svelte
+++ b/src/routes/units/+page.svelte
@@ -94,6 +94,7 @@
 							<FeedRow
 								href={postPath(selectedUnit.code, note._id)}
 								title={note.title}
+								content={note.content}
 								unitCode={selectedUnit.code +
 									(selectedUnit.code2 ? ` / ${selectedUnit.code2}` : "")}
 								meta="{note.authorName} · {timeAgo(
@@ -114,6 +115,7 @@
 							<FeedRow
 								href={postPath(selectedUnit.code, question._id)}
 								title={question.title}
+								content={question.content}
 								unitCode={selectedUnit.code +
 									(selectedUnit.code2 ? ` / ${selectedUnit.code2}` : "")}
 								meta="{question.authorName} · {timeAgo(
diff --git a/src/routes/units/[code]/+page.svelte b/src/routes/units/[code]/+page.svelte
index c3eee94..66d0e82 100644
--- a/src/routes/units/[code]/+page.svelte
+++ b/src/routes/units/[code]/+page.svelte
@@ -51,6 +51,7 @@
 				<FeedRow
 					href={postPath(unit.code, note._id)}
 					title={note.title}
+					content={note.content}
 					unitCode={unit.code + (unit.code2 ? ` / ${unit.code2}` : "")}
 					meta="{note.authorName} · {timeAgo(
 						note.createdAt,
@@ -68,6 +69,7 @@
 				<FeedRow
 					href={postPath(unit.code, question._id)}
 					title={question.title}
+					content={question.content}
 					unitCode={unit.code + (unit.code2 ? ` / ${unit.code2}` : "")}
 					meta="{question.authorName} · {timeAgo(
 						question.createdAt,