feat(blog-web): 添加 WASM Markdown 渲染器并集成到博客组件中

添加了基于 Rust 和 WASM 的 Markdown 渲染器，并将其集成到博客组件中，以提高渲染性能

Author: ExquisiteCore

.DS_Store

@@ -0,0 +1 @@
+/target

blog-web/md-wasm/.gitignore

@@ -0,0 +1,11 @@
+[package]
+name = "md-wasm"
+version = "0.1.0"
+edition = "2024"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2"
+pulldown-cmark = "0.13.0"

blog-web/md-wasm/Cargo.lock

@@ -0,0 +1,10 @@
+use pulldown_cmark::{Parser, html};
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub fn render_markdown(input: &str) -> String {
+    let parser = Parser::new(input);
+    let mut html_output = String::new();
+    html::push_html(&mut html_output, parser);
+    html_output
+}

blog-web/md-wasm/Cargo.toml

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
+    "build:wasm": "wasm-pack build md-wasm --target web",
     "preview": "astro preview",
     "astro": "astro",
     "start": "HOST=0.0.0.0 PORT=4321 node ./dist/server/entry.mjs"

blog-web/md-wasm/src/lib.rs

@@ -1,5 +1,6 @@
 import { createResource, Show } from "solid-js";
 import http from "@/lib/axios";
+import MarkdownRenderer from "@/components/solid/MarkdownRenderer";
 
 // 定义文章接口
 interface Post {
@@ -51,7 +52,6 @@ async function fetchPost(slug: string): Promise<Post | null> {
   }
 }
 
-
 interface BlogPostProps {
   slug: string;
 }
@@ -97,7 +97,7 @@ export default function BlogPost(props: BlogPostProps) {
             <article class="prose prose-lg max-w-none dark:prose-invert">
               {post()!.featured_image && (
                 <img
-                  src={post()!.featured_image ?? ''}
+                  src={post()!.featured_image ?? ""}
                   alt={post()!.title}
                   class="w-full h-64 md:h-96 object-cover rounded-lg shadow-md mb-8"
                 />
@@ -115,8 +115,7 @@ export default function BlogPost(props: BlogPostProps) {
                   </div>
                 )}
               </div>
-
-              <div class="mt-8" innerHTML={post()!.content}></div>
+              <MarkdownRenderer content={post()!.content} />
             </article>
           )}
         </Show>

blog-web/package.json

@@ -0,0 +1,19 @@
+import { createSignal, onMount } from "solid-js";
+
+export default function MarkdownRenderer(props: { content: string }) {
+  const [html, setHtml] = createSignal("");
+
+  onMount(async () => {
+    const wasm = await import("../../../md-wasm/pkg");
+    await wasm.default(); // 初始化 WASM
+    const rendered = wasm.render_markdown(props.content);
+    setHtml(rendered);
+  });
+
+  return (
+    <div
+      class="prose prose-indigo mx-auto p-4 bg-white rounded shadow-md"
+      innerHTML={html()}
+    />
+  );
+}