audit fix + beter markdown rendering, more robust with image support

frontend/package.json

@@ -16,6 +16,7 @@
         "react-markdown": "^10.1.0",
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
+        "remark-gfm": "^4.0.1",
         "tailwindcss": "^4.2.2"
     },
     "devDependencies": {
@@ -36,5 +37,8 @@
         "typescript-language-server": "^5.3.0",
         "vite": "^8.0.4",
         "vscode-langservers-extracted": "^4.10.0"
+    },
+    "allowScripts": {
+        "core-js@3.49.0": true
     }
 }

frontend/src/components/ProjectsReadme.jsx

@@ -1,6 +1,8 @@
 import { useEffect, useState, useMemo } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 
 const toRawUrl = (repoUrl) => {
     if (!repoUrl) return repoUrl;
@@ -35,7 +37,7 @@ const getRepoRawBase = (repoUrl) => {
 
         const rawIndex = parts.indexOf("raw");
         if (rawIndex !== -1) {
-            return `${url.origin}/${parts.slice(0, rawIndex + 2).join("/")}`;
+            return `${url.origin}/${parts.slice(0, rawIndex + 3).join("/")}`;
         }
 
         return null;
@@ -46,23 +48,11 @@ const getRepoRawBase = (repoUrl) => {
 
 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;
-    }
-
+    if (src.startsWith("/")) return base + src;
     return `${base}/${clean}`;
 };
 
@@ -106,7 +96,8 @@ export default function ProjectsReadme({ repoUrl }) {
             ) : (
                 <div className="text-ctp-text leading-relaxed prose prose-base md:prose-lg dark:prose-invert max-w-none">
                     <ReactMarkdown
-                        rehypePlugins={[rehypeRaw]}
+                        remarkPlugins={[remarkGfm]}
+                        rehypePlugins={[rehypeRaw, rehypeSanitize]}
                         components={{
                             code({ className, children, ...props }) {
                                 const isBlock =
@@ -208,7 +199,7 @@ export default function ProjectsReadme({ repoUrl }) {
                                     <img
                                         src={resolved}
                                         alt={alt}
-                                        className="max-w-full h-auto rounded-lg my-4 shadow-sm"
+                                        className="max-w-full h-auto rounded-md my-4 shadow-sm border-2 border-ctp-text"
                                         loading="lazy"
                                     />
                                 );