migrate to yml config (so I can comment the config)

src/app/components/Avatar.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import { Fragment } from "react";
 import { useLanyardWS } from "use-lanyard";
 
-import Config from "../../../config.json";
+import Config from "../../../config.yml";
 
 function LanyardWrapper(props: { children: any }) {
   return <Fragment>{props.children}</Fragment>;

src/app/layout.tsx

@@ -3,7 +3,7 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
-import Config from "../../config.json";
+import Config from "../../config.yml";
 config.autoAddCss = false;
 
 const inter = Inter({ subsets: ["latin"] });

src/app/page.tsx

@@ -4,7 +4,7 @@ import { far } from "@fortawesome/free-regular-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
-import Config from "../../config.json";
+import Config from "../../config.yml";
 import Avatar from "./components/Avatar";
 
 library.add(fab, far, fas); // Loading in the icons from FontAwesome

src/types/config.d.ts

@@ -0,0 +1,57 @@
+import { YAMLMap } from "js-yaml";
+
+export interface Config {
+  configVersion: string;
+  name: string;
+  description: string;
+  avatar: string;
+  background: {
+    showBackground: boolean;
+    blur: boolean;
+    darken: {
+      enabled: boolean;
+      amount: number;
+    };
+    backgroundImage: string;
+  };
+  theme: string;
+  infoCard: {
+    transparency: number;
+  };
+  discord: {
+    id: string;
+  };
+  options: {
+    showSourceLink: boolean;
+  };
+  metadata: {
+    title: string;
+    description: string;
+    themeColor: string;
+    authors: {
+      name: string;
+      url: string;
+    }[];
+  };
+  links: {
+    title: string;
+    url: string;
+    icon: string;
+    color:
+      | {
+          normal: string;
+        }
+      | string;
+  }[];
+  socialLinks: {
+    icon: string;
+    color: string;
+    url: string;
+  }[];
+}
+
+// Parse the YAML content and convert it to the defined type
+declare module "*.yml" {
+  const content: YAMLMap & Config;
+  export default content;
+}