generated from Fascinated/nextjs-13-template-with-tailwindcss
added plausable analytics
All checks were successful
Publish Docker Image / docker (push) Successful in 1m45s
All checks were successful
Publish Docker Image / docker (push) Successful in 1m45s
This commit is contained in:
parent
649e1a8fde
commit
26f3d0e504
@ -28,6 +28,13 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"analytics": {
|
||||
"plausable": {
|
||||
"enabled": true,
|
||||
"siteDomain": "example.com",
|
||||
"domain": "analyics.example.com"
|
||||
}
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Git",
|
||||
|
||||
14
package-lock.json
generated
14
package-lock.json
generated
@ -20,6 +20,7 @@
|
||||
"eslint": "8.44.0",
|
||||
"eslint-config-next": "13.4.7",
|
||||
"next": "13.4.7",
|
||||
"next-plausible": "^3.8.0",
|
||||
"postcss": "8.4.24",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
@ -3035,6 +3036,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/next-plausible": {
|
||||
"version": "3.8.0",
|
||||
"resolved": "https://registry.npmjs.org/next-plausible/-/next-plausible-3.8.0.tgz",
|
||||
"integrity": "sha512-fOSI5dRwQkDcARAPqwCM2nqYf2bCP5ITUrX/jj2owkggi7LHAaKku4k/6CoKHAygs7EumYiGOuPt+qaTxxo+YA==",
|
||||
"funding": {
|
||||
"url": "https://github.com/4lejandrito/next-plausible?sponsor=1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"next": "^11.1.0 || ^12.0.0 || ^13.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/next/node_modules/postcss": {
|
||||
"version": "8.4.14",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"eslint": "8.44.0",
|
||||
"eslint-config-next": "13.4.7",
|
||||
"next": "13.4.7",
|
||||
"next-plausible": "^3.8.0",
|
||||
"postcss": "8.4.24",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
|
||||
173
src/app/page.tsx
173
src/app/page.tsx
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user