From f9fd9fc6c66f043ed31145e67038a83fd498f573 Mon Sep 17 00:00:00 2001
From: Andy Hsu <i@nn.ci>
Date: Sun, 10 Dec 2023 17:57:05 +0800
Subject: [PATCH] feat: support relative path for markdown (close
 alist-org/alist#5644)

---
 src/components/Markdown.tsx | 37 +++++++++++++++++++++++++++++++++----
 src/pages/home/Readme.tsx   |  2 +-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index 4ba9da562..5ecf5a9b0 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -9,9 +9,10 @@ import "./markdown.css"
 import { Show, createEffect, createMemo, createSignal, on } from "solid-js"
 import { clsx } from "clsx"
 import { Box } from "@hope-ui/solid"
-import { useParseText } from "~/hooks"
+import { useParseText, useRouter } from "~/hooks"
 import { EncodingSelect } from "."
 import once from "just-once"
+import { pathDir, pathJoin, api } from "~/utils"
 
 const insertKatexCSS = once(() => {
   const link = document.createElement("link")
@@ -21,11 +22,12 @@ const insertKatexCSS = once(() => {
   document.head.appendChild(link)
 })
 
-export const Markdown = (props: {
+export function Markdown(props: {
   children?: string | ArrayBuffer
   class?: string
   ext?: string
-}) => {
+  readme?: boolean
+}) {
   const [encoding, setEncoding] = createSignal<string>("utf-8")
   const [show, setShow] = createSignal(true)
   const { isString, text } = useParseText(props.children)
@@ -35,7 +37,34 @@ export const Markdown = (props: {
     }
     return "```" + props.ext + "\n" + content + "\n```"
   }
-  const md = createMemo(() => convertToMd(text(encoding())))
+  const { pathname } = useRouter()
+  const md = createMemo(() => {
+    let content = convertToMd(text(encoding()))
+    content = content.replace(/!\[.*?\]\((.*?)\)/g, (match) => {
+      const name = match.match(/!\[(.*?)\]\(.*?\)/)![1]
+      let url = match.match(/!\[.*?\]\((.*?)\)/)![1]
+      if (
+        url.startsWith("http://") ||
+        url.startsWith("https://") ||
+        url.startsWith("//")
+      ) {
+        return match
+      }
+      if (url.startsWith("/")) {
+        url = `${api}/d${url}`
+      } else {
+        url = url.replace("./", "")
+        url = `${api}/d${pathJoin(
+          props.readme ? pathname() : pathDir(pathname()),
+          url,
+        )}`
+      }
+      const ans = `![${name}](${url})`
+      console.log(ans)
+      return ans
+    })
+    return content
+  })
   createEffect(
     on(md, () => {
       setShow(false)
diff --git a/src/pages/home/Readme.tsx b/src/pages/home/Readme.tsx
index 9fa35f004..63548a011 100644
--- a/src/pages/home/Readme.tsx
+++ b/src/pages/home/Readme.tsx
@@ -60,7 +60,7 @@ export function Readme(props: {
     <Show when={readme()}>
       <Box w="$full" rounded="$xl" p="$4" bgColor={cardBg()} shadow="$lg">
         <MaybeLoading loading={content.loading}>
-          <Markdown children={content()?.content} />
+          <Markdown children={content()?.content} readme />
         </MaybeLoading>
       </Box>
     </Show>