added icons, updated config to show more examples, and fixed hover

README.md

@@ -16,8 +16,3 @@ Simple Links is a lightweight alternative to Linktree and others.
 ## Installation
 
 Visit the [wiki](https://git.fascinated.cc/Fascinated/simple-links/wiki/Installation) page for installation instructions.
-
-## Todo
-
-- [ ] Figure out how to get the config in the build step less hacky. Currently it just builds the server on boot to get around it not being the user provided config, which is not ideal.
-- [ ] Add icons to the link buttons

config.json

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

package-lock.json

@@ -8,6 +8,11 @@
 			"name": "simple-links",
 			"version": "0.1.1",
 			"dependencies": {
+				"@fortawesome/fontawesome-svg-core": "^6.4.0",
+				"@fortawesome/free-brands-svg-icons": "^6.4.0",
+				"@fortawesome/free-regular-svg-icons": "^6.4.0",
+				"@fortawesome/free-solid-svg-icons": "^6.4.0",
+				"@fortawesome/react-fontawesome": "^0.2.0",
 				"@types/node": "20.3.3",
 				"@types/react": "18.2.14",
 				"@types/react-dom": "18.2.6",
@@ -105,6 +110,75 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@fortawesome/fontawesome-common-types": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+			"integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+			"hasInstallScript": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/fontawesome-svg-core": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+			"integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.4.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-brands-svg-icons": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
+			"integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.4.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-regular-svg-icons": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+			"integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.4.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-solid-svg-icons": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+			"integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.4.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/react-fontawesome": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+			"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+			"dependencies": {
+				"prop-types": "^15.8.1"
+			},
+			"peerDependencies": {
+				"@fortawesome/fontawesome-svg-core": "~1 || ~6",
+				"react": ">=16.3"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.10",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",

package.json

@@ -9,6 +9,11 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^6.4.0",
+		"@fortawesome/free-brands-svg-icons": "^6.4.0",
+		"@fortawesome/free-regular-svg-icons": "^6.4.0",
+		"@fortawesome/free-solid-svg-icons": "^6.4.0",
+		"@fortawesome/react-fontawesome": "^0.2.0",
 		"@types/node": "20.3.3",
 		"@types/react": "18.2.14",
 		"@types/react-dom": "18.2.6",

src/app/layout.tsx

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

src/app/page.tsx

@@ -1,6 +1,13 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+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";
 
+library.add(fab, far, fas);
+
 export default function Home() {
 	return (
 		<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
@@ -46,6 +53,8 @@ export default function Home() {
 
 					<div className="flex flex-col items-center">
 						{Config.links.map((link, index) => {
+							const icons: any = link.icon?.split(" ");
+
 							return (
 								<a
 									key={index}
@@ -55,9 +64,15 @@ export default function Home() {
 								>
 									<div
 										key={index}
-										className={`mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:${link.color.hover}`}
+										className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:brightness-75 transition`}
 									>
-										{link.title}
+										{link.icon && (
+											<>
+												<FontAwesomeIcon icon={icons} />
+												<div className="ml-2"></div>
+											</>
+										)}
+										<p>{link.title}</p>
 									</div>
 								</a>
 							);