Merge pull request #9 from KYJCASTER/post/gin-framework

post(gin): 归档 Gin 框架原稿 + 纯 markdown 渲染分支

Author: KYJCASTER

content/posts/gin-framework-notes.md

@@ -24,8 +24,11 @@
     "rehype-external-links": "^3.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "shiki": "^4.0.2",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "unified": "^11.0.5"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package-lock.json

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation"
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { getPublishedPosts, getPostBySlug, getAdjacentPosts, getRelatedPosts, getSeriesContext, tagSlug } from "@/lib/posts"
-import { renderMDX, extractHeadings } from "@/lib/markdown"
+import { renderMDX, renderPlainMarkdown, extractHeadings, PLAIN_MARKDOWN_SLUGS } from "@/lib/markdown"
 import { computeReadingStats } from "@/lib/reading-time"
 import { formatDate } from "@/lib/utils"
 import { TableOfContents } from "@/components/table-of-contents"
@@ -75,8 +75,10 @@ export default async function PostPage({ params }: PageProps) {
   const post = getPostBySlug(slug)
   if (!post) notFound()
 
-  const [content, headings, { prev, next }, related, stats, seriesContext] = [
-    await renderMDX(post.content, post.title),
+  const usePlainMarkdown = PLAIN_MARKDOWN_SLUGS.has(post.slug)
+  const [renderedMdx, plainHtml, headings, { prev, next }, related, stats, seriesContext] = [
+    usePlainMarkdown ? null : await renderMDX(post.content, post.title),
+    usePlainMarkdown ? await renderPlainMarkdown(post.content, post.title) : null,
     extractHeadings(post.content, post.title),
     getAdjacentPosts(post.slug),
     getRelatedPosts(post.slug, 3),
@@ -179,7 +181,11 @@ export default async function PostPage({ params }: PageProps) {
           <div className="min-w-0">
             <TableOfContents headings={headings} placement="mobile" />
             <div id="article-body" className="prose">
-              {content}
+              {plainHtml !== null ? (
+                <div dangerouslySetInnerHTML={{ __html: plainHtml }} />
+              ) : (
+                renderedMdx
+              )}
             </div>
           </div>
           <aside>

package.json

@@ -3,6 +3,10 @@
 // shiki tokenizer cost is paid once at build time.
 
 import { compileMDX } from "next-mdx-remote/rsc"
+import { unified } from "unified"
+import remarkParse from "remark-parse"
+import remarkRehype from "remark-rehype"
+import rehypeStringify from "rehype-stringify"
 import { createHighlighter, type Highlighter } from "shiki"
 import { visit } from "unist-util-visit"
 import remarkGfm from "remark-gfm"
@@ -12,6 +16,17 @@ import type { ReactElement } from "react"
 
 import { mdxComponents } from "@/components/mdx"
 
+/**
+ * Slugs that should bypass the MDX pipeline and be rendered as plain markdown.
+ * Use this only when the post body legitimately contains literal `<` / `{`
+ * sequences (e.g. archived raw C++/C source, math-y prose) that MDX would
+ * otherwise try to parse as JSX/expressions. The visual output and TOC
+ * behaviour are otherwise identical to renderMDX().
+ */
+export const PLAIN_MARKDOWN_SLUGS: ReadonlySet<string> = new Set([
+  "gin-framework-notes",
+])
+
 // Languages registered with Shiki at build time. Audit of content/posts
 // shows we only currently fence bash / java / yaml, but registering the
 // common-author set below keeps new posts working without touching this
@@ -194,6 +209,39 @@ export async function renderMDX(source: string, postTitle?: string): Promise<Rea
   return content
 }
 
+/**
+ * Plain-markdown rendering path. Used for posts whose body contains literal
+ * `<` / `{` sequences that MDX (correctly) refuses to parse as text — see
+ * PLAIN_MARKDOWN_SLUGS above. Output is a sanitised-by-construction HTML
+ * string that the page renders via `dangerouslySetInnerHTML`. Keep the rehype
+ * plugin set in lockstep with renderMDX() so TOC anchors, image hints, code
+ * highlighting, and external-link safety are identical.
+ */
+export async function renderPlainMarkdown(source: string, postTitle?: string): Promise<string> {
+  const highlighter = await getHighlighter()
+
+  let body = source
+  if (postTitle) {
+    body = body.replace(/^#\s+(.+?)\s*$/m, (full, t: string) => {
+      const norm = (s: string) => s.replace(/\s+/g, "").trim()
+      return norm(t) === norm(postTitle) ? "" : full
+    })
+  }
+
+  const file = await unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype, { allowDangerousHtml: false })
+    .use(rehypeHeadings)
+    .use(rehypeImgAttrs)
+    .use(rehypeShiki, highlighter)
+    .use(rehypeExternalLinks, { target: "_blank", rel: ["noopener", "noreferrer"] })
+    .use(rehypeStringify, { allowDangerousHtml: false })
+    .process(body)
+
+  return String(file)
+}
+
 export interface Heading {
   level: 2 | 3 | 4
   text: string