From a4a68882483478116d8cef9b7f65c31216704847 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Tue, 2 Aug 2022 00:24:17 -0700
Subject: [PATCH] Moved telemetry code to script.

---
 components/layout/Footer.js    |  8 ++++----
 lib/constants.js               |  1 +
 next.config.js                 | 13 ++++++-------
 pages/api/scripts/telemetry.js | 14 ++++++++++++++
 4 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 pages/api/scripts/telemetry.js

diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index e7d0b14f..f9c2ba87 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -1,15 +1,15 @@
-import React from 'react';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useStore from 'store/version';
 import { HOMEPAGE_URL, REPO_URL } from 'lib/constants';
-import useConfig from 'hooks/useConfig';
 
 export default function Footer() {
   const { current } = useStore();
-  const { telemetryDisabled } = useConfig();
+  const { pathname } = useRouter();
 
   return (
     <footer className={classNames(styles.footer, 'row')}>
@@ -30,7 +30,7 @@ export default function Footer() {
       <div className={classNames(styles.version, 'col-12 col-md-4')}>
         <Link href={REPO_URL}>{`v${current}`}</Link>
       </div>
-      {telemetryDisabled && <img src={`https://i.umami.is/a.png?v=${current}`} alt="" />}
+      {!pathname.includes('/share/') && <Script src={`/telemetry.js?v=${current}`} />}
     </footer>
   );
 }
diff --git a/lib/constants.js b/lib/constants.js
index f971ee02..b81bcabd 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -9,6 +9,7 @@ export const SHARE_TOKEN_HEADER = 'x-umami-share-token';
 export const HOMEPAGE_URL = 'https://umami.is';
 export const REPO_URL = 'https://github.com/umami-software/umami';
 export const UPDATES_URL = 'https://api.umami.is/v1/updates';
+export const TELEMETRY_PIXEL = 'https://i.umami.is/a.png';
 
 export const DEFAULT_LOCALE = 'en-US';
 export const DEFAULT_THEME = 'light';
diff --git a/next.config.js b/next.config.js
index d6a953fc..09e67582 100644
--- a/next.config.js
+++ b/next.config.js
@@ -56,14 +56,13 @@ module.exports = {
         source: '/:path*',
         headers,
       },
+    ];
+  },
+  async rewrites() {
+    return [
       {
-        source: `/(.*\\.js)`,
-        headers: [
-          {
-            key: 'Cache-Control',
-            value: 'public, max-age=2592000', // 30 days
-          },
-        ],
+        source: '/telemetry.js',
+        destination: '/api/scripts/telemetry',
       },
     ];
   },
diff --git a/pages/api/scripts/telemetry.js b/pages/api/scripts/telemetry.js
new file mode 100644
index 00000000..75792a9b
--- /dev/null
+++ b/pages/api/scripts/telemetry.js
@@ -0,0 +1,14 @@
+import { TELEMETRY_PIXEL } from 'lib/constants';
+
+export default function handler(req, res) {
+  const { v } = req.query;
+  res.setHeader('content-type', 'text/javascript');
+  res.send(
+    `(() => {
+      const i = document.createElement('img');
+      i.setAttribute('src','${TELEMETRY_PIXEL}?v=${v}');
+      i.setAttribute('style','width:0;height:0;position:absolute;pointer-events:none;');
+      document.body.appendChild(i);
+    })();`,
+  );
+}