use spaces instead of tabs
All checks were successful
Publish Docker Image / docker (push) Successful in 1m47s

This commit is contained in:
Lee 2023-07-10 05:06:28 +01:00
parent 6a165a3161
commit cc0c9a14e1
5 changed files with 238 additions and 238 deletions

126
README.md

@ -33,69 +33,69 @@ Simple Links is a lightweight alternative to Linktree and others.
```json
{
"name": "Your Name", // The name you want to display on the site
"description": "A description about yourself", // The description you want to use
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg", // The avatar that is shown at the top of the site
"background": {
// If you want to use a custom (not dark) background
"showBackground": true, // Whether it is enabled or not
"blur": true, // Should we blur the background?
"darken": {
// Should we darken the background?
"enabled": true,
"amount": 0.7
},
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg" // The image to use in the background
},
"theme": "dark", // "dark" or "light" themes
"infoCard": {
// The card that displays your info and buttons
"transparency": 0.85 // How transparent should it be?
},
"options": {
// Website options
"showSourceLink": true // Should we show the "Source Code" link
},
"metadata": {
// Search engine and embedding metadata (discord, twitter, etc embeds)
"title": "Your Name", // The title of the embed
"description": "website description", // The description of the embed
"themeColor": "#6441a5", // The color of the embed
"authors": [
// SEO metadata
{
"name": "Fascinated",
"url": "https://fascinated.cc"
}
]
},
"links": [
// The buttons to show links for
{
"title": "Git", // The shown title of the button
"url": "https://git.fascinated.cc", // Where the button goes to when clicked
"icon": "fab fa-github", // The icon of the button (can be removed to show no icon)
"color": {
// The color of the icon (tailwindcss colors)
"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"
}
}
]
"name": "Your Name", // The name you want to display on the site
"description": "A description about yourself", // The description you want to use
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg", // The avatar that is shown at the top of the site
"background": {
// If you want to use a custom (not dark) background
"showBackground": true, // Whether it is enabled or not
"blur": true, // Should we blur the background?
"darken": {
// Should we darken the background?
"enabled": true,
"amount": 0.7
},
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg" // The image to use in the background
},
"theme": "dark", // "dark" or "light" themes
"infoCard": {
// The card that displays your info and buttons
"transparency": 0.85 // How transparent should it be?
},
"options": {
// Website options
"showSourceLink": true // Should we show the "Source Code" link
},
"metadata": {
// Search engine and embedding metadata (discord, twitter, etc embeds)
"title": "Your Name", // The title of the embed
"description": "website description", // The description of the embed
"themeColor": "#6441a5", // The color of the embed
"authors": [
// SEO metadata
{
"name": "Fascinated",
"url": "https://fascinated.cc"
}
]
},
"links": [
// The buttons to show links for
{
"title": "Git", // The shown title of the button
"url": "https://git.fascinated.cc", // Where the button goes to when clicked
"icon": "fab fa-github", // The icon of the button (can be removed to show no icon)
"color": {
// The color of the icon (tailwindcss colors)
"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"
}
}
]
}
```

@ -1,58 +1,58 @@
{
"configVersion": "0.1.2",
"name": "Your Name",
"description": "A description about yourself",
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg",
"background": {
"showBackground": true,
"blur": true,
"darken": {
"enabled": true,
"amount": 0.7
},
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg"
},
"theme": "dark",
"infoCard": {
"transparency": 0.85
},
"options": {
"showSourceLink": true
},
"metadata": {
"title": "Your Name",
"description": "website description",
"themeColor": "#6441a5",
"authors": [
{
"name": "Fascinated",
"url": "https://fascinated.cc"
}
]
},
"links": [
{
"title": "Git",
"url": "https://git.fascinated.cc",
"icon": "fab fa-github",
"color": {
"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"
}
}
]
"configVersion": "0.1.2",
"name": "Your Name",
"description": "A description about yourself",
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg",
"background": {
"showBackground": true,
"blur": true,
"darken": {
"enabled": true,
"amount": 0.7
},
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg"
},
"theme": "dark",
"infoCard": {
"transparency": 0.85
},
"options": {
"showSourceLink": true
},
"metadata": {
"title": "Your Name",
"description": "website description",
"themeColor": "#6441a5",
"authors": [
{
"name": "Fascinated",
"url": "https://fascinated.cc"
}
]
},
"links": [
{
"title": "Git",
"url": "https://git.fascinated.cc",
"icon": "fab fa-github",
"color": {
"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"
}
}
]
}

@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
}
};

@ -11,13 +11,13 @@ const inter = Inter({ subsets: ["latin"] });
export const metadata = Config.metadata; // Site metadata from the config
export default function RootLayout({
children,
children,
}: {
children: React.ReactNode;
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

@ -9,123 +9,123 @@ import Config from "../../config.json";
library.add(fab, far, fas); // Loading in the icons from FontAwesome
export default function Home() {
const {
background,
infoCard,
avatar,
name,
links,
options,
description,
theme, // Fallback to dark if no theme was found
} = Config; // All of the settings pulled from the config file
const {
background,
infoCard,
avatar,
name,
links,
options,
description,
theme, // Fallback to dark if no theme was found
} = Config; // All of the settings pulled from the config file
// Theme colors to use when using the selected theme
// all used colors are from TailwindCSS
const themeColors: {
[key: string]: {
background: string;
textColor: string;
buttonTextColor: string;
};
} = {
dark: {
background: "bg-neutral-900",
textColor: "text-white",
buttonTextColor: "text-white",
},
light: {
background: "bg-white",
textColor: "text-black",
buttonTextColor: "text-white",
},
};
const selectedTheme = themeColors[theme]; // The theme to use
// Theme colors to use when using the selected theme
// all used colors are from TailwindCSS
const themeColors: {
[key: string]: {
background: string;
textColor: string;
buttonTextColor: string;
};
} = {
dark: {
background: "bg-neutral-900",
textColor: "text-white",
buttonTextColor: "text-white",
},
light: {
background: "bg-white",
textColor: "text-black",
buttonTextColor: "text-white",
},
};
const selectedTheme = themeColors[theme]; // The theme to use
return (
<>
<main
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
>
<div
className={`absolute inset-0 filter w-screen h-screen ${
background.blur && "blur-sm"
}`}
style={
background.showBackground
? {
zIndex: 0,
background: background.darken.enabled
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
return (
<>
<main
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
>
<div
className={`absolute inset-0 filter w-screen h-screen ${
background.blur && "blur-sm"
}`}
style={
background.showBackground
? {
zIndex: 0,
background: background.darken.enabled
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
url(${background.backgroundImage})`
: `url(${background.backgroundImage})`,
backgroundSize: "cover",
backgroundBlendMode: "multiply",
}
: {}
}
></div>
<div
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{
zIndex: 1,
opacity: infoCard.transparency,
}}
>
<div className="m-5">
<div className="flex flex-col items-center justify-center">
<Image
src={avatar}
alt="Avatar"
width={120}
height={120}
className="rounded-full"
/>
<div className="mb-3"></div>
<h1 className="text-4xl font-bold">{name}</h1>
</div>
: `url(${background.backgroundImage})`,
backgroundSize: "cover",
backgroundBlendMode: "multiply",
}
: {}
}
></div>
<div
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{
zIndex: 1,
opacity: infoCard.transparency,
}}
>
<div className="m-5">
<div className="flex flex-col items-center justify-center">
<Image
src={avatar}
alt="Avatar"
width={120}
height={120}
className="rounded-full"
/>
<div className="mb-3"></div>
<h1 className="text-4xl font-bold">{name}</h1>
</div>
<p className="mt-4 text-lg max-w-lg">{description}</p>
<p className="mt-4 text-lg max-w-lg">{description}</p>
<div className="flex flex-col items-center">
{links.map((link, index) => {
const icons: any = link.icon?.split(" ") ?? [];
<div className="flex flex-col items-center">
{links.map((link, index) => {
const icons: any = link.icon?.split(" ") ?? [];
return (
<a
key={index}
href={link.url}
target="_blank"
rel="noopener noreferrer"
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded
return (
<a
key={index}
href={link.url}
target="_blank"
rel="noopener noreferrer"
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`}
>
{link.icon && (
<>
<FontAwesomeIcon icon={icons} />
<div className="ml-2"></div>
</>
)}
<p>{link.title}</p>
</a>
);
})}
</div>
</div>
</div>
>
{link.icon && (
<>
<FontAwesomeIcon icon={icons} />
<div className="ml-2"></div>
</>
)}
<p>{link.title}</p>
</a>
);
})}
</div>
</div>
</div>
<div className="absolute bottom-0 right-0 mb-5 mr-5">
{options.showSourceLink && (
<a
href="https://git.fascinated.cc/Fascinated/simple-links"
target="_blank"
className="mt-5 text-blue-300"
>
Website Source
</a>
)}
</div>
</main>
</>
);
<div className="absolute bottom-0 right-0 mb-5 mr-5">
{options.showSourceLink && (
<a
href="https://git.fascinated.cc/Fascinated/simple-links"
target="_blank"
className="mt-5 text-blue-300"
>
Website Source
</a>
)}
</div>
</main>
</>
);
}