From 8642740f907a314300429c71a484aa60d076f38c Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 21 Apr 2024 23:11:15 -0400
Subject: [PATCH] Fix imports, and add a code highlighter component

---
 .../src/app/(pages)/docs/[[...slug]]/page.tsx |  4 +-
 .../app/(pages)/server/[[...slug]]/page.tsx   |  2 +-
 Frontend/src/app/api/docs/search/route.ts     |  2 +-
 .../app/common/{mdxUtils.ts => mdx-utils.ts}  |  0
 .../{stringUtils.ts => string-utils.ts}       |  0
 .../src/app/components/code-highlighter.tsx   | 65 +++++++++++++++++++
 Frontend/src/app/components/docs/sidebar.tsx  |  4 +-
 Frontend/src/app/components/mdx.tsx           | 48 ++------------
 .../app/components/server/server-search.tsx   |  2 +-
 Frontend/src/app/components/ui/alert.tsx      |  2 +-
 Frontend/src/app/components/ui/badge.tsx      |  2 +-
 Frontend/src/app/components/ui/breadcrumb.tsx |  2 +-
 Frontend/src/app/components/ui/button.tsx     |  2 +-
 Frontend/src/app/components/ui/command.tsx    |  2 +-
 .../src/app/components/ui/context-menu.tsx    |  2 +-
 Frontend/src/app/components/ui/dialog.tsx     |  2 +-
 Frontend/src/app/components/ui/input.tsx      |  2 +-
 Frontend/src/app/components/ui/label.tsx      |  2 +-
 .../src/app/components/ui/scroll-area.tsx     |  2 +-
 Frontend/src/app/components/ui/select.tsx     |  2 +-
 Frontend/src/app/components/ui/skeleton.tsx   |  2 +-
 Frontend/src/app/components/ui/table.tsx      |  2 +-
 Frontend/src/app/components/ui/toast.tsx      |  2 +-
 Frontend/src/app/components/ui/tooltip.tsx    |  2 +-
 Frontend/tsconfig.json                        |  1 +
 25 files changed, 95 insertions(+), 63 deletions(-)
 rename Frontend/src/app/common/{mdxUtils.ts => mdx-utils.ts} (100%)
 rename Frontend/src/app/common/{stringUtils.ts => string-utils.ts} (100%)
 create mode 100644 Frontend/src/app/components/code-highlighter.tsx

diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
index 376f763..68cbda6 100644
--- a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
+++ b/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";
diff --git a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
index 292f67a..3ba1dfd 100644
--- a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
+++ b/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";
diff --git a/Frontend/src/app/api/docs/search/route.ts b/Frontend/src/app/api/docs/search/route.ts
index 8743fe0..82477e4 100644
--- a/Frontend/src/app/api/docs/search/route.ts
+++ b/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()));
diff --git a/Frontend/src/app/common/mdxUtils.ts b/Frontend/src/app/common/mdx-utils.ts
similarity index 100%
rename from Frontend/src/app/common/mdxUtils.ts
rename to Frontend/src/app/common/mdx-utils.ts
diff --git a/Frontend/src/app/common/stringUtils.ts b/Frontend/src/app/common/string-utils.ts
similarity index 100%
rename from Frontend/src/app/common/stringUtils.ts
rename to Frontend/src/app/common/string-utils.ts
diff --git a/Frontend/src/app/components/code-highlighter.tsx b/Frontend/src/app/components/code-highlighter.tsx
new file mode 100644
index 0000000..dd4cf6a
--- /dev/null
+++ b/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;
diff --git a/Frontend/src/app/components/docs/sidebar.tsx b/Frontend/src/app/components/docs/sidebar.tsx
index a56058d..d206b65 100644
--- a/Frontend/src/app/components/docs/sidebar.tsx
+++ b/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";
 
 /**
diff --git a/Frontend/src/app/components/mdx.tsx b/Frontend/src/app/components/mdx.tsx
index 4d71d8d..63827dd 100644
--- a/Frontend/src/app/components/mdx.tsx
+++ b/Frontend/src/app/components/mdx.tsx
@@ -11,15 +11,9 @@ import {
     TableRow,
 } from "@/components/ui/table";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import {
-    atomOneDark,
-    nord,
-    ocean,
-    solarizedDark,
-    stackoverflowDark,
-} from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { capitalize } from "@/lib/stringUtils";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 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 => {
-        const language: string | undefined = className?.replace(
-            "language-",
-            ""
-        ); // 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>
-        );
-    },
+    }): ReactElement => (
+        <CodeHighlighter language={className?.replace("language-", "")}>
+            {children}
+        </CodeHighlighter>
+    ),
     ul: ({ children }: { children: ReactNode }): ReactElement => (
         <ul className="px-3 list-disc list-inside">{children}</ul>
     ),
diff --git a/Frontend/src/app/components/server/server-search.tsx b/Frontend/src/app/components/server/server-search.tsx
index 4a2a0d3..0c34007 100644
--- a/Frontend/src/app/components/server/server-search.tsx
+++ b/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";
diff --git a/Frontend/src/app/components/ui/alert.tsx b/Frontend/src/app/components/ui/alert.tsx
index e101ac8..1ed9b86 100644
--- a/Frontend/src/app/components/ui/alert.tsx
+++ b/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",
diff --git a/Frontend/src/app/components/ui/badge.tsx b/Frontend/src/app/components/ui/badge.tsx
index a358d76..a213913 100644
--- a/Frontend/src/app/components/ui/badge.tsx
+++ b/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",
diff --git a/Frontend/src/app/components/ui/breadcrumb.tsx b/Frontend/src/app/components/ui/breadcrumb.tsx
index d386de6..0fe9043 100644
--- a/Frontend/src/app/components/ui/breadcrumb.tsx
+++ b/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,
diff --git a/Frontend/src/app/components/ui/button.tsx b/Frontend/src/app/components/ui/button.tsx
index f222dc1..7bf9602 100644
--- a/Frontend/src/app/components/ui/button.tsx
+++ b/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",
diff --git a/Frontend/src/app/components/ui/command.tsx b/Frontend/src/app/components/ui/command.tsx
index e4ad011..450add8 100644
--- a/Frontend/src/app/components/ui/command.tsx
+++ b/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<
diff --git a/Frontend/src/app/components/ui/context-menu.tsx b/Frontend/src/app/components/ui/context-menu.tsx
index 0d89fb2..9de657f 100644
--- a/Frontend/src/app/components/ui/context-menu.tsx
+++ b/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;
 
diff --git a/Frontend/src/app/components/ui/dialog.tsx b/Frontend/src/app/components/ui/dialog.tsx
index 51abff2..f0df493 100644
--- a/Frontend/src/app/components/ui/dialog.tsx
+++ b/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;
 
diff --git a/Frontend/src/app/components/ui/input.tsx b/Frontend/src/app/components/ui/input.tsx
index 8a07036..610d7c0 100644
--- a/Frontend/src/app/components/ui/input.tsx
+++ b/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> {}
diff --git a/Frontend/src/app/components/ui/label.tsx b/Frontend/src/app/components/ui/label.tsx
index c1259fa..75b6a76 100644
--- a/Frontend/src/app/components/ui/label.tsx
+++ b/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"
diff --git a/Frontend/src/app/components/ui/scroll-area.tsx b/Frontend/src/app/components/ui/scroll-area.tsx
index 8c99967..92169e3 100644
--- a/Frontend/src/app/components/ui/scroll-area.tsx
+++ b/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>,
diff --git a/Frontend/src/app/components/ui/select.tsx b/Frontend/src/app/components/ui/select.tsx
index bb86cb8..bbe55db 100644
--- a/Frontend/src/app/components/ui/select.tsx
+++ b/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;
 
diff --git a/Frontend/src/app/components/ui/skeleton.tsx b/Frontend/src/app/components/ui/skeleton.tsx
index 0020342..7a29225 100644
--- a/Frontend/src/app/components/ui/skeleton.tsx
+++ b/Frontend/src/app/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/app/common/utils";
+import { cn } from "@/lib";
 
 function Skeleton({
     className,
diff --git a/Frontend/src/app/components/ui/table.tsx b/Frontend/src/app/components/ui/table.tsx
index 0c0898b..f3be5af 100644
--- a/Frontend/src/app/components/ui/table.tsx
+++ b/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,
diff --git a/Frontend/src/app/components/ui/toast.tsx b/Frontend/src/app/components/ui/toast.tsx
index cd8ad97..79caea8 100644
--- a/Frontend/src/app/components/ui/toast.tsx
+++ b/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;
 
diff --git a/Frontend/src/app/components/ui/tooltip.tsx b/Frontend/src/app/components/ui/tooltip.tsx
index 3c5f228..5593195 100644
--- a/Frontend/src/app/components/ui/tooltip.tsx
+++ b/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;
 
diff --git a/Frontend/tsconfig.json b/Frontend/tsconfig.json
index 9dc3f85..f5799c8 100644
--- a/Frontend/tsconfig.json
+++ b/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"]
 		}