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("/") || []; 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>
); );
}; };