partial fix for image viewing in readme files

frontend/package.json

@@ -14,6 +14,8 @@
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "react-markdown": "^10.1.0",
+        "rehype-raw": "^7.0.0",
+        "rehype-sanitize": "^6.0.0",
         "tailwindcss": "^4.2.2"
     },
     "devDependencies": {

frontend/src/components/ProjectsReadme.jsx

@@ -1,23 +1,80 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 
-const fetchREADME = async (repoUrl) => {
+const toRawUrl = (repoUrl) => {
-    try {
+    if (!repoUrl) return repoUrl;
-        let rawUrl = repoUrl;
 
-        if (repoUrl.includes("/src/branch/")) {
+    if (
-            rawUrl = repoUrl.replace("/src/branch/", "/raw/branch/");
-        } else if (
         repoUrl.includes("github.com") &&
         !repoUrl.includes("raw.githubusercontent.com")
     ) {
-            rawUrl = repoUrl
+        return repoUrl
             .replace("github.com", "raw.githubusercontent.com")
             .replace("/blob/", "/");
     }
 
+    if (repoUrl.includes("/src/branch/")) {
+        return repoUrl.replace("/src/branch/", "/raw/branch/");
+    }
+
+    return repoUrl;
+};
+
+const getRepoRawBase = (repoUrl) => {
+    const rawUrl = toRawUrl(repoUrl);
+    if (!rawUrl) return null;
+
+    try {
+        const url = new URL(rawUrl);
+        const parts = url.pathname.split("/").filter(Boolean);
+
+        if (url.hostname.includes("raw.githubusercontent.com")) {
+            return `${url.origin}/${parts.slice(0, 3).join("/")}`;
+        }
+
+        const rawIndex = parts.indexOf("raw");
+        if (rawIndex !== -1) {
+            return `${url.origin}/${parts.slice(0, rawIndex + 2).join("/")}`;
+        }
+
+        return null;
+    } catch {
+        return null;
+    }
+};
+
+const resolveImageSrc = (src, base) => {
+    if (!src) return src;
+
+    if (src.startsWith("http")) return src;
+
+    if (src.includes("/blob/")) {
+        return src
+            .replace("github.com", "raw.githubusercontent.com")
+            .replace("/blob/", "/");
+    }
+
+    if (!base) return src;
+
+    const clean = src.replace(/^.\//, "");
+
+    if (src.startsWith("/")) {
+        return base + src;
+    }
+
+    return `${base}/${clean}`;
+};
+
+const fetchREADME = async (repoUrl) => {
+    try {
+        const rawUrl = toRawUrl(repoUrl);
         const response = await fetch(rawUrl);
-        if (!response.ok) throw new Error("Failed to fetch README");
+
+        if (!response.ok) {
+            throw new Error("Failed to fetch README");
+        }
+
         return await response.text();
     } catch (error) {
         console.error(error);
@@ -25,14 +82,15 @@ const fetchREADME = async (repoUrl) => {
     }
 };
 
-export default function ProjectsReadme({
+export default function ProjectsReadme({ repoUrl }) {
-    repoUrl,
-}) {
     const [readmeContent, setReadmeContent] = useState("");
     const [isLoading, setIsLoading] = useState(true);
 
+    const base = useMemo(() => getRepoRawBase(repoUrl), [repoUrl]);
+
     useEffect(() => {
         setIsLoading(true);
+
         fetchREADME(repoUrl).then((content) => {
             setReadmeContent(content);
             setIsLoading(false);
@@ -50,13 +108,15 @@ export default function ProjectsReadme({
             ) : (
                 <div className="text-ctp-text leading-relaxed prose prose-base md:prose-lg dark:prose-invert max-w-none">
                     <ReactMarkdown
+                        rehypePlugins={[rehypeRaw]}
                         components={{
                             code({ className, children, ...props }) {
-                                const isCodeBlock =
+                                const isBlock =
                                     className ||
                                     (typeof children === "string" &&
                                         children.includes("\n"));
-                                if (isCodeBlock) {
+
+                                if (isBlock) {
                                     return (
                                         <code
                                             className={`${className || ""} text-sm block overflow-x-auto`}
@@ -66,6 +126,7 @@ export default function ProjectsReadme({
                                         </code>
                                     );
                                 }
+
                                 return (
                                     <code
                                         className="bg-ctp-mantle px-1.5 py-0.5 rounded text-sm font-mono"
@@ -75,6 +136,7 @@ export default function ProjectsReadme({
                                     </code>
                                 );
                             },
+
                             pre({ children, ...props }) {
                                 return (
                                     <pre
@@ -85,59 +147,74 @@ export default function ProjectsReadme({
                                     </pre>
                                 );
                             },
+
                             h1: ({ children }) => (
                                 <h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green">
                                     {children}
                                 </h1>
                             ),
+
                             h2: ({ children }) => (
                                 <h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green">
                                     {children}
                                 </h2>
                             ),
+
                             h3: ({ children }) => (
-                                <h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3 border-ctp-green">
+                                <h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3">
                                     {children}
                                 </h3>
                             ),
+
                             p: ({ children }) => (
                                 <p className="mb-4 text-ctp-text">{children}</p>
                             ),
+
                             ul: ({ children }) => (
-                                <ul className="list-disc text-ctp-text pl-6 mb-4">
+                                <ul className="list-disc pl-6 mb-4">
                                     {children}
                                 </ul>
                             ),
+
                             ol: ({ children }) => (
-                                <ol className="list-decimal text-ctp-text pl-6 mb-4">
+                                <ol className="list-decimal pl-6 mb-4">
                                     {children}
                                 </ol>
                             ),
+
                             li: ({ children }) => (
-                                <li className="mb-1 text-ctp-text">{children}</li>
+                                <li className="mb-1">{children}</li>
                             ),
+
                             a: ({ children, href }) => (
                                 <a
                                     href={href}
-                                    className="text-ctp-text hover:text-ctp-green hover:underline"
                                     target="_blank"
                                     rel="noreferrer"
+                                    className="hover:underline text-ctp-green"
                                 >
                                     {children}
                                 </a>
                             ),
+
                             blockquote: ({ children }) => (
-                                <blockquote className="border-l-4 border-ctp-text pl-4 py-1 mb-4 text-cpt-text bg-ctp-mantle rounded-r-lg">
+                                <blockquote className="border-l-4 border-ctp-text pl-4 py-1 mb-4 bg-ctp-mantle rounded-r-lg">
                                     {children}
                                 </blockquote>
                             ),
-                            img: ({ src, alt }) => (
+
+                            img: ({ src, alt }) => {
+                                const resolved = resolveImageSrc(src, base);
+
+                                return (
                                     <img
-                                    src={src}
+                                        src={resolved}
                                         alt={alt}
                                         className="max-w-full h-auto rounded-lg my-4 shadow-sm"
+                                        loading="lazy"
                                     />
-                            ),
+                                );
+                            },
                         }}
                     >
                         {readmeContent}