Merge pull request openRin#519 from FreeL00P/main

fix: 优化 Markdown 渲染与文章摘要展示;文章列表支持md图片+iframe代码不显示至文章列表页+文章详情页&列表页换行无效的问题。

Author: OXeu

bun.lock

@@ -55,7 +55,8 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "remark-rehype": "^11.1.0"
+    "remark-rehype": "^11.1.0",
+    "remark-breaks": "^4.0.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^0.1.1",

client/package.json

@@ -33,7 +33,7 @@ function FeedCardImage({ src, variant }: { src: string; variant: FeedCardVariant
     return (
         <div
             className={imageFrameClass}
-            style={{ aspectRatio }}
+            style={{ aspectRatio: aspectRatio || '16 / 9' }}
         >
             {blurhash && !loaded ? (
                 <canvas
@@ -128,7 +128,7 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
                     {listed === 0 && <span>{t("unlisted")}</span>}
                     {top === 1 && <span className="text-theme">{t('article.top.title')}</span>}
                 </p>
-                <p className={`${styles.summary} ${activeVariant === "editorial" ? "mt-4 max-w-3xl" : ""}`}>{summary}</p>
+                <p className={`whitespace-pre-line ${styles.summary} ${activeVariant === "editorial" ? "mt-4 max-w-3xl" : ""}`}>{summary}</p>
                 {safeHashtags.length > 0 &&
                     <div className={`flex flex-row flex-wrap justify-start gap-2 ${activeVariant === "editorial" ? "mt-4" : "mt-2 gap-x-2"}`}>
                         {safeHashtags.map(({ name }, index) => (

client/src/components/feed_card.tsx

@@ -12,6 +12,7 @@ import gfm from "remark-gfm";
 import remarkMermaid from "../remark/remarkMermaid";
 import { remarkAlert } from "remark-github-blockquote-alert";
 import remarkMath from "remark-math";
+import remarkBreaks from "remark-breaks";
 import Lightbox, { SlideImage } from "yet-another-react-lightbox";
 import Counter from "yet-another-react-lightbox/plugins/counter";
 import Download from "yet-another-react-lightbox/plugins/download";
@@ -126,7 +127,7 @@ export function Markdown({ content }: { content: string }) {
   const Content = useMemo(() => (
     <ReactMarkdown
       className="toc-content dark:text-neutral-300"
-      remarkPlugins={[gfm, remarkMermaid, remarkMath, remarkAlert]}
+      remarkPlugins={[gfm, remarkMermaid, remarkMath, remarkAlert, remarkBreaks]}
       children={content}
       rehypePlugins={[rehypeKatex, rehypeRaw]}
       components={{
@@ -408,6 +409,22 @@ export function Markdown({ content }: { content: string }) {
           });
           return <section {...props}>{modifiedChildren}</section>;
         },
+        iframe({ node, src, title, ...props }) {
+          return (
+            <div className="my-4 w-full">
+              <iframe
+                {...props}
+                src={src}
+                title={title || "Embedded content"}
+                className="w-full rounded-xl border border-black/10 dark:border-white/10"
+                style={{ minHeight: "400px" }}
+                loading="lazy"
+                referrerPolicy="no-referrer"
+                sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+              />
+            </div>
+          );
+        },
         div({ children, node, ...props }) {
           return <div {...props}>{children}</div>;
         },

client/src/components/markdown.tsx

@@ -5,6 +5,7 @@ import { profileAsync } from "../core/server-timing";
 import { feeds, visits, visitStats } from "../db/schema";
 import { HyperLogLog } from "../utils/hyperloglog";
 import { extractImageWithMetadata } from "../utils/image";
+import { stripMarkdown } from "../utils/markdown";
 import { syncFeedAISummaryQueueState } from "./feed-ai-summary";
 import { bindTagToPost } from "./tag";
 import { clearFeedCache } from "./clear-feed-cache";
@@ -94,8 +95,9 @@ export function FeedService(): Hono<{
             limit: limit_num + 1,
         }))).map(({ content, hashtags, summary, ...other }: any) => {
             const avatar = extractImageWithMetadata(content);
+            const plainText = stripMarkdown(content);
             return {
-                summary: summary.length > 0 ? summary : content.length > 100 ? content.slice(0, 100) : content,
+                summary: summary.length > 0 ? summary : plainText.length > 100 ? plainText.slice(0, 100) : plainText,
                 hashtags: hashtags.map(({ hashtag }: any) => hashtag),
                 avatar,
                 ...other
@@ -309,11 +311,10 @@ export function FeedService(): Hono<{
         function formatAndCacheData(feed: any, feedDirection: "previous_feed" | "next_feed") {
             if (feed) {
                 const hashtags_flatten = feed.hashtags.map((f: any) => f.hashtag);
+                const plainText = stripMarkdown(feed.content);
                 const summary = feed.summary.length > 0
                     ? feed.summary
-                    : feed.content.length > 50
-                        ? feed.content.slice(0, 50)
-                        : feed.content;
+                    : plainText.length > 50 ? plainText.slice(0, 50) : plainText;
                 const cacheKey = `${feed.id}_${feedDirection}_${id_num}`;
                 const cacheData = {
                     id: feed.id,
@@ -531,8 +532,9 @@ export function SearchService(): Hono<{
             },
             orderBy: [desc(feeds.createdAt), desc(feeds.updatedAt)],
         })))).map(({ content, hashtags, summary, ...other }: any) => {
+            const plainText = stripMarkdown(content);
             return {
-                summary: summary.length > 0 ? summary : content.length > 100 ? content.slice(0, 100) : content,
+                summary: summary.length > 0 ? summary : plainText.length > 100 ? plainText.slice(0, 100) : plainText,
                 hashtags: hashtags.map(({ hashtag }: any) => hashtag),
                 ...other
             };

server/src/services/feed.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'bun:test';
+import { stripMarkdown } from '../markdown';
+
+describe('stripMarkdown', () => {
+    it('removes media and code from summary text', () => {
+        const result = stripMarkdown([
+            '# Title',
+            '<iframe src="https://example.com/embed"></iframe>',
+            '```ts',
+            'const hidden = true;',
+            '```',
+            '![cover](https://example.com/cover.png)',
+            '[Read more](https://example.com)',
+        ].join('\n'));
+
+        expect(result).toContain('Title');
+        expect(result).toContain('Read more');
+        expect(result).not.toContain('iframe');
+        expect(result).not.toContain('hidden');
+        expect(result).not.toContain('cover.png');
+    });
+
+    it('strips task markers before generic list markers', () => {
+        expect(stripMarkdown('- [x] Done\n- [ ] Todo')).toBe('Done\nTodo');
+    });
+});

server/src/utils/__tests__/markdown.test.ts

@@ -0,0 +1,39 @@
+export function stripMarkdown(content: string): string {
+    let text = content;
+
+    text = text.replace(/<!--[\s\S]*?-->/g, "");
+    text = text.replace(/<script[\s\S]*?<\/script>/gi, "");
+    text = text.replace(/<style[\s\S]*?<\/style>/gi, "");
+    text = text.replace(/<iframe[\s\S]*?<\/iframe>/gi, "");
+    text = text.replace(/<pre[\s\S]*?<\/pre>/gi, "");
+
+    text = text.replace(/!\[.*?\]\(.*?\)/g, "");
+    text = text.replace(/\[([^\]]*)\]\(.*?\)/g, "$1");
+    text = text.replace(/^#{1,6}\s+/gm, "");
+    text = text.replace(/^>\s+/gm, "");
+    text = text.replace(/^(\s*)- \[[ x]\]\s+/gm, "$1");
+    text = text.replace(/^[-*+]\s+/gm, "");
+    text = text.replace(/^\d+\.\s+/gm, "");
+    text = text.replace(/`{3}[\s\S]*?`{3}/g, "");
+    text = text.replace(/`([^`]+)`/g, "$1");
+    text = text.replace(/\*\*(.+?)\*\*/g, "$1");
+    text = text.replace(/__(.+?)__/g, "$1");
+    text = text.replace(/\*(.+?)\*/g, "$1");
+    text = text.replace(/_(.+?)_/g, "$1");
+    text = text.replace(/~~(.+?)~~/g, "$1");
+    text = text.replace(/<[^>]+>/g, "");
+    text = text.replace(/\[.*?\]\[.*?\]/g, "");
+    text = text.replace(/^\[.*?\]:\s+.*$/gm, "");
+    text = text.replace(/^---+$/gm, "");
+    text = text.replace(/\|\s*[-:]+\s*\|/g, "");
+    text = text.replace(/\|/g, " ");
+    text = text.replace(/---+$/gm, "");
+    text = text.replace(/\$\$[\s\S]*?\$\$/g, "");
+    text = text.replace(/\$([^$]+)\$/g, "$1");
+    text = text.replace(/:\w+:/g, "");
+    text = text.replace(/^> \[!\w+\]/gm, "");
+
+    text = text.trim();
+
+    return text;
+}