From dcbba60be3033d1cd0e21331f82cf7e5025156a1 Mon Sep 17 00:00:00 2001 From: Fascinated Date: Sun, 9 Jul 2023 04:27:52 +0100 Subject: [PATCH] added icons, updated config to show more examples, and fixed hover --- README.md | 5 ---- config.json | 15 +++++++--- package-lock.json | 74 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 5 ++++ src/app/layout.tsx | 3 ++ src/app/page.tsx | 19 ++++++++++-- 6 files changed, 110 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a83b15b..315f75d 100644 --- 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 diff --git a/config.json b/config.json index f919e1a..35612fb 100644 --- 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" } } ] diff --git a/package-lock.json b/package-lock.json index fad9424..fd47301 100644 --- 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", diff --git a/package.json b/package.json index 3a0387f..7b71751 100644 --- 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", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 74a11ed..46fd391 100644 --- 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"] }); diff --git a/src/app/page.tsx b/src/app/page.tsx index d8bbf76..f052c9a 100644 --- 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 (
@@ -46,6 +53,8 @@ export default function Home() {
{Config.links.map((link, index) => { + const icons: any = link.icon?.split(" "); + return (
- {link.title} + {link.icon && ( + <> + +
+ + )} +

{link.title}

 );