Merge pull request #464 from hotosm/feat/matomo

Add matomo cookie / tracking acceptance banner

Author: nrjadkry

src/frontend/.nvmrc

@@ -1 +1 @@
-v22.13.0
+v22

src/frontend/Dockerfile

@@ -1,21 +1,30 @@
 # ARG for the base image
-ARG NODE_BASE=22.13.0-bullseye-slim
+ARG NODE_BASE=22-slim
 ARG MINIO_TAG=RELEASE.2024-08-03T04-33-23Z
 ARG BASE64_ARGS_TO_ENV=ENV_VARS_BASE64_ENCODED_FOR_LIVE
 
 # Base image with frontend code
 FROM node:${NODE_BASE} AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
 RUN mkdir -p /app
 WORKDIR /app
 
+
 # Run development environment
 FROM base AS development
+COPY ./package.json pnpm-lock.yaml .
+# FIXME this npm install is a workaround due to https://github.com/nodejs/corepack/issues/627
+RUN npm install -g corepack@0.31.0
+# FIXME delete this line after fixed upstream
+RUN corepack prepare pnpm@9.15.5 --activate && corepack enable && corepack install
 ENTRYPOINT ["/bin/sh", "-c", "pnpm install; pnpm run start --host 0.0.0.0;"]
 
+
+
 # Generate frontend build files
 FROM base AS build
 ARG BASE64_ARGS_TO_ENV
-
 COPY ./package.json pnpm-lock.yaml .
 # FIXME this npm install is a workaround due to https://github.com/nodejs/corepack/issues/627
 RUN npm install -g corepack@0.31.0
@@ -26,6 +35,8 @@ COPY . /app
 RUN ( echo ${BASE64_ARGS_TO_ENV} | base64 -di ) > .env
 RUN pnpm run build
 
+
+
 # Copy static files to minio and generated index.html to volume
 FROM docker.io/minio/minio:${MINIO_TAG} AS live
 COPY --from=build /app/dist /tmp/dist

src/frontend/package.json

@@ -3,7 +3,6 @@
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@geomatico/maplibre-cog-protocol": "^0.3.1",
     "@hotosm/gcp-editor": "^0.0.9",
-    "@hotosm/ui": "0.2.0-b6",
     "@mapbox/mapbox-gl-draw": "^1.4.2",
     "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
     "@radix-ui/react-popover": "^1.0.6",
@@ -58,6 +57,9 @@
     "wkt": "^0.1.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@tanstack/eslint-plugin-query": "^4.29.4",
     "@types/file-saver": "^2.0.5",
     "@types/geojson": "^7946.0.10",
@@ -90,6 +92,9 @@
     "typescript": "^4.9.3",
     "vite": "^4.2.0"
   },
+  "peerDependencies": {
+    "@hotosm/ui": "0.2.0-b6"
+  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix",
@@ -107,5 +112,5 @@
   },
   "type": "module",
   "version": "0.0.0",
-	"packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }

src/frontend/pnpm-lock.yaml

@@ -1,6 +1,14 @@
+import '@hotosm/ui/dist/style.css';
+
+// Workaround required, as @hotosm/gcp-editor already imports all components
+if (!customElements.get('hot-tracking')) {
+  import('@hotosm/ui/components/tracking/tracking');
+}
+
 import { useLocation } from 'react-router-dom';
 import { initDomToCode } from 'dom-to-code';
 import { ToastContainer } from 'react-toastify';
+
 import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 import generateRoutes from '@Routes/generateRoutes';
 import appRoutes from '@Routes/appRoutes';
@@ -99,6 +107,11 @@ export default function App() {
         </div>
         <ScrollToTop />
       </div>
+      <hot-tracking
+        style={{position: 'fixed', bottom: '0%'}}
+        site-id={'35'} domain={'dronetm.org'}
+        force={true}>
+      </hot-tracking>
     </>
   );
 }