Add goatcounter

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>
   );

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;

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();

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);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "samuelp.ing",
-  "version": "4.0.0",
+  "version": "4",
   "private": true,
   "scripts": {
     "dev": "next dev",