feat: 归档渲染

src/pages/posts/[...slug].astro

@@ -1,18 +1,31 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import {http} from "@/lib/request.ts";
+import {highlightHtmlWithJsdom} from "@/lib/highlight.js";
+import 'github-markdown-css/github-markdown-light.css';
 
 const { slug } = Astro.params;
 
-const str = `
-  <h1>Sample Post Title</h1>
-  <p>This is a sample blog post content for the post with slug: </p>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-`;
+interface Post {
+  title: string;
+  summary: string;
+  slug: string;
+  cover: string;
+  published_at: string;
+  content_html: string;
+}
 
+const {data} = await http.get<ApiResponse<Post>>(`post/${slug}`);
+
+const content = await highlightHtmlWithJsdom(data.content_html)
 ---
 
 <Layout>
-  <div class="post" set:html={str}>
+  <h1>{data.title}</h1>
+
+  <div>{data.published_at}</div>
+
+  <div class="post markdown-body" set:html={content}>
 
   </div>
 </Layout>