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}

 );