mirror of
https://git.aramjonghu.nl/AramJonghu/aramjonghu-site.git
synced 2026-06-06 17:18:24 +02:00
added Readme of projects on home page. Images need fixing on Readme
This commit is contained in:
@@ -14,8 +14,6 @@
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-markdown": "^10.1.0",
|
||||
"remark": "^15.0.1",
|
||||
"remark-html": "^16.0.1",
|
||||
"tailwindcss": "^4.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Binary file not shown.
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+60
-12
@@ -2,22 +2,71 @@ import { useState } from "react";
|
||||
import ProjectsReadme from "../components/ProjectsReadme";
|
||||
|
||||
export default function Home() {
|
||||
const [active, setActive] = useState("projects");
|
||||
const projectList = [
|
||||
{
|
||||
id: "site",
|
||||
name: "aramjonghu-site",
|
||||
url: "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/raw/branch/master/README.md",
|
||||
},
|
||||
{
|
||||
id: "game",
|
||||
name: "Game (Gameron the Lost Level)",
|
||||
url: "https://git.aramjonghu.nl/AramJonghu/gameron-the-lost-level/src/branch/master/README.md",
|
||||
},
|
||||
{
|
||||
id: "nvim",
|
||||
name: "Nvim Config",
|
||||
url: "https://git.aramjonghu.nl/AramJonghu/nvim/src/branch/main/README.md",
|
||||
},
|
||||
];
|
||||
|
||||
const [projIdx, setProjIdx] = useState(0);
|
||||
const prevProject = () =>
|
||||
setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
|
||||
const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);
|
||||
|
||||
const [activeTab, setActiveTab] = useState("about");
|
||||
|
||||
const sections = [
|
||||
{
|
||||
id: "projects",
|
||||
title: "Projects",
|
||||
content: <ProjectsReadme />,
|
||||
content: (
|
||||
<>
|
||||
<h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
|
||||
Projects
|
||||
</h1>
|
||||
<div className="flex justify-center mb-6">
|
||||
<button
|
||||
onClick={prevProject}
|
||||
className="px-3 py-1 rounded ui-btn text-ctp-text"
|
||||
>
|
||||
◀︎ Prev
|
||||
</button>
|
||||
<span className="self-center mx-6 font-medium">
|
||||
{projectList[projIdx].name} ({projIdx + 1}/
|
||||
{projectList.length})
|
||||
</span>
|
||||
<button
|
||||
onClick={nextProject}
|
||||
className="px-3 py-1 rounded ui-btn text-ctp-text"
|
||||
>
|
||||
Next ▶︎
|
||||
</button>
|
||||
</div>
|
||||
<ProjectsReadme repoUrl={projectList[projIdx].url} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "systems",
|
||||
title: "Systems",
|
||||
content: "Systems content",
|
||||
content: <p>Systems content goes here.</p>,
|
||||
},
|
||||
{
|
||||
id: "about",
|
||||
title: "About",
|
||||
content: "About content",
|
||||
content: <p>About content goes here.</p>,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -36,13 +85,15 @@ export default function Home() {
|
||||
personal tooling.
|
||||
</p>
|
||||
<div className="mt-10 border rounded p-4">
|
||||
<div className="flex flex-wrap justify-center gap-12">
|
||||
<div className="flex flex-wrap justify-center gap-12 mb-6">
|
||||
{sections.map((section) => (
|
||||
<button
|
||||
key={section.id}
|
||||
onClick={() => setActive(section.id)}
|
||||
onClick={() => setActiveTab(section.id)}
|
||||
className={`ui-btn ${
|
||||
active === section.id ? "ui-btn-active" : ""
|
||||
activeTab === section.id
|
||||
? "ui-btn-active"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{section.title}
|
||||
@@ -54,15 +105,12 @@ export default function Home() {
|
||||
<div
|
||||
key={section.id}
|
||||
className={`transition-all duration-300 ${
|
||||
active === section.id
|
||||
activeTab === section.id
|
||||
? "opacity-100 translate-y-0"
|
||||
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
|
||||
}`}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-ctp-mauve">
|
||||
{section.title}
|
||||
</h2>
|
||||
<div>{section.content}</div>{" "}
|
||||
{section.content}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user