update config

README.md

@@ -93,25 +93,19 @@ simple-links | Type error: Property 'theme' does not exist on type '{ name: stri
       "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)
-      "color": {
       // The color of the icon (tailwindcss colors)
-        "normal": "bg-green-700"
-      }
+      "color": "bg-green-700"
     },
     {
       "title": "Twitch",
       "url": "https://twitch.tv/fascinated_",
       "icon": "fab fa-twitch",
-      "color": {
-        "normal": "bg-[#6441a5]"
-      }
+      "color": "bg-[#6441a5]"
     },
     {
       "title": "Documentation",
       "url": "https://docs.fascinated.cc",
-      "color": {
-        "normal": "bg-neutral-700"
-      }
+      "color": "bg-neutral-700"
     }
   ],
   // Icon only links

config.json

@@ -35,24 +35,18 @@
       "title": "Git",
       "url": "https://git.fascinated.cc",
       "icon": "fab fa-git-alt",
-      "color": {
-        "normal": "bg-green-700"
-      }
+      "color": "bg-green-700"
     },
     {
       "title": "Twitch",
       "url": "https://twitch.tv/fascinated_",
       "icon": "fab fa-twitch",
-      "color": {
-        "normal": "bg-[#6441a5]"
-      }
+      "color": "bg-[#6441a5]"
     },
     {
       "title": "Documentation",
       "url": "https://docs.fascinated.cc",
-      "color": {
-        "normal": "bg-neutral-700"
-      }
+      "color": "bg-neutral-700"
     }
   ],
   "socialLinks": [

src/app/page.tsx

@@ -96,6 +96,8 @@ export default function Home() {
               {links &&
                 links.map((link, index) => {
                   const icons: any = link.icon?.split(" ") ?? [];
+                  const legacyColor: any = link.color; // Here so old configs don't break
+                  const color = link.color || legacyColor.normal;
 
                   return (
                     <a
@@ -104,7 +106,7 @@ export default function Home() {
                       target="_blank"
                       rel="noopener noreferrer"
                       className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded
-                      ${selectedTheme.buttonTextColor} ${link.color.normal} hover:brightness-75 transition gap-2`}
+                      ${selectedTheme.buttonTextColor} ${color} hover:brightness-75 transition gap-2`}
                     >
                       {link.icon && <FontAwesomeIcon icon={icons} />}
                       <p>{link.title}</p>