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
|
```json
|
||||||
{
|
{
|
||||||
"name": "Your Name", // The name you want to display on the site
|
"name": "Your Name", // The name you want to display on the site
|
||||||
"description": "A description about yourself", // The description you want to use
|
"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
|
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg", // The avatar that is shown at the top of the site
|
||||||
"background": {
|
"background": {
|
||||||
// If you want to use a custom (not dark) 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": {
|
||||||
// Should we darken the background?
|
// Should we darken the background?
|
||||||
"enabled": true,
|
"enabled": true,
|
||||||
"amount": 0.7
|
"amount": 0.7
|
||||||
},
|
},
|
||||||
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg" // The image to use in the background
|
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg" // The image to use in the background
|
||||||
},
|
},
|
||||||
"theme": "dark", // "dark" or "light" themes
|
"theme": "dark", // "dark" or "light" themes
|
||||||
"infoCard": {
|
"infoCard": {
|
||||||
// The card that displays your info and buttons
|
// The card that displays your info and buttons
|
||||||
"transparency": 0.85 // How transparent should it be?
|
"transparency": 0.85 // How transparent should it be?
|
||||||
},
|
},
|
||||||
"options": {
|
"options": {
|
||||||
// Website options
|
// Website options
|
||||||
"showSourceLink": true // Should we show the "Source Code" link
|
"showSourceLink": true // Should we show the "Source Code" link
|
||||||
},
|
},
|
||||||
"metadata": {
|
"metadata": {
|
||||||
// Search engine and embedding metadata (discord, twitter, etc embeds)
|
// 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
|
||||||
"authors": [
|
"authors": [
|
||||||
// SEO metadata
|
// SEO metadata
|
||||||
{
|
{
|
||||||
"name": "Fascinated",
|
"name": "Fascinated",
|
||||||
"url": "https://fascinated.cc"
|
"url": "https://fascinated.cc"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"links": [
|
"links": [
|
||||||
// The buttons to show links for
|
// 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
|
||||||
"icon": "fab fa-github", // The icon of the button (can be removed to show no icon)
|
"icon": "fab fa-github", // The icon of the button (can be removed to show no icon)
|
||||||
"color": {
|
"color": {
|
||||||
// The color of the icon (tailwindcss colors)
|
// The color of the icon (tailwindcss colors)
|
||||||
"normal": "bg-green-700"
|
"normal": "bg-green-700"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Twitch",
|
"title": "Twitch",
|
||||||
"url": "https://twitch.tv/fascinated_",
|
"url": "https://twitch.tv/fascinated_",
|
||||||
"icon": "fab fa-twitch",
|
"icon": "fab fa-twitch",
|
||||||
"color": {
|
"color": {
|
||||||
"normal": "bg-[#6441a5]"
|
"normal": "bg-[#6441a5]"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Documentation",
|
"title": "Documentation",
|
||||||
"url": "https://docs.fascinated.cc",
|
"url": "https://docs.fascinated.cc",
|
||||||
"color": {
|
"color": {
|
||||||
"normal": "bg-neutral-700"
|
"normal": "bg-neutral-700"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
112
config.json
112
config.json
@ -1,58 +1,58 @@
|
|||||||
{
|
{
|
||||||
"configVersion": "0.1.2",
|
"configVersion": "0.1.2",
|
||||||
"name": "Your Name",
|
"name": "Your Name",
|
||||||
"description": "A description about yourself",
|
"description": "A description about yourself",
|
||||||
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg",
|
"avatar": "https://cdn.fascinated.cc/KWprz2.jpg",
|
||||||
"background": {
|
"background": {
|
||||||
"showBackground": true,
|
"showBackground": true,
|
||||||
"blur": true,
|
"blur": true,
|
||||||
"darken": {
|
"darken": {
|
||||||
"enabled": true,
|
"enabled": true,
|
||||||
"amount": 0.7
|
"amount": 0.7
|
||||||
},
|
},
|
||||||
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg"
|
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg"
|
||||||
},
|
},
|
||||||
"theme": "dark",
|
"theme": "dark",
|
||||||
"infoCard": {
|
"infoCard": {
|
||||||
"transparency": 0.85
|
"transparency": 0.85
|
||||||
},
|
},
|
||||||
"options": {
|
"options": {
|
||||||
"showSourceLink": true
|
"showSourceLink": true
|
||||||
},
|
},
|
||||||
"metadata": {
|
"metadata": {
|
||||||
"title": "Your Name",
|
"title": "Your Name",
|
||||||
"description": "website description",
|
"description": "website description",
|
||||||
"themeColor": "#6441a5",
|
"themeColor": "#6441a5",
|
||||||
"authors": [
|
"authors": [
|
||||||
{
|
{
|
||||||
"name": "Fascinated",
|
"name": "Fascinated",
|
||||||
"url": "https://fascinated.cc"
|
"url": "https://fascinated.cc"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"links": [
|
"links": [
|
||||||
{
|
{
|
||||||
"title": "Git",
|
"title": "Git",
|
||||||
"url": "https://git.fascinated.cc",
|
"url": "https://git.fascinated.cc",
|
||||||
"icon": "fab fa-github",
|
"icon": "fab fa-github",
|
||||||
"color": {
|
"color": {
|
||||||
"normal": "bg-green-700"
|
"normal": "bg-green-700"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Twitch",
|
"title": "Twitch",
|
||||||
"url": "https://twitch.tv/fascinated_",
|
"url": "https://twitch.tv/fascinated_",
|
||||||
"icon": "fab fa-twitch",
|
"icon": "fab fa-twitch",
|
||||||
"color": {
|
"color": {
|
||||||
"normal": "bg-[#6441a5]"
|
"normal": "bg-[#6441a5]"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Documentation",
|
"title": "Documentation",
|
||||||
"url": "https://docs.fascinated.cc",
|
"url": "https://docs.fascinated.cc",
|
||||||
"color": {
|
"color": {
|
||||||
"normal": "bg-neutral-700"
|
"normal": "bg-neutral-700"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,4 +3,4 @@ module.exports = {
|
|||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|||||||
@ -11,13 +11,13 @@ const inter = Inter({ subsets: ["latin"] });
|
|||||||
export const metadata = Config.metadata; // Site metadata from the config
|
export const metadata = Config.metadata; // Site metadata from the config
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={inter.className}>{children}</body>
|
<body className={inter.className}>{children}</body>
|
||||||
</html>
|
</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
|
library.add(fab, far, fas); // Loading in the icons from FontAwesome
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const {
|
const {
|
||||||
background,
|
background,
|
||||||
infoCard,
|
infoCard,
|
||||||
avatar,
|
avatar,
|
||||||
name,
|
name,
|
||||||
links,
|
links,
|
||||||
options,
|
options,
|
||||||
description,
|
description,
|
||||||
theme, // Fallback to dark if no theme was found
|
theme, // Fallback to dark if no theme was found
|
||||||
} = 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
|
||||||
// all used colors are from TailwindCSS
|
// all used colors are from TailwindCSS
|
||||||
const themeColors: {
|
const themeColors: {
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
background: string;
|
background: string;
|
||||||
textColor: string;
|
textColor: string;
|
||||||
buttonTextColor: string;
|
buttonTextColor: string;
|
||||||
};
|
};
|
||||||
} = {
|
} = {
|
||||||
dark: {
|
dark: {
|
||||||
background: "bg-neutral-900",
|
background: "bg-neutral-900",
|
||||||
textColor: "text-white",
|
textColor: "text-white",
|
||||||
buttonTextColor: "text-white",
|
buttonTextColor: "text-white",
|
||||||
},
|
},
|
||||||
light: {
|
light: {
|
||||||
background: "bg-white",
|
background: "bg-white",
|
||||||
textColor: "text-black",
|
textColor: "text-black",
|
||||||
buttonTextColor: "text-white",
|
buttonTextColor: "text-white",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const selectedTheme = themeColors[theme]; // The theme to use
|
const selectedTheme = themeColors[theme]; // The theme to use
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main
|
<main
|
||||||
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
|
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`absolute inset-0 filter w-screen h-screen ${
|
className={`absolute inset-0 filter w-screen h-screen ${
|
||||||
background.blur && "blur-sm"
|
background.blur && "blur-sm"
|
||||||
}`}
|
}`}
|
||||||
style={
|
style={
|
||||||
background.showBackground
|
background.showBackground
|
||||||
? {
|
? {
|
||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
background: background.darken.enabled
|
background: background.darken.enabled
|
||||||
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
|
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
|
||||||
url(${background.backgroundImage})`
|
url(${background.backgroundImage})`
|
||||||
: `url(${background.backgroundImage})`,
|
: `url(${background.backgroundImage})`,
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
backgroundBlendMode: "multiply",
|
backgroundBlendMode: "multiply",
|
||||||
}
|
}
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
|
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
|
||||||
style={{
|
style={{
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
opacity: infoCard.transparency,
|
opacity: infoCard.transparency,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="m-5">
|
<div className="m-5">
|
||||||
<div className="flex flex-col items-center justify-center">
|
<div className="flex flex-col items-center justify-center">
|
||||||
<Image
|
<Image
|
||||||
src={avatar}
|
src={avatar}
|
||||||
alt="Avatar"
|
alt="Avatar"
|
||||||
width={120}
|
width={120}
|
||||||
height={120}
|
height={120}
|
||||||
className="rounded-full"
|
className="rounded-full"
|
||||||
/>
|
/>
|
||||||
<div className="mb-3"></div>
|
<div className="mb-3"></div>
|
||||||
<h1 className="text-4xl font-bold">{name}</h1>
|
<h1 className="text-4xl font-bold">{name}</h1>
|
||||||
</div>
|
</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">
|
<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(" ") ?? [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
key={index}
|
key={index}
|
||||||
href={link.url}
|
href={link.url}
|
||||||
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`}
|
||||||
>
|
>
|
||||||
{link.icon && (
|
{link.icon && (
|
||||||
<>
|
<>
|
||||||
<FontAwesomeIcon icon={icons} />
|
<FontAwesomeIcon icon={icons} />
|
||||||
<div className="ml-2"></div>
|
<div className="ml-2"></div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<p>{link.title}</p>
|
<p>{link.title}</p>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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
|
||||||
href="https://git.fascinated.cc/Fascinated/simple-links"
|
href="https://git.fascinated.cc/Fascinated/simple-links"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="mt-5 text-blue-300"
|
className="mt-5 text-blue-300"
|
||||||
>
|
>
|
||||||
Website Source
|
Website Source
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user