Merge pull request #89 from Leo-Nicolle/develop

Restore telemetry

.github/workflows/deploy.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - plausible
 
 jobs:
   deploy:

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,

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>

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();
   });

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

client/src/js/plausible.ts → 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 };
+export { trackEvent, trackPageview, postEvent };

client/src/main.ts

@@ -5,13 +5,11 @@ 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)
   .use(VueHighlightJS)
   .use(naive)
   .use(i18n);
 
-app.mount('#app');
-plausible.enableAutoPageviews();
+app.mount('#app');

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/telemetry';
 
 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;

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
  */
@@ -117,11 +118,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" });
@@ -131,6 +134,7 @@ function download() {
 }
 
 function onUpload(filesContents: [string, string][]) {
+  postEvent('upload-grids');
   return Promise.all(
     filesContents.map(([filename, json]) => {
       return Promise.all(
@@ -142,6 +146,7 @@ function onUpload(filesContents: [string, string][]) {
   ).then(() => fetch());
 }
 function createGrid() {
+  postEvent('create-grid');
   const newGrid = new Grid(10, 10);
   newGrid.title = "Nouvelle Grille";
   workerController

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(),

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

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);

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(

nginx-proxy.conf

@@ -25,7 +25,7 @@
             add_header Cross-Origin-Embedder-Policy require-corp;
         }
 
-        location /plausible {
+        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,6 +34,7 @@
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
             proxy_max_temp_file_size 0;
+            rewrite /plausible/api/(.*) /api/$1 break;
             proxy_pass http://localhost:51000;
             proxy_redirect off;
             proxy_read_timeout 240s;