render relative path images in markdown, close #10

components/FileListing.tsx

@@ -274,7 +274,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
         {renderReadme && (
           <div className="border-t dark:border-gray-700">
-            <MarkdownPreview file={readmeFile} standalone={false} />
+            <MarkdownPreview file={readmeFile} path={path} standalone={false} />
           </div>
         )}
       </div>
@@ -303,7 +303,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
           return <CodePreview file={resp} />
 
         case preview.markdown:
-          return <MarkdownPreview file={resp} />
+          return <MarkdownPreview file={resp} path={path} />
 
         case preview.video:
           return <VideoPreview file={resp} />

components/previews/MarkdownPreview.tsx

@@ -1,4 +1,4 @@
-import { useEffect, FunctionComponent } from 'react'
+import { useEffect, FunctionComponent, CSSProperties } from 'react'
 import Prism from 'prismjs'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
@@ -13,13 +13,35 @@ import Loading from '../Loading'
 import DownloadBtn from '../DownloadBtn'
 import { useStaleSWR } from '../../utils/tools'
 
-const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> = ({ file, standalone = true }) => {
+const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?: boolean }> = ({
+  file,
+  path,
+  standalone = true,
+}) => {
   const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
 
-  useEffect(() => {
+  // The parent folder of the markdown file, which is also the relative image folder
-    if (typeof window !== 'undefined') {
+  const parentPath = path.substring(0, path.lastIndexOf('/'))
-      Prism.highlightAll()
+  // Check if the image is relative path instead of a absolute url
+  const isUrlAbsolute = url => url.indexOf('://') > 0 || url.indexOf('//') === 0
+  // Custom renderer to render images with relative path
+  const relativeImagePathRenderer = {
+    img: ({ alt, src, title, style }: { alt?: string; src?: string; title?: string; style?: CSSProperties }) => {
+      if (isUrlAbsolute(src as string)) {
+        return (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img alt={alt} src={src} title={title} style={style} />
+        )
       }
+      return (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img alt={alt} src={`/api?path=${parentPath}/${src}&raw=true`} title={title} style={style} />
+      )
+    },
+  }
+
+  useEffect(() => {
+    Prism.highlightAll()
   }, [data])
 
   if (error) {
@@ -46,8 +68,12 @@ const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> =
             : 'markdown-body p-3 dark:text-white'
         }
       >
-        {/* Using rehypeRaw to render HTML inside Markdown, is potentially dangerous, use under safe environments. (#18) */}
+        {/* Using rehypeRaw to render HTML inside Markdown is potentially dangerous, use under safe environments. (#18) */}
-        <ReactMarkdown remarkPlugins={[gfm, remarkMath]} rehypePlugins={[rehypeKatex, rehypeRaw as any]}>
+        <ReactMarkdown
+          remarkPlugins={[gfm, remarkMath]}
+          rehypePlugins={[rehypeKatex, rehypeRaw as any]}
+          components={relativeImagePathRenderer}
+        >
           {data}
         </ReactMarkdown>
       </div>