.env.example

 API_HOST="http://localhost:3000"
 LABOITE_HOST="https://lb.appseducation.fr"
-UML_SERVER=""
\ No newline at end of file
+UML_SERVER=""
+MATOMO_URL=""
+MATOMO_SITEID="1"
\ No newline at end of file

.gitignore

@@ -2,4 +2,7 @@
 /node_modules/
 yarn-error.log
 .env
-.svelte-kit
\ No newline at end of file
+.svelte-kit
+/src/node_modules
+/build
+__sapper__
\ No newline at end of file

docs/CHANGELOG.md

 # Changelog
 
+## [1.9.0](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/compare/release/1.8.1...release/1.9.0) (2023-11-07)
+
+
+### Features
+
+* **matomo:** change matomo integration method ([2c4011d](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/2c4011d74776b7b4fd9c207a1eaf20719725f209))
+* **matomo:** integrate Matomo client ([934e631](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/934e631205cc65497865b04e687b47659962cf0e))
+
+
+### Bug Fixes
+
+* **articles:** fix tag search in articles tab ([89a2513](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/89a2513334261c1f301bf05106377ee729959d43))
+* **articles:** no empty tag filter ([4e975f3](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/4e975f33ffd0e43783b7c0fdc721d396bef57ede))
+* **articles:** prevent same tag to be add ([beb870b](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/beb870b8da885f78ade5e138c7eaa1f7e19cdb00))
+* **articles:** search by tag with enter key ([e0f0623](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/e0f0623b2c5d9097e84263c0b3a31a51696227ee))
+* **audit:** update critically vulnerable libraries ([509a620](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/509a6207f58dd5c147d69b6b4ea1a761e3bf129a))
+* **gitignore:** add new ignored folder ([c7fa86d](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/c7fa86dc0560276c92123a63f8b428f9c7c0319e))
+* **library:** upgrade svelte-i18n to non broken version ([be96034](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/be9603460c70de98666aadbb9a0c7c6770851001))
+* **tags:** fix active tags not updating when selecting a tag ([192ed9a](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/192ed9a8c90dfa6de06a71a10cf6ad687b8bf9b2))
+
 ### [1.8.1](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/compare/release/1.8.0...release/1.8.1) (2023-10-02)
 
 

package.json

 {
   "name": "laboite-blog-front",
   "description": "laboite blog service frontend",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "license": "EUPL-1.2",
   "author": "EOLE/PCLL <team@eole.education> - DINUM",
   "type": "module",
@@ -30,7 +30,8 @@
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "sanitize-html": "^2.10.0",
-    "svelte-i18n": "^3.4.0",
+    "semver": "^7.5.2",
+    "svelte-i18n": "4.0.0",
     "vite": "^4.3.9"
   },
   "devDependencies": {

src/components/common/SearchableSelect.svelte

@@ -12,11 +12,18 @@
 
   const open = () => (opened = true);
   const close = () => (opened = false);
+  const handleKeydown = (event) => {
+    if (event.key === 'Enter' && search !== '') {
+      event.preventDefault();
+      onChange(search)
+      search = ''
+    }
+  };
 </script>
 
 <div class="dropdown is-active" on:mouseleave={close} on:mouseenter={open}>
   <div class="dropdown-trigger">
-    <input bind:value={search} class="input" type="text" />
+    <input bind:value={search} class="input" type="text" on:keydown={handleKeydown}/>
   </div>
   {#if opened}
     <div class="dropdown-menu" role="menu" transition:slide>
@@ -27,6 +34,7 @@
               class="dropdown-item"
               on:click={() => {
                 onChange(item.value);
+                search = ''
               }}
             >
               {item.label}

src/components/common/TagsFilter.svelte

@@ -16,9 +16,11 @@
   const dispatch = createEventDispatcher();
 
   function addTag(tag) {
-    dispatch('addTag', {
-      tag: tag,
-    });
+    if (!queryTags.includes(tag)) {
+      dispatch('addTag', {
+        tag: tag,
+      });
+    }
   }
 
   let opened = false;
@@ -61,7 +63,7 @@
     >
     {#if $page.url.searchParams.get('tags')}
       {' - '}
-      <a rel="prefetch" href={resetUrl()}>
+      <a href={resetUrl()}>
         {$_('components.TagsFilters.reset')}
       </a>
     {/if}

src/components/matomo/Matomo.svelte

+<script context="module">
+  import {browser} from '$app/environment';
+
+  export const push = args => {
+    if (!browser) return;
+    if (!('_paq' in window)) window._paq = [];
+    window._paq.push(args);
+  };
+</script>
+
+<script>
+  import {onMount} from 'svelte';
+
+  export let url;
+  export let siteId = '1';
+
+  // see https://developer.matomo.org/guides/spa-tracking
+  push(['setSiteId', siteId]);
+  push(['setTrackerUrl', url + '/matomo.php']);
+  push(['disableCookies']);
+
+  let initscript = false;
+  onMount(() => (initscript = true));
+</script>
+
+<svelte:head>
+  {#if initscript}
+    <script defer async src={url + '/matomo.js'}></script>
+  {/if}
+</svelte:head>

src/components/matomo/MatomoTracker.svelte

+<script>
+  import Matomo, {push} from './Matomo.svelte';
+  import {browser} from '$app/environment';
+  import {page} from '$app/stores';
+
+  export let url;
+  export let siteId = '1';
+  let referrer = null;
+
+  const trackPageView = path => {
+    if (referrer) push(['setReferrerUrl', referrer]);
+    referrer = path;
+    push(['setCustomUrl', path]);
+    push(['setDocumentTitle', document.title]);
+    push(['trackPageView']);
+  };
+
+  // call TrackPageView on page change
+  $: browser && trackPageView($page.url.pathname);
+</script>
+
+<Matomo {url} {siteId} />

src/hooks.js

 /** @type {import('@sveltejs/kit').GetSession} */
 export function getSession(event) {
-  const { API_HOST, LABOITE_HOST, UML_SERVER } = process.env;
+  const {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID} =
+    process.env;
   return {
-    env: { API_HOST, LABOITE_HOST, UML_SERVER },
+    env: {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID},
   };
 }

src/routes/+layout.server.js

@@ -2,8 +2,9 @@
 export async function load() {
   // previously stored in session (deprecated)
   // https://github.com/sveltejs/kit/discussions/5883
-  const {API_HOST, LABOITE_HOST, UML_SERVER} = process.env;
+  const {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID} =
+    process.env;
   return {
-    env: {API_HOST, LABOITE_HOST, UML_SERVER},
+    env: {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID},
   };
 }

src/routes/+layout.svelte

 <script defer src="./fonts/js/all.min.js">
-  import '../utils/theme/index.css';
   import {_, locale} from 'svelte-i18n';
+  import MatomoTracker from '../components/matomo/MatomoTracker.svelte';
+  import '../utils/theme/index.css';
   import {getMaintenance} from '../utils/api/methods';
   import {getStores} from '$app/stores';
   import '../utils/locales/index';
@@ -8,7 +9,7 @@
   import Footer from '../components/navigation/Footer.svelte';
   import {trackLocation} from '../utils/functions/locationTracker';
   import Loader from '../components/common/Loader.svelte';
-  import {onMount, beforeUpdate} from 'svelte';
+  import {onMount} from 'svelte';
   import {language} from '../utils/functions/stores';
 
   export let data;
@@ -22,13 +23,16 @@
     }
   });
 
-  beforeUpdate(async () => {
+  async function updateMaintenance() {
     maintenance = await getMaintenance(data.env.API_HOST);
-  });
+  }
 
   trackLocation();
 
-  const {navigating} = getStores();
+  const {page, navigating} = getStores();
+  $: if ($page) {
+    updateMaintenance();
+  }
 </script>
 
 <Nav />
@@ -36,6 +40,12 @@
 {#if !!$navigating}
   <Loader message={$_('loading')} mainLoader={true} />
 {/if}
+{#if data.env.MATOMO_URL}
+  <MatomoTracker
+    url={data.env.MATOMO_URL}
+    siteId={Number(data.env.MATOMO_SITEID)}
+  />
+{/if}
 
 <main class="container">
   {#if !!maintenance.maintenance}

src/routes/articles/+page.svelte

@@ -25,15 +25,18 @@
   }
 
   function addTag(event) {
-    const tagsArray = [...queryTags];
-    tagsArray.push(event.detail.tag);
-    const tagsString = tagsArray.join(',');
-    const url = `${data.path}?${toQuery({
-      ...data.query,
-      page: 1,
-      tags: tagsString,
-    })}`;
-    goto(url);
+    const tagToAdd = event.detail.tag
+    if (!queryTags.includes(tagToAdd)){
+      const tagsArray = [...queryTags];
+      tagsArray.push(tagToAdd);
+      const tagsString = tagsArray.join(',');
+      const url = `${data.path}?${toQuery({
+        ...data.query,
+        page: 1,
+        tags: tagsString,
+      })}`;
+      goto(url);
+    }
   }
 
   $: tagSearch = tagSearch;
@@ -87,15 +90,13 @@
         {/if}
       </div>
       <div class="column is-full">
-        {#if !$navigating}
-          <TagsFilter
-            query={data.query}
-            path={data.path}
-            tagsList={data.tagsList}
-            on:addTag={addTag}
-            {queryTags}
-          />
-        {/if}
+        <TagsFilter
+          query={data.query}
+          path={data.path}
+          tagsList={data.tagsList}
+          on:addTag={addTag}
+          {queryTags}
+        />
       </div>
     </div>
 

src/routes/articles/[slug]/+page.svelte

 <script>
   import {_} from 'svelte-i18n';
+  import fetcher from 'isomorphic-fetch';
   import {onMount} from 'svelte';
   import sanitizeHtml from 'sanitize-html';
   import AuthorIdCard from '../../../components/authors/AuthorIdCard.svelte';