components/home/HomeMap.vue

+<template>
+  <section id="map">
+    <div class="container flex items-end mb-3 pl-8">
+      <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
+      <a
+        href="https://carte.monnaie-libre.fr"
+        target="_blank"
+        class="
+          group
+          bg-clip-text bg-gradient-to-r
+          font-extrabold
+          from-purple-800
+          hover:underline
+          text-4xl text-transparent
+          to-blue-600
+          uppercase
+        "
+        rel="noopener noreferrer"
+      >
+        Carte
+        <fa
+          icon="external-link-alt"
+          class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
+        />
+      </a>
+    </div>
+
+    <iframe
+      :src="intersected ? $config.map_url : null"
+      class="w-full bg-gray-200"
+      style="height: 50vh; min-height: 600px"
+      title="Carte monnaie-libre"
+    />
+  </section>
+</template>
+
+<script>
+import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'
+
+export default {
+  components: {
+    FaviconMap,
+  },
+  data() {
+    return {
+      observer: null,
+      intersected: false,
+    }
+  },
+  mounted() {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        const item = entries[0]
+        if (item.isIntersecting) {
+          this.intersected = true
+          this.observer.disconnect()
+        }
+      },
+      {
+        rootMargin: '500px',
+      }
+    )
+
+    this.observer.observe(this.$el)
+  },
+  destroyed() {
+    this.observer.disconnect()
+  },
+}
+</script>

components/home/HomeNextEvents.vue

 <template>
   <section id="agenda" class="container py-12">
-    <div class="border-b-2 container flex items-end mb-3 pb-2">
+    <div class="border-b-2 container flex items-end mb-3 pb-2 pl-1">
       <JuneCalendar class="w-12 mr-3 fill-current dark:text-gray-100" />
       <a
-        href="https://forum.monnaie-libre.fr/calendar"
+        :href="`${$config.forum_url}/calendar`"
         target="_blank"
-        class="group bg-clip-text bg-gradient-to-r font-extrabold from-purple-800 hover:underline text-4xl text-transparent to-blue-600 uppercase"
+        class="
+          group
+          bg-clip-text bg-gradient-to-r
+          font-extrabold
+          from-purple-800
+          hover:underline
+          text-4xl text-transparent
+          to-blue-600
+          uppercase
+        "
+        rel="noopener noreferrer"
       >
         Agenda
         <fa
@@ -25,15 +35,25 @@
         <a
           v-for="(event, index) in column"
           :key="index"
-          :href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
-          targe="_blank"
-          class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
+          :href="`${$config.forum_url}${event.post.url}`"
+          target="_blank"
+          class="
+            block
+            hover:bg-hover-light
+            dark-hover:text-gray-800
+            p-2
+            mt-1
+            rounded-lg
+            transition-colors
+          "
+          rel="noopener noreferrer"
         >
           <div class="event-date text-sm text-gray-500">
-            {{ prettyDate(event.event.start) }}
+            {{ prettyDate(event.starts_at) }}
+            <!-- poka: I don't find tags anymore with new api, so this line is actually unused -->
             <div v-for="(tag, i) in event.tag" :key="i">{{ tag }}</div>
           </div>
-          <div>{{ event.title }}</div>
+          <div v-html="emojify(event.post.topic.title)" />
         </a>
       </div>
     </aside>
@@ -47,6 +67,7 @@
 <script>
 import JuneCalendar from '~/static/img/june-calendar.svg?inline'
 import { fetchNextEvents } from '~/libs/api-forum'
+import { performEmojiUnescape } from '~/libs/emoji'
 
 export default {
   name: 'HomeNextEvents',
@@ -99,6 +120,13 @@ export default {
         })
         .reduce((string, part) => string + part)
     },
+    emojify(text) {
+      return performEmojiUnescape(text, {
+        emojiSet: 'images/emoji/twitter',
+        emojiCDNUrl: 'https://forum.monnaie-libre.fr',
+        getURL: (url) => url,
+      })
+    },
   },
 }
 </script>

components/home/HomeSearch.vue

-<template>
-  <section class="overflow-hidden relative z-10">
-    <div
-      class="absolute inset-0 mt-10 z-0"
-      style="backdrop-filter: blur(2px)"
-    />
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      width="100%"
-      height="700"
-      preserveAspectRatio="none"
-      viewBox="0 0 3000 700"
-      class="absolute inset-0 -top-28"
-    >
-      <g transform="translate(1500,350) scale(1,1) translate(-1500,-350)">
-        <linearGradient id="lg-0.351604754756625" x1="0" x2="1" y1="0" y2="0">
-          <stop stop-color="#5b21b6" offset="0"></stop>
-          <stop stop-color="#2563eb" offset="1"></stop>
-        </linearGradient>
-        <path d="" fill="url(#lg-0.351604754756625)" opacity="0.1">
-          <animate
-            attributeName="d"
-            dur="10s"
-            repeatCount="indefinite"
-            keyTimes="0;0.333;0.667;1"
-            calcmod="spline"
-            keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
-            begin="0s"
-            values="M0 0M 0 538.6197230687883Q 500 574.6819201141337 1000 574.575666670496T 2000 528.2190300776177T 3000 527.9222284268443L 3000 115.4395609622847Q 2500 122.11205254010194 2000 112.64297809895902T 1000 141.3855421925954T 0 166.56344278918195Z;M0 0M 0 588.7850739966284Q 500 593.4766386389036 1000 589.7625799078935T 2000 551.7945119708431T 3000 578.5077673498635L 3000 169.7675721459745Q 2500 125.67810753789244 2000 116.51196847367086T 1000 126.5496708214944T 0 168.4786767549831Z;M0 0M 0 531.1090348755101Q 500 557.1270943668658 1000 554.5419554069241T 2000 545.9865154592908T 3000 569.5619790716728L 3000 126.52765717058406Q 2500 154.4510819017288 2000 145.51367313923492T 1000 173.5431781037003T 0 152.16935842768572Z;M0 0M 0 538.6197230687883Q 500 574.6819201141337 1000 574.575666670496T 2000 528.2190300776177T 3000 527.9222284268443L 3000 115.4395609622847Q 2500 122.11205254010194 2000 112.64297809895902T 1000 141.3855421925954T 0 166.56344278918195Z"
-          ></animate>
-        </path>
-        <path d="" fill="url(#lg-0.351604754756625)" opacity="0.1">
-          <animate
-            attributeName="d"
-            dur="10s"
-            repeatCount="indefinite"
-            keyTimes="0;0.333;0.667;1"
-            calcmod="spline"
-            keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
-            begin="-3.3333333333333335s"
-            values="M0 0M 0 590.6448658165359Q 500 559.7529084945777 1000 557.6861681027829T 2000 561.5267270090096T 3000 593.9178925323536L 3000 114.18322607589454Q 2500 166.66199791810573 2000 162.8315286347745T 1000 160.3215475477619T 0 107.78843290213965Z;M0 0M 0 585.7333909305496Q 500 544.8442474547807 1000 537.1154758997013T 2000 552.1278283483364T 3000 540.760640040708L 3000 146.52147135465333Q 2500 113.81907823669863 2000 111.7307131744789T 1000 115.35203072555836T 0 110.67481984112672Z;M0 0M 0 543.131818899705Q 500 589.9945665811799 1000 586.6098547370501T 2000 584.5365631772061T 3000 581.8427322344887L 3000 145.84962300077729Q 2500 154.00891194415192 2000 149.856911020101T 1000 115.72184159380231T 0 138.76577509540138Z;M0 0M 0 590.6448658165359Q 500 559.7529084945777 1000 557.6861681027829T 2000 561.5267270090096T 3000 593.9178925323536L 3000 114.18322607589454Q 2500 166.66199791810573 2000 162.8315286347745T 1000 160.3215475477619T 0 107.78843290213965Z"
-          ></animate>
-        </path>
-        <path d="" fill="url(#lg-0.351604754756625)" opacity="0.1">
-          <animate
-            attributeName="d"
-            dur="10s"
-            repeatCount="indefinite"
-            keyTimes="0;0.333;0.667;1"
-            calcmod="spline"
-            keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
-            begin="-6.666666666666667s"
-            values="M0 0M 0 577.3279699785157Q 500 596.5194960333786 1000 591.0515207168066T 2000 580.7438383793185T 3000 559.5043698739771L 3000 106.40480611640268Q 2500 158.55578293506778 2000 155.42053618954887T 1000 125.62767807693737T 0 122.13819191110474Z;M0 0M 0 549.1585595469946Q 500 576.0564903157024 1000 572.0145684353647T 2000 536.8811706818898T 3000 539.2410439119517L 3000 150.739380000344Q 2500 122.68200223973729 2000 117.80547834149974T 1000 130.7528253401447T 0 114.62861752105474Z;M0 0M 0 544.9971494193371Q 500 591.2702407207314 1000 586.3395289570205T 2000 535.4362929322266T 3000 559.0140529154019L 3000 137.58917569157174Q 2500 135.2633200441013 2000 129.28903611617616T 1000 160.0439061679986T 0 161.57296247749883Z;M0 0M 0 577.3279699785157Q 500 596.5194960333786 1000 591.0515207168066T 2000 580.7438383793185T 3000 559.5043698739771L 3000 106.40480611640268Q 2500 158.55578293506778 2000 155.42053618954887T 1000 125.62767807693737T 0 122.13819191110474Z"
-          ></animate>
-        </path>
-      </g>
-    </svg>
-
-    <div class="container pt-20 pb-12 relative">
-      <h1
-        class="font-bold mb-8 text-3xl text-center text-gray-700 dark:text-white dark:text-opacity-50"
-      >
-        Chercher...
-      </h1>
-
-      <div class="flex justify-evenly">
-        <TInputIcon
-          v-model="querySite"
-          type="search"
-          :placeholder="$t('home.searchSitePlaceholder')"
-          class="w-full"
-          input-class="text-xl rounded-full"
-          icon="search"
-          icon-class="text-2xl text-blue-100 dark:text-gray-600"
-          @keyup.enter="$router.push(`/recherche?q=${querySite}`)"
-        />
-
-        <TInputIcon
-          v-model="queryRessources"
-          type="search"
-          :placeholder="$t('home.searchRessourcesPlaceholder')"
-          class="w-full mx-8"
-          input-class="text-xl rounded-full"
-          icon="search"
-          icon-class="text-2xl text-blue-100 dark:text-gray-600"
-          @keyup.enter="$router.push(`/ressources?q=${queryRessources}`)"
-        />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      querySite: null,
-      queryRessources: null,
-    }
-  },
-  methods: {
-    searchOnSite() {
-      this.$router.push(`/recherche?q=${this.querySite}`)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>

components/home/HomeSearchInput.vue

+<template>
+  <section class="bg-gray-100 dark:bg-gray-800">
+    <div class="container py-12 relative prose">
+      <div class="flex justify-evenly">
+        <TInputIcon
+          ref="search"
+          v-model="query"
+          type="search"
+          :placeholder="placeholder"
+          class="w-full"
+          :input-class="inputClass"
+          icon="search"
+          :icon-class="iconClass"
+          icon-wrapper-class="top-0.5"
+          @keyup.enter="search()"
+        />
+
+        <t-button :class="buttonClass" :text="$t('search')" @click="search()" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    inputClass: {
+      type: String,
+      default: 'text-2xl rounded-full',
+    },
+    iconClass: {
+      type: String,
+      default: 'text-2xl text-blue-100 dark:text-gray-600',
+    },
+    buttonClass: {
+      type: String,
+      default: 'text-xl ml-6 rounded-full',
+    },
+  },
+  data() {
+    return {
+      query: null,
+      placeholder: '',
+
+      timeout: null,
+      typeSpeed: 50,
+      backDelay: 1000,
+      backSpeed: 5,
+      strPos: 0,
+      arrayPos: 0,
+      curString: null,
+      curStrPos: null,
+      strings: [
+        'Chercher sur le site...',
+        'Chercher un site sur la monnaie libre...',
+        'Chercher un groupe local, une asso...',
+        "Besoin d'aide ? Une question ? (FAQ)",
+        "Besoin d'un tutoriel ? Une vidéo ?",
+        'Un terme à expliquer ? (Lexique)',
+      ],
+      smartBackspace: true,
+    }
+  },
+  mounted() {
+    this.typewrite(this.strings[this.arrayPos], this.strPos)
+  },
+  methods: {
+    search() {
+      if (this.query) {
+        this.$router.push(`/recherche?q=${this.query}`)
+      } else {
+        this.$refs.search.focus()
+      }
+    },
+    typewrite(curString, curStrPos) {
+      const numChars = 1
+      // skip over any HTML chars
+      curStrPos = this.typeHtmlChars(curString, curStrPos)
+
+      this.timeout = setTimeout(() => {
+        // We're done with this sentence!
+        if (curStrPos >= curString.length) {
+          this.doneTyping(curString, curStrPos)
+        } else {
+          this.keepTyping(curString, curStrPos, numChars)
+        }
+      }, this.typeSpeed)
+    },
+    keepTyping(curString, curStrPos, numChars) {
+      // start typing each new char into existing string
+      // curString: arg, this.el.html: original text inside element
+      curStrPos += numChars
+      const nextString = curString.substr(0, curStrPos)
+      this.placeholder = nextString
+      // loop the function
+      this.typewrite(curString, curStrPos)
+    },
+    doneTyping(curString, curStrPos) {
+      this.timeout = setTimeout(() => {
+        this.backspace(curString, curStrPos)
+      }, this.backDelay)
+    },
+    typeHtmlChars(curString, curStrPos) {
+      const curChar = curString.substr(curStrPos).charAt(0)
+      if (curChar === '<' || curChar === '&') {
+        let endTag = ''
+        if (curChar === '<') {
+          endTag = '>'
+        } else {
+          endTag = ';'
+        }
+        while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
+          curStrPos++
+          if (curStrPos + 1 > curString.length) {
+            break
+          }
+        }
+        curStrPos++
+      }
+      return curStrPos
+    },
+    backspace(curString, curStrPos) {
+      this.timeout = setTimeout(() => {
+        curStrPos = this.backSpaceHtmlChars(curString, curStrPos, this)
+        // replace text with base text + typed characters
+        const curStringAtPosition = curString.substr(0, curStrPos)
+        this.placeholder = curStringAtPosition
+
+        // if smartBack is enabled
+        if (this.smartBackspace) {
+          // the remaining part of the current string is equal of the same part of the new string
+          const nextString = this.strings[this.arrayPos + 1]
+          if (
+            nextString &&
+            curStringAtPosition === nextString.substr(0, curStrPos)
+          ) {
+            this.stopNum = curStrPos
+          } else {
+            this.stopNum = 0
+          }
+        }
+
+        // if the number (id of character in current string) is
+        // less than the stop number, keep going
+        if (curStrPos > this.stopNum) {
+          // subtract characters one by one
+          curStrPos--
+          // loop the function
+          this.backspace(curString, curStrPos)
+        } else if (curStrPos <= this.stopNum) {
+          // if the stop number has been reached, increase
+          // array position to next string
+          this.arrayPos++
+          // When looping, begin at the beginning after backspace complete
+          if (this.arrayPos === this.strings.length) {
+            this.arrayPos = 0
+            this.typewrite(this.strings[this.arrayPos], this.strPos)
+          } else {
+            this.typewrite(this.strings[this.arrayPos], curStrPos)
+          }
+        }
+      }, this.backSpeed)
+    },
+    backSpaceHtmlChars(curString, curStrPos) {
+      const curChar = curString.substr(curStrPos).charAt(0)
+      if (curChar === '>' || curChar === ';') {
+        let endTag = ''
+        if (curChar === '>') {
+          endTag = '<'
+        } else {
+          endTag = '&'
+        }
+        while (curString.substr(curStrPos - 1).charAt(0) !== endTag) {
+          curStrPos--
+          if (curStrPos < 0) {
+            break
+          }
+        }
+        curStrPos--
+      }
+      return curStrPos
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

components/layout/LayoutFooter.vue

 <template>
   <div
-    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 p-6 text-white"
+    class="
+      bg-gradient-to-r
+      from-purple-600
+      to-purple-400
+      pt-8
+      text-white
+      z-10
+      dark:from-purple-900 dark:to-purple-700 dark:text-gray-100
+      transition
+    "
   >
     <div class="container">
-      <div class="flex flex-wrap mb-4 w-full">
-        <div class="w-full sm:w-1/2 md:w-1/2">
-          <div>
-            <h3 class="text-3xl py-4">À propos</h3>
-            <nuxt-content
-              v-if="$store.state.footer"
-              :document="$store.state.footer"
-            />
-          </div>
-          <div>
-            <h3 class="text-3xl mt-8 py-4">Encouragez les développeurs</h3>
-            <div class="text-xl mb-2">Participez au financement en Ğ1 !</div>
+      <div
+        class="grid grid-flow-row gap-8 mb-4 w-full sm:grid-cols-5 lg:gap-x-20"
+      >
+        <div class="col-span-2 sm:col-span-5 lg:col-span-3">
+          <h3 class="text-3xl py-4">À propos</h3>
+          <nuxt-content
+            v-if="$store.state.footer"
+            :document="$store.state.footer"
+            class="about"
+          />
+        </div>
 
-            <G1Crowdfunding
-              pubkey="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8"
-              class="flex"
-            >
-              <template #button="{ onClick }">
-                <t-button class="w-full lg:w-max" @click="onClick">
-                  <fa icon="heart"></fa><span class="ml-2">Je participe !</span>
-                </t-button>
-              </template>
-            </G1Crowdfunding>
-          </div>
+        <div class="col-span-2 sm:col-span-5 lg:col-span-3 max-w-xl">
+          <h3 class="text-3xl py-4">Encouragez les développeurs</h3>
+          <div class="text-xl mb-3">Participez au financement en Ğ1 !</div>
+
+          <G1Crowdfunding
+            pubkey="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8"
+            class="sm:grid grid-flow-col"
+          >
+            <template #button="{ onClick }">
+              <t-button class="w-full sm:w-auto lg:w-max" @click="onClick">
+                <fa icon="heart"></fa><span class="ml-2">Je participe !</span>
+              </t-button>
+            </template>
+          </G1Crowdfunding>
         </div>
 
         <div
-          class="w-full flex flex-col pl-0 sm:w-1/2 sm:items-start sm:pl-8 md:justify-around md:flex-row"
+          class="
+            col-span-2
+            sm:col-span-3 sm:flex
+            justify-between
+            lg:col-span-2 lg:row-start-1 lg:col-start-4
+          "
         >
-          <div>
-            <h3 class="text-3xl py-4">Sections</h3>
-            <ul>
-              <li>
-                <nuxt-link class="hover:underline" to="/blog">Blog</nuxt-link>
-              </li>
-              <li>
-                <nuxt-link class="hover:underline" to="/ressources">
-                  Ressources
-                </nuxt-link>
-              </li>
-              <li>
-                <nuxt-link class="hover:underline" to="/faq">FAQ</nuxt-link>
-              </li>
-              <li>
-                <nuxt-link class="hover:underline" to="/lexique">
-                  Lexique
-                </nuxt-link>
+          <div v-for="(column, index) of menuFooter" :key="index">
+            <h3 class="text-3xl py-4">{{ column.title }}</h3>
+            <ul v-if="column.type === 'column'">
+              <li v-for="(menu, i) of column.menus" :key="i">
+                <nuxt-link class="hover:underline" :to="menu.url">{{
+                  menu.title
+                }}</nuxt-link>
               </li>
             </ul>
-          </div>
-          <div>
-            <h3 class="text-3xl py-4">Ressources</h3>
-            <ul>
+            <ul v-if="column.type === 'ressources'" class="grid gap-x-6">
               <li v-for="category in categories" :key="category.title">
                 <nuxt-link
                   class="hover:underline"
                   :to="{
-                    path: 'ressources',
+                    path: '/ressources',
                     query: { filters: category.title },
                   }"
                 >
@@ -70,21 +72,142 @@
             </ul>
           </div>
         </div>
+
+        <div class="sm:col-span-2">
+          <h3 class="text-3xl py-4">Suivez-nous</h3>
+          <div class="text-xl">
+            <a
+              v-if="$config.mastodon_link && $config.mastodon_user"
+              :href="$config.mastodon_link"
+              target="_blank"
+              class="flex items-center mb-2 hover:underline"
+              rel="noopener noreferrer"
+            >
+              <fa :icon="['fab', 'mastodon']" class="text-2xl mr-2.5" />
+              <span>{{ $config.mastodon_user }}</span>
+            </a>
+
+            <a
+              v-if="$config.twitter_user"
+              :href="`https://twitter.com/${$config.twitter_user}`"
+              target="_blank"
+              class="flex items-center mb-2 hover:underline"
+              rel="noopener noreferrer"
+            >
+              <fa :icon="['fab', 'twitter']" class="text-2xl mr-2.5" />
+              <span>@{{ $config.twitter_user }}</span>
+            </a>
+
+            <a
+              v-if="$config.facebook_group"
+              :href="$config.facebook_group"
+              target="_blank"
+              class="flex items-center mb-2 hover:underline"
+              rel="noopener noreferrer"
+            >
+              <fa :icon="['fab', 'facebook']" class="text-2xl mr-2.5" />
+              <span>Groupe Facebook</span>
+            </a>
+
+            <a
+              href="https://t.me/monnaielibrejune"
+              target="_blank"
+              class="flex items-center mb-2 hover:underline"
+              rel="noopener noreferrer"
+            >
+              <fa :icon="['fab', 'telegram']" class="text-2xl mr-2.5" />
+              <span>Groupe de discussion Telegram</span>
+            </a>
+
+            <a
+              href="https://t.me/infomonnaielibre"
+              target="_blank"
+              class="flex items-center mb-2 hover:underline"
+              rel="noopener noreferrer"
+            >
+              <fa :icon="['fab', 'telegram']" class="text-2xl mr-2.5" />
+              <span>Canal d'info Telegram</span>
+            </a>
+
+            <nuxt-link
+              to="/feed"
+              class="flex items-center mb-2 hover:underline"
+            >
+              <fa icon="rss-square" class="text-2xl mr-2.5" />
+              <span>Flux RSS</span>
+            </nuxt-link>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="flex items-center justify-between text-xs border-t mt-12 py-4"
+      >
+        <div class="block lg:flex justify-between">
+          <nuxt-link to="/mentions-legales" class="lg:mr-4 hover:underline">
+            Mentions légales
+          </nuxt-link>
+          <div class="lg:mr-4">
+            Site généré avec
+            <a
+              href="https://nuxtjs.org"
+              target="_blank"
+              class="hover:underline"
+              rel="noopener noreferrer"
+            >
+              nuxtjs
+            </a>
+            au commit
+            <a
+              :href="`https://git.duniter.org/websites/monnaie-libre-fr/-/commit/${$config.git_commit}`"
+              target="_blank"
+              class="hover:underline"
+              rel="noopener noreferrer"
+            >
+              {{ $config.git_commit }}
+            </a>
+          </div>
+        </div>
+        <div class="">
+          <a
+            rel="license noopener noreferrer"
+            href="http://creativecommons.org/licenses/by-sa/4.0/"
+            target="_blank"
+            class="md:flex items-center"
+          >
+            <div class="pb-1 md:pr-3 md:pb-0">
+              Tout le contenu du site est<br />
+              en licence CC BY-SA 4.0
+            </div>
+            <img
+              alt="Licence Creative Commons"
+              style="border-width: 0"
+              src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"
+            />
+          </a>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import menus from '~/static/settings/menus.json'
 import categories from '~/static/settings/categories.json'
 
 export default {
   data() {
     return {
+      menuFooter: menus.menu_footer,
       categories: categories.ressources,
     }
   },
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="postcss" scoped>
+>>> .about a {
+  font-weight: 500;
+  text-decoration: underline;
+}
+</style>

components/layout/LayoutHeader.vue

 <template>
   <div
-    class="header bg-white w-full fixed z-20 top-0 transition-transform duration-300 transform translate-y-0 dark:bg-black dark:text-gray-300"
+    class="
+      header
+      bg-white
+      w-full
+      fixed
+      z-20
+      top-0
+      transition
+      duration-300
+      transform
+      translate-y-0
+      dark:bg-black dark:text-gray-300
+    "
     :class="{ '-translate-y-20': scrolled }"
   >
     <nav class="container flex justify-between items-center mx-auto h-16">
-      <LayoutHeaderLogo />
+      <LayoutHeaderMenuHamburger class="mr-3 flex lg:hidden">
+        <LayoutHeaderMenu class="flex-col space-y-4" />
+      </LayoutHeaderMenuHamburger>
+
+      <LayoutHeaderLogo :show-title="!searchFocus" />
 
       <div class="flex justify-end items-center relative">
-        <LayoutHeaderMenu />
+        <LayoutHeaderMenuSearch @search-focus="searchFocus = $event" />
+
+        <LayoutHeaderMenu class="hidden lg:flex" />
 
-        <AppDarkMode />
+        <AppDarkModeToggle class="hidden xl:inline-flex ml-3" />
 
-        <LayoutHeaderMenuAvatar />
+        <LayoutHeaderMenuAvatar class="hidden sm:block" />
       </div>
     </nav>
   </div>
@@ -25,6 +43,7 @@ export default {
       limitPosition: 64,
       scrolled: false,
       lastPosition: 0,
+      searchFocus: false,
     }
   },
   mounted() {
@@ -60,13 +79,4 @@ export default {
   /* Copied from discourse */
   box-shadow: 0 2px 4px -1px rgb(0 0 0 / 25%);
 }
-.menu-hamburger {
-  display: block;
-  fill: none;
-  height: 16px;
-  width: 16px;
-  stroke: currentcolor;
-  stroke-width: 3;
-  overflow: visible;
-}
 </style>

components/layout/LayoutHeaderLogo.vue

@@ -4,12 +4,32 @@
     class="group inline-flex items-center focus:outline-none py-3"
   >
     <div
-      class="w-9 mr-4 fill-current group-hover:text-purple-800 transition-colors"
+      class="
+        w-6
+        sm:w-9
+        mr-4
+        fill-current
+        group-hover:text-purple-800
+        transition-colors
+      "
       v-html="$options.rawLogo"
     />
 
     <span
-      class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors"
+      class="
+        bg-clip-text bg-gradient-to-r
+        font-semibold
+        from-purple-800
+        group-hover:text-transparent
+        text-lg
+        sm:text-xl
+        lg:text-2xl
+        to-blue-700
+        tracking-tight
+        transition-colors
+        whitespace-nowrap
+      "
+      :class="!props.showTitle && 'hidden lg:block'"
     >
       {{ $options.config.site_title }}
     </span>
@@ -24,5 +44,11 @@ export default {
   name: 'LayoutHeaderLogo',
   rawLogo,
   config,
+  props: {
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+  },
 }
 </script>

components/layout/LayoutHeaderMenu.vue

 <template>
-  <div class="flex mr-3">
+  <div class="flex">
     <template v-for="(item, index) of menu">
-      <nuxt-link
-        v-if="item.url.startsWith('/')"
-        :key="index"
-        class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
-        :to="item.url"
-      >
+      <nuxt-link v-if="item.url" :key="index" class="menu-item" :to="item.url">
         {{ item.title }}
       </nuxt-link>
-    </template>
-
-    <t-dropdown
-      toggle-on-hover
-      :classes="{
-        dropdown:
-          'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',
-      }"
-    >
-      <a
-        slot="trigger"
-        class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
-        href="https://forum.monnaie-libre.fr/"
-        target="_blank"
-        rel="noopener noreferrer"
+      <t-dropdown
+        v-else-if="item.title.toLowerCase() === 'forum'"
+        :key="index"
+        toggle-on-hover
+        :hide-on-leave-timeout="0"
+        :classes="{
+          dropdown:
+            'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',
+        }"
       >
-        Forum
-        <fa
-          icon="external-link-alt"
-          class="w-3 ml-1.5 text-gray-500 opacity-75"
-        />
-      </a>
-      <LayoutHeaderMenuForum />
-    </t-dropdown>
+        <a
+          slot="trigger"
+          class="menu-item"
+          :href="$config.forum_url"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Forum
+          <fa
+            icon="external-link-alt"
+            class="w-3 ml-1.5 text-gray-500 opacity-75"
+          />
+        </a>
+        <LayoutHeaderMenuForum />
+      </t-dropdown>
+    </template>
   </div>
 </template>
 
@@ -49,4 +46,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="postcss" scoped>
+.menu-item {
+  @apply inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2;
+}
+</style>

components/layout/LayoutHeaderMenuAvatar.vue

@@ -15,7 +15,11 @@
         aria-haspopup="true"
         class="h-8 w-8 focus:ring-2 focus:outline-none rounded-full"
       >
-        <img v-if="user" :src="user.avatar_url" class="rounded-full" />
+        <img
+          v-if="user && user.avatar_url"
+          :src="user.avatar_url"
+          class="rounded-full"
+        />
         <fa v-else icon="user-circle" class="text-3xl" />
       </button>
       <fa icon="caret-down" class="pl-1.5" />
@@ -65,15 +69,39 @@
           </div>
           <div v-if="git">
             <span
-              class="bg-purple-200 text-purple-800 font-medium py-0.5 px-1 text-sm rounded"
+              class="
+                bg-purple-200
+                text-purple-800
+                font-medium
+                py-0.5
+                px-1
+                text-sm
+                rounded
+              "
               v-text="git.draft.count"
             />
             <span
-              class="bg-yellow-200 text-yellow-800 font-medium py-0.5 px-1 text-sm rounded"
+              class="
+                bg-yellow-200
+                text-yellow-800
+                font-medium
+                py-0.5
+                px-1
+                text-sm
+                rounded
+              "
               v-text="git.pending_review.count"
             />
             <span
-              class="bg-green-200 text-green-800 font-medium py-0.5 px-1 text-sm rounded"
+              class="
+                bg-green-200
+                text-green-800
+                font-medium
+                py-0.5
+                px-1
+                text-sm
+                rounded
+              "
               v-text="git.pending_publish.count"
             />
           </div>
@@ -119,7 +147,15 @@
           >
             <div>Mes tickets</div>
             <div
-              class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
+              class="
+                bg-gray-200
+                text-gray-800
+                font-medium
+                w-5
+                h-5
+                text-center text-sm
+                rounded-full
+              "
               v-text="git.my_issues.count"
             />
           </a>
@@ -130,7 +166,15 @@
           >
             <div>Mes demandes de fusion</div>
             <div
-              class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
+              class="
+                bg-gray-200
+                text-gray-800
+                font-medium
+                w-5
+                h-5
+                text-center text-sm
+                rounded-full
+              "
               v-text="git.my_merge_requests.count"
             />
           </a>
@@ -157,12 +201,14 @@
 
       <hr class="border-t dark:border-gray-500 my-1" />
 
-      <div class="flex">
+      <div class="flex items-center justify-between">
         <nuxt-link to="/aide" class="menu-item">
           <fa icon="info-circle" class="text-gray-400 mr-2" />
           <span>Aide</span>
         </nuxt-link>
 
+        <AppDarkModeToggle class="xl:hidden ml-2" />
+
         <AppA11y class="ml-2" />
       </div>
     </div>

components/layout/LayoutHeaderMenuForum.vue

 <template>
-  <div v-if="!loading" class="flex items-center">
+  <div v-if="!loading" class="menu-forum flex items-center">
     <MiniMap class="mx-4" style="min-width: 440px" />
 
     <div class="text-left text-xs py-1 w-80 border-l dark:border-gray-500">
       <a
         v-for="(cat, index) in categories"
         :key="index"
-        class="block text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 p-2 w-full"
-        :href="`https://forum.monnaie-libre.fr/c/${cat.slug}/${cat.id}`"
+        class="
+          block
+          text-gray-600
+          hover:text-gray-700 hover:bg-hover-light
+          dark:text-gray-200
+          p-2
+          w-full
+        "
+        :href="`${$config.forum_url}/c/${cat.slug}/${cat.id}`"
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -51,4 +58,7 @@ export default {
   margin-right: 5px;
   display: inline-block;
 }
+.hamburger-menu .menu-forum {
+  display: none;
+}
 </style>

components/layout/LayoutHeaderMenuHamburger.vue

+<script>
+export default {
+  name: 'LayoutHeaderMenuHamburger',
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+}
+</script>
+
+<template>
+  <div>
+    <div
+      class="hamburger flex flex-col space-between space-y-1.5 p-6 -mx-6"
+      :class="isOpen ? 'is-open' : ''"
+      @click="isOpen = !isOpen"
+    >
+      <span class="hamburger-item" />
+      <span class="hamburger-item" />
+      <span class="hamburger-item" />
+    </div>
+
+    <transition :name="isOpen ? 'slideback' : 'slide'">
+      <div
+        v-show="isOpen"
+        class="hamburger-menu fixed bg-white left-0 top-0 w-min z-10 shadow p-8"
+      >
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.hamburger-item {
+  @apply block w-6 h-0.5 bg-gray-800 dark:bg-gray-300 transition;
+}
+
+.is-open.hamburger > span:nth-child(1) {
+  transform: translate(0, 0.5rem) rotate(45deg);
+}
+
+.is-open.hamburger > span:nth-child(2) {
+  opacity: 0;
+}
+
+.is-open.hamburger > span:nth-child(3) {
+  transform: translate(0, -0.5rem) rotate(-45deg);
+}
+
+.hamburger-menu {
+  top: 65px;
+  height: calc(100vh - 65px);
+}
+
+.slide-leave-active,
+.slide-enter-active {
+  transition: 0.5s;
+}
+.slide-enter {
+  transform: translate(100%, 0);
+}
+.slide-leave-to {
+  transform: translate(-100%, 0);
+}
+
+.slideback-leave-active,
+.slideback-enter-active {
+  transition: 0.5s;
+}
+.slideback-enter {
+  transform: translate(-100%, 0);
+}
+.slideback-leave-to {
+  transform: translate(100%, 0);
+}
+</style>

components/layout/LayoutHeaderMenuSearch.vue

+<template>
+  <div :class="isVisible && 'mr-2'">
+    <t-input
+      ref="search"
+      v-model="query"
+      :class="!isVisible && 'hidden'"
+      type="search"
+      :placeholder="$t('search') + ` [${isMac ? 'cmd' : 'ctrl'} K]`"
+      class="pl-12 w-full text-base rounded-full"
+      @keyup.enter="search()"
+      @blur="isVisible = false"
+      @focus="$event.target.select()"
+    />
+
+    <div
+      class="flex items-center bottom-0 top-0"
+      :class="[
+        isVisible
+          ? `absolute ml-3 text-2xl text-blue-100 dark:text-gray-600`
+          : 'text-2xl text-blue-300 dark:text-blue-800 hover:text-blue-400 dark-hover:text-blue-700 cursor-text py-3 pr-3 lg:pl-48',
+      ]"
+      @click="isVisible = true"
+    >
+      <fa slot="icon" icon="search" :class="[isVisible ? `` : '', '-mb-1']" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      query: '',
+      isVisible: false,
+      isMac: false,
+    }
+  },
+  watch: {
+    isVisible(newValue) {
+      this.$emit('search-focus', newValue)
+      if (newValue) {
+        this.$nextTick(() => {
+          this.$refs.search.$el.focus()
+        })
+      }
+    },
+  },
+
+  mounted() {
+    this.isMac = /(macintosh|macintel|macppc|mac68k|macos)/i.test(
+      navigator.userAgentData.platform
+    )
+    document.addEventListener('keydown', this.searchShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.searchShortcut)
+  },
+  methods: {
+    search() {
+      if (this.$route.path !== '/recherche') {
+        this.$router.push(`/recherche?q=${this.query}`)
+      } else {
+        this.$nuxt.$emit('global-search', this.query)
+      }
+    },
+    searchShortcut(e) {
+      if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault() // present "Save Page" from getting triggered.
+
+        this.isVisible = !this.isVisible
+      }
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped></style>

components/page/PageContainer.vue

 <template>
-  <div class="container">
+  <div class="container mb-16">
     <slot name="header">
       <PageHeader :document="document" />
     </slot>
@@ -8,15 +8,26 @@
       <nuxt-content :document="document" class="w-full prose dark:prose-dark" />
 
       <div
-        class="sticky h-full top-12 lg:w-1/4 lg:ml-12 mt-8 lg:mt-0 border-t pt-8 lg:pt-0 lg:border-none"
+        class="
+          sticky
+          h-full
+          top-12
+          lg:w-1/4 lg:ml-12
+          mt-8
+          lg:mt-0
+          border-t
+          pt-8
+          lg:pt-0 lg:border-none
+        "
       >
         <slot name="sidebar" />
+
+        <AppShareModal :document="document" class="mb-2" />
+        <PageEdit :document="document" class="w-full border-t mb-8 pt-2" />
       </div>
     </div>
 
-    <slot name="footer">
-      <PageBottom :document="document" class="w-full border-t my-8 pt-8" />
-    </slot>
+    <slot name="footer" />
   </div>
 </template>
 

components/page/PageBottom.vue → components/page/PageEdit.vue

 <template>
-  <div class="flex flex-col text-gray-500 text-sm">
-    <span class="font-bold">
+  <div class="text-right text-gray-400 dark:text-gray-600 text-sm">
+    <div class="font-semibold">
       {{ $t('page.updatedAt') }}
       {{ $d(Date.parse(document.updatedAt), 'short').replace(',', ' à') }}
-    </span>
+    </div>
 
     <a
-      :href="`admin/#/collections${document.dir}/entries/${document.slug}`"
+      :href="`https://monnaie-libre.fr/admin/#/collections${document.dir}/entries/${document.slug}`"
       target="_blank"
       rel="noopener noreferrer"
-      class="hover:underline"
+      class="hover:underline block"
     >
       {{ $t('page.editAdmin') }}
     </a>
@@ -19,7 +19,7 @@
       :href="linkVSCode"
       target="_blank"
       rel="noopener noreferrer"
-      class="hover:underline"
+      class="hover:underline block"
     >
       {{ $t('page.editVscode') }}
     </a>
@@ -28,6 +28,7 @@
 
 <script>
 export default {
+  name: 'PageEdit',
   props: {
     document: {
       type: Object,

components/page/PageFlatPlan.vue

+<template>
+  <nav>
+    <nuxt-link
+      v-if="showNext && nextPage"
+      class="text-3xl pb-3 mb-3 block group"
+      :to="nextPage.to"
+    >
+      <span class="opacity-75">Page suivante</span>
+      <fa icon="arrow-right" class="mx-4"></fa>
+      <span class="font-semibold group-hover:underline">
+        {{ nextPage.title }}
+      </span>
+    </nuxt-link>
+
+    <section
+      class="section-flatplan gap-6 grid lg:grid-cols-4 md:grid-cols-2 group"
+    >
+      <nuxt-link
+        v-for="(section, i) in sections"
+        :key="i"
+        :to="section.to"
+        class="
+          bg-blue-100
+          dark:bg-blue-900
+          px-4
+          py-4
+          pb-3
+          rounded
+          transition
+          hover:shadow-xl
+          transform
+          hover:-translate-y-0.5
+        "
+        :class="
+          showNext &&
+          (nextPage && nextPage.to === section.to
+            ? 'ring-4 ring-blue-200 dark:ring-blue-800'
+            : 'bg-opacity-80 dark:bg-opacity-80 group-hover:bg-opacity-100')
+        "
+      >
+        <div class="flex items-center justify-between">
+          <h2 class="font-semibold text-lg">{{ section.title }}</h2>
+          <fa icon="arrow-right" class="ml-4"></fa>
+        </div>
+        <ul class="mt-1 font-light list-flatplan">
+          <li v-for="(item, ii) in section.children" :key="ii">
+            {{ item }}
+          </li>
+        </ul>
+      </nuxt-link>
+    </section>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'PageFlatPlan',
+  props: {
+    plan: {
+      type: String,
+      required: true,
+    },
+    showNext: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      sections: [],
+    }
+  },
+  async fetch() {
+    const document = await this.$content(this.plan).fetch()
+
+    // This is ugly, but I don't found another way to extract title, link and li elements.
+    // It's work with 'content:file:beforeParse' nuxt-content hook. See in config.nuxt.js
+    this.sections = document.body.children
+      .filter((item) => item.tag === 'section')
+      .map((item) => {
+        const title = item.children.filter((item) => item.type === 'element')[0]
+          .children[1]
+        const children = item.children
+          .filter((item) => item.type === 'element')[1]
+          .children.filter((item) => item.type === 'element')
+          .map((li) => li.children[0].value)
+        return {
+          children,
+          title: title.children[0].value,
+          to: title.props.to,
+        }
+      })
+  },
+  computed: {
+    nextPage() {
+      const index = this.sections.findIndex(
+        (index) => index.to === this.$route.path
+      )
+      return this.sections[index + 1] ? this.sections[index + 1] : null
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+.list-flatplan > li {
+  position: relative;
+  padding-left: 1.75em;
+  margin: 0.5em 0;
+  line-height: 1.2em;
+}
+.list-flatplan > li::before {
+  content: '';
+  position: absolute;
+  background-color: #3b82f6;
+  border-radius: 50%;
+  width: 0.375em;
+  height: 0.375em;
+  top: 0.375em;
+  left: 0.25em;
+}
+
+.section-flatplan .svg-inline--fa {
+  animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
+  animation-delay: 5s;
+}
+.section-flatplan > a:nth-child(2) .svg-inline--fa {
+  animation-delay: 5.5s;
+}
+.section-flatplan > a:nth-child(3) .svg-inline--fa {
+  animation-delay: 6s;
+}
+.section-flatplan > a:nth-child(4) .svg-inline--fa {
+  animation-delay: 6.5s;
+}
+@keyframes shake {
+  0% {
+    -webkit-transform: translate(2px, 1px) rotate(0deg);
+  }
+
+  1% {
+    -webkit-transform: translate(-1px, -2px) rotate(-3deg);
+  }
+
+  2% {
+    -webkit-transform: translate(-3px, 0px) rotate(3deg);
+  }
+
+  3% {
+    -webkit-transform: translate(0px, 2px) rotate(0deg);
+  }
+
+  4% {
+    -webkit-transform: translate(1px, -1px) rotate(3deg);
+  }
+
+  5% {
+    -webkit-transform: translate(-1px, 2px) rotate(-3deg);
+  }
+
+  6% {
+    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+  }
+
+  7% {
+    -webkit-transform: translate(2px, 1px) rotate(-3deg);
+  }
+
+  8% {
+    -webkit-transform: translate(-1px, -1px) rotate(3deg);
+  }
+
+  9% {
+    -webkit-transform: translate(2px, 2px) rotate(0deg);
+  }
+
+  10% {
+    -webkit-transform: translate(1px, -2px) rotate(-3deg);
+  }
+
+  11% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+</style>

components/page/PageHeader.vue

 <template>
-  <div class="flex items-center justify-between py-8">
-    <h1 class="text-4xl font-extrabold">{{ document.title }}</h1>
+  <div class="flex items-center justify-between">
+    <h1
+      v-prevent-last-char-break
+      class="
+        text-3xl
+        md:text-4xl
+        2xl:text-5xl
+        bg-clip-text
+        text-transparent
+        bg-gradient-to-r
+        from-purple-800
+        to-blue-600
+        font-extrabold
+        leading-tight
+        py-10
+      "
+    >
+      {{ document.title }}
+    </h1>
     <slot />
   </div>
 </template>

components/page/PageRelated.vue

 <template>
-  <aside v-if="items.length">
-    <h1 class="text-xl uppercase text-gray-400 font-bold mb-2">
-      {{ $t('page.related') }}
-    </h1>
-
-    <ul>
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="block leading-5 mb-2 text-gray-500"
-      >
-        <nuxt-link :to="item.path" class="hover:underline">
-          {{ item.title }}
-        </nuxt-link>
-      </li>
-    </ul>
-  </aside>
+  <PageSidebarAside
+    v-if="items.length"
+    :title="$t('page.related')"
+    :items="items"
+  />
 </template>
 
 <script>
@@ -43,14 +31,36 @@ export default {
       .split(' ')
       .filter((word) => word.length > 3)
 
-    this.items = await this.$content(this.path)
+    const items = await this.$content(this.path)
       .where({ title: { $containsAny: words } })
       .limit(6)
       .only(['title', 'path'])
       .fetch()
 
+    /* test
+      await $vm0.$content('faq')
+      .search({
+        query: {
+          type: 'bool',
+          should: ['title', 'description'].map(field => ({
+            type: 'match',
+            field,
+            value: 'a quoi ça sert d être référent',
+            prefix_length: 1,
+            operator: 'or',
+            minimum_should_match: 1,
+            fuzziness: 1,
+            extended: true
+          }))
+        }
+      })
+      .limit(6)
+      .only(['title', 'description', 'path'])
+      .fetch()
+      */
+
     // remove current document
-    this.items = this.items
+    this.items = items
       .filter((item) => item.title !== this.document.title)
       .slice(0, 5) // to be sure we return only 5 elements
   },

components/page/PageSidebarAside.vue

+<template>
+  <aside>
+    <h1 class="text-xl uppercase text-gray-400 font-bold mb-2">
+      {{ title }}
+    </h1>
+
+    <nuxt-link
+      v-for="(item, index) of items"
+      :key="index"
+      v-prevent-last-char-break
+      :to="item.path.replace(/^\/pages\//, '/')"
+      class="block leading-5 mb-2 text-gray-500 hover:text-hover"
+    >
+      {{ item.title }}
+    </nuxt-link>
+  </aside>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: null,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+})
+</script>

components/page/PageToc.vue

@@ -14,6 +14,7 @@
         }"
       >
         <nuxt-link
+          v-prevent-last-char-break
           :to="`#${link.id}`"
           class="inline-block transform duration-100 hover:translate-x-1"
         >

components/ressources/RessourcesCategoriesFilter.vue

 <template>
-  <div class="flex items-center pt-2">
-    <div class="text-xs font-semibold ml-4">Filtres :</div>
-    <div class="flex items-center">
+  <div class="lg:flex items-center pt-2">
+    <div class="text-xs font-semibold mr-3 whitespace-nowrap">Filtres :</div>
+    <div class="flex items-center flex-wrap">
       <div
-        class="text-xs uppercase font-semibold ml-3 rounded px-1 py-0.5 cursor-pointer"
+        class="
+          text-xs
+          uppercase
+          font-semibold
+          mr-3
+          rounded
+          px-1
+          py-0.5
+          cursor-pointer
+        "
         :class="
           selectedCategories.length !== categories.length
             ? 'text-gray-400 hover:text-hover'
@@ -16,7 +25,17 @@
       <div
         v-for="(category, index) in categories"
         :key="index"
-        class="text-xs uppercase font-semibold ml-3 rounded px-1 py-0.5 cursor-pointer"
+        class="
+          text-xs
+          uppercase
+          font-semibold
+          mr-3
+          rounded
+          px-1
+          py-0.5
+          my-0.5
+          cursor-pointer
+        "
         :class="
           !selectedCategories.includes(category) ||
           selectedCategories.length === categories.length