Rainnny/RESTfulMC
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Wiki Activity

Make the docs page more responsive
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m12s
Details

Browse Source
This commit is contained in:
Braydon 2024-04-21 12:18:34 -04:00
parent 0f77b9aa68
commit e7bdfe1f65
1 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
View File

@ -38,53 +38,64 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
const splitSlug: string[] = content.slug?.split("/") || [];
return (
<main className="relative pl-7 flex flex-col gap-3.5">
{/* Breadcrumb */}
<Breadcrumb>
<BreadcrumbList className="text-minecraft-green-4">
{["docs", ...splitSlug].map(
(part: string, index: number): ReactElement => (
<div className="flex items-center" key={index}>
<BreadcrumbItem>
<BreadcrumbLink
href={
(index > 0 ? "/docs" : "") +
`/${part}`
}
<main className="px-7 flex flex-col gap-2">
{/* Header */}
<div className="flex justify-between items-center">
<div className="flex flex-col gap-3">
{/* Breadcrumb */}
<Breadcrumb>
<BreadcrumbList className="text-minecraft-green-4">
{["docs", ...splitSlug].map(
(part: string, index: number): ReactElement => (
<div
className="flex items-center"
key={index}
>
{capitalize(part)}
</BreadcrumbLink>
</BreadcrumbItem>
{index < splitSlug.length && (
<BreadcrumbSeparator className="pl-1.5" />
)}
</div>
)
)}
</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>
<BreadcrumbItem>
<BreadcrumbLink
href={
(index > 0 ? "/docs" : "") +
`/${part}`
}
>
{capitalize(part)}
</BreadcrumbLink>
</BreadcrumbItem>
{index < splitSlug.length && (
<BreadcrumbSeparator className="pl-1.5" />
)}
</div>
)
)}
</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 */}
<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>
);
};