From d8d1948c1dbd45b704a9e62b2e958acfc56b115a Mon Sep 17 00:00:00 2001
From: Leo Nicolle <leo@linkurio.us>
Date: Sat, 2 Mar 2024 18:57:26 +0100
Subject: [PATCH 1/2] do not use auto track, use manual track

---
 .github/workflows/deploy.yml |  1 +
 client/src/main.ts           |  3 +--
 client/src/router/index.ts   | 24 ++++++++++++++++++------
 nginx-proxy.conf             |  4 ++--
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 5bbca78..f357297 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - plausible
 
 jobs:
   deploy:
diff --git a/client/src/main.ts b/client/src/main.ts
index c4d7ec0..df2c844 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -13,5 +13,4 @@ const app = createApp(App)
   .use(naive)
   .use(i18n);
 
-app.mount('#app');
-plausible.enableAutoPageviews();
\ No newline at end of file
+app.mount('#app');
\ No newline at end of file
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index e825f74..ae99237 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router';
 import { api } from '../api';
+import { trackPageview } from '../js/plausible';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -117,13 +118,24 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from) => {
+
+  try {
+    if (to.name) {
+      trackPageview({
+        url: to.name
+      });
+    }
+  } catch (e) {
+    console.error(e);
+  }
+
   const isSignedin = await api.isSignedIn();
-  // if (
-  //   !isSignedin &&
-  //   to.meta.requiresAuth !== false
-  // ) {
-  //   return { name: 'login', query: { redirect: to.name } };
-  // }
+  if (
+    !isSignedin &&
+    to.meta.requiresAuth !== false
+  ) {
+    return { name: 'login', query: { redirect: to.name } };
+  }
 });
 
 export default router;
diff --git a/nginx-proxy.conf b/nginx-proxy.conf
index 790b6c6..0cc7249 100644
--- a/nginx-proxy.conf
+++ b/nginx-proxy.conf
@@ -25,7 +25,7 @@
             add_header Cross-Origin-Embedder-Policy require-corp;
         }
 
-        location /plausible {
+        location = /plausible/api/event {
             add_header X-Cache $upstream_cache_status;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header Host $http_host;
@@ -34,7 +34,7 @@
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
             proxy_max_temp_file_size 0;
-            proxy_pass http://localhost:51000;
+            proxy_pass http://localhost:51000/api/event;
             proxy_redirect off;
             proxy_read_timeout 240s;
             add_header Access-Control-Allow-Origin "http://motsflex.com";

From 191120af88a97341bbaf258759f05aeddecbe5b5 Mon Sep 17 00:00:00 2001
From: Leo Nicolle <leo@linkurio.us>
Date: Sun, 3 Mar 2024 14:44:24 +0100
Subject: [PATCH 2/2] telemetry

---
 client/src/components/ExportButton.vue         |  4 ++--
 client/src/components/forms/BannedWords.vue    | 13 +++----------
 client/src/components/forms/Words.vue          |  3 +++
 client/src/components/modals/ExportModal.vue   |  3 ++-
 client/src/components/modals/GridCopyModal.vue |  2 --
 client/src/js/{plausible.ts => telemetry.ts}   |  8 ++++----
 client/src/main.ts                             |  1 -
 client/src/router/index.ts                     |  2 +-
 client/src/views/Book.vue                      |  5 +++++
 client/src/views/Books.vue                     |  3 +++
 client/src/views/Fonts.vue                     |  3 ++-
 client/src/views/Styles.vue                    |  3 +++
 client/src/views/Words.vue                     |  3 +++
 nginx-proxy.conf                               |  5 +++--
 14 files changed, 34 insertions(+), 24 deletions(-)
 rename client/src/js/{plausible.ts => telemetry.ts} (68%)

diff --git a/client/src/components/ExportButton.vue b/client/src/components/ExportButton.vue
index 945d6cc..f0b1f40 100644
--- a/client/src/components/ExportButton.vue
+++ b/client/src/components/ExportButton.vue
@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { defineProps, computed, ref, onMounted } from "vue";
 import router from "../router";
-import { trackEvent, trackEventP } from "../js/plausible";
+import { postEvent } from "../js/telemetry";
 /**
  * Component to print. It uses an iframe to print the page.
  *
@@ -47,7 +47,7 @@ onMounted(() => {
       iframe.contentWindow.postMessage('print', '*');
     }
     else if (data === 'print-done') {
-      trackEventP("print", {
+      postEvent("print", {
         props: {
           length: props.query.ids.split(',').length,
           route: props.route,
diff --git a/client/src/components/forms/BannedWords.vue b/client/src/components/forms/BannedWords.vue
index 90d017e..673f293 100644
--- a/client/src/components/forms/BannedWords.vue
+++ b/client/src/components/forms/BannedWords.vue
@@ -22,6 +22,7 @@ import { defineProps, onMounted, ref, toRaw, watch } from "vue";
 import throttle from "lodash.throttle";
 import { api } from "../../api";
 import { workerController } from "../../worker";
+import { postEvent } from "../../js/telemetry";
 /**
  * Component to add and delete words
  * Also has a list of all the words
@@ -65,26 +66,18 @@ function getWords() {
 }
 function onAddKeyup(evt: KeyboardEvent) {
   if (evt.code !== "Enter") return;
+  postEvent('ban-word');
   api.db.pushBannedWord(toRaw(value.value)).then(() => {
     getWords();
   });
 }
 function unban(word: string) {
+  postEvent('unban-word');
   api.db.deleteBannedWord(word).then(() => {
     getWords();
   });
 }
 
-// const options = computed(() => {
-//   return words.value
-//     .filter((w) => w.startsWith(value.value))
-//     .map((suffix) => {
-//       return {
-//         label: suffix,
-//         value: suffix,
-//       };
-//     });
-// });
 </script>
 
 <style scoped>
diff --git a/client/src/components/forms/Words.vue b/client/src/components/forms/Words.vue
index c557803..1e08101 100644
--- a/client/src/components/forms/Words.vue
+++ b/client/src/components/forms/Words.vue
@@ -23,6 +23,7 @@
 <script setup lang="ts">
 import { computed, defineProps, onMounted, ref, toRaw, watch } from "vue";
 import { api } from "../../api";
+import { postEvent } from "../../js/telemetry";
 /**
  * Component to add and delete words
  * Also has a list of all the words
@@ -48,12 +49,14 @@ function getWords() {
 }
 function onAddKeyup(evt: KeyboardEvent) {
   if (evt.code !== "Enter") return;
+  postEvent('create-word');
   api.db.pushWord(toRaw(value.value)).then(() => {
     getWords();
   });
 }
 function onDeleteKeyup(evt: KeyboardEvent) {
   if (evt.code !== "Enter") return;
+  postEvent('delete-word');
   api.db.deleteWord(toRaw(value.value)).then(() => {
     getWords();
   });
diff --git a/client/src/components/modals/ExportModal.vue b/client/src/components/modals/ExportModal.vue
index a103fbb..9b8cd24 100644
--- a/client/src/components/modals/ExportModal.vue
+++ b/client/src/components/modals/ExportModal.vue
@@ -38,6 +38,7 @@ import ExportOptionsForm from "../forms/ExportOptions.vue";
 import { Grid, GridStyle, SolutionStyle, nullCell } from "grid";
 import { ref, defineProps, watch, nextTick } from "vue";
 import { ExportOptions, defaultExportOptions } from "../../types";
+import { postEvent } from "../../js/telemetry";
 
 const props = defineProps<{
   grids: Grid[];
@@ -54,7 +55,7 @@ const visible = ref(false);
 function print() {
   const svgGrid = document.querySelector(".exporter svg");
   if (!svgGrid) return;
-
+  postEvent('export-svg-grid');
   let promise = Promise.resolve();
   for (let i = 0; i < props.grids.length; i++) {
     promise = promise
diff --git a/client/src/components/modals/GridCopyModal.vue b/client/src/components/modals/GridCopyModal.vue
index c873a37..e91156f 100644
--- a/client/src/components/modals/GridCopyModal.vue
+++ b/client/src/components/modals/GridCopyModal.vue
@@ -81,8 +81,6 @@ function save() {
     return Promise.resolve();
   }
 
-  Vue.$plausible.trackEvent('download', { props: { method: 'HTTP' } });
-
   return Promise.resolve()
     .then(() => {
       if (mode.value === 'copy') {
diff --git a/client/src/js/plausible.ts b/client/src/js/telemetry.ts
similarity index 68%
rename from client/src/js/plausible.ts
rename to client/src/js/telemetry.ts
index 8525a15..de3be8f 100644
--- a/client/src/js/plausible.ts
+++ b/client/src/js/telemetry.ts
@@ -1,12 +1,12 @@
 import Plausible, { EventOptions } from 'plausible-tracker';
 
 export const plausible = Plausible({
-  hashMode: true,
-  trackLocalhost: true,
+  hashMode: false,
+  trackLocalhost: false,
   apiHost: 'https://motsflex.com/plausible'
 });
 
-function trackEventP(eventName: string, options?: EventOptions) {
+function postEvent(eventName: string, options?: EventOptions) {
   return new Promise((resolve, reject) => {
     plausible.trackEvent(eventName, {
       callback: resolve,
@@ -15,4 +15,4 @@ function trackEventP(eventName: string, options?: EventOptions) {
   });
 }
 const { trackEvent, trackPageview, } = plausible;
-export { trackEvent, trackPageview, trackEventP };
\ No newline at end of file
+export { trackEvent, trackPageview, postEvent };
\ No newline at end of file
diff --git a/client/src/main.ts b/client/src/main.ts
index df2c844..92a2e4a 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -5,7 +5,6 @@ import VueHighlightJS from 'vue3-highlightjs';
 import 'highlight.js/styles/monokai.css';
 import { i18n } from './i18n';
 import router from './router';
-import { plausible } from './js/plausible';
 
 const app = createApp(App)
   .use(router)
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index ae99237..ea1a105 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router';
 import { api } from '../api';
-import { trackPageview } from '../js/plausible';
+import { trackPageview } from '../js/telemetry';
 
 const routes: Array<RouteRecordRaw> = [
   {
diff --git a/client/src/views/Book.vue b/client/src/views/Book.vue
index 2aae597..f7945df 100644
--- a/client/src/views/Book.vue
+++ b/client/src/views/Book.vue
@@ -48,6 +48,7 @@ import { workerController } from "../worker";
 import BookButtons from "../components/sidebars/BookButtons.vue";
 import GridCopyModal from "../components/modals/GridCopyModal.vue";
 import { Book } from "database";
+import { postEvent } from "../js/telemetry";
 /**
  * View to display all grids in a grid layout
  */
@@ -108,11 +109,13 @@ function fetch() {
 }
 
 function onDelete() {
+  postEvent('delete-grid');
   const ids = selected.value.map((grid) => grid.id);
   return api.deleteGrids(ids)
     .then(() => fetch());
 }
 function download() {
+  postEvent('download-grids');
   const toDl = selected.value.length ? selected.value : grids.value;
   const a = document.createElement("a");
   const file = new Blob([JSON.stringify(toDl)], { type: "text/plain" });
@@ -122,6 +125,7 @@ function download() {
 }
 
 function onUpload(filesContents: [string, string][]) {
+  postEvent('upload-grids');
   return Promise.all(
     filesContents.map(([filename, json]) => {
       return Promise.all(
@@ -133,6 +137,7 @@ function onUpload(filesContents: [string, string][]) {
   ).then(() => fetch());
 }
 function createGrid() {
+  postEvent('create-grid');
   const newGrid = new Grid(10, 10);
   newGrid.title = "Nouvelle Grille";
   workerController
diff --git a/client/src/views/Books.vue b/client/src/views/Books.vue
index 9d074e6..834ae89 100644
--- a/client/src/views/Books.vue
+++ b/client/src/views/Books.vue
@@ -29,6 +29,7 @@ import {
 import { v4 as uuid } from "uuid";
 import { api } from "../api";
 import { Book } from "database";
+import { postEvent } from "../js/telemetry";
 /**
  * View to display all grids in a grid layout
  */
@@ -47,11 +48,13 @@ function fetch() {
 }
 
 function onDelete() {
+  postEvent('delete-book');
   return Promise.all(
     selected.value.map((grid) => api.db.deleteBook(grid.id))
   ).then(() => fetch());
 }
 function createBook() {
+  postEvent('create-book');
   const newBook: Book = {
     id: uuid(),
     created: Date.now(),
diff --git a/client/src/views/Fonts.vue b/client/src/views/Fonts.vue
index 9ce5aa5..dd596b0 100644
--- a/client/src/views/Fonts.vue
+++ b/client/src/views/Fonts.vue
@@ -11,7 +11,6 @@
         {{ elt.family }}
       </span>
     </template>
-    <template #card-body="{ elt, i }"> </template>
   </Layout>
 </template>
 
@@ -25,6 +24,7 @@ import { api } from "../api";
 import { onMounted, ref } from "vue";
 import { Font } from "database";
 import { loadFont } from "../components/fonts/load-font";
+import { postEvent } from "../js/telemetry";
 
 const fonts = ref<Font[]>([]);
 const selected = ref<Font[]>([]);
@@ -40,6 +40,7 @@ function getFonts() {
   });
 }
 function onUpload(filesContents: [string, string][]) {
+  postEvent("create-font");
   return Promise.all(
     filesContents.map(([filename, dataURL]) => {
       const family = filename
diff --git a/client/src/views/Styles.vue b/client/src/views/Styles.vue
index 19f7d5e..25d0082 100644
--- a/client/src/views/Styles.vue
+++ b/client/src/views/Styles.vue
@@ -37,6 +37,7 @@ import StyleModal from "../components/modals/StyleModal.vue";
 import { api } from "../api";
 import { computed } from "vue";
 import { v4 as uuid } from "uuid";
+import { postEvent } from "../js/telemetry";
 /**
  * View to display all styles in a grid layout
  */
@@ -69,6 +70,7 @@ function fetch() {
     });
 }
 function onDelete() {
+  postEvent(mode.value === 'solution' ? 'delete-solution-style' : 'delete-style');
   return api.deleteStyles(selected.value.map((style) => style.id)).then(() => fetch());
 }
 function getLink(style: GridStyle | SolutionStyle) {
@@ -79,6 +81,7 @@ function getLink(style: GridStyle | SolutionStyle) {
 }
 
 function createStyle() {
+  postEvent(mode.value === 'solution' ? 'create-solution-style' : 'create-style');
   const newStyle = structuredClone(mode.value === 'style'
     ? defaultStyles
     : defaultSolutionStyle);
diff --git a/client/src/views/Words.vue b/client/src/views/Words.vue
index 7d8a1df..4c5f1e0 100644
--- a/client/src/views/Words.vue
+++ b/client/src/views/Words.vue
@@ -28,9 +28,11 @@ import BannedWords from "../components/forms/BannedWords.vue";
 import UploadModal from "../components/modals/UploadModal.vue";
 import { api } from "../api";
 import { ref } from "vue";
+import { postEvent } from "../js/telemetry";
 const mode = ref<'words' | 'bannedWords'>('words');
 const version = ref(0);
 function download() {
+  postEvent("download-words");
   api.db.getWords().then((words) => {
     const a = document.createElement("a");
     const file = new Blob([JSON.stringify(words)], { type: "text/plain" });
@@ -40,6 +42,7 @@ function download() {
   });
 }
 function onUpload(filesContents: [string, string][]) {
+  postEvent("upload-words");
   return Promise.all(
     filesContents.map(([filename, json]) => {
       return Promise.all(
diff --git a/nginx-proxy.conf b/nginx-proxy.conf
index 0cc7249..1cf0691 100644
--- a/nginx-proxy.conf
+++ b/nginx-proxy.conf
@@ -25,7 +25,7 @@
             add_header Cross-Origin-Embedder-Policy require-corp;
         }
 
-        location = /plausible/api/event {
+        location ~ /plausible/api {
             add_header X-Cache $upstream_cache_status;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header Host $http_host;
@@ -34,7 +34,8 @@
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
             proxy_max_temp_file_size 0;
-            proxy_pass http://localhost:51000/api/event;
+            rewrite /plausible/api/(.*) /api/$1 break;
+            proxy_pass http://localhost:51000;
             proxy_redirect off;
             proxy_read_timeout 240s;
             add_header Access-Control-Allow-Origin "http://motsflex.com";