feat: add visitor counter

.env.example

@@ -1 +1,3 @@
 WDS_SOCKET_PORT=0
+REACT_APP_WDS_SOCKET_PORT=$WDS_SOCKET_PORT
+GOAT_COUNTER_ID=example

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

src/components/common/goatCounter.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+
+const GoatCounter: React.FC = () => {
+  useEffect(() => {
+    const handleLoad = () => {
+      const script = document.createElement("script");
+
+      script.src = "//gc.zgo.at/count.js";
+      script.async = true;
+      if (process.env.GOAT_COUNTER_ID) {
+        script.dataset.goatcounter = `https://${process.env.REACT_APP_GOAT_COUNTER_ID}.goatcounter.com/count`;
+      } else {
+        console.error("GOAT_COUNTER_ID is not defined");
+      }
+
+      document.body.appendChild(script);
+    };
+
+    // Attach the event listener for window load
+    window.addEventListener("load", handleLoad);
+
+    // Cleanup: remove event listener
+    return () => {
+      window.removeEventListener("load", handleLoad);
+    };
+  }, []);
+
+  return null; // No UI for this component
+};
+
+export default GoatCounter;

src/components/main.tsx

@@ -6,6 +6,7 @@ import {
   TableSection,
   Title,
 } from "components";
+import GoatCounter from "./common/goatCounter";
 
 interface MainProps {}
 
@@ -21,6 +22,7 @@ export const Main: React.FC<MainProps> = (props) => {
         </div>
         <FooterText />
       </FilterContextProvider>
+      <GoatCounter />
     </main>
   );
 };