add github icon and display breadcrumb on docs home page

This commit is contained in:
Lee 2024-04-21 17:39:00 +01:00
parent 738fcb8e24
commit ec27cd9f29
5 changed files with 58 additions and 18 deletions

BIN
public/media/github.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

@ -12,6 +12,8 @@ import {
} from "@/app/components/ui/breadcrumb"; } from "@/app/components/ui/breadcrumb";
import { capitalizeFirstLetter } from "@/app/common/string-utils"; import { capitalizeFirstLetter } from "@/app/common/string-utils";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import { GithubLink } from "@/app/components/docs/github-link";
import { cn } from "@/app/common/utils";
type DocumentationPageParams = { type DocumentationPageParams = {
params: { params: {
@ -56,33 +58,38 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
} }
const slugParts = page.slug.split("/"); const slugParts = page.slug.split("/");
const isHome = slugParts.length == 1;
return ( return (
<div className="w-full h-full px-4 flex flex-col gap-4"> <div className="w-full h-full px-4 flex flex-col gap-4">
{slugParts.length > 1 && ( <div className="flex justify-between">
{/* The breadcrumb for the documentation page */}
<Breadcrumb> <Breadcrumb>
<BreadcrumbList> <BreadcrumbList>
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink href="/docs">Home</BreadcrumbLink> <BreadcrumbLink href={`/docs`}>Home</BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
{slugParts.map((slug, index, array) => { {!isHome &&
const path: string = array.slice(0, index + 1).join("/"); slugParts.map((slug, index, array) => {
const name: string = slug.includes("-") const path: string = array.slice(0, index + 1).join("/");
? slug.split("-").map(capitalizeFirstLetter).join(" ") const name: string = slug.includes("-")
: capitalizeFirstLetter(slug); ? slug.split("-").map(capitalizeFirstLetter).join(" ")
: capitalizeFirstLetter(slug);
return ( return (
<div key={slug} className="flex items-center "> <div key={slug} className="flex items-center ">
<BreadcrumbSeparator className="pr-1.5" /> <BreadcrumbSeparator className="pr-1.5" />
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(name)}</BreadcrumbLink> <BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(name)}</BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
</div> </div>
); );
})} })}
</BreadcrumbList> </BreadcrumbList>
</Breadcrumb> </Breadcrumb>
)}
<GithubLink page={page} />
</div>
{/* The documentation page title and description */} {/* The documentation page title and description */}
<div className="text-center mb-4"> <div className="text-center mb-4">

@ -1,5 +1,6 @@
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import { Search } from "@/app/components/docs/search"; import { Search } from "@/app/components/docs/search";
import { Sidebar } from "@/app/components/docs/sidebar";
export default function RootLayout({ export default function RootLayout({
children, children,
@ -8,7 +9,7 @@ export default function RootLayout({
}>): ReactElement { }>): ReactElement {
return ( return (
<div className="w-full flex flex-col items-center gap-2 h-full md:flex-row md:items-start"> <div className="w-full flex flex-col items-center gap-2 h-full md:flex-row md:items-start">
<Search /> <Sidebar />
{children} {children}
</div> </div>
); );

@ -0,0 +1,22 @@
import { DocsContentMetadata } from "@/app/common/documentation";
import { ReactElement } from "react";
import Image from "next/image";
import Link from "next/link";
type GithubLink = {
/**
* The page to link to.
*/
page: DocsContentMetadata;
};
export function GithubLink({ page }: GithubLink): ReactElement {
return (
<Link
href={`https://git.fascinated.cc/MinecraftUtilities/Frontend/src/branch/master/documentation/${page.slug}.md`}
target="_blank"
>
<Image src="/media/github.png" alt="The GitHub logo" width={24} height={24} className="filter dark:invert" />
</Link>
);
}

@ -0,0 +1,10 @@
import { Search } from "@/app/components/docs/search";
import { ReactElement } from "react";
export function Sidebar(): ReactElement {
return (
<div className="flex flex-row gap-2 h-full md:flex-col">
<Search />
</div>
);
}