From 534e67b6f0b1d90c81c15dbbd06a2757e9985222 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sat, 20 Apr 2024 21:42:31 -0400
Subject: [PATCH] Fix markdown highlighting

---
 Frontend/docs/{home.md => home.mdx}           |  2 +-
 Frontend/package.json                         |  1 +
 .../src/app/(pages)/docs/[[...slug]]/page.tsx |  4 +++
 Frontend/src/app/(pages)/docs/layout.tsx      |  2 +-
 Frontend/src/mdx-components.tsx               | 26 +++++++++++++------
 Frontend/tailwind.config.ts                   |  2 +-
 6 files changed, 26 insertions(+), 11 deletions(-)
 rename Frontend/docs/{home.md => home.mdx} (91%)

diff --git a/Frontend/docs/home.md b/Frontend/docs/home.mdx
similarity index 91%
rename from Frontend/docs/home.md
rename to Frontend/docs/home.mdx
index 0b0f139..80fdda7 100644
--- a/Frontend/docs/home.md
+++ b/Frontend/docs/home.mdx
@@ -5,4 +5,4 @@ summary: 'utinam delicata nominavi ornare eirmod pharetra decore interesset nece
 ---
 
 # bob
-HELLO JOHN
\ No newline at end of file
+HELLO **JOHN**
\ No newline at end of file
diff --git a/Frontend/package.json b/Frontend/package.json
index d926b6b..2ee7723 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -38,6 +38,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "remark-gfm": "^4.0.0",
+    "remote-mdx": "^0.0.4",
     "restfulmc-lib": "^1.1.3",
     "shadcn-ui": "0.8.0",
     "sharp": "^0.33.3",
diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
index 8cb2d3b..3336664 100644
--- a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
@@ -11,6 +11,7 @@ import {
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { capitalize } from "@/lib/stringUtils";
+import { CustomMDX } from "@/mdx-components";
 
 /**
  * The page to display content
@@ -59,6 +60,9 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
                     )}
                 </BreadcrumbList>
             </Breadcrumb>
+
+            {/* Content */}
+            <CustomMDX source={content.content} />
         </main>
     );
 };
diff --git a/Frontend/src/app/(pages)/docs/layout.tsx b/Frontend/src/app/(pages)/docs/layout.tsx
index 017c089..6385cd7 100644
--- a/Frontend/src/app/(pages)/docs/layout.tsx
+++ b/Frontend/src/app/(pages)/docs/layout.tsx
@@ -12,7 +12,7 @@ const DocumentationLayout = ({
 }: Readonly<{
     children: ReactNode;
 }>): ReactElement => (
-    <section className="h-screen flex justify-center items-center">
+    <section className="h-screen pt-64 flex justify-center">
         <div className="flex gap-10">
             <Sidebar />
             {children}
diff --git a/Frontend/src/mdx-components.tsx b/Frontend/src/mdx-components.tsx
index 107f5c3..eece960 100644
--- a/Frontend/src/mdx-components.tsx
+++ b/Frontend/src/mdx-components.tsx
@@ -1,10 +1,20 @@
-import type { MDXComponents } from "mdx/types";
+import { ReactElement, ReactNode } from "react";
+import { MDXRemote } from "remote-mdx/rsc";
 
-export const useMDXComponents = (components: MDXComponents): MDXComponents => {
-    return {
-        h1: ({ children }) => (
-            <h1 className="text-6xl font-semibold">{children}</h1>
-        ),
-        ...components,
-    };
+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 || {}),
+            }}
+        />
+    );
 };
diff --git a/Frontend/tailwind.config.ts b/Frontend/tailwind.config.ts
index b6750b8..a894293 100644
--- a/Frontend/tailwind.config.ts
+++ b/Frontend/tailwind.config.ts
@@ -4,7 +4,7 @@ const { screens } = require("tailwindcss/defaultTheme");
 
 const config = {
     darkMode: ["class"],
-    content: ["./src/app/**/*.{ts,tsx,mdx}"],
+    content: ["./src/app/**/*.{ts,tsx}"],
     theme: {
         container: {
             center: true,