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

added Readme of projects on home page. Images need fixing on Readme

Browse Source
This commit is contained in:
AramJonghu
2026-04-26 17:39:06 +02:00
parent 80a6fa2606
commit 7e34b4e8c7
5 changed files with 190 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ProjectsReadme.jsx
+130 -12
View File
@@ -1,31 +1,149 @@
import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
const fetchREADME = async (url) => {
const fetchREADME = async (repoUrl) => {
try {
const response = await fetch(url);
let rawUrl = repoUrl;
if (repoUrl.includes("/src/branch/")) {
rawUrl = repoUrl.replace("/src/branch/", "/raw/branch/");
} else if (
repoUrl.includes("github.com") &&
!repoUrl.includes("raw.githubusercontent.com")
) {
rawUrl = repoUrl
.replace("github.com", "raw.githubusercontent.com")
.replace("/blob/", "/");
}
const response = await fetch(rawUrl);
if (!response.ok) throw new Error("Failed to fetch README");
return await response.text();
} catch (error) {
console.error(error);
return "Error fetching README.";
return "Error fetching README. Make sure the URL points to a raw markdown file.";
}
};
export default function ProjectsReadme() {
export default function ProjectsReadme({
repoUrl,
}) {
const [readmeContent, setReadmeContent] = useState("");
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetchREADME(
// "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/src/branch/master/README.md",
"../../../README.md",
).then((content) => setReadmeContent(content));
}, []);
setIsLoading(true);
fetchREADME(repoUrl).then((content) => {
setReadmeContent(content);
setIsLoading(false);
});
}, [repoUrl]);
return (
<div>
<h2>README Content</h2>
<ReactMarkdown>{readmeContent}</ReactMarkdown>
<div className="w-full max-w-4xl mx-auto p-4 md:p-8 bg-ctp-mantle rounded-xl shadow-sm border border-ctp-text">
{isLoading ? (
<div className="flex flex-col gap-3 animate-pulse w-full">
<div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
<div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
<div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
</div>
) : (
<div className="text-ctp-text leading-relaxed prose prose-base md:prose-lg dark:prose-invert max-w-none">
<ReactMarkdown
components={{
code({ className, children, ...props }) {
const isCodeBlock =
className ||
(typeof children === "string" &&
children.includes("\n"));
if (isCodeBlock) {
return (
<code
className={`${className || ""} text-sm block overflow-x-auto`}
{...props}
>
{children}
</code>
);
}
return (
<code
className="bg-ctp-mantle px-1.5 py-0.5 rounded text-sm font-mono"
{...props}
>
{children}
</code>
);
},
pre({ children, ...props }) {
return (
<pre
className="bg-ctp-mantle p-4 rounded-lg overflow-x-auto text-sm my-4"
{...props}
>
{children}
</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">
{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">
{children}
</ul>
),
ol: ({ children }) => (
<ol className="list-decimal text-ctp-text pl-6 mb-4">
{children}
</ol>
),
li: ({ children }) => (
<li className="mb-1 text-ctp-text">{children}</li>
),
a: ({ children, href }) => (
<a
href={href}
className="text-ctp-text hover:text-ctp-green hover:underline"
target="_blank"
rel="noreferrer"
>
{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">
{children}
</blockquote>
),
img: ({ src, alt }) => (
<img
src={src}
alt={alt}
className="max-w-full h-auto rounded-lg my-4 shadow-sm"
/>
),
}}
>
{readmeContent}
</ReactMarkdown>
</div>
)}
</div>
);
}