Begin on the docs page design

Frontend/config.json

@@ -57,6 +57,7 @@
             "Mojang Status": "/mojang"
         },
         "Resources": {
+            "Documentation": "/docs",
             "Source Code": "https://github.com/Rainnny7/RESTfulMC",
             "Wiki": "https://git.rainnny.club/Rainnny/RESTfulMC/wiki",
             "SwaggerUI": "https://api.restfulmc.cc/swagger-ui.html"

Frontend/docs/home.md

@@ -0,0 +1,20 @@
+---
+title: 'Home'
+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
+
+## Table of Contents
+* [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 interesset adversarium inceptos tempor placerat deserunt tritani |
+| [Server Lookup](/server) |     sapien faucibus numquam ponderum utamur himenaeos menandri tation regione integer aliquam qualisque equidem euismod tortor     |

Frontend/docs/home.mdx

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

Frontend/package.json

@@ -11,6 +11,12 @@
     "start": "next start",
     "lint": "next lint"
   },
+  "overrides": {
+    "remark-mdx": "3.0.0",
+    "unified": "11.0.4",
+    "remark-parse": "11.0.0",
+    "mdast-util-frontmatter": "2.0.1"
+  },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^3.3.4",
@@ -20,6 +26,7 @@
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
@@ -30,6 +37,7 @@
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
     "lucide-react": "^0.372.0",
+    "moment": "^2.30.1",
     "next": "14.2.2",
     "next-plausible": "^3.12.0",
     "next-themes": "^0.3.0",
@@ -38,6 +46,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "remark-gfm": "^4.0.0",
+    "remark-mdx": "3.0.0",
     "remote-mdx": "^0.0.4",
     "restfulmc-lib": "^1.1.3",
     "shadcn-ui": "0.8.0",

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

@@ -2,6 +2,7 @@ import { ReactElement } from "react";
 import { getDocsContent } from "@/lib/mdxUtils";
 import { PageProps } from "@/types/page";
 import { notFound } from "next/navigation";
+import moment from "moment";
 
 import {
     Breadcrumb,
@@ -11,7 +12,7 @@ import {
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { capitalize } from "@/lib/stringUtils";
-import { CustomMDX } from "@/mdx-components";
+import { CustomMDX } from "@/components/mdx";
 
 /**
  * The page to display content
@@ -35,7 +36,7 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
     const splitSlug: string[] = content.slug?.split("/") || [];
 
     return (
-        <main>
+        <main className="pl-7 flex flex-col gap-3.5">
             {/* Breadcrumb */}
             <Breadcrumb>
                 <BreadcrumbList className="text-minecraft-green-4">
@@ -61,6 +62,12 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
                 </BreadcrumbList>
             </Breadcrumb>
 
+            {/* Publish Date */}
+            <p className="text-zinc-400 pointer-events-none">
+                Published on{" "}
+                {moment(content.published, "MM-DD-YYYY").format("MMMM Do YYYY")}
+            </p>
+
             {/* Content */}
             <CustomMDX source={content.content} />
         </main>

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

@@ -12,8 +12,8 @@ const DocumentationLayout = ({
 }: Readonly<{
     children: ReactNode;
 }>): ReactElement => (
-    <section className="h-screen pt-64 flex justify-center">
-        <div className="flex gap-10">
+    <section className="min-h-screen py-28 flex justify-center">
+        <div className="flex flex-wrap gap-32 divide-x-2">
             <Sidebar />
             {children}
         </div>

Frontend/src/app/common/mdxUtils.ts

@@ -1,6 +1,6 @@
 import * as fs from "node:fs";
-import path from "node:path";
 import { Stats } from "node:fs";
+import path from "node:path";
 
 /**
  * The regex to match for metadata.

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

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { Input } from "@/components/ui/input";
+import { getDocsContent } from "@/lib/mdxUtils";
 
 /**
  * The sidebar for the docs page.
@@ -7,14 +8,28 @@ import { Input } from "@/components/ui/input";
  * @returns the sidebar jsx
  */
 const Sidebar = (): ReactElement => (
-    <div className="w-60 h-80 px-3 py-5 flex justify-center bg-muted border border-zinc-700/70 rounded-lg">
-        {/* Search */}
-        <Input
-            type="search"
-            name="search"
-            placeholder="Quick search..."
-            disabled
-        />
+    <div className="hidden h-full px-3 py-5 xl:flex flex-col items-center">
+        <div className="fixed w-56 flex flex-col gap-2.5">
+            {/* Search */}
+            <Input
+                type="search"
+                name="search"
+                placeholder="Quick search..."
+                disabled
+            />
+
+            {/* Links */}
+            <div className="flex flex-col gap-1">
+                {getDocsContent().map(
+                    (
+                        content: DocsContentMetadata,
+                        index: number
+                    ): ReactElement => (
+                        <div key={index}>{content.title}</div>
+                    )
+                )}
+            </div>
+        </div>
     </div>
 );
 export default Sidebar;

Frontend/src/app/components/mdx.tsx

@@ -0,0 +1,109 @@
+import { ReactElement, ReactNode } from "react";
+import { MDXRemote } from "remote-mdx/rsc";
+import { cn } from "@/lib/utils";
+import remarkGfm from "remark-gfm";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+
+/**
+ * The MDX components to style.
+ */
+const components: any = {
+    h1: ({ children }: { children: ReactNode }) => (
+        <Heading size="text-4xl">{children}</Heading>
+    ),
+    h2: ({ children }: { children: ReactNode }) => (
+        <Heading size="text-3xl">{children}</Heading>
+    ),
+    h3: ({ children }: { children: ReactNode }) => (
+        <Heading size="text-2xl">{children}</Heading>
+    ),
+    h4: ({ children }: { children: ReactNode }) => (
+        <Heading size="text-xl">{children}</Heading>
+    ),
+    h5: ({ children }: { children: ReactNode }) => (
+        <Heading size="text-lg">{children}</Heading>
+    ),
+    h6: ({ children }: { children: ReactNode }) => (
+        <Heading size="text-md">{children}</Heading>
+    ),
+    a: ({ href, children }: { href: string; children: ReactNode }) => (
+        <a
+            className="text-minecraft-green-4 cursor-pointer hover:opacity-85 transition-all transform-gpu"
+            href={href}
+        >
+            {children}
+        </a>
+    ),
+    p: ({ children }: { children: ReactNode }) => (
+        <p className="leading-4 text-zinc-300/80">{children}</p>
+    ),
+    ul: ({ children }: { children: ReactNode }) => (
+        <ul className="list-disc list-inside">{children}</ul>
+    ),
+
+    // Tables
+    table: ({ children }: { children: any }) => (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    {children?.[0].props.children.props.children}
+                </TableRow>
+            </TableHeader>
+            <TableBody>{children?.[1].props.children}</TableBody>
+        </Table>
+    ),
+    th: ({ children }: { children: ReactNode }) => (
+        <TableHead>{children}</TableHead>
+    ),
+    td: ({ children }: { children: ReactNode }) => (
+        <TableCell>{children}</TableCell>
+    ),
+};
+
+/**
+ * The custom render for MDX.
+ *
+ * @param props the props for the MDX
+ * @return the custom mdx
+ */
+export const CustomMDX = (props: any): ReactElement => (
+    <MDXRemote
+        {...props}
+        components={{
+            ...components,
+            ...(props.components || {}),
+        }}
+        options={{
+            mdxOptions: {
+                remarkPlugins: [remarkGfm],
+                remarkRehypeOptions: {
+                    passThrough: ["link"],
+                },
+            },
+        }}
+    />
+);
+
+/**
+ * A heading component.
+ *
+ * @param size the size of the heading.
+ * @param children the children within the heading
+ * @return the heading jsx
+ */
+const Heading = ({
+    size,
+    children,
+}: {
+    size: string;
+    children: ReactNode;
+}): ReactElement => (
+    <h1 className={cn("pt-2.5 font-bold", size)}>{children}</h1>
+);

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

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+    HTMLElement,
+    React.ComponentPropsWithoutRef<"nav"> & {
+        separator?: React.ReactNode;
+    }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+    HTMLOListElement,
+    React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+            className
+        )}
+        {...props}
+    />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        {...props}
+    />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+    HTMLAnchorElement,
+    React.ComponentPropsWithoutRef<"a"> & {
+        asChild?: boolean;
+    }
+>(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+
+    return (
+        <Comp
+            ref={ref}
+            className={cn("transition-colors hover:text-foreground", className)}
+            {...props}
+        />
+    );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+    HTMLSpanElement,
+    React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn("font-normal text-foreground", className)}
+        {...props}
+    />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+    children,
+    className,
+    ...props
+}: React.ComponentProps<"li">) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn("[&>svg]:size-3.5", className)}
+        {...props}
+    >
+        {children ?? <ChevronRight />}
+    </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+    className,
+    ...props
+}: React.ComponentProps<"span">) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        className={cn("flex h-9 w-9 items-center justify-center", className)}
+        {...props}
+    >
+        <MoreHorizontal className="h-4 w-4" />
+        <span className="sr-only">More</span>
+    </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+};

Frontend/src/app/components/ui/scroll-area.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+    <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn("relative overflow-hidden", className)}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+            {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    React.ComponentPropsWithoutRef<
+        typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+    >
+>(({ className, orientation = "vertical", ...props }, ref) => (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+            "flex touch-none select-none transition-colors",
+            orientation === "vertical" &&
+                "h-full w-2.5 border-l border-l-transparent p-[1px]",
+            orientation === "horizontal" &&
+                "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+            className
+        )}
+        {...props}
+    >
+        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,120 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+        <table
+            ref={ref}
+            className={cn("w-full caption-bottom text-sm", className)}
+            {...props}
+        />
+    </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody
+        ref={ref}
+        className={cn("[&_tr:last-child]:border-0", className)}
+        {...props}
+    />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn(
+            "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+            className
+        )}
+        {...props}
+    />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+    HTMLTableRowElement,
+    React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+    <tr
+        ref={ref}
+        className={cn(
+            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+            className
+        )}
+        {...props}
+    />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+            className
+        )}
+        {...props}
+    />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn(
+            "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+            className
+        )}
+        {...props}
+    />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption
+        ref={ref}
+        className={cn("mt-4 text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+    Table,
+    TableHeader,
+    TableBody,
+    TableFooter,
+    TableHead,
+    TableRow,
+    TableCell,
+    TableCaption,
+};

Frontend/src/mdx-components.tsx

@@ -1,20 +0,0 @@
-import { ReactElement, ReactNode } from "react";
-import { MDXRemote } from "remote-mdx/rsc";
-
-const components: any = {
-    h1: ({ children }: { children: ReactNode }) => (
-        <h1 className="text-3xl">{children}</h1>
-    ),
-};
-
-export const CustomMDX = (props: any): ReactElement => {
-    return (
-        <MDXRemote
-            {...props}
-            components={{
-                ...components,
-                ...(props.components || {}),
-            }}
-        />
-    );
-};