add github icon and display breadcrumb on docs home page

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 (
     <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) => {
+            {!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>
         </Breadcrumb>
-      )}
+
+        <GithubLink page={page} />
+      </div>
 
       {/* The documentation page title and description */}
       <div className="text-center mb-4">

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 (
     <div className="w-full flex flex-col items-center gap-2 h-full md:flex-row md:items-start">
-      <Search />
+      <Sidebar />
       {children}
     </div>
   );

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 (
+    <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>
+  );
+}

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 (
+    <div className="flex flex-row gap-2 h-full md:flex-col">
+      <Search />
+    </div>
+  );
+}