add icon only links
Some checks failed
Publish Docker Image / docker (push) Has been cancelled

This commit is contained in:
Lee 2023-07-12 09:40:24 +01:00
parent a5789be6bd
commit 9004e01a98
3 changed files with 55 additions and 15 deletions

@ -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 "avatar": "https://cdn.fascinated.cc/KWprz2.jpg", // The avatar that is shown at the top of the site
// or use a local image // or use a local image
"avatar": "/avatar.webp", "avatar": "/avatar.webp",
// If you want to use a custom (not dark) background
"background": { "background": {
// If you want to use a custom (not dark) background
"showBackground": true, // Whether it is enabled or not "showBackground": true, // Whether it is enabled or not
"blur": true, // Should we blur the background? "blur": true, // Should we blur the background?
"darken": { "darken": {
@ -52,16 +52,16 @@ Simple Links is a lightweight alternative to Linktree and others.
"backgroundImage": "/background.jpg" "backgroundImage": "/background.jpg"
}, },
"theme": "dark", // "dark" or "light" themes "theme": "dark", // "dark" or "light" themes
// The card that displays your info and buttons
"infoCard": { "infoCard": {
// The card that displays your info and buttons
"transparency": 0.85 // How transparent should it be? "transparency": 0.85 // How transparent should it be?
}, },
// Website options
"options": { "options": {
// Website options
"showSourceLink": true // Should we show the "Source Code" link "showSourceLink": true // Should we show the "Source Code" link
}, },
// Search engine and embedding metadata (discord, twitter, etc embeds)
"metadata": { "metadata": {
// Search engine and embedding metadata (discord, twitter, etc embeds)
"title": "Your Name", // The title of the embed "title": "Your Name", // The title of the embed
"description": "website description", // The description of the embed "description": "website description", // The description of the embed
"themeColor": "#6441a5", // The color 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": [ "links": [
// The buttons to show links for
{ {
"title": "Git", // The shown title of the button "title": "Git", // The shown title of the button
"url": "https://git.fascinated.cc", // Where the button goes to when clicked "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" "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"
}
] ]
} }
``` ```

@ -1,5 +1,5 @@
{ {
"configVersion": "0.1.2", "configVersion": "0.1.3",
"name": "Your Name", "name": "Your Name",
"description": "A description about yourself", "description": "A description about yourself",
"avatar": "/avatar.webp", "avatar": "/avatar.webp",
@ -34,7 +34,7 @@
{ {
"title": "Git", "title": "Git",
"url": "https://git.fascinated.cc", "url": "https://git.fascinated.cc",
"icon": "fab fa-github", "icon": "fab fa-git-alt",
"color": { "color": {
"normal": "bg-green-700" "normal": "bg-green-700"
} }
@ -54,5 +54,15 @@
"normal": "bg-neutral-700" "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"
}
] ]
} }

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