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

.gitignore

@@ -145,4 +145,4 @@ dist
 .pnp.*
 
 # Config
-config.json
+config.yml

README.md

@@ -36,103 +36,3 @@ Just simply remove it from the config and it will not show anymore
 ## Showing Discord status
 
 You must be in the [lanyard server](https://discord.gg/UrXF2cfJ7F) for it to work.
-
-## Help!!! I'm getting an error when launching it
-
-### Config Issue
-
-If your error looks similar to this you are most likely missing part of the config, as some new things may have been added.
-
-```bash
-simple-links | Type error: Property 'theme' does not exist on type '{ name: string; description: string; avatar: string; background: { showBackground: boolean; blur: boolean; darken: { enabled: boolean; amount: number; }; backgroundImage: string; }; infoCard: { transparency: number; }; metadata: { ...; }; options: { ...; }; analytics: { ...; }; links: { ...; }[]; }'.
-```
-
-## Config Example
-
-```json
-{
-  "name": "Your Name", // The name you want to display on the site
-  "description": "A description about yourself", // The description you want to use
-  "avatar": "https://cdn.fascinated.cc/KWprz2.jpg", // The avatar that is shown at the top of the site
-  // or use a local image
-  "avatar": "/avatar.webp",
-  // If you want to use a custom (not dark) background
-  "background": {
-    "showBackground": true, // Whether it is enabled or not
-    "blur": true, // Should we blur the background?
-    "darken": {
-      // Should we darken the background?
-      "enabled": true,
-      "amount": 0.7
-    },
-    "backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg", // The image to use in the background
-    // or use a local image
-    "backgroundImage": "/background.jpg"
-  },
-  "theme": "dark", // "dark" or "light" themes
-  // The card that displays your info and buttons
-  "infoCard": {
-    "transparency": 0.85 // How transparent should it be?
-  },
-  // Website options
-  "options": {
-    "showSourceLink": true // Should we show the "Source Code" link
-  },
-  // Show your discord status on the site (You MUST be in the Lanyard server)
-  // https://discord.gg/UrXF2cfJ7F
-  "discord": {
-    "id": "474221560031608833" // Your discord ID
-  },
-  // Search engine and embedding metadata (discord, twitter, etc embeds)
-  "metadata": {
-    "title": "Your Name", // The title of the embed
-    "description": "website description", // The description of the embed
-    "themeColor": "#6441a5", // The color of the embed
-    "authors": [
-      // SEO metadata
-      {
-        "name": "Fascinated",
-        "url": "https://fascinated.cc"
-      }
-    ]
-  },
-  // The buttons to show links for
-  "links": [
-    {
-      "title": "Git", // The shown title of the button
-      "url": "https://git.fascinated.cc", // Where the button goes to when clicked
-      "icon": "fab fa-github", // The icon of the button (can be removed to show no icon)
-      // The color of the icon (tailwindcss colors)
-      "color": "bg-green-700"
-    },
-    {
-      "title": "Twitch",
-      "url": "https://twitch.tv/fascinated_",
-      "icon": "fab fa-twitch",
-      "color": "bg-[#6441a5]"
-    },
-    {
-      "title": "Documentation",
-      "url": "https://docs.fascinated.cc",
-      "color": "bg-neutral-700"
-    }
-  ],
-  // Icon only links
-  "socialLinks": [
-    {
-      "icon": "fab fa-twitter", // The icon to use
-      "color": "#1DA1F2", // An optional color
-      "url": "https://twitter.com" // The link to go to
-    },
-    {
-      "icon": "fab fa-reddit",
-      "color": "#FF4300",
-      "url": "https://www.reddit.com/user/ImFascinatedMC"
-    },
-    {
-      "icon": "fab fa-git-alt",
-      "url": "https://git.fascinated.cc"
-    }
-  ]
-}
-```

config-example.json

@@ -1,73 +0,0 @@
-{
-  "configVersion": "0.1.4",
-  "name": "Your Name",
-  "description": "A description about yourself",
-  "avatar": "/avatar.webp",
-  "background": {
-    "showBackground": true,
-    "blur": true,
-    "darken": {
-      "enabled": true,
-      "amount": 0.7
-    },
-    "backgroundImage": "/background.jpg"
-  },
-  "theme": "dark",
-  "infoCard": {
-    "transparency": 0.85
-  },
-  "discord": {
-    "id": "set me"
-  },
-  "options": {
-    "showSourceLink": true
-  },
-  "metadata": {
-    "title": "Your Name",
-    "description": "website description",
-    "themeColor": "#6441a5",
-    "authors": [
-      {
-        "name": "Fascinated",
-        "url": "https://fascinated.cc"
-      }
-    ]
-  },
-  "links": [
-    {
-      "title": "Git",
-      "url": "https://git.fascinated.cc",
-      "icon": "fab fa-git-alt",
-      "color": {
-        "normal": "bg-green-700"
-      }
-    },
-    {
-      "title": "Twitch",
-      "url": "https://twitch.tv/fascinated_",
-      "icon": "fab fa-twitch",
-      "color": "bg-[#6441a5]"
-    },
-    {
-      "title": "Documentation",
-      "url": "https://docs.fascinated.cc",
-      "color": "bg-neutral-700"
-    }
-  ],
-  "socialLinks": [
-    {
-      "icon": "fab fa-twitter",
-      "color": "#1DA1F2",
-      "url": "https://twitter.com"
-    },
-    {
-      "icon": "fab fa-reddit",
-      "color": "#FF4300",
-      "url": "https://www.reddit.com/user/ImFascinatedMC"
-    },
-    {
-      "icon": "fab fa-git-alt",
-      "url": "https://git.fascinated.cc"
-    }
-  ]
-}

config-example.yml

@@ -0,0 +1,75 @@
+# The version of the config (DO NOT CHANGE)
+configVersion: "0.2.0"
+# Your name
+name: "Your Name"
+# The description shown in the info card
+description: "A description about yourself"
+# The avatar to show
+avatar: "/avatar.webp"
+# Background configuration
+background:
+  # Should we use a custom background?
+  showBackground: true
+  # Should we blur that background?
+  blur: true
+  # Should we darken that background? and by how much
+  darken:
+    enabled: true
+    amount: 0.7
+  # The image to show when the background is enabled
+  backgroundImage: "/background.jpg"
+# The theme to use (light or dark)
+theme: "dark"
+# The info card settings
+infoCard:
+  # How transparent should it be?
+  transparency: 0.85
+# Discord settings (Status indicator)
+discord:
+  # Your discord id
+  id: "set me"
+# Global settings for the site
+options:
+  # Should we show the "Website Source" button?
+  showSourceLink: true
+# Metadata for the website (controls embed settings and SEO info)
+# see: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
+metadata:
+  title: "Your Name"
+  description: "website description"
+  themeColor: "#6441a5"
+  authors:
+    - name: "Fascinated"
+      url: "https://fascinated.cc"
+# The links to show (buttons)
+links:
+  # The title of the button
+  - title: "Git"
+    # Where the button goes to
+    url: "https://git.fascinated.cc"
+    # The icon of the button
+    # see: https://fontawesome.com/search
+    icon: "fab fa-git-alt"
+    # The color of the button (TailwindCSS colors or hex color, see below for hex)
+    color: "bg-green-700"
+  - title: "Twitch"
+    url: "https://twitch.tv/fascinated_"
+    icon: "fab fa-twitch"
+    color: "bg-[#6441a5]"
+  - title: "Documentation"
+    url: "https://docs.fascinated.cc"
+    color: "bg-neutral-700"
+# The links to show (icons only, below buttons)
+socialLinks:
+  # The icon to use
+  # see: https://fontawesome.com/search
+  - icon: "fab fa-twitter"
+    # The color of the icon
+    color: "#1DA1F2"
+    # Where the icon goes to when clicked
+    url: "https://twitter.com"
+  - icon: "fab fa-reddit"
+    color: "#FF4300"
+    url: "https://www.reddit.com/user/ImFascinatedMC"
+  - icon: "fab fa-git-alt"
+    url: "https://git.fascinated.cc"

next.config.js

@@ -1,3 +1,5 @@
+const withYaml = require("next-plugin-yaml");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -12,4 +14,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withYaml(nextConfig);

package.json

@@ -21,6 +21,7 @@
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.9",
     "next": "13.4.9",
+    "next-plugin-yaml": "^1.0.1",
     "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",

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;
+}

tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./config.json",
+    "./config.yml",
   ],
   theme: {},
   plugins: [],

tsconfig.json

@@ -23,6 +23,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "src/types/*.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }