responsive design, url routing, image support

This commit is contained in:
3zachm 2023-02-07 01:49:06 -08:00
parent 2ef5765ae2
commit 730533e88e
4 changed files with 110 additions and 9 deletions

View file

@ -3,14 +3,21 @@ import RenderMarkdown from "./RenderMarkdown";
interface PageBodyProps {
children: string;
currentLanguage: string;
path: string;
}
export default function PageBody({ children }: PageBodyProps) {
export default function PageBody(props: PageBodyProps) {
return (
<div className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl">
<div className={mdStyles["markdown-body"]}>
<div className="text-left">
<RenderMarkdown>{children}</RenderMarkdown>
<RenderMarkdown
path={props.path}
currentLanguage={props.currentLanguage}
>
{props.children}
</RenderMarkdown>
</div>
</div>
</div>

View file

@ -7,24 +7,54 @@ import remarkGfm from "remark-gfm";
interface RenderMarkdownProps {
children: string;
path: string;
currentLanguage: string;
}
export default function RenderMarkdown({ children }: RenderMarkdownProps) {
export default function RenderMarkdown(pageprops: RenderMarkdownProps) {
return (
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, rehypeHighlight, rehypeSlug]}
components={{
a: ({ node, ...props }) => {
// if the link is internal, reformat it; if it ends with a slash, do not apply this
let href = props.href as string;
if (!href.endsWith("/") && !href.startsWith("http")) {
if (href.startsWith("/wiki/")) {
href = `/wiki/${pageprops.currentLanguage}${href.slice(5)}`;
} else {
// if single relative
href = `/wiki/${pageprops.currentLanguage}/${pageprops.path}/${href}`;
}
}
return (
<Link legacyBehavior href={props.href as string}>
<a>{props.children ? props.children[0] : props.href}</a>
<Link legacyBehavior href={href as string}>
<a>{props.children ? props.children[0] : href}</a>
</Link>
);
},
img: ({ node, ...props }) => {
// if image is internal (relative), prefix it with the current page's path
let src = props.src as string;
if (!src.startsWith("http") && !src.startsWith("/")) {
src = `/img/wiki/${pageprops.path}/${src}`;
}
return (
<div className="flex w-full flex-col items-center justify-center">
<img
className="mb-2"
src={src}
alt={props.alt as string}
title={props.title as string}
/>
<p> {props.title as string} </p>
</div>
);
},
}}
>
{children}
{pageprops.children}
</ReactMarkdown>
);
}