generated from Fascinated/nextjs-13-template-with-tailwindcss
use spaces instead of tabs
All checks were successful
Publish Docker Image / docker (push) Successful in 1m47s
All checks were successful
Publish Docker Image / docker (push) Successful in 1m47s
This commit is contained in:
parent
6a165a3161
commit
cc0c9a14e1
126
README.md
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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
112
config.json
112
config.json
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
222
src/app/page.tsx
222
src/app/page.tsx
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user