chore: adding matomo tracking

docs/docusaurus.config.ts

@@ -47,7 +47,9 @@ export default {
       },
     ],
   ],
-
+  customFields: {
+    MATOMO_CONTAINER: process.env.MATOMO_CONTAINER, // not really a secret, it's in the footer anyway
+  },
   themeConfig: {
     colorMode: {
       respectPrefersColorScheme: true,
@@ -148,6 +150,27 @@ export default {
         };
       },
     }),
+    () => ({
+      name: 'gdpr-cookie-consent',
+      injectHtmlTags({ content }) {
+        return {
+          headTags: [
+            {
+              tagName: 'div',
+              attributes: {
+                id: 'matomo-opt-out',
+              },
+            },
+            {
+              tagName: 'script',
+              attributes: {
+                src: 'https://noirlang.matomo.cloud/index.php?module=CoreAdminHome&action=optOutJS&divId=matomo-opt-out&language=auto&backgroundColor=FFFFFF&fontColor=000000&fontSize=16px&fontFamily=Roboto&showIntro=1',
+              },
+            },
+          ],
+        };
+      },
+    }),
     [
       'docusaurus-plugin-typedoc',
       {

docs/package.json

@@ -9,6 +9,7 @@
     "clean": "rm -rf ./processed-docs ./processed-docs ./build",
     "version::stables": "ts-node ./scripts/setStable.ts",
     "serve": "serve build",
+    "swizzle": "docusaurus swizzle",
     "version": "yarn version::stables && ./scripts/cut_version.sh"
   },
   "dependencies": {

docs/src/components/Matomo/matomo.jsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+export default function useMatomo() {
+  const { siteConfig } = useDocusaurusContext();
+  const useIsBrowserValue = useIsBrowser();
+  if (!useIsBrowserValue) return null;
+
+  useEffect(() => {
+    console.log(siteConfig.customFields.MATOMO_CONTAINER);
+    var _mtm = (window._mtm = window._mtm || []);
+    _mtm.push({ 'mtm.startTime': new Date().getTime(), event: 'mtm.Start' });
+    var d = document,
+      g = d.createElement('script'),
+      s = d.getElementsByTagName('script')[0];
+    g.async = true;
+    g.src = `https://cdn.matomo.cloud/noirlang.matomo.cloud/container_${siteConfig.customFields.MATOMO_CONTAINER}.js`;
+    s.parentNode.insertBefore(g, s);
+  }, [window.location.href]);
+
+  return null;
+}

docs/src/pages/index.jsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import React, { useEffect, lazy, Suspense } from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 

docs/src/theme/Footer/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Footer from '@theme-original/Footer';
+import useMatomo from '@site/src/components/Matomo/matomo';
+
+export default function FooterWrapper(props) {
+  useMatomo();
+
+  return (
+    <>
+      <Footer {...props} />
+    </>
+  );
+}