feat: add Umami support (#301)

package.json

@@ -22,13 +22,14 @@
     "@tonaljs/scale": "^4.12.5",
     "petite-vue-i18n": "^9.9.1",
     "pinia": "^2.1.7",
-    "vue": "^3.4.16",
+    "vue": "^3.4.19",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@types/node": "20.11.17",
+    "@unhead/vue": "^1.8.10",
     "@vitejs/plugin-legacy": "^5.3.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "autoprefixer": "^10.4.17",
@@ -41,7 +42,7 @@
     "tailwindcss": "^3.4.1",
     "terser": "^5.27.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.0",
+    "vite": "^5.1.1",
     "vue-tsc": "^1.8.27"
   },
   "type": "module"

src/App.vue

@@ -14,6 +14,23 @@ import { useI18n } from 'petite-vue-i18n';
 import { useSettingsStore } from './stores/settings';
 import AppHeader from './components/AppHeader.vue';
 import AppFooter from './components/AppFooter.vue';
+import { useHead } from '@unhead/vue';
+
+useHead({ title: 'Bandoneon.app' });
+
+// Umami
+if (import.meta.env.VITE_UMAMI_HOST && import.meta.env.VITE_UMAMI_ID) {
+  useHead({
+    script: [
+      {
+        src: import.meta.env.VITE_UMAMI_HOST + '/script.js',
+        async: true,
+        defer: true,
+        'data-website-id': import.meta.env.VITE_UMAMI_ID,
+      },
+    ],
+  });
+}
 
 const settings = useSettingsStore();
 const { locale } = useI18n();

src/main.ts

@@ -1,3 +1,4 @@
+import { createHead } from '@unhead/vue';
 import { createI18n } from 'petite-vue-i18n';
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
@@ -16,9 +17,11 @@ const i18n = createI18n({
 });
 
 const pinia = createPinia();
+const head = createHead();
 
 const app = createApp(App);
 app.use(pinia);
+app.use(head);
 app.use(router);
 app.use(i18n);
 app.mount('#app');

src/pages/game.vue

@@ -77,6 +77,9 @@ import SvgKeyboard from '../components/SvgKeyboard.vue';
 import { useKeyboard } from '../composables/useKeyboard';
 import { useStore } from '../stores/main';
 import { useSettingsStore } from '../stores/settings';
+import { useHead } from '@unhead/vue';
+
+useHead({ title: 'Play a game! – Bandoneon.app' });
 
 useKeyboard();