AramJonghu/aramjonghu-site
1
0
Fork 0
mirror of https://git.aramjonghu.nl/AramJonghu/aramjonghu-site.git synced 2026-06-06 17:18:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

partial fix for image viewing in readme files

Browse Source
This commit is contained in:
AramJonghu
2026-05-03 01:39:22 +02:00
parent 7e34b4e8c7
commit 960dce8cbf
2 changed files with 110 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+2
View File
@@ -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
+100 -23
View File
@@ -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) => {
try {
let rawUrl = repoUrl;
const toRawUrl = (repoUrl) => {
if (!repoUrl) return repoUrl;
if (repoUrl.includes("/src/branch/")) {
rawUrl = repoUrl.replace("/src/branch/", "/raw/branch/");
} else if (
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({
repoUrl,
}) {
export default function ProjectsReadme({ 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}