mirror of
https://git.aramjonghu.dev/AramJonghu/aramjonghu-site.git
synced 2026-09-14 18:13:30 +02:00
chore(nesting): reduced nesting
This commit is contained in:
@@ -52,7 +52,10 @@ export default function Header({ theme }: HeaderProps) {
|
||||
</nav>
|
||||
|
||||
<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" ? "" : ""}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
useMemo,
|
||||
type ComponentPropsWithoutRef,
|
||||
@@ -12,6 +11,25 @@ import rehypeRaw from "rehype-raw";
|
||||
import rehypeSanitize from "rehype-sanitize";
|
||||
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 => {
|
||||
if (!repoUrl) return repoUrl;
|
||||
|
||||
@@ -112,20 +130,7 @@ export default function MdProcessor({
|
||||
const loading = useRemote && fetchState.url !== repoUrl;
|
||||
const displayContent = directContent ?? fetchState.content;
|
||||
|
||||
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={{
|
||||
const markdownComponents = {
|
||||
code({
|
||||
className,
|
||||
children,
|
||||
@@ -133,8 +138,7 @@ export default function MdProcessor({
|
||||
}: ComponentPropsWithoutRef<"code">): ReactElement {
|
||||
const isBlock =
|
||||
className ||
|
||||
(typeof children === "string" &&
|
||||
children.includes("\n"));
|
||||
(typeof children === "string" && children.includes("\n"));
|
||||
|
||||
if (isBlock) {
|
||||
return (
|
||||
@@ -154,12 +158,8 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
pre({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"pre">): ReactElement {
|
||||
const codeChild = Array.isArray(children)
|
||||
? children[0]
|
||||
: children;
|
||||
pre({ children }: ComponentPropsWithoutRef<"pre">): ReactElement {
|
||||
const codeChild = Array.isArray(children) ? children[0] : children;
|
||||
|
||||
let lang = "";
|
||||
let code = "";
|
||||
@@ -170,17 +170,12 @@ export default function MdProcessor({
|
||||
"props" in codeChild
|
||||
) {
|
||||
const el = codeChild as {
|
||||
props: {
|
||||
className?: string;
|
||||
children?: string;
|
||||
};
|
||||
props: { className?: string; children?: string };
|
||||
};
|
||||
const cls = el.props?.className;
|
||||
const match = cls?.match(/language-(\w+)/);
|
||||
if (match) lang = match[1];
|
||||
if (
|
||||
typeof el.props?.children === "string"
|
||||
) {
|
||||
if (typeof el.props?.children === "string") {
|
||||
code = el.props.children;
|
||||
}
|
||||
}
|
||||
@@ -197,8 +192,6 @@ export default function MdProcessor({
|
||||
})
|
||||
: null;
|
||||
|
||||
const copyRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
if (highlighted) {
|
||||
return (
|
||||
<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}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
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>
|
||||
<CopyButton code={code} />
|
||||
<div
|
||||
className={`overflow-x-auto text-sm p-4 ${lang ? "pt-7" : ""}`}
|
||||
dangerouslySetInnerHTML={{
|
||||
@@ -244,15 +212,16 @@ export default function MdProcessor({
|
||||
}
|
||||
|
||||
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}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
h1({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"h1">): ReactElement {
|
||||
h1({ children }: ComponentPropsWithoutRef<"h1">): ReactElement {
|
||||
return (
|
||||
<h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green">
|
||||
{children}
|
||||
@@ -260,9 +229,7 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
h2({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"h2">): ReactElement {
|
||||
h2({ children }: ComponentPropsWithoutRef<"h2">): ReactElement {
|
||||
return (
|
||||
<h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green">
|
||||
{children}
|
||||
@@ -270,9 +237,7 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
h3({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"h3">): ReactElement {
|
||||
h3({ children }: ComponentPropsWithoutRef<"h3">): ReactElement {
|
||||
return (
|
||||
<h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3">
|
||||
{children}
|
||||
@@ -280,46 +245,23 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
p({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"p">): ReactElement {
|
||||
return (
|
||||
<p className="mb-4 text-ctp-text">
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
p({ children }: ComponentPropsWithoutRef<"p">): ReactElement {
|
||||
return <p className="mb-4 text-ctp-text">{children}</p>;
|
||||
},
|
||||
|
||||
ul({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"ul">): ReactElement {
|
||||
return (
|
||||
<ul className="list-disc pl-6 mb-4">
|
||||
{children}
|
||||
</ul>
|
||||
);
|
||||
ul({ children }: ComponentPropsWithoutRef<"ul">): ReactElement {
|
||||
return <ul className="list-disc pl-6 mb-4">{children}</ul>;
|
||||
},
|
||||
|
||||
ol({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"ol">): ReactElement {
|
||||
return (
|
||||
<ol className="list-decimal pl-6 mb-4">
|
||||
{children}
|
||||
</ol>
|
||||
);
|
||||
ol({ children }: ComponentPropsWithoutRef<"ol">): ReactElement {
|
||||
return <ol className="list-decimal pl-6 mb-4">{children}</ol>;
|
||||
},
|
||||
|
||||
li({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"li">): ReactElement {
|
||||
li({ children }: ComponentPropsWithoutRef<"li">): ReactElement {
|
||||
return <li className="mb-1">{children}</li>;
|
||||
},
|
||||
|
||||
a({
|
||||
children,
|
||||
href,
|
||||
}: ComponentPropsWithoutRef<"a">): ReactElement {
|
||||
a({ children, href }: ComponentPropsWithoutRef<"a">): ReactElement {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
@@ -342,9 +284,7 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
table({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"table">): ReactElement {
|
||||
table({ children }: ComponentPropsWithoutRef<"table">): ReactElement {
|
||||
return (
|
||||
<div className="overflow-x-auto my-4">
|
||||
<table className="w-full border-collapse border border-ctp-overlay0">
|
||||
@@ -354,9 +294,7 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
th({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"th">): ReactElement {
|
||||
th({ children }: ComponentPropsWithoutRef<"th">): ReactElement {
|
||||
return (
|
||||
<th className="border border-ctp-overlay0 bg-ctp-surface0 px-4 py-2 text-left font-bold text-ctp-lavender">
|
||||
{children}
|
||||
@@ -364,9 +302,7 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
td({
|
||||
children,
|
||||
}: ComponentPropsWithoutRef<"td">): ReactElement {
|
||||
td({ children }: ComponentPropsWithoutRef<"td">): ReactElement {
|
||||
return (
|
||||
<td className="border border-ctp-overlay0 px-4 py-2 text-ctp-text">
|
||||
{children}
|
||||
@@ -374,14 +310,8 @@ export default function MdProcessor({
|
||||
);
|
||||
},
|
||||
|
||||
img({
|
||||
src,
|
||||
alt,
|
||||
}: ComponentPropsWithoutRef<"img">): ReactElement {
|
||||
const resolved = resolveImageSrc(
|
||||
src || "",
|
||||
base,
|
||||
);
|
||||
img({ src, alt }: ComponentPropsWithoutRef<"img">): ReactElement {
|
||||
const resolved = resolveImageSrc(src || "", base);
|
||||
|
||||
return (
|
||||
<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}
|
||||
</ReactMarkdown>
|
||||
|
||||
Reference in New Issue
Block a user