From 26f3d0e50462a15607fc2549c1ba83441183c33e Mon Sep 17 00:00:00 2001
From: Fascinated <admin@fascinated.cc>
Date: Sun, 9 Jul 2023 07:19:08 +0100
Subject: [PATCH] added plausable analytics

---
 config.json       |   7 ++
 package-lock.json |  14 ++++
 package.json      |   1 +
 src/app/page.tsx  | 173 ++++++++++++++++++++++++++--------------------
 4 files changed, 119 insertions(+), 76 deletions(-)

diff --git a/config.json b/config.json
index 35612fb..998ba86 100644
--- a/config.json
+++ b/config.json
@@ -28,6 +28,13 @@
 			}
 		]
 	},
+	"analytics": {
+		"plausable": {
+			"enabled": true,
+			"siteDomain": "example.com",
+			"domain": "analyics.example.com"
+		}
+	},
 	"links": [
 		{
 			"title": "Git",
diff --git a/package-lock.json b/package-lock.json
index fd47301..1a228ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 7b71751..ea14ea7 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f052c9a..b84713c 100644
--- a/src/app/page.tsx
+++ b/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>
+		</>
 	);
 }