Make the docs page more responsive
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m12s
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m12s
This commit is contained in:
parent
0f77b9aa68
commit
e7bdfe1f65
@ -38,53 +38,64 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
|
|||||||
const splitSlug: string[] = content.slug?.split("/") || [];
|
const splitSlug: string[] = content.slug?.split("/") || [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="relative pl-7 flex flex-col gap-3.5">
|
<main className="px-7 flex flex-col gap-2">
|
||||||
{/* Breadcrumb */}
|
{/* Header */}
|
||||||
<Breadcrumb>
|
<div className="flex justify-between items-center">
|
||||||
<BreadcrumbList className="text-minecraft-green-4">
|
<div className="flex flex-col gap-3">
|
||||||
{["docs", ...splitSlug].map(
|
{/* Breadcrumb */}
|
||||||
(part: string, index: number): ReactElement => (
|
<Breadcrumb>
|
||||||
<div className="flex items-center" key={index}>
|
<BreadcrumbList className="text-minecraft-green-4">
|
||||||
<BreadcrumbItem>
|
{["docs", ...splitSlug].map(
|
||||||
<BreadcrumbLink
|
(part: string, index: number): ReactElement => (
|
||||||
href={
|
<div
|
||||||
(index > 0 ? "/docs" : "") +
|
className="flex items-center"
|
||||||
`/${part}`
|
key={index}
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{capitalize(part)}
|
<BreadcrumbItem>
|
||||||
</BreadcrumbLink>
|
<BreadcrumbLink
|
||||||
</BreadcrumbItem>
|
href={
|
||||||
{index < splitSlug.length && (
|
(index > 0 ? "/docs" : "") +
|
||||||
<BreadcrumbSeparator className="pl-1.5" />
|
`/${part}`
|
||||||
)}
|
}
|
||||||
</div>
|
>
|
||||||
)
|
{capitalize(part)}
|
||||||
)}
|
</BreadcrumbLink>
|
||||||
</BreadcrumbList>
|
</BreadcrumbItem>
|
||||||
</Breadcrumb>
|
{index < splitSlug.length && (
|
||||||
{/* Publish Date */}
|
<BreadcrumbSeparator className="pl-1.5" />
|
||||||
<p className="text-zinc-400 pointer-events-none">
|
)}
|
||||||
Published on{" "}
|
</div>
|
||||||
{moment(content.published, "MM-DD-YYYY").format("MMMM Do YYYY")}
|
)
|
||||||
</p>
|
)}
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
|
||||||
|
{/* Publish Date */}
|
||||||
|
<p className="text-zinc-400 pointer-events-none">
|
||||||
|
Published on{" "}
|
||||||
|
{moment(content.published, "MM-DD-YYYY").format(
|
||||||
|
"MMMM Do YYYY"
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* View on Git */}
|
||||||
|
<Link
|
||||||
|
href={`https://git.rainnny.club/Rainnny/RESTfulMC/src/branch/master/Frontend/docs/${content.slug}${content.extension}`}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/media/github-white-logo.svg"
|
||||||
|
alt="GitHub Logo"
|
||||||
|
width={26}
|
||||||
|
height={26}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<CustomMDX source={content.content} />
|
<CustomMDX source={content.content} />
|
||||||
|
|
||||||
{/* View on Git */}
|
|
||||||
<Link
|
|
||||||
className="absolute left-10 bottom-7"
|
|
||||||
href={`https://git.rainnny.club/Rainnny/RESTfulMC/src/branch/master/Frontend/docs/${content.slug}${content.extension}`}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src="/media/github-white-logo.svg"
|
|
||||||
alt="GitHub Logo"
|
|
||||||
width={26}
|
|
||||||
height={26}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user