diff --git a/public/media/github.png b/public/media/github.png new file mode 100644 index 0000000..c61095c Binary files /dev/null and b/public/media/github.png differ diff --git a/src/app/(pages)/docs/[[...slug]]/page.tsx b/src/app/(pages)/docs/[[...slug]]/page.tsx index 7cdf974..21e6bf8 100644 --- a/src/app/(pages)/docs/[[...slug]]/page.tsx +++ b/src/app/(pages)/docs/[[...slug]]/page.tsx @@ -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 (
- {slugParts.length > 1 && ( +
+ {/* The breadcrumb for the documentation page */} - Home + Home - {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 ( -
- - - {capitalizeFirstLetter(name)} - -
- ); - })} + return ( +
+ + + {capitalizeFirstLetter(name)} + +
+ ); + })}
- )} + + +
{/* The documentation page title and description */}
diff --git a/src/app/(pages)/docs/layout.tsx b/src/app/(pages)/docs/layout.tsx index c5d042b..90653f7 100644 --- a/src/app/(pages)/docs/layout.tsx +++ b/src/app/(pages)/docs/layout.tsx @@ -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 (
- + {children}
); diff --git a/src/app/components/docs/github-link.tsx b/src/app/components/docs/github-link.tsx new file mode 100644 index 0000000..78a7fb6 --- /dev/null +++ b/src/app/components/docs/github-link.tsx @@ -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 ( + + The GitHub logo + + ); +} diff --git a/src/app/components/docs/sidebar.tsx b/src/app/components/docs/sidebar.tsx new file mode 100644 index 0000000..aeb5f46 --- /dev/null +++ b/src/app/components/docs/sidebar.tsx @@ -0,0 +1,10 @@ +import { Search } from "@/app/components/docs/search"; +import { ReactElement } from "react"; + +export function Sidebar(): ReactElement { + return ( +
+ +
+ ); +}