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,26 +3,46 @@ 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 (
+		<>
+			{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 ${
-					Config.background.blur && "blur-sm"
+						background.blur && "blur-sm"
 					} w-screen h-screen`}
 					style={
-					Config.background.showBackground
+						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})`,
+									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",
 							  }
@@ -33,26 +53,26 @@ export default function Home() {
 					className={`bg-neutral-800 rounded-lg text-center shadow-lg`}
 					style={{
 						zIndex: 1,
-					opacity: Config.infoCard.transparency,
+						opacity: infoCard.transparency,
 					}}
 				>
 					<div className="m-5">
 						<div className="flex flex-col items-center justify-center">
 							<Image
-							src={Config.avatar}
+								src={avatar}
 								alt="Avatar"
 								width={120}
 								height={120}
 								className="rounded-full"
 							/>
 							<div className="mb-3"></div>
-						<h1 className="text-4xl font-bold">{Config.name}</h1>
+							<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) => {
+							{links.map((link, index) => {
 								const icons: any = link.icon?.split(" ");
 
 								return (
@@ -82,7 +102,7 @@ export default function Home() {
 				</div>
 
 				<div className="absolute bottom-0 right-0 mb-5 mr-5">
-				{Config.options.showSourceLink && (
+					{options.showSourceLink && (
 						<h1 className="mt-5 text-blue-300">
 							<a
 								href="https://git.fascinated.cc/Fascinated/simple-links"
@@ -94,5 +114,6 @@ export default function Home() {
 					)}
 				</div>
 			</main>
+		</>
 	);
 }