Fascinated/simple-links
1
1
Fork 0
generated from Fascinated/nextjs-13-template-with-tailwindcss
Code Issues 1 Pull Requests 10 Actions Activity

added plausable analytics
All checks were successful
Publish Docker Image / docker (push) Successful in 1m45s
Details

Browse Source
This commit is contained in:
Lee
2023-07-09 07:19:08 +01:00
parent 649e1a8fde
commit 26f3d0e504
4 changed files with 119 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/app/page.tsx
View File

@ -3,96 +3,117 @@ 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 PlausibleProvider from "next-plausible";
import Image from "next/image";
import Config from "../../config.json";
library.add(fab, far, fas);
export default function Home() {
const {
background,
infoCard,
avatar,
name,
links,
options,
description,
analytics,
} = Config;
return (
<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
<div
className={`absolute inset-0 filter ${
Config.background.blur && "blur-sm"
} w-screen h-screen`}
style={
Config.background.showBackground
? {
zIndex: 0,
background: Config.background.darken.enabled
? `linear-gradient(rgba(0, 0, 0, ${Config.background.darken.amount}), rgba(0, 0, 0, ${Config.background.darken.amount})),
url(${Config.background.backgroundImage})`
: `url(${Config.background.backgroundImage})`,
backgroundSize: "cover",
backgroundBlendMode: "multiply",
}
: {}
}
></div>
<div
className={`bg-neutral-800 rounded-lg text-center shadow-lg`}
style={{
zIndex: 1,
opacity: Config.infoCard.transparency,
}}
>
<div className="m-5">
<div className="flex flex-col items-center justify-center">
<Image
src={Config.avatar}
alt="Avatar"
width={120}
height={120}
className="rounded-full"
/>
<div className="mb-3"></div>
<h1 className="text-4xl font-bold">{Config.name}</h1>
</div>
<>
{analytics.plausable.enabled && (
<PlausibleProvider
domain={analytics.plausable.siteDomain}
customDomain={analytics.plausable.domain}
selfHosted={true}
/>
)}
<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
<div
className={`absolute inset-0 filter ${
background.blur && "blur-sm"
} w-screen h-screen`}
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={`bg-neutral-800 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">{Config.description}</p>
<p className="mt-4 text-lg max-w-lg">{description}</p>
<div className="flex flex-col items-center">
{Config.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"
>
<div
return (
<a
key={index}
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:brightness-75 transition`}
href={link.url}
target="_blank"
rel="noopener noreferrer"
>
{link.icon && (
<>
<FontAwesomeIcon icon={icons} />
<div className="ml-2"></div>
</>
)}
<p>{link.title}</p>
</div>
</a>
);
})}
<div
key={index}
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:brightness-75 transition`}
>
{link.icon && (
<>
<FontAwesomeIcon icon={icons} />
<div className="ml-2"></div>
</>
)}
<p>{link.title}</p>
</div>
</a>
);
})}
</div>
</div>
</div>
</div>
<div className="absolute bottom-0 right-0 mb-5 mr-5">
{Config.options.showSourceLink && (
<h1 className="mt-5 text-blue-300">
<a
href="https://git.fascinated.cc/Fascinated/simple-links"
target="_blank"
>
Website Source
</a>
</h1>
)}
</div>
</main>
<div className="absolute bottom-0 right-0 mb-5 mr-5">
{options.showSourceLink && (
<h1 className="mt-5 text-blue-300">
<a
href="https://git.fascinated.cc/Fascinated/simple-links"
target="_blank"
>
Website Source
</a>
</h1>
)}
</div>
</main>
</>
);
}