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";
|
} 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>
|
||||||
);
|
);
|
||||||
|
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