add docs searching

src/app/(pages)/api/docs/search/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { searchDocs } from "@/app/common/documentation";
+
+export async function GET(request: NextRequest) {
+  // The query to search for
+  const query: string | null = request.nextUrl.searchParams.get("query");
+
+  // No query provided
+  if (!query) {
+    return new NextResponse(JSON.stringify({ error: "No query provided" }), { status: 400 });
+  }
+
+  // Don't allow queries less than 3 characters
+  if (query.length < 3) {
+    return new NextResponse(JSON.stringify({ error: "Query must be at least 3 characters" }), { status: 400 });
+  }
+
+  // Return the search results
+  return new NextResponse(JSON.stringify(searchDocs(query)));
+}

src/app/(pages)/docs/[[...slug]]/page.tsx

@@ -2,19 +2,22 @@ import { CustomMDX } from "@/app/components/mdx-components";
 import { Metadata } from "next";
 import { generateEmbed } from "@/app/common/embed";
 import { Title } from "@/app/components/title";
-import { getDocContent, getDocsContent, getDocsDirectories, getMetadata } from "@/app/common/documentation";
+import { getDocContent, getDocsContent } from "@/app/common/documentation";
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
-  BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/app/components/ui/breadcrumb";
 import { capitalizeFirstLetter } from "@/app/common/string-utils";
+import { notFound } from "next/navigation";
 
 type DocumentationPageParams = {
   params: {
+    /**
+     * The slug for the documentation page.
+     */
     slug?: string[];
   };
 };
@@ -49,18 +52,13 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
 
   // Page was not found, show an error page
   if (!page) {
-    return (
-      <div className="text-center flex flex-col gap-2">
-        <h1 className="text-red-400 text-2xl">Not Found</h1>
-        <p>The page you are looking for was not found.</p>
-      </div>
-    );
+    return notFound();
   }
 
   const slugParts = page.slug.split("/");
 
   return (
-    <div className="w-full px-4 flex flex-col gap-4">
+    <div className="w-full h-full px-4 flex flex-col gap-4">
       {slugParts.length > 1 && (
         <Breadcrumb>
           <BreadcrumbList>

src/app/(pages)/docs/layout.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from "react";
+import { Search } from "@/app/components/docs/search";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>): ReactElement {
+  return (
+    <div className="w-full flex flex-col items-center gap-2 h-full md:flex-row md:items-start">
+      <Search />
+      {children}
+    </div>
+  );
+}

src/app/(pages)/not-found.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+import { Button } from "@/app/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <div className="flex text-center flex-col gap-4">
+      <div>
+        <h2 className="text-red-400 font-2xl font-semibold">Not Found</h2>
+        <p>The page you are looking for was not found.</p>
+      </div>
+      <Link href="/">
+        <Button>Return Home</Button>
+      </Link>
+    </div>
+  );
+}