add github icon and display breadcrumb on docs home page
This commit is contained in:
parent
738fcb8e24
commit
ec27cd9f29
BIN
public/media/github.png
Normal file
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";
|
||||
import { capitalizeFirstLetter } from "@/app/common/string-utils";
|
||||
import { notFound } from "next/navigation";
|
||||
import { GithubLink } from "@/app/components/docs/github-link";
|
||||
import { cn } from "@/app/common/utils";
|
||||
|
||||
type DocumentationPageParams = {
|
||||
params: {
|
||||
@ -56,33 +58,38 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
|
||||
}
|
||||
|
||||
const slugParts = page.slug.split("/");
|
||||
const isHome = slugParts.length == 1;
|
||||
|
||||
return (
|
||||
<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>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/docs">Home</BreadcrumbLink>
|
||||
<BreadcrumbLink href={`/docs`}>Home</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
{slugParts.map((slug, index, array) => {
|
||||
const path: string = array.slice(0, index + 1).join("/");
|
||||
const name: string = slug.includes("-")
|
||||
? slug.split("-").map(capitalizeFirstLetter).join(" ")
|
||||
: capitalizeFirstLetter(slug);
|
||||
{!isHome &&
|
||||
slugParts.map((slug, index, array) => {
|
||||
const path: string = array.slice(0, index + 1).join("/");
|
||||
const name: string = slug.includes("-")
|
||||
? slug.split("-").map(capitalizeFirstLetter).join(" ")
|
||||
: capitalizeFirstLetter(slug);
|
||||
|
||||
return (
|
||||
<div key={slug} className="flex items-center ">
|
||||
<BreadcrumbSeparator className="pr-1.5" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(name)}</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<div key={slug} className="flex items-center ">
|
||||
<BreadcrumbSeparator className="pr-1.5" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(name)}</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
)}
|
||||
|
||||
<GithubLink page={page} />
|
||||
</div>
|
||||
|
||||
{/* The documentation page title and description */}
|
||||
<div className="text-center mb-4">
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import { Search } from "@/app/components/docs/search";
|
||||
import { Sidebar } from "@/app/components/docs/sidebar";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@ -8,7 +9,7 @@ export default function RootLayout({
|
||||
}>): ReactElement {
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center gap-2 h-full md:flex-row md:items-start">
|
||||
<Search />
|
||||
<Sidebar />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
22
src/app/components/docs/github-link.tsx
Normal file
22
src/app/components/docs/github-link.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
10
src/app/components/docs/sidebar.tsx
Normal file
10
src/app/components/docs/sidebar.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user