feat: add rehype-raw to parse html

TinsFox · Sep 10, 2024 · b6d0c8d · b6d0c8d
1 parent 5c39bb1
commit b6d0c8d
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 16 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -1,7 +1,7 @@
 <p align="center">
 
 <a href="https://github.com/TinsFox/shadcnui-boilerplate">
-  <img src="docs/public/index.png" alt="Cover image" width="700px">
+  <img src="https://shadcnui-boilerplate.pages.dev/index.png" alt="Cover image" width="700px">
   <h3 align="center">shadcn/ui boilerplate</h3>
 </a>
 
@@ -66,12 +66,12 @@
 
 [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/TinsFox)
 
-<img src="docs/public//wechat-appreciation-code.jpeg" alt="微信赞赏码" width="200px">
+<img src="https://shadcnui-boilerplate.pages.dev/wechat-appreciation-code.jpeg" alt="微信赞赏码" width="200px">
 
 ## 加入我们的微信群
 
 <p>
-  <img src="docs/public//wechat-group.png" alt="微信群二维码" width="200px">
+  <img src="https://shadcnui-boilerplate.pages.dev/wechat-group.png" alt="微信群二维码" width="200px">
 </p>
 
 扫描上方二维码加入我们的微信群，与其他开发者交流讨论！

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <p align="center">
 
 <a href="https://github.com/TinsFox/shadcnui-boilerplate">
-  <img src="docs/public/index.png" alt="Cover image" width="700px">
+  <img src="https://shadcnui-boilerplate.pages.dev/index.png" alt="Cover image" width="700px">
 <h3 align="center">shadcn/ui boilerplate</h3>
 </a>
 
@@ -66,12 +66,12 @@ or 👇
 
 [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/TinsFox)
 
-<img src="docs/public//wechat-appreciation-code.jpeg" alt="微信赞赏码" width="200px">
+<img src="https://shadcnui-boilerplate.pages.dev/wechat-appreciation-code.jpeg" alt="微信赞赏码" width="200px">
 
 ## Join our WeChat group
 
 <p>
-  <img src="docs/public/wechat-group.png" alt="微信群二维码" width="200px">
+  <img src="https://shadcnui-boilerplate.pages.dev/wechat-group.png" alt="微信群二维码" width="200px">
 </p>
 
 Scan the above QR code to join our WeChat group, and discuss with other developers!

diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
     "react-resizable-panels": "^2.1.2",
     "react-router-dom": "^6.26.1",
     "recharts": "2.13.0-alpha.4",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/(admin)/(with-layout)/system/about.tsx b/src/pages/(admin)/(with-layout)/system/about.tsx
@@ -9,6 +9,7 @@ import {
 } from "@tanstack/react-table"
 import * as React from "react"
 import Markdown from "react-markdown"
+import rehypeRaw from "rehype-raw"
 import remarkGfm from "remark-gfm"
 
 import { Button } from "@/components/ui/button"
@@ -52,17 +53,19 @@ const getDependenciesData = (dependencies: Record<string, string>) => Object.ent
 
 export function Component() {
   return (
-    <div className="prose max-w-none dark:prose-invert">
-      <Markdown remarkPlugins={[remarkGfm]}>{README}</Markdown>
-      <div className="mb-8 rounded-lg">
-        <p className="mb-2 text-lg"><strong>Version:</strong> {pkg.version}</p>
-      </div>
-      <h2>Build with</h2>
-      <div className="not-prose flex w-full justify-between gap-x-3">
-        <DependencyTable data={getDependenciesData(dependencies)} />
-        <DependencyTable data={getDependenciesData(devDependencies)} />
+    <>
+      <div className="prose max-w-none dark:prose-invert">
+        <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{README}</Markdown>
+        <div className="mb-8 rounded-lg">
+          <p className="mb-2 text-lg"><strong>Version:</strong> {pkg.version}</p>
+        </div>
+        <h2>Build with</h2>
+        <div className="not-prose flex w-full justify-between gap-x-3">
+          <DependencyTable data={getDependenciesData(dependencies)} />
+          <DependencyTable data={getDependenciesData(devDependencies)} />
+        </div>
       </div>
-    </div>
+    </>
 
   )
 }