add icon only links

README.md

@@ -38,8 +38,8 @@ Simple Links is a lightweight alternative to Linktree and others.
   "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": {
-    // If you want to use a custom (not dark) background
     "showBackground": true, // Whether it is enabled or not
     "blur": true, // Should we blur the background?
     "darken": {
@@ -52,16 +52,16 @@ Simple Links is a lightweight alternative to Linktree and others.
     "backgroundImage": "/background.jpg"
   },
   "theme": "dark", // "dark" or "light" themes
+  // The card that displays your info and buttons
   "infoCard": {
-    // The card that displays your info and buttons
     "transparency": 0.85 // How transparent should it be?
   },
+  // Website options
   "options": {
-    // Website options
     "showSourceLink": true // Should we show the "Source Code" link
   },
+  // Search engine and embedding metadata (discord, twitter, etc embeds)
   "metadata": {
-    // Search engine and embedding metadata (discord, twitter, etc embeds)
     "title": "Your Name", // The title of the embed
     "description": "website description", // The description of the embed
     "themeColor": "#6441a5", // The color of the embed
@@ -73,8 +73,8 @@ Simple Links is a lightweight alternative to Linktree and others.
       }
     ]
   },
+  // The buttons to show links for
   "links": [
-    // The buttons to show links for
     {
       "title": "Git", // The shown title of the button
       "url": "https://git.fascinated.cc", // Where the button goes to when clicked
@@ -99,6 +99,17 @@ Simple Links is a lightweight alternative to Linktree and others.
         "normal": "bg-neutral-700"
       }
     }
+  ],
+  // Icon only links
+  "socialLinks": [
+    {
+      "icon": "fab fa-github", // The icon to show
+      "url": "https://git.fascinated.cc" // Where the link goes to
+    },
+    {
+      "icon": "fab fa-reddit",
+      "url": "https://www.reddit.com/user/ImFascinatedMC"
+    }
   ]
 }
 ```

config.json

@@ -1,5 +1,5 @@
 {
-  "configVersion": "0.1.2",
+  "configVersion": "0.1.3",
   "name": "Your Name",
   "description": "A description about yourself",
   "avatar": "/avatar.webp",
@@ -34,7 +34,7 @@
     {
       "title": "Git",
       "url": "https://git.fascinated.cc",
-      "icon": "fab fa-github",
+      "icon": "fab fa-git-alt",
       "color": {
         "normal": "bg-green-700"
       }
@@ -54,5 +54,15 @@
         "normal": "bg-neutral-700"
       }
     }
+  ],
+  "socialLinks": [
+    {
+      "icon": "fab fa-github",
+      "url": "https://git.fascinated.cc"
+    },
+    {
+      "icon": "fab fa-reddit",
+      "url": "https://www.reddit.com/user/ImFascinatedMC"
+    }
   ]
 }

src/app/page.tsx

@@ -15,9 +15,10 @@ export default function Home() {
     avatar,
     name,
     links,
+    socialLinks,
     options,
     description,
-    theme, // Fallback to dark if no theme was found
+    theme,
   } = Config; // All of the settings pulled from the config file
 
   // Theme colors to use when using the selected theme
@@ -85,8 +86,10 @@ export default function Home() {
               <h1 className="text-4xl font-bold">{name}</h1>
             </div>
 
+            {/* Description of user */}
             <p className="mt-4 text-lg max-w-lg">{description}</p>
 
+            {/* Links (Buttons) */}
             <div className="flex flex-col items-center">
               {links.map((link, index) => {
                 const icons: any = link.icon?.split(" ") ?? [];
@@ -98,22 +101,38 @@ 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`}
+                      ${selectedTheme.buttonTextColor} ${link.color.normal} hover:brightness-75 transition gap-2`}
                   >
-                    {link.icon && (
+                    {link.icon && <FontAwesomeIcon icon={icons} />}
-                      <>
-                        <FontAwesomeIcon icon={icons} />
-                        <div className="ml-2"></div>
-                      </>
-                    )}
                     <p>{link.title}</p>
                   </a>
                 );
               })}
             </div>
+
+            {/* Social Links */}
+            <div className="flex items-center justify-center gap-3 mt-4">
+              {socialLinks &&
+                socialLinks.map((link, index) => {
+                  const icons: any = link.icon?.split(" ") ?? [];
+
+                  return (
+                    <a
+                      key={index}
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`hover:brightness-75 transition`}
+                    >
+                      {link.icon && <FontAwesomeIcon size="2xl" icon={icons} />}
+                    </a>
+                  );
+                })}
+            </div>
           </div>
         </div>
 
+        {/* Footer */}
         <div className="absolute bottom-0 right-0 mb-5 mr-5">
           {options.showSourceLink && (
             <a