analytics: move to goatcounter (#4)

arturocr · web-flow · commit c63bff446667 · 2020-11-24T00:39:48.000-06:00
diff --git a/lib/goat-counter.js b/lib/goat-counter.js
@@ -0,0 +1,7 @@
+const pageView = url => {
+  window.goatcounter?.count({
+    path: url,
+  });
+};
+
+export { pageView };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,6 @@
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
-    "@happykit/analytics": "^1",
     "clsx": "^1",
     "lite-vimeo-embed": "^0.1.0",
     "lite-youtube-embed": "^0.1.2",
@@ -37,6 +36,7 @@
     "next-seo": "^4.17.0",
     "postcss": "^8.1.8",
     "prettier": "^2.1.2",
+    "prismjs": ">=1.22.0",
     "rehype": "^11.0.0",
     "remark-code-titles": "^0.1.1",
     "stylelint-config-recommended": "^3.0.0",
diff --git a/pages/_app.js b/pages/_app.js
@@ -2,22 +2,22 @@ import { useEffect } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import Head from 'next/head';
 import { DefaultSeo } from 'next-seo';
-import { useAnalytics } from '@happykit/analytics';
 
 import Footer from '@/components/footer';
 import Header from '@/components/header';
 import MDXComponents from '@/components/mdx-components';
 import SEO from '../next-seo.config';
+import { pageView } from '@/lib/goat-counter';
 import theme from '@/lib/theme';
 
 import '@/styles/globals.css';
 import '@/styles/custom.css';
 import '@/styles/prism.css';
 
 const MyApp = ({ Component, pageProps, router }) => {
-  useAnalytics({ publicKey: 'analytics_pub_bba22bdbcd' });
   useEffect(() => {
-    const handleRouteChange = () => {
+    const handleRouteChange = url => {
+      pageView(url);
       window.scrollTo({
         top: 0,
         left: 0,
diff --git a/pages/_document.js b/pages/_document.js
@@ -11,6 +11,7 @@ class MyDocument extends Document {
             href='https://fonts.gstatic.com/'
             crossOrigin=''
           />
+          <link rel='preconnect' href='https://arturocampos.goatcounter.com' />
           <link
             rel='apple-touch-icon'
             sizes='180x180'
@@ -38,6 +39,11 @@ class MyDocument extends Document {
             rel='stylesheet'
             href='https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'
           />
+          <script
+            async
+            data-goatcounter='https://arturocampos.goatcounter.com/count'
+            src='//gc.zgo.at/count.js'
+          ></script>
         </Head>
         <body className='text-gray-700 body-font'>
           <Main />
