responsive design, url routing, image support
This commit is contained in:
parent
2ef5765ae2
commit
730533e88e
4 changed files with 110 additions and 9 deletions
components/wiki
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue