AramJonghu/aramjonghu-site
1
0
Fork 0
mirror of https://git.aramjonghu.dev/AramJonghu/aramjonghu-site.git synced 2026-09-11 17:13:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore(nesting): reduced nesting

Browse Source
This commit is contained in:
AramJonghu
2026-07-22 00:01:39 +02:00
parent 21c61968fe
commit e613d96ddf
2 changed files with 218 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Header.tsx
+4 -1
View File
@@ -52,7 +52,10 @@ export default function Header({ theme }: HeaderProps) {
</nav> </nav>
<div> <div>
<button className="ui-btn ui-btn:hover text-lg font-[NerdFontSymbols]" onClick={toggleTheme}> <button
className="ui-btn ui-btn:hover text-lg font-[NerdFontSymbols]"
onClick={toggleTheme}
>
{currentTheme === "macchiato" ? "" : ""} {currentTheme === "macchiato" ? "" : ""}
</button> </button>
</div> </div>
frontend/src/components/MdProcessor.tsx
+62 -117
View File
@@ -1,6 +1,5 @@
import { import {
useEffect, useEffect,
useRef,
useState, useState,
useMemo, useMemo,
type ComponentPropsWithoutRef, type ComponentPropsWithoutRef,
@@ -12,6 +11,25 @@ import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize"; import rehypeSanitize from "rehype-sanitize";
import highlighter from "../utils/highlighter"; import highlighter from "../utils/highlighter";
function CopyButton({ code }: { code: string }): ReactElement {
return (
<button
onClick={(e) => {
const btn = e.currentTarget;
navigator.clipboard.writeText(code).then(() => {
btn.textContent = "Copied!";
setTimeout(() => {
btn.textContent = "\uf0c5";
}, 1500);
});
}}
className="absolute top-1 right-1 px-2 py-1 text-base font-mono text-ctp-subtext0 hover:text-ctp-green transition-colors cursor-pointer select-none z-10 font-[NerdFontSymbols]"
>
</button>
);
}
const toRawUrl = (repoUrl: string): string => { const toRawUrl = (repoUrl: string): string => {
if (!repoUrl) return repoUrl; if (!repoUrl) return repoUrl;
@@ -112,20 +130,7 @@ export default function MdProcessor({
const loading = useRemote && fetchState.url !== repoUrl; const loading = useRemote && fetchState.url !== repoUrl;
const displayContent = directContent ?? fetchState.content; const displayContent = directContent ?? fetchState.content;
return ( const markdownComponents = {
<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">
{loading ? (
<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
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, rehypeSanitize]}
components={{
code({ code({
className, className,
children, children,
@@ -133,8 +138,7 @@ export default function MdProcessor({
}: ComponentPropsWithoutRef<"code">): ReactElement { }: ComponentPropsWithoutRef<"code">): ReactElement {
const isBlock = const isBlock =
className || className ||
(typeof children === "string" && (typeof children === "string" && children.includes("\n"));
children.includes("\n"));
if (isBlock) { if (isBlock) {
return ( return (
@@ -154,12 +158,8 @@ export default function MdProcessor({
); );
}, },
pre({ pre({ children }: ComponentPropsWithoutRef<"pre">): ReactElement {
children, const codeChild = Array.isArray(children) ? children[0] : children;
}: ComponentPropsWithoutRef<"pre">): ReactElement {
const codeChild = Array.isArray(children)
? children[0]
: children;
let lang = ""; let lang = "";
let code = ""; let code = "";
@@ -170,17 +170,12 @@ export default function MdProcessor({
"props" in codeChild "props" in codeChild
) { ) {
const el = codeChild as { const el = codeChild as {
props: { props: { className?: string; children?: string };
className?: string;
children?: string;
};
}; };
const cls = el.props?.className; const cls = el.props?.className;
const match = cls?.match(/language-(\w+)/); const match = cls?.match(/language-(\w+)/);
if (match) lang = match[1]; if (match) lang = match[1];
if ( if (typeof el.props?.children === "string") {
typeof el.props?.children === "string"
) {
code = el.props.children; code = el.props.children;
} }
} }
@@ -197,8 +192,6 @@ export default function MdProcessor({
}) })
: null; : null;
const copyRef = useRef<HTMLButtonElement>(null);
if (highlighted) { if (highlighted) {
return ( return (
<div className="relative border-2 border-ctp-text/50 rounded-md overflow-hidden my-6 bg-ctp-base"> <div className="relative border-2 border-ctp-text/50 rounded-md overflow-hidden my-6 bg-ctp-base">
@@ -207,32 +200,7 @@ export default function MdProcessor({
{lang} {lang}
</span> </span>
)} )}
<button <CopyButton code={code} />
ref={copyRef}
onClick={() => {
navigator.clipboard
.writeText(code)
.then(() => {
if (copyRef.current) {
copyRef.current.textContent =
"Copied!";
setTimeout(
() => {
if (
copyRef.current
)
copyRef.current.textContent =
"\uf0c5";
},
1500,
);
}
});
}}
className="absolute top-1 right-1 px-2 py-1 text-base font-mono text-ctp-subtext0 hover:text-ctp-green transition-colors cursor-pointer select-none z-10 font-[NerdFontSymbols]"
>
</button>
<div <div
className={`overflow-x-auto text-sm p-4 ${lang ? "pt-7" : ""}`} className={`overflow-x-auto text-sm p-4 ${lang ? "pt-7" : ""}`}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
@@ -244,15 +212,16 @@ export default function MdProcessor({
} }
return ( return (
<pre className="overflow-x-auto text-sm p-4 bg-ctp-base m-0 border-2 border-ctp-text/50 rounded-md my-6"> <div className="relative border-2 border-ctp-text/50 rounded-md overflow-hidden my-6 bg-ctp-base">
<CopyButton code={code} />
<pre className="overflow-x-auto text-sm p-4 m-0">
{children} {children}
</pre> </pre>
</div>
); );
}, },
h1({ h1({ children }: ComponentPropsWithoutRef<"h1">): ReactElement {
children,
}: ComponentPropsWithoutRef<"h1">): ReactElement {
return ( return (
<h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green"> <h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green">
{children} {children}
@@ -260,9 +229,7 @@ export default function MdProcessor({
); );
}, },
h2({ h2({ children }: ComponentPropsWithoutRef<"h2">): ReactElement {
children,
}: ComponentPropsWithoutRef<"h2">): ReactElement {
return ( return (
<h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green"> <h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green">
{children} {children}
@@ -270,9 +237,7 @@ export default function MdProcessor({
); );
}, },
h3({ h3({ children }: ComponentPropsWithoutRef<"h3">): ReactElement {
children,
}: ComponentPropsWithoutRef<"h3">): ReactElement {
return ( return (
<h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3"> <h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3">
{children} {children}
@@ -280,46 +245,23 @@ export default function MdProcessor({
); );
}, },
p({ p({ children }: ComponentPropsWithoutRef<"p">): ReactElement {
children, return <p className="mb-4 text-ctp-text">{children}</p>;
}: ComponentPropsWithoutRef<"p">): ReactElement {
return (
<p className="mb-4 text-ctp-text">
{children}
</p>
);
}, },
ul({ ul({ children }: ComponentPropsWithoutRef<"ul">): ReactElement {
children, return <ul className="list-disc pl-6 mb-4">{children}</ul>;
}: ComponentPropsWithoutRef<"ul">): ReactElement {
return (
<ul className="list-disc pl-6 mb-4">
{children}
</ul>
);
}, },
ol({ ol({ children }: ComponentPropsWithoutRef<"ol">): ReactElement {
children, return <ol className="list-decimal pl-6 mb-4">{children}</ol>;
}: ComponentPropsWithoutRef<"ol">): ReactElement {
return (
<ol className="list-decimal pl-6 mb-4">
{children}
</ol>
);
}, },
li({ li({ children }: ComponentPropsWithoutRef<"li">): ReactElement {
children,
}: ComponentPropsWithoutRef<"li">): ReactElement {
return <li className="mb-1">{children}</li>; return <li className="mb-1">{children}</li>;
}, },
a({ a({ children, href }: ComponentPropsWithoutRef<"a">): ReactElement {
children,
href,
}: ComponentPropsWithoutRef<"a">): ReactElement {
return ( return (
<a <a
href={href} href={href}
@@ -342,9 +284,7 @@ export default function MdProcessor({
); );
}, },
table({ table({ children }: ComponentPropsWithoutRef<"table">): ReactElement {
children,
}: ComponentPropsWithoutRef<"table">): ReactElement {
return ( return (
<div className="overflow-x-auto my-4"> <div className="overflow-x-auto my-4">
<table className="w-full border-collapse border border-ctp-overlay0"> <table className="w-full border-collapse border border-ctp-overlay0">
@@ -354,9 +294,7 @@ export default function MdProcessor({
); );
}, },
th({ th({ children }: ComponentPropsWithoutRef<"th">): ReactElement {
children,
}: ComponentPropsWithoutRef<"th">): ReactElement {
return ( return (
<th className="border border-ctp-overlay0 bg-ctp-surface0 px-4 py-2 text-left font-bold text-ctp-lavender"> <th className="border border-ctp-overlay0 bg-ctp-surface0 px-4 py-2 text-left font-bold text-ctp-lavender">
{children} {children}
@@ -364,9 +302,7 @@ export default function MdProcessor({
); );
}, },
td({ td({ children }: ComponentPropsWithoutRef<"td">): ReactElement {
children,
}: ComponentPropsWithoutRef<"td">): ReactElement {
return ( return (
<td className="border border-ctp-overlay0 px-4 py-2 text-ctp-text"> <td className="border border-ctp-overlay0 px-4 py-2 text-ctp-text">
{children} {children}
@@ -374,14 +310,8 @@ export default function MdProcessor({
); );
}, },
img({ img({ src, alt }: ComponentPropsWithoutRef<"img">): ReactElement {
src, const resolved = resolveImageSrc(src || "", base);
alt,
}: ComponentPropsWithoutRef<"img">): ReactElement {
const resolved = resolveImageSrc(
src || "",
base,
);
return ( return (
<img <img
@@ -392,7 +322,22 @@ export default function MdProcessor({
/> />
); );
}, },
}} };
return (
<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">
{loading ? (
<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
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, rehypeSanitize]}
components={markdownComponents}
> >
{displayContent} {displayContent}
</ReactMarkdown> </ReactMarkdown>