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

2023-07-09 04:27:52 +01:00 · 2023-07-09 04:27:52 +01:00 · dcbba60be3
commit dcbba60be3
parent 96616206b3
6 changed files with 110 additions and 11 deletions
--- a/README.md
+++ b/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
--- a/config.json
+++ b/config.json
@ -32,17 +32,24 @@
 		{
 			"title": "Git",
 			"url": "https://git.fascinated.cc",
+			"icon": "fab fa-github",
 			"color": {
-				"normal": "bg-green-700",
-				"hover": "bg-green-600"
+				"normal": "bg-green-700"
+			}
+		},
+		{
+			"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",
-				"hover": "bg-neutral-600"
+				"normal": "bg-neutral-700"
 			}
 		}
 	]
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/app/layout.tsx
+++ b/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"] });

--- a/src/app/page.tsx
+++ b/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>
 							);