Fix imports, and add a code highlighter component

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

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { getDocsContent } from "@/lib/mdxUtils";
+import { getDocsContent } from "@/lib/mdx-utils";
 import { PageProps } from "@/types/page";
 import { notFound } from "next/navigation";
 import moment from "moment";
@@ -11,7 +11,7 @@ import {
     BreadcrumbList,
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-import { capitalize } from "@/lib/stringUtils";
+import { capitalize } from "@/lib/string-utils";
 import { CustomMDX } from "@/components/mdx";
 import Link from "next/link";
 import Image from "next/image";

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

@@ -3,7 +3,7 @@ import ServerResult from "@/components/server/server-result";
 import ServerSearch from "@/components/server/server-search";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { minecrafter } from "@/font/fonts";
-import { capitalize } from "@/lib/stringUtils";
+import { capitalize } from "@/lib/string-utils";
 import { cn } from "@/lib/utils";
 import { PageProps } from "@/types/page";
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";

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

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { getDocsContent } from "@/lib/mdxUtils";
+import { getDocsContent } from "@/lib/mdx-utils";
 
 export const GET = async (request: NextRequest): Promise<NextResponse> => {
     return new NextResponse(JSON.stringify(getDocsContent()));

Frontend/src/app/components/code-highlighter.tsx

@@ -0,0 +1,65 @@
+import { ReactElement } from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import Image from "next/image";
+import { capitalize } from "@/lib/string-utils";
+
+/**
+ * Props for the code highlighter.
+ */
+type CodeHighlighterProps = {
+    /**
+     * The language of the code, if any
+     */
+    language: string | undefined;
+
+    /**
+     * The code to highlight.
+     */
+    children: string;
+};
+
+/**
+ * A code highlighter component.
+ *
+ * @param language the language for syntax highlighting
+ * @param children the children (code) to highlight
+ * @return the highlighter jsx
+ */
+const CodeHighlighter = ({
+    language,
+    children,
+}: CodeHighlighterProps): ReactElement => {
+    // Return a basic code block if no language is provided
+    if (!language) {
+        return (
+            <code className="p-2 max-w-5xl block bg-muted/70 break-all rounded-lg">
+                {children}
+            </code>
+        );
+    }
+    return (
+        <div className="relative max-w-5xl">
+            <SyntaxHighlighter
+                className="!bg-muted/70 break-all rounded-lg"
+                language={language}
+                style={atomOneDark}
+                wrapLongLines
+            >
+                {children}
+            </SyntaxHighlighter>
+
+            {/* Language Icon */}
+            <div className="absolute top-0 right-0 px-2 py-0.5 flex gap-2 items-center text-white/75 bg-zinc-700/50 rounded select-none pointer-events-none">
+                <Image
+                    src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${language}/${language}-original.svg`}
+                    alt={`${language} Language Icon`}
+                    width={20}
+                    height={20}
+                />
+                {capitalize(language)}
+            </div>
+        </div>
+    );
+};
+export default CodeHighlighter;

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

@@ -1,9 +1,9 @@
 import { ReactElement } from "react";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
-import { capitalize } from "@/lib/stringUtils";
+import { capitalize } from "@/lib/string-utils";
 import { minecrafter } from "@/font/fonts";
-import { getDocsContent } from "@/lib/mdxUtils";
+import { getDocsContent } from "@/lib/mdx-utils";
 import QuickSearchDialog from "@/components/docs/search-dialog";
 
 /**

Frontend/src/app/components/mdx.tsx

@@ -11,15 +11,9 @@ import {
     TableRow,
 } from "@/components/ui/table";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import {
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
-    atomOneDark,
-    nord,
-    ocean,
-    solarizedDark,
-    stackoverflowDark,
-} from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { capitalize } from "@/lib/stringUtils";
 import Image from "next/image";
+import CodeHighlighter from "@/components/code-highlighter";
 
 /**
  * The MDX components to style.
@@ -78,39 +72,11 @@ const components: any = {
     }: {
         className: string;
         children: any;
-    }): ReactElement => {
+    }): ReactElement => (
-        const language: string | undefined = className?.replace(
+        <CodeHighlighter language={className?.replace("language-", "")}>
-            "language-",
+            {children}
-            ""
+        </CodeHighlighter>
-        ); // The language of the code, if any
+    ),
-        return language ? (
-            <div className="relative max-w-5xl">
-                <SyntaxHighlighter
-                    className="!bg-muted/70 break-all rounded-lg"
-                    language={language}
-                    style={atomOneDark}
-                    wrapLongLines
-                >
-                    {children}
-                </SyntaxHighlighter>
-
-                {/* Language Icon */}
-                <div className="absolute top-0 right-0 px-2 py-0.5 flex gap-2 items-center text-white/75 bg-zinc-700/50 rounded select-none pointer-events-none">
-                    <Image
-                        src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${language}/${language}-original.svg`}
-                        alt={`${language} Language Icon`}
-                        width={20}
-                        height={20}
-                    />
-                    {capitalize(language)}
-                </div>
-            </div>
-        ) : (
-            <code className="p-2 max-w-5xl block bg-muted/70 break-all rounded-lg">
-                {children}
-            </code>
-        );
-    },
     ul: ({ children }: { children: ReactNode }): ReactElement => (
         <ul className="px-3 list-disc list-inside">{children}</ul>
     ),

Frontend/src/app/components/server/server-search.tsx

@@ -9,7 +9,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select";
-import { capitalize } from "@/app/common/stringUtils";
+import { capitalize } from "@/app/common/string-utils";
 import { redirect } from "next/navigation";
 import { ReactElement } from "react";
 import { ServerPlatform } from "restfulmc-lib";

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

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const alertVariants = cva(
     "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const badgeVariants = cva(
     "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib";
 
 const Breadcrumb = React.forwardRef<
     HTMLElement,

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const buttonVariants = cva(
     "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

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

@@ -5,7 +5,7 @@ import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib";
 import { Dialog, DialogContent } from "@/app/components/ui/dialog";
 
 const Command = React.forwardRef<

Frontend/src/app/components/ui/context-menu.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const ContextMenu = ContextMenuPrimitive.Root;
 

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

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib";
 
 const Dialog = DialogPrimitive.Root;
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 export interface InputProps
     extends React.InputHTMLAttributes<HTMLInputElement> {}

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

@@ -4,7 +4,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const labelVariants = cva(
     "text-sm font-medium text-zinc-300 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

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

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib";
 
 const ScrollArea = React.forwardRef<
     React.ElementRef<typeof ScrollAreaPrimitive.Root>,

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

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const Select = SelectPrimitive.Root;
 

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

@@ -1,4 +1,4 @@
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 function Skeleton({
     className,

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib";
 
 const Table = React.forwardRef<
     HTMLTableElement,

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

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const ToastProvider = ToastPrimitives.Provider;
 

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

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

Frontend/tsconfig.json

@@ -25,6 +25,7 @@
 			"@/font/*": ["./src/app/font/*"],
 			"@/types/*": ["./src/app/types/*"],
 			"@/lib/*": ["./src/app/common/*"],
+			"@/lib": ["./src/app/common/utils.ts"],
 			"@/markdown/*": ["./src/markdown/*"],
 			"@/configJson": ["./config.json"]
 		}