added plausable analytics

config.json

@@ -28,6 +28,13 @@
 			}
 		]
 	},
+	"analytics": {
+		"plausable": {
+			"enabled": true,
+			"siteDomain": "example.com",
+			"domain": "analyics.example.com"
+		}
+	},
 	"links": [
 		{
 			"title": "Git",

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",

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",

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