.nvmrc

+v16.15.1

README.md

@@ -51,9 +51,13 @@ Puis aller sur http://localhost:3000/admin/
 
 # Design
 
-## Storybook
+## Illustration
 
-Idée abandonnée. J'ai installé, configuré et testé. Mais c'est compliqué, et finalement pas super intégré pour vue.js...
+Toutes les images utilisées sur le site :
+https://www.figma.com/file/Gof5rulCCUMvwk3WDKlgVY/monnaie-libre.fr
+
+Ressources :
+https://www.pixeltrue.com/free-packs/minimalistic-illustrations#preview
 
 ## Afficher toutes les `class` de tailwindcss
 
@@ -131,9 +135,8 @@ Graphql Explorer : https://git.duniter.org/-/graphql-explorer
 
 https://blog.logrocket.com/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu/
 
-
 # Discourse
 
 ## API Docs
 
-https://docs.discourse.org/
\ No newline at end of file
+https://docs.discourse.org/

assets/css/tailwind.css

@@ -29,6 +29,14 @@ html {
   @apply text-white;
 }
 
+/* For emojis from discourse */
+img.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  display: inline;
+}
+
 /* Loader */
 @keyframes spinner {
   to {

components/app/AppDarkModeToggle.vue

 <template>
-  <t-toggle v-model="mode" value="dark" unchecked-value="light" variant="dark">
+  <t-toggle
+    v-model="mode"
+    value="dark"
+    unchecked-value="light"
+    variant="dark"
+    :aria-checked="mode === 'light' ? 'false' : 'true'"
+    aria-label="Toggle dark mode"
+  >
     <fa
       slot="unchecked"
       icon="sun"

components/app/AppReadingTime.vue

 <template>
-  <div class="flex items-center mb-8">
-    <fa :icon="['far', 'clock']" class="text-gray-400 text-lg mr-2" />
+  <div class="flex items-center mb-8 text-gray-500">
+    <fa :icon="['far', 'clock']" class="text-xl mr-2" />
 
     <div>
       <span>{{ readingTimeToStr }}</span>
-      <span class="text-gray-400 text-sm pl-1">
+      <span
+        class="text-sm text-gray-400 dark:text-gray-600 pl-1 hidden xl:inline"
+      >
         {{ `(${readingTime.words} mots)` }}
       </span>
     </div>

components/app/AppShareModal.vue

+<template>
+  <div class="relative">
+    <t-dropdown
+      :show.sync="show"
+      toggle-on-focus
+      toggle-on-hover
+      :hide-on-leave-timeout="0"
+      :classes="{
+        dropdown:
+          'absolute rounded-md shadow-lg dark:border-gray-500 border -top-3 -left-3 z-10 overflow-hidden w-40 bg-white dark:bg-gray-600 transition duration-150 ease-in-out',
+      }"
+    >
+      <button
+        slot="button"
+        class="relative flex items-center text-gray-500"
+        :class="show && 'z-20 text-gray-800 dark:text-gray-200'"
+        aria-label="Partager"
+        aria-haspopup="true"
+      >
+        <fa icon="share-alt" class="text-xl mr-2.5" />
+        <div>Partager</div>
+      </button>
+
+      <div class="mt-11 pt-0.5 pb-1">
+        <div class="border-t dark:border-gray-500 pt-1 mx-2"></div>
+
+        <ShareNetwork
+          v-for="network in networks"
+          :key="network.name"
+          :network="network.network"
+          :url="$config.site_url + document.path.replace(/^\/pages\//, '/')"
+          :title="document.title"
+          :description="document.description"
+          :quote="document.description"
+          :hashtags="$config.social_networks_hashtags"
+          :twitter-user="$config.twitter_user"
+          :media="media"
+          class="
+            flex
+            items-center
+            pl-4
+            pr-2
+            py-1
+            text-gray-600
+            hover:text-gray-700 hover:bg-hover-light
+            dark:text-gray-200
+          "
+        >
+          <fa :icon="network.icon" :class="network.class" />
+          <span class="pl-2">
+            {{ network.name }}
+          </span>
+        </ShareNetwork>
+      </div>
+    </t-dropdown>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    document: {
+      type: Object,
+      required: true,
+    },
+    media: {
+      type: String,
+      default: null,
+    },
+  },
+  setup() {
+    const show = ref(false)
+
+    return {
+      show,
+      networks: [
+        { network: 'email', name: 'Email', icon: 'envelope', class: 'email' },
+        {
+          network: 'facebook',
+          name: 'Facebook',
+          icon: ['fab', 'facebook'],
+          class: 'facebook',
+        },
+        {
+          network: 'twitter',
+          name: 'Twitter',
+          icon: ['fab', 'twitter'],
+          class: 'twitter',
+        },
+        {
+          network: 'linkedin',
+          name: 'Linkedin',
+          icon: ['fab', 'linkedin'],
+          class: 'linkedin',
+        },
+        {
+          network: 'reddit',
+          name: 'Reddit',
+          icon: ['fab', 'reddit'],
+          class: 'reddit',
+        },
+        {
+          network: 'skype',
+          name: 'Skype',
+          icon: ['fab', 'skype'],
+          class: 'skype',
+        },
+        { network: 'sms', name: 'SMS', icon: 'comment', class: 'sms' },
+        {
+          network: 'telegram',
+          name: 'Telegram',
+          icon: ['fab', 'telegram'],
+          class: 'telegram',
+        },
+        {
+          network: 'whatsapp',
+          name: 'Whatsapp',
+          icon: ['fab', 'whatsapp'],
+          class: 'whatsapp',
+        },
+      ],
+    }
+  },
+})
+</script>
+
+<style scoped>
+.email,
+.sms {
+  color: #444;
+}
+.twitter {
+  color: #1da1f2;
+}
+.facebook {
+  color: #3b5998;
+}
+.linkedin {
+  color: #0077b5;
+}
+.skype {
+  color: #00aff0;
+}
+.reddit {
+  color: #ff4500;
+}
+.telegram {
+  color: #0088cc;
+}
+.whatsapp {
+  color: #43d854;
+}
+</style>

components/app/MiniMap.vue

@@ -4,7 +4,17 @@
     <span
       v-show="hovered"
       id="tooltip-mini-map"
-      class="absolute whitespace-nowrap pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 bg-white dark:bg-gray-700"
+      class="
+        absolute
+        whitespace-nowrap
+        pointer-events-none
+        p-1
+        shadow-lg
+        rounded
+        text-xs
+        bg-opacity-90 bg-white
+        dark:bg-gray-700
+      "
     >
       {{ hovered && hovered.name }}
     </span>
@@ -223,7 +233,7 @@ export default {
 
       region.addEventListener('click', (evt) => {
         window.open(
-          `https://forum.monnaie-libre.fr/c/${regions[evt.target.id].id}`,
+          `${this.$config.forum_url}/c/${regions[evt.target.id].id}`,
           '_blank'
         )
       })

components/app/TInputIcon.vue

@@ -9,7 +9,7 @@
       v-on="$listeners"
     />
     <div
-      class="absolute flex items-center ml-3 bottom-0 top-0"
+      class="absolute flex items-center bottom-0 top-0 ml-4"
       :class="iconWrapperClass"
     >
       <fa slot="icon" :icon="icon" :class="iconClass" />
@@ -47,7 +47,7 @@ export default {
     },
   },
   mounted() {
-    if (this.focus) this.focus()
+    if (this.hasFocus) this.focus()
   },
   methods: {
     focus() {

components/global/G1Crowdfunding.vue

@@ -40,7 +40,17 @@
     </slot>
 
     <div
-      class="flex items-center w-full lg:w-max justify-center px-2 lg:px-0 pt-2 lg:pt-0"
+      class="
+        flex
+        items-center
+        w-full
+        lg:w-max
+        justify-center
+        px-2
+        lg:px-0
+        pt-2
+        lg:pt-0
+      "
     >
       <slot
         v-if="!isKeyCopied"
@@ -140,9 +150,8 @@ export default {
   computed: {
     endpoint() {
       // Build url from props. Prevent missing protocol.
-      return (/^https:\/\//.test(this.node)
-        ? this.node
-        : `https://${this.node}`
+      return (
+        /^https:\/\//.test(this.node) ? this.node : `https://${this.node}`
       ).replace(/\/$/, '')
     },
     startDateTimestamp() {

components/global/Lexique.vue

@@ -14,7 +14,22 @@
     <client-only>
       <div
         v-if="document"
-        class="tooltip absolute bg-blue-100 border-blue-200 border invisible opacity-0 left-1/2 px-4 py-3 rounded-xl shadow-2xl text-gray-600 text-sm z-50 dark:bg-blue-900 dark:text-gray-100 dark:border-blue-800"
+        class="
+          tooltip
+          absolute
+          bg-blue-100
+          border-blue-200 border
+          invisible
+          opacity-0
+          left-1/2
+          px-4
+          py-3
+          rounded-xl
+          shadow-2xl
+          text-gray-600 text-sm
+          z-50
+          dark:bg-blue-900 dark:text-gray-100 dark:border-blue-800
+        "
       >
         <span class="triangle absolute"></span>
 
@@ -25,7 +40,13 @@
         <span>{{ document.description }}</span>
 
         <span
-          class="block font-light mt-3 text-xs text-purple-800 dark:text-purple-500"
+          class="
+            block
+            font-light
+            mt-3
+            text-xs text-purple-800
+            dark:text-purple-500
+          "
         >
           {{ $t('lexique.tooltipReadmore') }}
         </span>

components/global/List.vue

@@ -5,7 +5,7 @@
     <slot v-if="Array.isArray(data)" name="items" :items="data">
       <ul class="list">
         <li v-for="(item, i) in data" :key="i">
-          <nuxt-link :to="item.path">
+          <nuxt-link :to="item.path.replace(/^\/pages\//, '/')">
             <div v-if="title">{{ item.title }}</div>
           </nuxt-link>
           <span v-if="description">{{ item.description }}</span>

components/home/HomeCTA.vue

 <template>
-  <div id="container-cta" class="container mb-12">
-    <nuxt-content :document="document" />
+  <div class="pt-8">
+    <t-button
+      class="flex items-center rounded-2xl"
+      variant="success"
+      @click="$modal.show('videoIntro')"
+    >
+      <fa :icon="['fab', 'youtube']" class="text-4xl mr-4" />
+      <div class="text-left pr-1">
+        <div class="text-xl font-bold">Introduction</div>
+        <div class="-mt-1">3 min en vidéo</div>
+      </div>
+    </t-button>
+
+    <t-modal name="videoIntro" variant="video">
+      <div style="padding: 56.25% 0 0 0; position: relative">
+        <iframe
+          src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0&autoplay=1"
+          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+          frameborder="0"
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowfullscreen
+        ></iframe>
+      </div>
+    </t-modal>
   </div>
 </template>
 
 <script>
-export default {
-  props: {
-    document: {
-      type: Object,
-      required: true,
-    },
-  },
-}
+export default {}
 </script>
 
 <style lang="postcss"></style>

components/home/HomeHero.vue

 <template>
-  <div class="hero container flex">
-    <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
+  <div class="hero container flex lg:items-center">
+    <div class="max-w-2xl 2xl:max-w-3xl w-full">
       <nuxt-content :document="document" />
+
+      <HomeCTA />
     </div>
 
-    <SuperHero class="superhero w-full h-full" />
+    <SuperHero
+      class="
+        superhero
+        absolute
+        h-40
+        hidden
+        lg:h-full lg:relative lg:right-0 lg:w-full
+        md:block
+        right-6
+        w-1/3
+      "
+    />
   </div>
 </template>
 
@@ -26,7 +39,7 @@ export default {
 
 <style lang="postcss" scoped>
 .hero {
-  padding: max(8vh, 8rem) 0;
+  padding: max(8vh, 4rem) 1.5rem;
 }
 
 @keyframes floatHero {

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/app/AppGlobalSearchInput.vue → components/home/HomeSearchInput.vue

 <template>
-  <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"
-      @keyup.enter="search()"
-    />
+  <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>
+        <t-button :class="buttonClass" :text="$t('search')" @click="search()" />
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>

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 z-10 dark:from-purple-900 dark:to-purple-700 dark:text-gray-100"
+    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">
-        <LayoutHeaderMenuSearch />
+        <LayoutHeaderMenuSearch @search-focus="searchFocus = $event" />
 
-        <LayoutHeaderMenu />
+        <LayoutHeaderMenu class="hidden lg:flex" />
 
-        <AppDarkModeToggle />
+        <AppDarkModeToggle class="hidden xl:inline-flex ml-3" />
 
-        <LayoutHeaderMenuAvatar />
+        <LayoutHeaderMenuAvatar class="hidden sm:block" />
       </div>
     </nav>
   </div>
@@ -27,6 +43,7 @@ export default {
       limitPosition: 64,
       scrolled: false,
       lastPosition: 0,
+      searchFocus: false,
     }
   },
   mounted() {
@@ -62,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>