Fix relative MD links when embedding

This fixes the issue of having relative links (like `../services/database`) in the README.md documents we are embedding in docs.

Now we first process the relative links and turn them into absolute links to full github.com URLs.

docs/1. intro.mdx

@@ -4,9 +4,12 @@ title: Sourcify Docs
 ---
 
 import EmbedReadme from "./EmbedReadme";
-const URL = "https://raw.githubusercontent.com/ethereum/sourcify/master/README.md";
-const displayURL = URL.replace("https://raw.githubusercontent.com/", "");
-export const ReadmeLink = () => (<a href={URL}>{displayURL}</a>);
+const repo = "ethereum/sourcify";
+const branch = "master";
+const readmePath = "/README.md";
+const rawBaseUrl = "https://raw.githubusercontent.com";
+const pageBaseUrl = "https://github.com";
+export const ReadmeLink = () => (<a href={`${pageBaseUrl}/${repo}/tree/${branch}${readmePath}`}>{repo + readmePath}</a>);
 
 *Content from <ReadmeLink/>*
-<EmbedReadme url={URL}/>
+<EmbedReadme repo={repo} branch={branch} readmePath={readmePath} rawBaseUrl={rawBaseUrl} pageBaseUrl={pageBaseUrl}/>

docs/2. Running Sourcify/1-Server.mdx

@@ -4,9 +4,12 @@ slug: /running-server
 ---
 
 import EmbedReadme from "../EmbedReadme";
-const URL = "https://raw.githubusercontent.com/ethereum/sourcify/master/services/server/README.md";
-const displayURL = URL.replace("https://raw.githubusercontent.com/", "");
-export const ReadmeLink = () => (<a href={URL}>{displayURL}</a>);
+const repo = "ethereum/sourcify";
+const branch = "master"
+const readmePath = "/services/server/README.md";
+const rawBaseUrl = "https://raw.githubusercontent.com";
+const pageBaseUrl = "https://github.com";
+export const ReadmeLink = () => (<a href={`${pageBaseUrl}/${repo}/tree/${branch}${readmePath}`}>{repo + readmePath}</a>);
 
 *Content from <ReadmeLink/>*
-<EmbedReadme url={URL}/>
+<EmbedReadme repo={repo} branch={branch} readmePath={readmePath} rawBaseUrl={rawBaseUrl} pageBaseUrl={pageBaseUrl}/>

docs/2. Running Sourcify/2-UI.mdx

@@ -4,9 +4,12 @@ slug: /running-ui
 ---
 
 import EmbedReadme from "../EmbedReadme";
-const URL = "https://raw.githubusercontent.com/sourcifyeth/ui/master/README.md";
-const displayURL = URL.replace("https://raw.githubusercontent.com/", "");
-export const ReadmeLink = () => (<a href={URL}>{displayURL}</a>);
+const repo = "sourcifyeth/ui";
+const branch = "master";
+const readmePath = "/README.md";
+const rawBaseUrl = "https://raw.githubusercontent.com";
+const pageBaseUrl = "https://github.com";
+export const ReadmeLink = () => (<a href={`${pageBaseUrl}/${repo}/tree/${branch}${readmePath}`}>{repo + readmePath}</a>);
 
 *Content from <ReadmeLink/>*
-<EmbedReadme url={URL}/>
+<EmbedReadme repo={repo} branch={branch} readmePath={readmePath} rawBaseUrl={rawBaseUrl} pageBaseUrl={pageBaseUrl}/>

docs/2. Running Sourcify/3-Monitor.mdx

@@ -4,9 +4,12 @@ slug: /running-monitor
 ---
 
 import EmbedReadme from "../EmbedReadme";
-const URL = "https://raw.githubusercontent.com/ethereum/sourcify/master/services/monitor/README.md";
-const displayURL = URL.replace("https://raw.githubusercontent.com/", "");
-export const ReadmeLink = () => (<a href={URL}>{displayURL}</a>);
+const repo = "ethereum/sourcify";
+const branch = "master";
+const readmePath = "/services/monitor/README.md";
+const rawBaseUrl = "https://raw.githubusercontent.com";
+const pageBaseUrl = "https://github.com";
+export const ReadmeLink = () => (<a href={`${pageBaseUrl}/${repo}/tree/${branch}${readmePath}`}>{repo + readmePath}</a>);
 
 *Content from <ReadmeLink/>*
-<EmbedReadme url={URL}/>
+<EmbedReadme repo={repo} branch={branch} readmePath={readmePath} rawBaseUrl={rawBaseUrl} pageBaseUrl={pageBaseUrl}/>

docs/EmbedReadme.js

@@ -1,15 +1,42 @@
 import React, { useEffect, useState } from "react";
 import { parse } from "marked";
 
-export default function EmbedReadme({ url }) {
+export default function EmbedReadme({ repo, branch, readmePath, rawBaseUrl, pageBaseUrl }) {
   const [content, setContent] = useState();
 
   useEffect(() => {
-    fetch(url)
+    fetch(rawBaseUrl + "/" + repo + "/" + branch + readmePath)
       .then((response) => response.text())
-      .then((text) => setContent(parse(text)));
+      .then((text) => {
+        // Replace relative markdown links with absolute ones
+        // Matches markdown links that don't start with "http"
+        const processedText = text.replace(/\[([^\]]+)\]\((?!http)([^)]+)\)/g, (match, title, path) => {
+          // Handle anchor links
+          if (path.startsWith("#")) {
+            return `[${title}](${pageBaseUrl}/${repo}/tree/${branch}${readmePath}${path})`;
+          }
+
+          // Resolve relative paths (including ../)
+          const currentPath = readmePath.split("/").slice(0, -1);
+          const pathParts = path.split("/");
+
+          let resolvedPath = [...currentPath];
+          for (const part of pathParts) {
+            if (part === "..") {
+              resolvedPath.pop();
+            } else {
+              resolvedPath.push(part);
+            }
+          }
+
+          return `[${title}](${pageBaseUrl}/${repo}/tree/${branch}/${resolvedPath.join("/")})`;
+        });
+        setContent(parse(processedText));
+      });
   }, []);
 
-  if (!content) return "Loading from " + url + "...";
+  console.log(rawBaseUrl);
+
+  if (!content) return "Loading from " + rawBaseUrl + readmePath + "...";
   return <div dangerouslySetInnerHTML={{ __html: content }} />;
 }