docs/CHANGELOG.md

 # Changelog
 
+## [1.10.0](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/compare/release/1.9.0...release/1.10.0) (2024-01-30)
+
+
+### Features
+
+* **author:** add transition on author id card ([40d153a](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/40d153a20179a7cf0ea5fecf3b4e258b7e63a874))
+* **fetch:** remove isomorphic fetch and replace it by fetch native ([282c67d](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/282c67df67db73c70c900868c4831f8667bddfea))
+* **link:** delete rel prefetch in a markup ([15e3659](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/15e3659ff1e0b437865b5fca4710fc77b9d3c66f))
+* **project:** replace academy by structure in all project ([e358672](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/e35867210ba1ffdc8d8f6c1cc27d44856653f95c))
+
+
+### Bug Fixes
+
+* **audit:** update vulnerable libraries ([a4899a2](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/a4899a2fb7cbd17808efaee06b603772120c692f))
+* **fetch:** add onMount on missing fetch ([23613b8](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/23613b883316b15c5e2d39813186a9eb0f21d40d))
+* **fetch:** don't call fetch outside of onMount/load on server side ([fed4fdb](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/fed4fdb05d89efe5d3094bd5b6b5ac88ee7d28d7))
+* **fetch:** use fetch provided by load function when available ([a06f606](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/a06f60601f63ae6fcb8b67c122681855889fa0d9))
+* **structure:** fix problems dues to rebase from dev ([138d477](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/138d477d7b4946f9ba7ec6f3a2410afca5387fd5))
+* **structures:** redirect /academies to /structures ([fa1ac04](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/fa1ac04fe86ae9f918facc796c61cbd85e0a79bc))
+* **translation:** fix some translation ([a504ebb](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/a504ebb8dd253f9aa46cdeb3ad77d5bf7651170f))
+
 ## [1.9.0](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/compare/release/1.8.1...release/1.9.0) (2023-11-07)
 
 

package.json

 {
   "name": "laboite-blog-front",
   "description": "laboite blog service frontend",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "license": "EUPL-1.2",
   "author": "EOLE/PCLL <team@eole.education> - DINUM",
   "type": "module",
@@ -25,7 +25,6 @@
     "@toast-ui/editor-plugin-table-merged-cell": "^3.0.2",
     "@toast-ui/editor-plugin-uml": "^3.0.1",
     "eslint": "^8.23.1",
-    "isomorphic-fetch": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
@@ -48,7 +47,7 @@
     "bulma": "^0.9.3",
     "dotenv": "^16.0.0",
     "html-minifier": "^4.0.0",
-    "node-sass": "^7.0.1",
+    "node-sass": "^9.0.0",
     "postcss": "^8.4.13",
     "sass": "^1.51.0",
     "svelte": "^3.48.0",

src/components/authors/AuthorIdCard.svelte

 <script>
-  import fetcher from 'isomorphic-fetch';
   import {page} from '$app/stores';
+  import {browser} from '$app/environment';
 
   import {_} from 'svelte-i18n';
   import BigLink from '../common/BigLink.svelte';
   import Avatar from './Avatar.svelte';
   export let author;
 
-  let academy = {};
-  $: fetchAcademy(author);
-
-  const fetchAcademy = async currentAuthor => {
+  let structure = {};
+  $: if (browser) fetchStructure(author);
+  const fetchStructure = async currentAuthor => {
     if (currentAuthor?.structure) {
-      const responseAcademy = await fetcher(
+      const responseStructure = await fetch(
         `${$page.data.env.API_HOST}/structures/${currentAuthor.structure}`,
       );
-      academy = await responseAcademy.json();
+      structure = await responseStructure.json();
     }
   };
 </script>
@@ -34,7 +33,7 @@
           {author?.firstName || $_('components.AuthorIdCard.unknownFirstname')}
           {author?.lastName || $_('components.AuthorIdCard.unknownLastname')}
         </p>
-        <p class="subtitle is-6">{academy.name || ''}</p>
+        <p class="subtitle is-6">{structure.name || ''}</p>
       </div>
     </div>
   </div>

src/components/authors/SmallAuthorCardId.svelte

 <script>
   import {_} from 'svelte-i18n';
   import {onMount} from 'svelte';
-  import fetcher from 'isomorphic-fetch';
   import BigLink from '../common/BigLink.svelte';
   import FavoritesButton from '../common/FavoritesButton.svelte';
   import Avatar from './Avatar.svelte';
@@ -9,12 +8,12 @@
 
   export let author;
 
-  let academy = {};
+  let structure = {};
   onMount(async () => {
-    const responseAcademy = await fetcher(
+    const responseStructure = await fetch(
       `${$page.data.env.API_HOST}/structures/${author.structure}`,
     );
-    academy = await responseAcademy.json();
+    structure = await responseStructure.json();
   });
 </script>
 
@@ -25,7 +24,7 @@
     </figure>
     <div class="media-content">
       <div class="title is-4">{author.firstName} {author.lastName}</div>
-      <div>{academy.name}</div>
+      <div>{structure.name}</div>
       <div class="title is-6">
         {$_('components.SmallAuthorIdCard.articles')}:
         {author.articlesCount}

src/components/common/BigLink.svelte

@@ -2,7 +2,7 @@
   export let link, text;
 </script>
 
-<a class="button is-primary" rel="prefetch" href={link}> {text}</a>
+<a class="button is-primary" href={link}> {text}</a>
 
 <style>
   a {

src/components/common/Pagination.svelte

@@ -22,7 +22,7 @@
   <nav class="pagination is-primary is-right" aria-label="pagination">
     <ul class="pagination-list">
       {#if page !== 1}
-        <a class="pagination-previous" rel="prefetch" href={urlMaker(page - 1)}
+        <a class="pagination-previous" href={urlMaker(page - 1)}
           >{$_('components.Pagination.previous')}</a
         >
       {/if}
@@ -30,7 +30,6 @@
         <li>
           <a
             class="pagination-link"
-            rel="prefetch"
             href={urlMaker(1)}
             class:is-current={1 === page}
             aria-label="Goto page 1">{1}</a
@@ -45,7 +44,6 @@
           <li>
             <a
               class="pagination-link"
-              rel="prefetch"
               href={urlMaker(i + 1)}
               class:is-current={i + 1 === page}
               aria-label="Goto page {i + 1}">{i + 1}</a
@@ -56,7 +54,6 @@
             <a
               class="pagination-link"
               class:is-current={i + 1 === page}
-              rel="prefetch"
               href={urlMaker(i + 1)}
               aria-label="Goto page {i + 1}">{i + 1}</a
             >
@@ -70,7 +67,6 @@
         <li>
           <a
             class="pagination-link"
-            rel="prefetch"
             href={urlMaker(array.length)}
             class:is-current={array.length === page}
             aria-label="Goto last page">{array.length}</a
@@ -78,7 +74,7 @@
         </li>
       {/if}
       {#if page !== array.length}
-        <a class="pagination-next" rel="prefetch" href={urlMaker(page + 1)}
+        <a class="pagination-next" href={urlMaker(page + 1)}
           >{$_('components.Pagination.next')}</a
         >
       {/if}

src/components/common/SearchField.svelte

@@ -39,19 +39,14 @@
       />
     </p>
     <div class="control">
-      <a class="button is-primary" rel="prefetch" href={urlMaker(search)}>
+      <a class="button is-primary" href={urlMaker(search)}>
         <i class="fas fa-search" />
       </a>
     </div>
 
     {#if search}
       <div class="control">
-        <a
-          class="button is-secondary"
-          rel="prefetch"
-          on:click={resetSearch}
-          href={urlMaker()}
-        >
+        <a class="button is-secondary" on:click={resetSearch} href={urlMaker()}>
           <i class="fa fa-times" />
         </a>
       </div>

src/components/common/SingleFavoriteButton.svelte

 <script>
-  import {favoritesAcademy} from '../../utils/functions/stores';
+  import {favoritesStructure} from '../../utils/functions/stores';
 
   const types = {
-    academy: favoritesAcademy,
+    structure: favoritesStructure,
   };
 
   export let type;

src/components/favorites/SingleResearch.svelte

@@ -9,21 +9,21 @@
 
   const requestObject = JSON.parse(research);
 
-  const {path, type, academy, query} = requestObject;
+  const {path, type, structure, query} = requestObject;
   const {search, tags} = query;
 
   const url = `${path}?${toQuery(query)}`;
 </script>
 
-<div class="column is-full ">
+<div class="column is-full">
   <div class="media box">
     <div class="media-content">
       <div class="title is-4">
         {$_('components.SingleResearch.type')}:
         {$_(`links.${type}`)}
       </div>
-      {#if academy}
-        <div class="subtitle is-5">{academy.name}</div>
+      {#if structure}
+        <div class="subtitle is-5">{structure.name}</div>
       {/if}
       {#if search}
         <div>{$_('components.SingleResearch.search')}: {search}</div>

src/components/home/FavoriteAcademy.svelte → src/components/home/FavoriteStructure.svelte

 <script>
   import {onMount} from 'svelte';
-  import fetcher from 'isomorphic-fetch';
   import {_} from 'svelte-i18n';
   import {page} from '$app/stores';
 
-  import {favoritesAcademy} from '../../utils/functions/stores';
-  import SingleAcademy from '../academies/SingleAcademy.svelte';
+  import {favoritesStructure} from '../../utils/functions/stores';
+  import SingleStructure from '../structures/SingleStructure.svelte';
   import Divider from '../common/Divider.svelte';
 
-  let academy = {};
+  let structure = {};
   onMount(async () => {
-    const responseAcademy = await fetcher(
-      `${$page.data.env.API_HOST}/structures/${$favoritesAcademy}`,
+    const responseStructure = await fetch(
+      `${$page.data.env.API_HOST}/structures/${$favoritesStructure}`,
     );
-    academy = await responseAcademy.json();
+    structure = await responseStructure.json();
   });
 </script>
 
 <section class="box-transparent">
   <div class="container">
-    <h1 class="title">{$_('pages.home.your_academy_title')}</h1>
-    <h2 class="subtitle">{$_('pages.home.your_academy_subtitle')}</h2>
+    <h1 class="title">{$_('pages.home.your_structure_title')}</h1>
+    <h2 class="subtitle">{$_('pages.home.your_structure_subtitle')}</h2>
   </div>
   <Divider />
 
-  {#if academy._id}
-    <SingleAcademy {academy} />
+  {#if structure._id}
+    <SingleStructure {structure} />
   {/if}
 </section>
 

src/components/home/LastAcademies.svelte → src/components/home/LastStructures.svelte

@@ -2,15 +2,15 @@
   import {onMount} from 'svelte';
   import {_} from 'svelte-i18n';
 
-  import {lastAcademies} from '../../utils/functions/stores';
-  import SingleAcademy from '../academies/SingleAcademy.svelte';
+  import {lastStructures} from '../../utils/functions/stores';
+  import SingleStructure from '../structures/SingleStructure.svelte';
   import Divider from '../common/Divider.svelte';
   import {fetchData} from '../../utils/api/methods';
   import {page} from '$app/stores';
 
-  let academies = [];
+  let structures = [];
   onMount(async () => {
-    const where = {_id: {inq: $lastAcademies}};
+    const where = {_id: {inq: $lastStructures}};
     const {items} = await fetchData({
       host: $page.data.env.API_HOST,
       limit: 4,
@@ -18,21 +18,21 @@
       apiurl: 'structures',
       where,
     });
-    academies = items;
+    structures = items;
   });
 </script>
 
 <section class="box-transparent">
   <div class="container">
-    <h1 class="title">{$_('pages.home.last_academies_title')}</h1>
-    <h2 class="subtitle">{$_('pages.home.last_academies_subtitle')}</h2>
+    <h1 class="title">{$_('pages.home.last_structures_title')}</h1>
+    <h2 class="subtitle">{$_('pages.home.last_structures_subtitle')}</h2>
   </div>
   <Divider />
 
   <div class="columns is-multiline">
-    {#each academies as academy}
+    {#each structures as structure}
       <div class="column is-full">
-        <SingleAcademy {academy} />
+        <SingleStructure {structure} />
       </div>
     {/each}
   </div>

src/components/navigation/Footer.svelte

@@ -2,7 +2,6 @@
   import {_} from 'svelte-i18n';
   import {onMount} from 'svelte';
   import {page} from '$app/stores';
-  import fetcher from 'isomorphic-fetch';
   import Loader from '../common/Loader.svelte';
 
   let settings = {
@@ -16,7 +15,7 @@
   let loading = true;
 
   onMount(async () => {
-    const appsettings = await fetcher(`${$page.data.env.API_HOST}/appsettings`);
+    const appsettings = await fetch(`${$page.data.env.API_HOST}/appsettings`);
     settings = await appsettings.json();
     loading = false;
   });
@@ -61,6 +60,7 @@
           class:is-active={$page.url.pathname === path}
           class="navbar-item"
           target="_blank"
+          rel="noreferrer noopener"
           href={path}
         >
           {$_(text)}

src/components/navigation/MobileMenu.svelte

@@ -19,7 +19,6 @@
           {#each items as { path, text }}
             <li>
               <a
-                rel="prefetch"
                 class:is-active={pathname === path}
                 class="navbar-item"
                 on:click={toggle}

src/components/navigation/Nav.svelte

@@ -14,9 +14,9 @@
   };
 </script>
 
-<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
+<nav class="navbar is-fixed-top" aria-label="main navigation">
   <div class="navbar-brand">
-    <a class="navbar-logo" href="/" rel="prefetch">
+    <a class="navbar-logo" href="/">
       <img src="/Leblog.png" alt="LaBoite - Blog" />
     </a>
 
@@ -37,7 +37,6 @@
     <div class="navbar-start">
       {#each items as { path, text }}
         <a
-          rel="prefetch"
           class:is-active={`/${$page.url.pathname.split('/')[1]}` === path}
           class="navbar-item"
           href={path}

src/components/navigation/items.js

@@ -8,8 +8,8 @@ export const items = [
     path: '/articles',
   },
   {
-    text: 'links.academies',
-    path: '/academies',
+    text: 'links.structure',
+    path: '/structures',
   },
   {
     text: 'links.authors',

src/components/academies/Authors.svelte → src/components/structures/Authors.svelte

@@ -5,18 +5,18 @@
   import AuthorIdCard from '../authors/AuthorIdCard.svelte';
 
   export let authors;
-  export let academy;
+  export let structure;
 </script>
 
 <section class="box-transparent">
   <div class="container">
     <div>
-      <h1 class="title">{$_('pages.academy.authors_title')}</h1>
-      <h2 class="subtitle">{$_('pages.academy.authors_subtitle')}</h2>
+      <h1 class="title">{$_('pages.structure.authors_title')}</h1>
+      <h2 class="subtitle">{$_('pages.structure.authors_subtitle')}</h2>
     </div>
     <BigLink
-      link="/academies/{academy._id}/authors"
-      text={$_('pages.academy.all_authors')}
+      link="/structures/{structure._id}/authors"
+      text={$_('pages.structure.all_authors')}
     />
   </div>
   <Divider />

src/components/academies/LastPublished.svelte → src/components/structures/LastPublished.svelte

@@ -5,18 +5,18 @@
   import BigLink from '../common/BigLink.svelte';
 
   export let articles = [];
-  export let academy;
+  export let structure;
 </script>
 
 <section class="box-transparent">
   <div class="container">
     <div>
-      <h1 class="title">{$_('pages.academy.last_title')}</h1>
-      <h2 class="subtitle">{$_('pages.academy.last_subtitle')}</h2>
+      <h1 class="title">{$_('pages.structure.last_title')}</h1>
+      <h2 class="subtitle">{$_('pages.structure.last_subtitle')}</h2>
     </div>
     <BigLink
-      link="/academies/{academy._id}/articles"
-      text={$_('pages.academy.all_articles')}
+      link="/structures/{structure._id}/articles"
+      text={$_('pages.structure.all_articles')}
     />
   </div>
   <Divider />

src/components/academies/SingleAcademy.svelte → src/components/structures/SingleStructure.svelte

 <script>
   import Avatar from '../authors/Avatar.svelte';
   import {onMount} from 'svelte';
-  import fetcher from 'isomorphic-fetch';
   import {_} from 'svelte-i18n';
   import {page} from '$app/stores';
 
-  export let academy = {};
+  export let structure = {};
   let total;
   let loading = true;
 
   onMount(async () => {
-    const where = {structure: academy._id};
+    const where = {structure: structure._id};
 
-    const response = await fetcher(
+    const response = await fetch(
       `${$page.data.env.API_HOST}/articles/count?where=${JSON.stringify(
         where,
       )}`,
@@ -24,17 +23,17 @@
   });
 </script>
 
-<a rel="prefetch" href="/academies/{academy._id}">
+<a href="/structures/{structure._id}">
   <div class="card">
     <div class="card-content">
       <div class="media">
         <div class="media-left">
-          <Avatar firstName={academy.name} avatar={academy.logo} />
+          <Avatar firstName={structure.name} avatar={structure.logo} />
         </div>
         <div class="media-content">
-          <p class="title is-5">{academy.name}</p>
+          <p class="title is-5">{structure.name}</p>
           <p class="subtitle is-6">
-            {$_('components.SingleAcademy.articles')}:
+            {$_('components.SingleStructure.articles')}:
             {loading ? $_('loading') : total}
           </p>
         </div>

src/routes/+layout.server.js

 /** @type {import('./$types').LayoutServerLoad} */
-export async function load() {
+import {redirect} from '@sveltejs/kit';
+
+export async function load(args) {
+  // redirect '/academies' to '/structures' for backward compatibility
+  if (args.url.pathname.startsWith('/academies')) {
+    throw redirect(307, args.url.pathname.replace('/academies', '/structures'));
+  }
   // previously stored in session (deprecated)
   // https://github.com/sveltejs/kit/discussions/5883
   const {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID} =

src/routes/+layout.svelte

 <script defer src="./fonts/js/all.min.js">
+  import {browser} from '$app/environment';
   import {_, locale} from 'svelte-i18n';
   import MatomoTracker from '../components/matomo/MatomoTracker.svelte';
   import '../utils/theme/index.css';
@@ -30,7 +31,7 @@
   trackLocation();
 
   const {page, navigating} = getStores();
-  $: if ($page) {
+  $: if ($page && browser) {
     updateMaintenance();
   }
 </script>