switch tracking

.env.example

@@ -1,2 +1,4 @@
 GITHUB_TOKEN=xxx
-NEXT_PUBLIC_TYPEKIT_ID=xxx
+NEXT_PUBLIC_TYPEKIT_ID=xxx
+NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://umami.example.com/umami.js
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=1

.github/workflows/ci.yml

@@ -74,6 +74,8 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NEXT_PUBLIC_TYPEKIT_ID: ${{ secrets.NEXT_PUBLIC_TYPEKIT_ID }}
+          NEXT_PUBLIC_UMAMI_SCRIPT_URL: ${{ secrets.NEXT_PUBLIC_UMAMI_SCRIPT_URL }}
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ secrets.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
 
       # - uses: actions/upload-artifact@v1
       #   if: github.ref == 'refs/heads/main'

_content/meta.json

@@ -10,8 +10,6 @@
   "gpg": "/gpg.txt",
   "addressbook": "/matthias-kretschmann.vcf",
   "bugs": "https://github.com/kremalicious/portfolio/issues/new",
-  "matomoUrl": "https://analytics.kremalicious.com",
-  "matomoSite": "2",
   "allowedHosts": [
     "matthiaskretschmann.com",
     "beta.matthiaskretschmann.com",

package-lock.json

@@ -11,7 +11,6 @@
       "dependencies": {
         "@giphy/js-fetch-api": "^4.4.0",
         "@kremalicious/react-feather": "^2.1.0",
-        "@socialgouv/matomo-next": "^1.4.0",
         "@yaireo/relative-time": "^1.0.2",
         "file-saver": "^2.0.5",
         "framer-motion": "^7.6.7",
@@ -3067,14 +3066,6 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
-    "node_modules/@socialgouv/matomo-next": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@socialgouv/matomo-next/-/matomo-next-1.4.0.tgz",
-      "integrity": "sha512-S+kNX7dwo/cL0VE7GWY8Gnf3t7aeXD4CzallRz9IEttjHJDJI2S8xOrcyaGimYpInr3nDNo+WqeYrafKUdsn1g==",
-      "peerDependencies": {
-        "next": ">= 9.5.5"
-      }
-    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",

package.json

@@ -26,7 +26,6 @@
   "dependencies": {
     "@giphy/js-fetch-api": "^4.4.0",
     "@kremalicious/react-feather": "^2.1.0",
-    "@socialgouv/matomo-next": "^1.4.0",
     "@yaireo/relative-time": "^1.0.2",
     "file-saver": "^2.0.5",
     "framer-motion": "^7.6.7",

src/layouts/Site/index.test.tsx

@@ -1,8 +1,6 @@
 import { render, screen, act } from '@testing-library/react'
 import Site from '.'
 import { dataLocation } from '../../../tests/__fixtures__/location'
-
-jest.mock('@socialgouv/matomo-next')
 ;(global.fetch as jest.Mock) = jest.fn(() =>
   Promise.resolve({
     ok: true,

src/layouts/Site/index.tsx

@@ -1,30 +1,29 @@
-import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 import ThemeSwitch from '../../components/ThemeSwitch'
 import Header from '../../components/Header'
 import Footer from '../../components/Footer'
 import MetaFavicon from '../../components/Meta/Favicon'
-import { init } from '@socialgouv/matomo-next'
 import meta from '../../../_content/meta.json'
 import HostnameCheck from '../../components/HostnameCheck'
 import styles from './index.module.css'
+import Script from 'next/script'
+import { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID } from '../../lib/umami'
+
+const isProduction = process.env.NODE_ENV === 'production'
 
 export default function Site({ children }: { children: React.ReactNode }) {
   const router = useRouter()
 
-  // init Matomo tracking
-  useEffect(() => {
-    if (window._paq) return
-    init({ url: meta.matomoUrl, siteId: meta.matomoSite })
-  }, [])
-
   return (
     <>
+      {isProduction && (
+        <Script src={UMAMI_SCRIPT_URL} data-website-id={UMAMI_WEBSITE_ID} />
+      )}
       <HostnameCheck allowedHosts={meta.allowedHosts} />
       <MetaFavicon />
       <ThemeSwitch />
 
-      <Header small={router.asPath !== '/'} />
+      <Header small={router.pathname !== '/'} />
       <main className={styles.screen}>{children}</main>
       <Footer />
     </>

src/lib/github.ts

@@ -1,6 +1,9 @@
 //
 // Get GitHub repos
 //
+if (!process.env.GITHUB_TOKEN) {
+  throw new Error('Missing GitHub environment variable')
+}
 
 import data from '../../_content/repos.json'
 import Repo from '../interfaces/repo'

src/lib/umami.ts

@@ -0,0 +1,8 @@
+const UMAMI_SCRIPT_URL = process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL
+const UMAMI_WEBSITE_ID = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID
+
+if (!UMAMI_SCRIPT_URL || !UMAMI_WEBSITE_ID) {
+  throw new Error('Missing Umami environment variables')
+}
+
+export { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID }