.nvmrc

+v16.15.1

README.md

-## Site [monnaie-libre.fr](https://monnaie-libre.fr)
+# Site [monnaie-libre.fr](https://monnaie-libre.fr)
 
-Lien provisoire : https://monnaie-libre-fr.vercel.app/
+Ceci est le dépôt du site.
 
-> Ceci est le dépôt du générateur du site.
-> Pour éditer son contenu, passez par l'admin du site, ou modifier directement les fichiers dans le dépôt du contenu.
+## Sommaire
+
+[[_TOC_]]
+
+<div class="panel panel-warning">
+<div class="panel-body">
+Si vous n'êtes pas développeur et souhaitez contribuer à la rédaction du site, passez par l'[administration du site](https://monnaie-libre.fr/admin/).
+</div>
+</div>
 
 ### Build Setup
 
@@ -23,38 +30,47 @@ $ yarn start
 
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
 
-## Le back office (netlify)
+# Administration : le back office
+
+Vous pouvez accéder à l'administration ici : https://monnaie-libre.fr/admin/
+Le back office est conçu avec [netlify cms](https://www.netlifycms.org/) qui est lui même couplé à ce dépôt gitlab. Tout changement effectué en back office créera une demande de fusion dans ce dépôt.
+Vous devez avoir un compte sur ce gitlab (git.duniter.org) pour pouvoir accéder au back office.
 
-Ici pour l'instant : https://monnaie-libre-fr.vercel.app/
+## Lancer le back office (netlify)
 
-### Lancer le back office (netlify)
+Si vous avez cloner le dépôt sur votre ordinateur, vous pouvez lancer le back office en local :
 
      yarn admin
 
-Puis aller sur http://localhost:3000/admin
+Puis aller sur http://localhost:3000/admin/
 
-### Fichier de configuration
+## Configuration de netlify
 
-     - `static/admin/config.yml` Paramètres de netlify
-     - `static/admin/index.html` HTML de la page d'administration de netlify
+- `static/admin/config.yml` Paramètres de netlify
+- `static/admin/index.html` HTML de la page d'administration de netlify
 
-## Design
+# 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
 
-### Afficher toutes les `class` de tailwindcss
+Ressources :
+https://www.pixeltrue.com/free-packs/minimalistic-illustrations#preview
+
+## Afficher toutes les `class` de tailwindcss
 
      http://localhost:3000/_tailwind/
 
 Sur cette page, vous pouvez copier une class css en cliquant sur le nom, ou maj+click pour copier plusieurs class.
 
-### Icônes
+## Icônes
 
 https://fontawesome.com/icons?m=free
+https://www.figma.com/file/Gof5rulCCUMvwk3WDKlgVY/H%C3%A9ro-monnaie-libre.fr?node-id=30%3A0
 
-## Docs
+# Docs
 
 - @nuxt/content https://content.nuxtjs.org/fr et https://nuxtjs.org/docs/2.x/directory-structure/content/
 - @nuxt/svg https://github.com/nuxt-community/svg-module
@@ -77,12 +93,12 @@ https://mertjf.github.io/tailblocks/
 http://blocks.wickedtemplates.com/
 https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/download
 
-### Divers
+## Divers
 
 https://maizzle.com
 https://vuetensils.stegosource.com/introduction.html
 
-## Generate fake data
+# Generate fake data
 
 Modifier le fichier `test/generate-md-files.js` puis :
 
@@ -104,10 +120,23 @@ Then start our Nginx Docker container with this command:
 
     dk run --rm -d -v $(pwd)/dist:/usr/share/nginx/html -p 80:80 nginx:alpine
 
-Go to [](http://localhost/) !
+Go to http://localhost/ !
+
+You can change the port. In the command above, replace `80:80` by `4000:80` and go to http://localhost:4000/
 
-You can change the port. In the command above, replace `80:80` by `4000:80` and go to [](http://localhost:4000/)
+# Gitlab
 
-# CI Gitlab
+## Graphql
+
+Graphql Endpoint : https://git.duniter.org/api/graphql
+Graphql Explorer : https://git.duniter.org/-/graphql-explorer
+
+## About CI
 
 https://blog.logrocket.com/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu/
+
+# Discourse
+
+## API Docs
+
+https://docs.discourse.org/

TODO.md

@@ -7,3 +7,15 @@
 ## A corriger quand ce sera fixé
 - Remove postcss 7 when nuxt/tailwindcss will be updated (See [here](https://tailwindcss.nuxtjs.org/setup#tailwind-2))
 - Remove `resolutions` in package.json (See [here](https://github.com/nuxt/nuxt.js/issues/8639#issuecomment-767552372))
+
+# Détection browser
+https://github.com/ivodolenc/nuxt-bowser
+
+# Nuxt image
+https://github.com/bencodezen/nuxt-image-demo
+
+# Site map
+https://redfern.dev/articles/adding-a-sitemap-using-nuxt-content/
+
+# Gitlab
+https://github.com/jdalrymple/gitbeaker
\ No newline at end of file

assets/css/tailwind.css

@@ -5,7 +5,7 @@
 @import 'tailwindcss/utilities';
 
 /* helper for development only */
-.nuxt-content-container {
+.nuxt-content-container:hover {
   background: linear-gradient(90deg, transparent 90%, #ffff0030);
 }
 
@@ -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/404/ParticlesML.vue

+<template>
+  <Particles
+    id="tsparticles"
+    :options="$options.config"
+    class="h-screen absolute right-0 top-0 opacity-70 dark:opacity-50"
+  />
+</template>
+
+<script>
+import Vue from 'vue'
+import Particles from 'particles.vue'
+
+Vue.use(Particles)
+const links = {
+  color: {
+    value: '#ccc',
+  },
+  distance: 250,
+  enable: true,
+  frequency: 0.8,
+  opacity: 0.8,
+  width: 3,
+}
+
+export default {
+  config: {
+    pauseOnBlur: true,
+    pauseOnOutsideViewport: true,
+    detectRetina: true,
+    fpsLimit: 10,
+    background: {
+      color: {
+        value: 'transparent',
+      },
+    },
+    interactivity: {
+      detectsOn: 'canvas',
+      events: {
+        onDiv: {
+          enabled: true,
+          selectors: '#tsparticles-limit',
+          mode: 'repulse',
+          type: 'circle',
+        },
+        onClick: {
+          enable: true,
+          mode: 'push',
+        },
+        onHover: {
+          enable: true,
+          mode: 'grab',
+          parallax: {
+            enable: true,
+            force: 400,
+          },
+        },
+      },
+      modes: {
+        bubble: {
+          distance: 400,
+          duration: 2,
+          opacity: 1,
+          size: 40,
+        },
+        grab: {
+          distance: 400,
+        },
+        push: {
+          quantity: 2,
+        },
+        repulse: { distance: 200, duration: 0.4, speed: 0.1 },
+      },
+    },
+    particles: {
+      color: {
+        value: ['#5bc0eb', '#fde74c', '#9bc53d', '#e55934'],
+      },
+      move: {
+        enable: true,
+        direction: 'top-right',
+        random: true,
+        speed: 0.5,
+        outModes: 'out',
+      },
+      number: {
+        density: {
+          enable: false,
+        },
+        value: 100,
+      },
+      size: {
+        random: {
+          enable: true,
+          minimumValue: 20,
+        },
+        value: 40,
+        minimumValue: 20,
+        animation: {
+          enable: false,
+          speed: 4,
+          minimumValue: 10,
+        },
+      },
+      shape: {
+        type: Array(16).fill('circle').fill('image', 1, 16),
+        options: {
+          circle: {
+            particles: {
+              links,
+              size: {
+                value: 20,
+                minimumValue: 4,
+              },
+            },
+          },
+          image: [
+            ...Array(40).fill({
+              src: '/particles/g.svg',
+              particles: {
+                links,
+              },
+            }),
+            ...Array(3).fill({
+              src: '/particles/duniter.svg',
+              particles: {
+                links: {
+                  distance: 350,
+                  enable: true,
+                  frequency: 1,
+                  opacity: 1,
+                  width: 6,
+                },
+              },
+            }),
+            ...Array(1).fill({
+              src: '/particles/cesium.svg',
+              particles: {
+                links: {
+                  distance: 350,
+                  enable: true,
+                  frequency: 1,
+                  opacity: 1,
+                  width: 6,
+                },
+              },
+            }),
+            ...Array(1).fill({
+              src: '/particles/geconomicus1.png',
+              particles: {
+                links: {
+                  distance: 350,
+                  enable: true,
+                  frequency: 1,
+                  opacity: 1,
+                  width: 6,
+                },
+              },
+            }),
+            ...Array(1).fill({
+              src: '/particles/geconomicus2.png',
+              particles: {
+                links: {
+                  distance: 350,
+                  enable: true,
+                  frequency: 1,
+                  opacity: 1,
+                  width: 6,
+                },
+              },
+            }),
+            {
+              src: '/particles/bomb.svg',
+              width: 32,
+              height: 32,
+              particles: {
+                links: {
+                  enabled: false,
+                },
+              },
+            },
+            {
+              src: '/particles/nyan-cat.png',
+              width: 160,
+              height: 120,
+              particles: {
+                links: {
+                  color: {
+                    value: '#FF9900',
+                  },
+                  distance: 500,
+                  enable: true,
+                  frequency: 1,
+                  opacity: 0.8,
+                  width: 1,
+                },
+                size: {
+                  value: 120,
+                  minimumValue: 100,
+                },
+              },
+            },
+
+            ...[].concat(
+              ...Array(4).fill(
+                Array.from({ length: 8 }, (v, k) => ({
+                  src: `/particles/avatars/avatar${k}.svg`,
+                  particles: {
+                    links,
+                  },
+                }))
+              )
+            ),
+          ],
+        },
+      },
+    },
+  },
+  data() {
+    return {}
+  },
+  beforeMount() {
+    // this.$options.config.particles.links.distance = window.innerWidth / 6
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+#tsparticles {
+  width: 100vw;
+}
+</style>

components/404/Sky.vue

+<template>
+  <div id="sky" class="absolute inset-0 h-screen">
+    <div v-if="$colorMode.value !== 'dark'" id="clouds">
+      <div v-for="cloud in 5" :key="cloud" :class="'x' + cloud">
+        <div class="cloud" />
+      </div>
+    </div>
+
+    <div v-else>
+      <div class="stars absolute inset-0 h-screen z-0" />
+      <div class="twinkling absolute inset-0 h-screen z-1 opacity-75" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="postcss" scoped>
+#clouds {
+  padding: 20vh 0;
+}
+
+/* Day */
+
+@keyframes animateCloud {
+  0% {
+    margin-left: -1000px;
+  }
+  100% {
+    margin-left: 100%;
+  }
+}
+
+.x1 {
+  animation: animateCloud 70s linear infinite;
+  transform: scale(0.65);
+}
+
+.x2 {
+  animation: animateCloud 40s linear infinite;
+  transform: scale(0.3) rotateY(180deg);
+}
+
+.x3 {
+  animation: animateCloud 60s linear infinite;
+  transform: scale(0.5);
+  opacity: 0.7;
+}
+
+.x4 {
+  animation: animateCloud 36s linear infinite;
+  transform: scale(0.4);
+  opacity: 0.5;
+}
+
+.x5 {
+  animation: animateCloud 50s linear infinite;
+  transform: scale(0.55) rotateY(180deg);
+  opacity: 0.4;
+}
+
+.cloud {
+  background: #fff;
+  border-radius: 100px;
+
+  height: 100px;
+  position: relative;
+  width: 350px;
+}
+
+.cloud:after,
+.cloud:before {
+  background: #fff;
+  content: '';
+  position: absolute;
+  z-index: -1;
+}
+
+.cloud:after {
+  border-radius: 100px;
+
+  height: 100px;
+  left: 50px;
+  top: -50px;
+  width: 100px;
+}
+
+.cloud:before {
+  border-radius: 200px;
+
+  width: 180px;
+  height: 180px;
+  right: 50px;
+  top: -90px;
+}
+
+/* Night */
+
+@keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+@-webkit-keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+@-moz-keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+@-ms-keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+
+.stars {
+  background: black url(/particles/stars.png) repeat top center;
+}
+
+.twinkling {
+  background: transparent url(/particles/twinkling.png) repeat top center;
+  animation: move-twink-back 200s linear infinite;
+}
+</style>

components/app/AppA11y.vue

+<template>
+  <div class="flex items-center text-gray-400">
+    <div class="flex items-end">
+      <fa
+        icon="font"
+        class="text-xs hover:text-hover cursor-pointer"
+        @click="onChangeSize(documentFontSize - 0.1)"
+      />
+      <fa
+        icon="font"
+        class="text-sm px-1 hover:text-hover cursor-pointer"
+        @click="onChangeSize(1)"
+      />
+      <fa
+        icon="font"
+        class="text-base hover:text-hover cursor-pointer"
+        @click="onChangeSize(documentFontSize + 0.1)"
+      />
+    </div>
+
+    <div class="hover:text-hover mx-3 cursor-pointer" @click="onA11y">
+      <fa icon="wheelchair" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      documentFontSize: 1,
+    }
+  },
+  methods: {
+    onChangeSize(size) {
+      this.documentFontSize = size < 0.8 ? 0.8 : size > 1.2 ? 1.2 : size
+      document.documentElement.style.fontSize = this.documentFontSize + 'em'
+    },
+    onA11y() {
+      console.log('a11y')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

components/app/AppBreadcrumb.vue

@@ -21,7 +21,7 @@
           :class="
             index !== items.length - 1
               ? 'text-gray-400'
-              : 'text-gray-600 font-extralight select-all'
+              : 'text-gray-500 font-light select-all'
           "
         >
           {{ item.title }}

components/app/AppDarkMode.vue → 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 text-gray-500">
+    <fa :icon="['far', 'clock']" class="text-xl mr-2" />
+
+    <div>
+      <span>{{ readingTimeToStr }}</span>
+      <span
+        class="text-sm text-gray-400 dark:text-gray-600 pl-1 hidden xl:inline"
+      >
+        {{ `(${readingTime.words} mots)` }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    readingTime: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    readingTimeToStr() {
+      const minutes = this.readingTime.minutes
+      if (minutes > 1) {
+        return (
+          'Environ ' +
+          Math.round(minutes) +
+          ' minute' +
+          (Math.round(minutes) > 1 ? 's' : '')
+        )
+      }
+
+      return "Moins d'une minute"
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

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

 <template>
-  <div>
+  <div class="relative">
     <Regions id="regionSVG" ref="regionSVG" class="text-gray-500" />
     <span
       v-show="hovered"
       id="tooltip-mini-map"
-      class="bg-white fixed pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 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>
@@ -207,8 +217,8 @@ export default {
     const tooltip = this.$el.querySelector('#tooltip-mini-map')
 
     this.$refs.regionSVG.addEventListener('mousemove', (evt) => {
-      tooltip.style.left = evt.clientX + 15 + 'px'
-      tooltip.style.top = evt.clientY - 20 + 'px'
+      tooltip.style.left = evt.offsetX + 15 + 'px'
+      tooltip.style.top = evt.offsetY - 20 + 'px'
     })
 
     regionsPath.forEach((region) => {
@@ -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'
         )
       })
@@ -279,8 +289,9 @@ Allemagne: '#3AB54A',
 
 <style lang="postcss" scoped>
 #regionSVG >>> path {
-  opacity: 0.6;
-  transition: opacity ease 150ms;
+  opacity: 0.7;
+  /* // removed cause glitch effect
+   transition: opacity ease 150ms; */
   cursor: pointer;
 }
 #regionSVG >>> path:hover {

components/app/TInputIcon.vue

@@ -8,7 +8,10 @@
       v-bind="$attrs"
       v-on="$listeners"
     />
-    <div class="absolute flex items-center ml-3 bottom-0 top-0">
+    <div
+      class="absolute flex items-center bottom-0 top-0 ml-4"
+      :class="iconWrapperClass"
+    >
       <fa slot="icon" :icon="icon" :class="iconClass" />
     </div>
   </div>
@@ -26,6 +29,10 @@ export default {
       type: String,
       default: null,
     },
+    iconWrapperClass: {
+      type: String,
+      default: null,
+    },
     iconClass: {
       type: String,
       default: null,
@@ -34,13 +41,18 @@ export default {
       type: String,
       default: null,
     },
-    focus: {
+    hasFocus: {
       type: Boolean,
       default: false,
     },
   },
   mounted() {
-    if (this.focus) this.$refs.inputIcon.$el.focus()
+    if (this.hasFocus) this.focus()
+  },
+  methods: {
+    focus() {
+      this.$refs.inputIcon.$el.focus()
+    },
   },
 }
 </script>

components/blog/BlogMeta.vue

 <template>
-  <div class="px-4 pt-3 pb-4 border-t border-gray-300">
+  <div class="pb-4 mb-4 border-b border-gray-300">
     <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">
       AUTEUR
     </div>

components/blog/BlogNextPrev.vue

@@ -12,7 +12,7 @@
       :to="next.path"
       class="group next-blog flex-1 py-8 text-right"
     >
-      <span class="group-hover:text-hover">
+      <span v-prevent-last-char-break class="group-hover:text-hover">
         {{ next.title }}
       </span>
       <fa icon="chevron-right" class="text-gray-300 ml-3 transition" />

components/global/Alert.vue

@@ -45,13 +45,12 @@ export default {
   @apply m-0 !important;
 }
 .alert a {
-  @apply text-gray-700 !important;
-}
-.dark-mode .alert a {
-  @apply text-gray-300 !important;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert strong {
-  @apply text-current;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert-content pre code {
   background-color: inherit !important;
@@ -69,13 +68,13 @@ export default {
 .alert-info .alert-content {
   @apply text-blue-700;
 }
-.dark-mode .alert-info {
+.dark .alert-info {
   @apply bg-blue-900 border-blue-700;
 }
-.dark-mode .alert-info code {
+.dark .alert-info code {
   @apply bg-blue-800;
 }
-.dark-mode .alert-info .alert-content {
+.dark .alert-info .alert-content {
   @apply text-blue-300;
 }
 /* Success */
@@ -91,13 +90,13 @@ export default {
 .alert-success .alert-content {
   @apply text-green-700;
 }
-.dark-mode .alert-success {
+.dark .alert-success {
   @apply bg-green-900 border-green-700;
 }
-.dark-mode .alert-success code {
+.dark .alert-success code {
   @apply bg-green-800;
 }
-.dark-mode .alert-success .alert-content {
+.dark .alert-success .alert-content {
   @apply text-green-300;
 }
 /* Warning */
@@ -113,13 +112,13 @@ export default {
 .alert-warning .alert-content {
   @apply text-yellow-700;
 }
-.dark-mode .alert-warning {
-  @apply bg-yellow-900 border-yellow-700;
+.dark .alert-warning {
+  @apply bg-yellow-800 border-yellow-600;
 }
-.dark-mode .alert-warning code {
+.dark .alert-warning code {
   @apply bg-yellow-800;
 }
-.dark-mode .alert-warning .alert-content {
+.dark .alert-warning .alert-content {
   @apply text-yellow-300;
 }
 /* Danger */
@@ -135,13 +134,13 @@ export default {
 .alert-danger .alert-content {
   @apply text-red-700;
 }
-.dark-mode .alert-danger {
+.dark .alert-danger {
   @apply bg-red-900 border-red-700;
 }
-.dark-mode .alert-danger code {
+.dark .alert-danger code {
   @apply bg-red-800;
 }
-.dark-mode .alert-danger .alert-content {
+.dark .alert-danger .alert-content {
   @apply text-red-300;
 }
 </style>

components/global/Box.vue

+<template>
+  <component
+    :is="to ? 'nuxt-link' : 'div'"
+    :to="to"
+    class="block rounded p-4"
+    :class="computedClass"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'Box',
+  props: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    color: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    computedClass() {
+      let classes = ''
+      if (this.color) {
+        classes += `bg-${this.color}-100 dark:bg-${this.color}-900`
+      } else {
+        classes = `border dark:border-gray-700`
+      }
+      if (this.to)
+        classes +=
+          ' transition transform hover:shadow-xl hover:-translate-y-0.5 is-box-with-link'
+      return classes
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+.is-box-with-link {
+  text-decoration: none !important;
+  color: currentColor !important;
+  font-weight: normal !important;
+}
+</style>

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

 <template>
   <span
     class="tooltip-box relative"
-    :class="page && 'cursor-pointer'"
-    v-on="page ? { click: onClick } : {}"
+    :class="document && 'cursor-pointer'"
+    v-on="document ? { click: onClick } : {}"
   >
-    <abbr :aria-label="page ? page.title : title" :title="page ? '' : null">
+    <abbr
+      :aria-label="document ? document.title : title"
+      :title="document ? '' : null"
+    >
       <slot />
     </abbr>
 
     <client-only>
       <div
-        v-if="page"
-        class="tooltip absolute bg-gray-200 invisible opacity-0 left-1/2 px-4 py-2 rounded-xl shadow-lg text-gray-600 text-sm z-50"
+        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
+        "
       >
         <span class="triangle absolute"></span>
 
-        <span v-if="title" class="block mb-2 uppercase">
-          {{ title }}
+        <span class="block font-bold text-lg uppercase leading-6 pb-2">
+          {{ document.title }} :
         </span>
 
-        <span>{{ page.description }}</span>
+        <span>{{ document.description }}</span>
 
-        <span class="block font-extralight mt-2 text-xs">
+        <span
+          class="
+            block
+            font-light
+            mt-3
+            text-xs text-purple-800
+            dark:text-purple-500
+          "
+        >
           {{ $t('lexique.tooltipReadmore') }}
         </span>
       </div>
@@ -40,23 +66,24 @@ export default {
   },
   data() {
     return {
-      page: null,
+      document: null,
     }
   },
   async fetch() {
     if (this.computedTitle) {
-      try {
-        this.page = await this.$content(
-          'lexique',
-          this.computedTitle.toLowerCase()
-        )
-          .only(['title', 'description'])
-          .fetch()
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `lexique term '${this.computedTitle}' not found in /content/lexique/ from file ${this.$parent.fileUrl}`
-        )
+      const term = this.computedTitle.toLowerCase()
+      const results = await this.$content('lexique')
+        .where({
+          $or: [
+            { title: { $regex: [`^${term}$`, 'i'] } }, // case insensitive
+            { synonyms: { $contains: term } }, // search in synonyms
+          ],
+        })
+        .limit(1)
+        .fetch()
+
+      if (results.length) {
+        this.document = results[0]
       }
     }
   },
@@ -68,7 +95,7 @@ export default {
   },
   methods: {
     onClick() {
-      this.$router.push(`/lexique/${this.computedTitle.toLowerCase()}`)
+      this.$router.push(this.document.path)
     },
   },
 }
@@ -92,11 +119,26 @@ abbr {
   opacity: 1;
 }
 .triangle {
-  border-width: 0 6px 6px;
+  border-width: 0 10px 10px;
   border-color: transparent;
-  border-bottom-color: rgba(229, 231, 235, var(--tw-bg-opacity));
-  top: -6px;
+  border-bottom-color: #bfdbfe;
+  top: -10px;
   left: 50%;
   transform: translateX(-50%);
 }
+.triangle:before {
+  content: '';
+  position: absolute;
+  border-width: 0 10px 10px;
+  border-color: transparent;
+  border-bottom-color: #dbeafe;
+  top: 2px;
+  left: -10px;
+}
+.dark .triangle {
+  border-bottom-color: #1e40af;
+}
+.dark .triangle:before {
+  border-bottom-color: #1e3a8a;
+}
 </style>