Add searching to the docs

Frontend/docs/home.md

@@ -4,17 +4,131 @@ published: '04-19-2024'
 summary: 'Get started with RESTfulMC! duis numquam himenaeos lectus quisque assueverit aperiri'
 ---
 
-# Get started with RESTfulMC!
-Welcome to the RESTfulMC documentation! feugait pertinax duis laudem vix integer tempus conubia graece interpretaris
+[//]: # (# Get started with RESTfulMC!)
 
-## Table of Contents
-- [Get started with RESTfulMC!](#get-started-with-restfulmc)
-  - [Features](#features)
+[//]: # (Welcome to the RESTfulMC documentation! feugait pertinax duis laudem vix integer tempus conubia graece interpretaris)
 
-## Features
-Some of the core features of RESTfulMC include:
+[//]: # ()
+[//]: # (## Table of Contents)
 
-|                 Feature  |                                                       Description |
-|-------------------------:|------------------------------------------------------------------:|
-| [Player Lookup](/player) | praesent omittam mollis maximus has pretium mediocritatem eripuit |
-| [Server Lookup](/server) | sapien faucibus numquam ponderum utamur himenaeos menandri tation |
+[//]: # (- [Get started with RESTfulMC!](#get-started-with-restfulmc))
+
+[//]: # (  - [Features](#features))
+
+[//]: # ()
+[//]: # (## Features)
+
+[//]: # (Some of the core features of RESTfulMC include:)
+
+[//]: # ()
+[//]: # (|                 Feature  |                                                       Description |)
+
+[//]: # (|-------------------------:|------------------------------------------------------------------:|)
+
+[//]: # (| [Player Lookup](/player) | praesent omittam mollis maximus has pretium mediocritatem eripuit |)
+
+[//]: # (| [Server Lookup](/server) | sapien faucibus numquam ponderum utamur himenaeos menandri tation |)
+# Heading level 1
+I really like using Markdown.
+
+```typescript
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+/**
+ * The provider of themes!!
+ */
+const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => (
+    <NextThemesProvider {...props}>{children}</NextThemesProvider>
+);
+export default ThemeProvider;
+```
+
+
+I think I'll use it to format all of my documents from now on.
+
+## Heading level 2
+### Heading level 3
+#### Heading level 4
+##### Heading level 5
+###### Heading level 6
+
+Heading level 1
+===============
+
+Heading level 2
+---------------
+
+I just love **bold text**.
+I just love __bold text__.
+
+This text is ***really important***.
+This text is ___really important___.
+This text is __*really important*__.
+This text is **_really important_**.
+This is really***very***important text.
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+>
+> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+>
+>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
+
+> #### The quarterly results look great!
+>
+> - Revenue was off the chart.
+> - Profits were higher than ever.
+    >
+    >  *Everything* is going according to **plan**.
+
+1. First item
+2. Second item
+3. Third item
+4. Fourth item 
+
+1. First item
+2. Second item
+3. Third item
+   1. Indented item
+   2. Indented item
+4. Fourth item 
+
+- First item
+- Second item
+- Third item
+- Fourth item 
+
+* First item
+* Second item
+* Third item
+* Fourth item 
+
++ First item
++ Second item
++ Third item
++ Fourth item 
+
+- First item
+- Second item
+- Third item
+  - Indented item
+  - Indented item
+- Fourth item 
+
+At the command prompt, type `nano`.
+
+``Use `code` in your Markdown file.``
+
+
+
+***
+
+---
+
+_________________
+
+My favorite search engine is [Duck Duck Go](https://duckduckgo.com).

Frontend/docs/server/query.md

@@ -0,0 +1,8 @@
+---
+title: 'Query a server'
+published: '04-19-2024'
+summary: 'utinam delicata nominavi ornare eirmod pharetra decore interesset necessitatibus.'
+---
+
+# bob
+HELLO JOHN

Frontend/package.json

@@ -24,6 +24,7 @@
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.2",
     "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-scroll-area": "^1.0.5",
@@ -36,6 +37,7 @@
     "class-variance-authority": "^0.7.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
+    "fuse.js": "^7.0.0",
     "lucide-react": "^0.372.0",
     "moment": "^2.30.1",
     "next": "14.2.2",

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

@@ -71,7 +71,7 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
                     </Breadcrumb>
 
                     {/* Publish Date */}
-                    <p className="text-zinc-400 pointer-events-none">
+                    <p className="text-zinc-400 select-none pointer-events-none">
                         Published on{" "}
                         {moment(content.published, "MM-DD-YYYY").format(
                             "MMMM Do YYYY"

Frontend/src/app/(pages)/mojang/page.tsx

@@ -38,7 +38,7 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
             {/* Header */}
             <h1
                 className={cn(
-                    "mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
+                    "mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
                     minecrafter.className
                 )}
             >

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

@@ -33,7 +33,7 @@ const PlayerPage = async ({ params }: PageProps): Promise<ReactElement> => {
             <div className="flex flex-col gap-7">
                 <h1
                     className={cn(
-                        "mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
+                        "mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
                         minecrafter.className
                     )}
                 >

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

@@ -47,7 +47,7 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
             <div className="flex flex-col gap-7">
                 <h1
                     className={cn(
-                        "mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
+                        "mt-20 text-6xl text-minecraft-green-3 text-center select-none pointer-events-none",
                         minecrafter.className
                     )}
                 >

Frontend/src/app/api/docs/search/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+import { DOCS_SEARCH_INDEX } from "@/lib/search";
+import { FuseResult } from "fuse.js";
+
+export const GET = async (request: NextRequest): Promise<NextResponse> => {
+    const query: string | null = request.nextUrl.searchParams.get("query"); // The query to search for
+
+    // Ensure the query is valid
+    if (!query || query.length < 3 || query.length > 64) {
+        return new NextResponse(
+            JSON.stringify({ error: "Invalid query given" }),
+            { status: 400 }
+        );
+    }
+
+    // Return the results of the search
+    return new NextResponse(
+        JSON.stringify(
+            DOCS_SEARCH_INDEX.search(query, { limit: 5 }).map(
+                (result: FuseResult<DocsContentMetadata>) => {
+                    return {
+                        slug: result.item.slug,
+                        title: result.item.title,
+                        summary: result.item.summary,
+                    };
+                }
+            )
+        )
+    );
+};

Frontend/src/app/common/search.ts

@@ -0,0 +1,14 @@
+import Fuse from "fuse.js";
+import { getDocsContent } from "@/lib/mdxUtils";
+
+/**
+ * The fuse index for searching the docs.
+ */
+export const DOCS_SEARCH_INDEX: Fuse<DocsContentMetadata> = new Fuse(
+    getDocsContent(),
+    {
+        keys: ["title", "summary"],
+        includeScore: true,
+        threshold: 0.5,
+    }
+);

Frontend/src/app/components/counter.tsx

@@ -31,6 +31,7 @@ type CounterProps = {
 /**
  * A counter component.
  *
+ * @param name the name of the counter
  * @param amount the amount to count up to
  * @param duration the optional duration of the count up
  * @returns the counter jsx

Frontend/src/app/components/docs/search/search-dialog.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+    AnchorHTMLAttributes,
+    ChangeEvent,
+    HTMLAttributes,
+    ReactElement,
+    useState,
+} from "react";
+import {
+    DialogClose,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import Link from "next/link";
+
+/**
+ * Content for the search dialog.
+ *
+ * @return the content jsx
+ */
+const SearchDialogContent = (): ReactElement => {
+    const [label, setLabel] = useState<string | undefined>(undefined);
+    const [results, setResults] = useState<DocsContentMetadata[] | undefined>(
+        undefined
+    ); // The search results
+
+    /**
+     * Search the docs with the given query.
+     */
+    const search = async (
+        event: ChangeEvent<HTMLInputElement>
+    ): Promise<void> => {
+        const query: string = event.target.value; // Get the query to search for
+        const tooShort: boolean = query.length < 3;
+
+        // No query or too short
+        if (!query || tooShort || query.length > 64) {
+            // Display warning
+            if (query) {
+                setLabel(
+                    tooShort
+                        ? "Please enter at least 3 characters"
+                        : "Your input is too long"
+                );
+            }
+            setResults(undefined);
+            return;
+        }
+        const response: Response = await fetch(
+            `/api/docs/search?query=${query}`
+        ); // Search the docs
+        setLabel(undefined); // Clear the label
+        setResults((await response.json()) as DocsContentMetadata[]);
+    };
+
+    // Render the contents
+    return (
+        <>
+            {/* Header */}
+            <DialogHeader className="flex flex-col gap-2">
+                <DialogTitle>Quick Search</DialogTitle>
+                <DialogDescription>
+                    Quickly find the documentation you&apos;re looking for by
+                    typing in a few terms.
+                </DialogDescription>
+
+                {/* Query Input */}
+                <div className="space-y-1.5">
+                    <Label htmlFor="search">
+                        {label || "Start typing to get started"}
+                    </Label>
+                    <Input
+                        type="search"
+                        name="search"
+                        placeholder="Query..."
+                        onChange={search}
+                    />
+                </div>
+            </DialogHeader>
+
+            {/* Results */}
+            <div className="flex flex-col gap-2">
+                {results?.length === 0 && (
+                    <p className="text-red-500">No Results</p>
+                )}
+                {results?.map(
+                    (
+                        result: DocsContentMetadata,
+                        index: number
+                    ): ReactElement => (
+                        <SearchResultEntry key={index} result={result} />
+                    )
+                )}
+            </div>
+
+            {/* Footer */}
+            <DialogFooter className="sm:justify-start">
+                <DialogClose asChild>
+                    <Button type="button" variant="secondary">
+                        Close
+                    </Button>
+                </DialogClose>
+            </DialogFooter>
+        </>
+    );
+};
+
+/**
+ * The props for a search result entry.
+ */
+type SearchResultEntryProps = {
+    /**
+     * The search result to display.
+     */
+    result: DocsContentMetadata;
+};
+
+/**
+ * A search result entry.
+ *
+ * @param result the result to display
+ * @param props the additional props
+ * @return the result jsx
+ */
+const SearchResultEntry = ({
+    result,
+    ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> &
+    SearchResultEntryProps): ReactElement => (
+    <Link
+        className="p-3 flex flex-col gap-1.5 bg-muted rounded-xl"
+        href={`/docs/${result.slug}`}
+        {...props}
+    >
+        <h1 className="font-semibold text-minecraft-green-4">{result.title}</h1>
+        <p className="font-light text-zinc-200">{result.summary}</p>
+    </Link>
+);
+
+export default SearchDialogContent;

Frontend/src/app/components/docs/search/search-input.tsx

@@ -0,0 +1,37 @@
+import { ReactElement } from "react";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import SearchDialogContent from "@/components/docs/search/search-dialog";
+
+/**
+ * The quick search component.
+ *
+ * @return the search jsx
+ */
+const QuickSearch = (): ReactElement => (
+    <Dialog>
+        <DialogTrigger>
+            {/* Button to open search */}
+            <div className="absolute top-2.5 left-3 z-10">
+                <MagnifyingGlassIcon
+                    className="absolute"
+                    width={22}
+                    height={22}
+                />
+            </div>
+
+            <Input
+                className="pl-10"
+                type="search"
+                name="search"
+                placeholder="Quick search..."
+                readOnly
+            />
+        </DialogTrigger>
+        <DialogContent>
+            <SearchDialogContent />
+        </DialogContent>
+    </Dialog>
+);
+export default QuickSearch;

Frontend/src/app/components/docs/sidebar.tsx

@@ -1,10 +1,10 @@
 import { ReactElement } from "react";
-import { Input } from "@/components/ui/input";
-import { getDocsContent } from "@/lib/mdxUtils";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { capitalize } from "@/lib/stringUtils";
 import { minecrafter } from "@/font/fonts";
+import { getDocsContent } from "@/lib/mdxUtils";
+import QuickSearch from "@/components/docs/search/search-input";
 
 /**
  * The sidebar for the docs page.
@@ -23,13 +23,8 @@ const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
     return (
         <div className="hidden h-full px-3 py-5 xl:flex flex-col items-center">
             <div className="fixed w-56 flex flex-col gap-5">
-                {/* Search */}
-                <Input
-                    type="search"
-                    name="search"
-                    placeholder="Quick search..."
-                    disabled
-                />
+                {/* Quick Search */}
+                <QuickSearch />
 
                 {/* Links */}
                 <div className="flex flex-col gap-7">
@@ -45,7 +40,7 @@ const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
                                 {/* Category */}
                                 <h1
                                     className={cn(
-                                        "text-xl text-minecraft-green-4",
+                                        "text-xl text-minecraft-green-4 select-none pointer-events-none",
                                         minecrafter.className
                                     )}
                                 >

Frontend/src/app/components/footer.tsx

@@ -21,7 +21,7 @@ const Footer = (): ReactElement => (
     >
         <div className="xl:px-40 pb-14 md:pb-0 flex flex-col md:flex-row justify-around items-center z-50 w-full h-full transition-all transform-gpu">
             {/* Branding */}
-            <div className="flex flex-col justify-center pointer-events-none">
+            <div className="flex flex-col justify-center select-none pointer-events-none">
                 {/* Logo & Site Name */}
                 <div className="flex gap-7 items-center">
                     <Image
@@ -50,7 +50,7 @@ const Footer = (): ReactElement => (
                             {/* Header */}
                             <h1
                                 className={cn(
-                                    "text-2xl xs:text-3xl text-minecraft-green-3 pointer-events-none",
+                                    "text-2xl xs:text-3xl text-minecraft-green-3 select-none pointer-events-none",
                                     minecrafter.className
                                 )}
                             >

Frontend/src/app/components/landing/hero.tsx

@@ -13,7 +13,7 @@ import { ReactElement } from "react";
  */
 const Hero = (): ReactElement => (
     <div className="pt-56 pb-40 flex flex-col gap-8 justify-center items-center">
-        <div className="flex flex-col gap-4 items-center text-center pointer-events-none">
+        <div className="flex flex-col gap-4 items-center text-center select-none pointer-events-none">
             {/* Title */}
             <h1
                 className={cn(

Frontend/src/app/components/landing/statistic-counters.tsx

@@ -8,7 +8,7 @@ import { ReactElement } from "react";
  */
 const StatisticCounters = (): ReactElement => (
     <div className="py-56 pb-80 flex justify-center items-center">
-        <div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-24 pointer-events-none">
+        <div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-24 select-none pointer-events-none">
             <Counter name="Testing" amount={1_000_000} />
             <Counter name="Testing" amount={1_000_000} />
             <Counter name="Testing" amount={1_000_000} />

Frontend/src/app/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-1.5 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};

Frontend/src/app/not-found.tsx

@@ -9,7 +9,7 @@ import { ReactElement } from "react";
  * @returns the page jsx
  */
 const NotFoundPage = (): ReactElement => (
-    <main className="h-screen flex flex-col gap-3 justify-center items-center text-center pointer-events-none">
+    <main className="h-screen flex flex-col gap-3 justify-center items-center text-center select-none pointer-events-none">
         {/* Creeper */}
         <Creeper />