From 8562250c0cd0502092c2818fe81f6076abc7c273 Mon Sep 17 00:00:00 2001
From: Samuel Ping <sam.ping@mongodb.com>
Date: Mon, 1 Jan 2024 23:31:02 -0500
Subject: [PATCH] Add goatcounter

---
 app/layout.js             |  2 ++
 components/goatCounter.js | 26 ++++++++++++++++++++++++++
 components/navbar.js      |  2 +-
 components/themeToggle.js |  3 ++-
 package-lock.json         |  4 ++--
 package.json              |  2 +-
 6 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 components/goatCounter.js

diff --git a/app/layout.js b/app/layout.js
index 913c421..ddea1da 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,3 +1,4 @@
+import GoatCounter from '@/components/goatCounter';
 import Navbar from '@/components/navbar';
 import Footer from '@/components/footer';
 import ThemeProvider from '@/components/themeProvider';
@@ -50,6 +51,7 @@ export default function RootLayout({ children }) {
           <main className="flex flex-col flex-grow gap-y-14">{children}</main>
           <Footer navbarButtons={NavbarButtons} />
         </ThemeProvider>
+        <GoatCounter />
       </body>
     </html>
   );
diff --git a/components/goatCounter.js b/components/goatCounter.js
new file mode 100644
index 0000000..fe04719
--- /dev/null
+++ b/components/goatCounter.js
@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import Script from 'next/script';
+import { usePathname } from 'next/navigation';
+
+const GoatCounter = () => {
+  let path = usePathname();
+
+  useEffect(() => {
+    if (window.goatcounter === undefined) return;
+
+    window.goatcounter.count({ path });
+  }, [path]);
+
+  return (
+    <Script
+      data-goatcounter="https://stats.samuelp.ing/count"
+      async={true}
+      src="//gc.zgo.at/count.js"
+    />
+  );
+};
+
+export default GoatCounter;
diff --git a/components/navbar.js b/components/navbar.js
index 3c1b5d8..454b182 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -7,7 +7,7 @@ import { Popover, Transition } from '@headlessui/react';
 import HamburgerMenuIcon from '@/components/hamburgerMenuIcon';
 import Logo from '@/components/logo';
 import NavbarButton from '@/components/navbarButton';
-import { ThemeToggle } from './themeToggle';
+import { ThemeToggle } from '@/components/themeToggle';
 
 export default function Navbar({ navbarButtons }) {
   const pathname = usePathname();
diff --git a/components/themeToggle.js b/components/themeToggle.js
index 36f3c5e..dbaf161 100644
--- a/components/themeToggle.js
+++ b/components/themeToggle.js
@@ -2,7 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
-import { MoonIcon, SunIcon } from './icons';
+
+import { MoonIcon, SunIcon } from '@/components/icons';
 
 export const ThemeToggle = () => {
   const [mounted, setMounted] = useState(false);
diff --git a/package-lock.json b/package-lock.json
index b7364cd..c6d99ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "samuelp.ing",
-  "version": "4.0.0",
+  "version": "4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "samuelp.ing",
-      "version": "4.0.0",
+      "version": "4",
       "dependencies": {
         "@headlessui/react": "^1.7.17",
         "esbuild": "^0.19.10",
diff --git a/package.json b/package.json
index d5a57b3..2824d1d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "samuelp.ing",
-  "version": "4.0.0",
+  "version": "4",
   "private": true,
   "scripts": {
     "dev": "next dev",