Matomo integration and fix misc ux errors (#1196)

* fix user is undefined in main script * Update TheHeader.vue * Update Timeline.js * change layout of SearchResultItem * Update vue.config.js add Proxy in vue.config * add matomo * Update App.vue add negative spacing in APP.vue * increase timeout for Service reAuthenticate * eslint Autocomplete * Update IIIFFragment.vue * add Matomo consent * Update SearchResultsListItem.vue * forward route to Matomo
impresso · Mar 25, 2024 · fa31292 · fa31292
1 parent 482d74a
commit fa31292
Show file tree

Hide file tree

Showing 13 changed files with 368 additions and 222 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "vue-fragment": "1.6.0",
     "vue-gtag": "1.1.2",
     "vue-i18n": "8.15.3",
+    "vue-matomo": "^4.2.0",
     "vue-router": "3.1.5",
     "vue-slider-component": "^3.1.1",
     "vuex": "3.1.2",

diff --git a/public/index.html b/public/index.html
@@ -1,13 +1,32 @@
 <!DOCTYPE html>
 <html prefix="og: http://ogp.me/ns#">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <!-- to use dublin core metadata -->
-    <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
-    <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
+    <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
+    <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
     <!-- classical meta tags -->
     <title>impresso | Media Monitoring of the Past</title>
-    <meta name='description' content=''>
+    <meta name="description" content="" />
+    <!-- Matomo -->
+    <script>
+      var _paq = (window._paq = window._paq || [])
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView'])
+      _paq.push(['enableLinkTracking'])
+      ;(function() {
+        var u = 'https://journalofdigitalhistory.matomo.cloud/'
+        _paq.push(['setTrackerUrl', u + 'matomo.php'])
+        _paq.push(['setSiteId', '7'])
+        var d = document,
+          g = d.createElement('script'),
+          s = d.getElementsByTagName('script')[0]
+        g.async = true
+        g.src = 'https://cdn.matomo.cloud/journalofdigitalhistory.matomo.cloud/matomo.js'
+        s.parentNode.insertBefore(g, s)
+      })()
+    </script>
+    <!-- End Matomo Code -->
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -189,6 +189,10 @@ $clr-grey-900: #ddd;
 
   --impresso-color-black: #343a40;
   --impresso-color-black-rgb: 52, 58, 64;
+
+  --impresso-color-pastel-blue: rgba(86, 204, 242);
+  --impresso-color-pastel-blue-alpha-20: rgba(86, 204, 242, 0.2);
+
   --impresso-border-radius-xs: 5px;
   --impresso-border-radius-sm: 10px;
   --impresso-border-radius-md: 15px;
@@ -211,11 +215,18 @@ $clr-grey-900: #ddd;
   --clr-grey-400-rgba-20: rgba(90, 102, 114, 0.2);
   --clr-grey-800-rgba-20: rgba(198, 204, 210, 0.2);
   --clr-grey-900-rgba-20: rgba(221, 221, 221, 0.2);
+
   --spacing-1: 0.25rem;
   --spacing-2: 0.5rem;
   --spacing-3: 1rem;
   --spacing-4: 1.5rem;
   --spacing-5: 3rem;
+  --negative-spacing-1: -0.25rem;
+  --negative-spacing-2: -0.5rem;
+  --negative-spacing-3: -1rem;
+  --negative-spacing-4: -1.5rem;
+  --negative-spacing-5: -3rem;
+
   --accent: #28a745;
   --impresso-yellow: #ffeb78;
   --border-radius-sm: 3px;