package.json

 {
   "name": "laboite-blog-front",
   "description": "laboite blog service frontend",
-  "version": "1.6.0",
+  "version": "1.7.0-testing.1",
   "license": "EUPL-1.2",
   "author": "EOLE/PCLL <team@eole.education> - DINUM",
   "type": "module",
@@ -29,6 +29,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
+    "sanitize-html": "^2.10.0",
     "svelte-i18n": "^3.4.0"
   },
   "devDependencies": {

src/components/favorites/FavoritesArticles.svelte

 <script>
   import {_} from 'svelte-i18n';
+  import {slide} from 'svelte/transition';
   import Divider from '../common/Divider.svelte';
   import SmallArticleBlock from '../articles/SmallArticleBlock.svelte';
   import NoResults from '../common/NoResults.svelte';
+  import FavoritesTitle from './FavoritesTitle.svelte';
 
   export let articles = [];
+
+  let isOpen = false;
+  console.log(isOpen);
 </script>
 
-<section class="box-transparent">
-  <div class="container">
-    <div>
-      <h1 class="title">{$_('pages.favorites.articles_title')}</h1>
-      <h2 class="subtitle">{$_('pages.favorites.articles_subtitle')}</h2>
+<section>
+  <FavoritesTitle
+    component="articles"
+    componentCount={articles.length}
+    bind:isOpen
+  />
+  {#if isOpen === true}
+    <div transition:slide={{duration: 400}} class="columns is-multiline my-4">
+      {#each articles as article}
+        <SmallArticleBlock {article} />
+      {:else}
+        <div class="column is-full">
+          <NoResults title={$_('pages.favorites.noarticles_title')} />
+        </div>
+      {/each}
     </div>
-  </div>
+  {/if}
   <Divider />
-  <div class="columns is-multiline">
-    {#each articles as article}
-      <SmallArticleBlock {article} />
-    {:else}
-      <div class="column is-full">
-        <NoResults title={$_('pages.favorites.noarticles_title')} />
-      </div>
-    {/each}
-  </div>
 </section>
-
-<style>
-  .box-transparent {
-    margin-bottom: var(--space-between);
-    min-height: 450px;
-  }
-  .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-</style>

src/components/favorites/FavoritesAuthors.svelte

 <script>
   import {_} from 'svelte-i18n';
+  import {slide} from 'svelte/transition';
+
   import Divider from '../common/Divider.svelte';
   import SmallAuthorCardId from '../authors/SmallAuthorCardId.svelte';
   import NoResults from '../common/NoResults.svelte';
+  import FavoritesTitle from './FavoritesTitle.svelte';
 
   export let authors = [];
+  let isOpen = false;
 </script>
 
-<section class="box-transparent">
-  <div class="container">
-    <div>
-      <h1 class="title">{$_('pages.favorites.authors_title')}</h1>
-      <h2 class="subtitle">{$_('pages.favorites.authors_subtitle')}</h2>
+<section>
+  <FavoritesTitle
+    component="authors"
+    componentCount={authors.length}
+    bind:isOpen
+  />
+  {#if isOpen === true}
+    <div transition:slide={{duration: 400}} class="columns is-multiline my-4">
+      {#each authors as author}
+        <SmallAuthorCardId {author} />
+      {:else}
+        <div class="column is-full">
+          <NoResults title={$_('pages.favorites.noauthors_title')} />
+        </div>
+      {/each}
     </div>
-  </div>
+  {/if}
   <Divider />
-  <div class="columns is-multiline">
-    {#each authors as author}
-      <SmallAuthorCardId {author} />
-    {:else}
-      <div class="column is-full">
-        <NoResults title={$_('pages.favorites.noauthors_title')} />
-      </div>
-    {/each}
-  </div>
 </section>
-
-<style>
-  .box-transparent {
-    margin-bottom: var(--space-between);
-    min-height: 450px;
-  }
-  .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-</style>

src/components/favorites/FavoritesGroups.svelte

 <script>
   import {_} from 'svelte-i18n';
+  import {slide} from 'svelte/transition';
+
   import Divider from '../common/Divider.svelte';
   import NoResults from '../common/NoResults.svelte';
   import GroupCard from '../groups/GroupCard.svelte';
+  import FavoritesTitle from './FavoritesTitle.svelte';
 
   export let groups = [];
+  let isOpen = false;
 </script>
 
-<section class="box-transparent">
-  <div class="container">
-    <div>
-      <h1 class="title">{$_('pages.favorites.groups_title')}</h1>
-      <h2 class="subtitle">{$_('pages.favorites.groups_subtitle')}</h2>
+<section>
+  <FavoritesTitle
+    component="groups"
+    componentCount={groups.length}
+    bind:isOpen
+  />
+  {#if isOpen === true}
+    <div transition:slide={{duration: 400}} class="columns is-multiline my-4">
+      {#each groups as group}
+        <div class="column is-one-third is-half-tablet is-full-mobile">
+          <GroupCard {group} isFavorite />
+        </div>
+      {:else}
+        <div class="column is-full">
+          <NoResults title={$_('pages.favorites.nogroups_title')} />
+        </div>
+      {/each}
     </div>
-  </div>
+  {/if}
   <Divider />
-  <div class="columns is-multiline">
-    {#each groups as group}
-      <div class="column is-one-third is-half-tablet is-full-mobile">
-        <GroupCard {group} isFavorite />
-      </div>
-    {:else}
-      <div class="column is-full">
-        <NoResults title={$_('pages.favorites.nogroups_title')} />
-      </div>
-    {/each}
-  </div>
 </section>
-
-<style>
-  .box-transparent {
-    margin-bottom: var(--space-between);
-    min-height: 450px;
-  }
-  .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-</style>

src/components/favorites/FavoritesResearch.svelte

 <script>
   import {_} from 'svelte-i18n';
+  import {slide} from 'svelte/transition';
+
   import {favoritesResearches} from '../../utils/functions/stores';
   import Divider from '../common/Divider.svelte';
   import NoResults from '../common/NoResults.svelte';
+  import FavoritesTitle from './FavoritesTitle.svelte';
   import SingleResearch from './SingleResearch.svelte';
+
+  let isOpen = false;
 </script>
 
-<section class="box-transparent">
-  <div class="container">
-    <div>
-      <h1 class="title">{$_('pages.favorites.research_title')}</h1>
-      <h2 class="subtitle">{$_('pages.favorites.research_subtitle')}</h2>
+<section>
+  <FavoritesTitle
+    component="research"
+    componentCount={$favoritesResearches.length}
+    bind:isOpen
+  />
+  {#if isOpen === true}
+    <div transition:slide={{duration: 400}} class="columns is-multiline my-4">
+      {#each $favoritesResearches as research}
+        <SingleResearch {research} />
+      {:else}
+        <div class="column is-full">
+          <NoResults title={$_('pages.favorites.noresearch_title')} />
+        </div>
+      {/each}
     </div>
-  </div>
+  {/if}
   <Divider />
-  <div class="columns is-multiline">
-    {#each $favoritesResearches as research}
-      <SingleResearch {research} />
-    {:else}
-      <div class="column is-full">
-        <NoResults title={$_('pages.favorites.noresearch_title')} />
-      </div>
-    {/each}
-  </div>
 </section>
-
-<style>
-  .box-transparent {
-    margin-bottom: var(--space-between);
-    min-height: 450px;
-  }
-  .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-</style>

src/components/favorites/FavoritesTitle.svelte

+<script>
+  import {_} from 'svelte-i18n';
+
+  export let component = '';
+  export let componentCount = 0;
+  export let isOpen;
+  const handleClick = () => {
+    isOpen = !isOpen;
+  };
+</script>
+
+<div class="container">
+  <div>
+    <h1 class="title">
+      {$_(`pages.favorites.${component}_title`)}
+      ({componentCount})
+      <button
+        class="button is-round"
+        style="border: none; background: transparent"
+        on:click={() => handleClick()}
+      >
+        {#if isOpen === true}
+          <span class="icon is-small">
+            <i class="fa fa-chevron-down is-open" />
+          </span>
+        {:else}
+          <span class="icon is-small">
+            <i class="fa fa-chevron-down" />
+          </span>
+        {/if}
+      </button>
+    </h1>
+    <h2 class="subtitle">{$_(`pages.favorites.${component}_subtitle`)}</h2>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .is-open {
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+</style>

src/routes/articles/[slug].svelte

@@ -20,6 +20,7 @@
 <script>
   import {_} from 'svelte-i18n';
   import {onMount} from 'svelte';
+  import sanitizeHtml from 'sanitize-html';
   import AuthorIdCard from '../../components/authors/AuthorIdCard.svelte';
   import PageTransition from '../../components/common/PageTransition.svelte';
   import BackButton from '../../components/navigation/BackButton.svelte';
@@ -108,7 +109,7 @@
               />
             {:else}
               <div class="quill-editor">
-                {@html article.content}
+                {@html sanitizeHtml(article.content)}
               </div>
             {/if}
           </div>

src/routes/favorites.svelte

@@ -75,7 +75,7 @@
 </svelte:head>
 
 <PageTransition>
-  <section class="box-transparent">
+  <section class="box-transparent mb-4">
     <div class="container">
       <h1 class="title is-2">{$_('pages.favorites.title')}</h1>
     </div>

src/utils/locales/en.json

@@ -72,7 +72,7 @@
       "title": "Your favorites authors and articles",
       "subtitle": "subtitle",
       "articles_title": "List of your articles",
-      "articles_subtitle": " ",
+      "articles_subtitle": "Your favorites articles",
       "authors_title": "List of your authors",
       "authors_subtitle": "Visit their page",
       "noauthors_title": "You have no authors in your favorites",

src/utils/locales/fr.json

@@ -72,7 +72,7 @@
       "title": "Vos articles et auteurs favoris",
       "subtitle": "blablabla",
       "articles_title": "Liste de vos articles",
-      "articles_subtitle": " ",
+      "articles_subtitle": "Retrouvez vos articles favoris",
       "authors_title": "Liste de vos auteurs",
       "authors_subtitle": "Visitez leur page",
       "noauthors_title": "Vous n'avez aucun auteur dans vos favoris",

yarn.lock

@@ -1718,11 +1718,41 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.1, domhandler@^5.0.2:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 dompurify@^2.3.3:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.6.tgz#2e019d7d7617aacac07cbbe3d88ae3ad354cf875"
   integrity sha512-OFP2u/3T1R5CEgWCEONuJ1a5+MFKnOYpkywpUSxv/dj1LeBT1erK+JwM7zK0ROy2BRhqVCf0LRw/kHqKuMkVGg==
 
+domutils@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
+  integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.1"
+
 dotenv@^16.0.0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.0.tgz#c619001253be89ebb638d027b609c75c26e47411"
@@ -1753,6 +1783,11 @@ encoding@^0.1.12:
   dependencies:
     iconv-lite "^0.6.2"
 
+entities@^4.2.0, entities@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+
 env-paths@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -2462,6 +2497,16 @@ html-minifier@^4.0.0:
     relateurl "^0.2.7"
     uglify-js "^3.5.1"
 
+htmlparser2@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.1.tgz#abaa985474fcefe269bc761a779b544d7196d010"
+  integrity sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    entities "^4.3.0"
+
 http-cache-semantics@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
@@ -2667,6 +2712,11 @@ is-plain-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -3105,6 +3155,11 @@ nanoid@^3.3.3:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
   integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
 
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -3374,6 +3429,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -3446,6 +3506,15 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^8.3.11:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.4.13:
   version "8.4.13"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575"
@@ -3826,6 +3895,18 @@ sander@^0.5.0:
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
+sanitize-html@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.10.0.tgz#74d28848dfcf72c39693139131895c78900ab452"
+  integrity sha512-JqdovUd81dG4k87vZt6uA6YhDfWkUGruUu/aPmXLxXi45gZExnt9Bnw/qeQU8oGf82vPyaE0vO4aH0PbobB9JQ==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^8.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 sass-graph@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-4.0.0.tgz#fff8359efc77b31213056dfd251d05dadc74c613"