components/navigation/Loader.vue

 <template>
-<transition name="fade">
-  <div class="loader overflow-hidden text-center position-absolute" v-if="isLoading">
-    <img src="~@/assets/img/loader.gif">
-    <div class="text-center font-weight-bold my-3">{{ $t('chargement') }}...</div>
-  </div>
-</transition>
+	<transition name="fade">
+		<div
+			class="loader overflow-hidden text-center position-absolute"
+			v-if="isLoading">
+			<img src="~@/assets/img/loader.gif" />
+			<div class="text-center font-weight-bold my-3">
+				{{ $t("chargement") }}...
+			</div>
+		</div>
+	</transition>
 </template>
 
 <script>
 export default {
-    props: {isLoading: Boolean}
+	props: { isLoading: Boolean }
 }
 </script>
 
 <style lang="scss">
 .loader {
-  z-index: 50;
-  left: 50%;
-  transform: translateX(-50%);
-  --color: #391855;
-  color: var(--text-primary-color);
+	z-index: 50;
+	left: 50%;
+	transform: translateX(-50%);
+	--color: #391855;
+	color: var(--txt-primary-color);
 }
-</style>
\ No newline at end of file
+</style>

components/navigation/menu/Group.vue

 <template>
-    <div class="mb-4">
-        <h2 class="small text-muted text-uppercase ml-4 mb-3 pb-3 border-bottom">{{ $t(menu.title) }}</h2>
-        <div class="nav navbar-nav list-group list-group-flush">
-            <NuxtLink class="list-group-item list-group-item-action p-0 pl-3" :to="localePath(item.path)" v-for="item in menu.items" :key="item.path">
-                <div class="position-relative py-3">{{ $t(item.title) }}</div>
-            </NuxtLink>
-        </div>
-    </div>
+	<div class="mb-4">
+		<h2 class="small text-muted text-uppercase ms-5 mb-0 pb-2">
+			{{ $t(menu.title) }}
+		</h2>
+		<div class="nav navbar-nav list-group list-group-flush">
+			<NuxtLink
+				class="list-group-item list-group-item-action p-0 ps-3 border-0"
+				:to="localePath(item.path)"
+				v-for="item in menu.items"
+				:key="item.path"
+				@click.native="toggleMenu()">
+				<div class="menu-item position-relative py-2">
+					<component
+						aria-hidden="true"
+						:is="'solid-' + item.icon + '-icon'"
+						class="icon" />&nbsp;{{ $t(item.title) }}
+				</div>
+			</NuxtLink>
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
-    props: {
-        menu: Object
-    }
+	props: {
+		menu: Object
+	},
+	methods: {
+		toggleMenu() {
+			if (window.innerWidth < 1200) {
+				this.$emit("toggleMenu")
+			}
+		}
+	}
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+h2 {
+	letter-spacing: 0.02rem;
+}
+</style>

components/navigation/menu/Sidebar.vue

 <template>
-    <aside class="menu shadow position-fixed">
-        <div class="nav_header pb-3 mb-5">
-            <nuxt-link :to="localePath('/')" class="d-flex">
-                <img src="@/assets/img/logo.png" alt="Accueil" class="logo">
-                <div><h1 class="h2">Wotwizard</h1><small class="text-muted">{{ $t('slogan') }}</small></div>
-            </nuxt-link>
-            <button type="button" class="close position-absolute d-xl-none" aria-label="Close" @click="toggleMenu">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <nav>
-            <NavigationMenuGroup v-for="menu in menus" :key="menu.title" :menu="menu"/>
-        </nav>
-        <div class="version position-absolute p-3 text-muted"><br>v0.01</div>
-    </aside>
+	<aside class="menu position-fixed d-flex flex-column border-end">
+		<div class="mb-4">
+			<nuxt-link
+				@click.native="
+					if (screenwidth < 1200) {
+						toggleMenu()
+					}
+				"
+				:to="localePath('/')"
+				class="logo d-flex px-3 pt-3">
+				<img :src="$icon(512)" alt="Accueil" />
+				<div>
+					<h1 class="h3">Wotwizard</h1>
+					<small class="text-muted">{{ $t("slogan") }}</small>
+				</div>
+			</nuxt-link>
+			<div class="p-3 border-bottom border-2 text-muted">
+				<ApolloList />
+				<div class="small mt-2">API graphQL v{{ version }}</div>
+				<div class="small" v-if="countMax">
+					{{ $t("bloc.title") }} n°<span class="font-weight-bold">{{
+						countMax.number
+					}}</span>
+					({{ $d(new Date(countMax.utc0 * 1000)) }} {{ $t("time.a") }}
+					{{ new Date(countMax.utc0 * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }})
+				</div>
+			</div>
+			<button
+				type="button"
+				class="btn-close position-absolute d-xl-none"
+				:aria-label="$t('aria.close')"
+				@click="toggleMenu"></button>
+		</div>
+		<nav class="py-2 rounded flex-grow-1">
+			<NavigationMenuGroup
+				v-for="menu in menus"
+				:key="menu.title"
+				:menu="menu"
+				@toggleMenu="toggleMenu" />
+		</nav>
+		<div class="py-3 text-center">
+			<button
+				class="btn btn-secondary btn-sm"
+				@click="
+					if (screenwidth < 1200) {
+						toggleMenu()
+					}
+					$router.push(localePath('a-propos'))
+				">
+				<solid-terminal-icon
+					style="width: 0.9rem"
+					aria-hidden="true" />&nbsp;v{{ version_ww }} |
+				{{ $t("apropos.title") }}
+			</button>
+		</div>
+	</aside>
 </template>
 
 <script>
+import pkg from "~/package.json"
+import { LAST_BLOCK } from "@/graphql/queries.js"
+import { VERSION } from "@/graphql/queries.js"
+
 export default {
-    props: {
-        menus: Array
-    },
-    methods: {
-        toggleMenu() {
-            this.$emit('toggleMenu')
-        }
-    }
+	data() {
+		return {
+			screenwidth: 0,
+			version_ww: pkg.version
+		}
+	},
+	props: {
+		menus: Array
+	},
+	methods: {
+		toggleMenu() {
+			this.$emit("toggleMenu")
+		},
+		onResize() {
+			this.$favourites.fixColumns()
+			this.screenwidth = window.innerWidth
+		}
+	},
+	apollo: {
+		$client() {
+			return this.getApolloClient
+		},
+		countMax: {
+			query: LAST_BLOCK
+		},
+		version: {
+			query: VERSION
+		}
+	},
+	mounted() {
+		this.screenwidth = window.innerWidth
+		this.$nextTick(function () {
+			this.onResize()
+		})
+		window.addEventListener("resize", this.onResize)
+	}
 }
 </script>
 
-<style lang="scss">
-.version {
-    bottom: 0;
-    right: 0;
+<style lang="scss" scoped>
+aside {
+	background: var(--bg-menu-color);
+}
+
+nav {
+	overflow-x: hidden;
+	overflow-y: auto;
+	scrollbar-width: thin;
 }
-</style>
\ No newline at end of file
+</style>

components/suivis/Tableau.vue

+<template>
+	<div class="container pt-5">
+		<div class="row suivis">
+			<div class="col">
+				<div v-if="members && members.length != 0">
+					<BtnSearch
+						@erase="search = ''"
+						v-model="search"
+						class="col-sm-7 col-md-6 col-lg-5 col-xl-4 mx-auto mb-4" />
+					<MemberFilter
+						:selectedStatus.sync="filterStatus"
+						:selectedCertifStatus.sync="filterCerts"
+						:type="type" />
+					<MemberList
+						defaultSort="date_membership"
+						:members="filteredMembers"
+						:id="type" />
+					<input
+						type="checkbox"
+						class="btn-check"
+						:id="'seeAll' + _uid"
+						:checked="displayAll"
+						@click="displayAll = !displayAll" />
+					<label class="btn mb-3 btn-outline-secondary" :for="'seeAll' + _uid">
+						<span v-if="!displayAll">{{ $t("suivis.display.all") }}</span>
+						<span v-else>{{ $t("suivis.display.out") }}</span>
+					</label>
+					<button
+						class="btn btn-danger d-block m-auto mb-3"
+						v-if="type == 'favoris'"
+						@click="deleteAllFavorites">
+						<solid-trash-icon class="icon" aria-hidden="true" />
+						{{ $t("suivis.supprimer_tous") }}
+					</button>
+				</div>
+				<div class="alert alert-info" v-if="members && members.length == 0">
+					{{ $t("suivis.none") }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			search: "",
+			filterStatus: [],
+			filterCerts: "",
+			displayAll: false,
+			nbItems: 0
+		}
+	},
+	props: {
+		type: {
+			type: String,
+			default: ""
+		},
+		members: {
+			type: Array,
+			required: true
+		}
+	},
+	computed: {
+		filteredMembers() {
+			return this.members.filter(
+				(el) =>
+					(this.displayAll ||
+						!(
+							el.status == "MEMBER" &&
+							this.$options.filters.dateStatus(el.certsLimit) == "success"
+						)) &&
+					el.uid.toLowerCase().includes(this.search.toLowerCase()) &&
+					this.filterStatus.includes(el.status) &&
+					el.expired == (this.filterCerts == "outdated")
+			)
+		}
+	},
+	methods: {
+		deleteAllFavorites() {
+			if (window.confirm(this.$t("suivis.confirm"))) {
+				this.$favourites.list = []
+				localStorage.removeItem("favourites")
+			}
+		}
+	},
+	mounted() {
+		this.$emit("update:nbItems", this.filteredMembers.length)
+	},
+	watch: {
+		filteredMembers(n, o) {
+			this.$emit("update:nbItems", n.length)
+		},
+		filterCerts(n, o) {
+			this.displayAll = n == "outdated"
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.suivis .table-responsive tbody {
+	max-height: 43.5vh;
+}
+</style>

endpoints.json

+{
+    "AxiomTeam": "https://gql.wotwizard.axiom-team.fr/",
+    "trentesaux": "https://gql.wotwizard.trentesaux.fr/",
+    "Pini": "https://wotwizard.pini.fr/"
+}

graphql/cache.js

-import { InMemoryCache, IntrospectionFragmentMatcher, defaultDataIdFromObject } from 'apollo-cache-inmemory'
-import introspectionQueryResultData from './fragmentTypes.json';
+import {
+	InMemoryCache,
+	IntrospectionFragmentMatcher,
+	defaultDataIdFromObject
+} from "apollo-cache-inmemory"
+import introspectionQueryResultData from "./fragmentTypes.json"
 
 const fragmentMatcher = new IntrospectionFragmentMatcher({
-    introspectionQueryResultData
-  })
+	introspectionQueryResultData
+})
 
-  // Apparemment il faut utiliser la syntaxe Apollo v2
+// Apparemment il faut utiliser la syntaxe Apollo v2
 export const cache = new InMemoryCache({
-    addTypename: false,
-    fragmentMatcher,
-    dataIdFromObject: object => {
-        switch (object.__typename) {
-        case 'Identity': return object.hash
-        case 'Event': return object.block.number
-        case 'EventId': return `${object.member.hash}:${object.inOut}`
-        case 'Forecast': return `${object.member.hash}:${object.date}:${object.after}:${object.proba}`
-        default: return defaultDataIdFromObject(object); // fall back to default handling
-        }
-    }
-})
\ No newline at end of file
+	addTypename: false,
+	fragmentMatcher,
+	dataIdFromObject: (object) => {
+		switch (object.__typename) {
+			case "Identity":
+				return object.hash
+			case "Event":
+				return object.block.number
+			case "EventId":
+				return `${object.member.hash}:${object.inOut}`
+			case "Forecast":
+				return `${object.member.hash}:${object.date}:${object.after}:${object.proba}`
+			case "GroupId":
+				return `${object.id.hash}`
+			case "CertHist":
+				return `${object.id.uid}:${object.hist[0].block.number}`
+			case "CertEvent":
+				return `${object.in}:${object.block.number}`
+			case "Block":
+				return `${object.number}`
+			default:
+				return defaultDataIdFromObject(object) // fall back to default handling
+		}
+	}
+})

graphql/clients/coindufeu.js

-import { HttpLink } from 'apollo-link-http'
-import { setContext } from 'apollo-link-context'
-import { from } from 'apollo-link'
-
-import {ENDPOINT1} from './endpoints'
-import {cache} from '../cache'
-
-export default ctx => {
-  const ssrMiddleware = setContext((_, { headers }) => {
-    if (process.client) return headers
-    return {
-      headers
-    }
-  })
-
-  const httpLink = new HttpLink({
-    uri: ENDPOINT1
-  })
-
-  const link = from([ssrMiddleware, httpLink])
-
-  return {
-    link,
-    cache,
-    // https://github.com/nuxt-community/apollo-module/issues/306#issuecomment-607225431
-    defaultHttpLink: false
-  }
-}
\ No newline at end of file

graphql/clients/endpoints.js

-module.exports = {
-  ENDPOINT1 : 'https://wwgql.coinduf.eu',
-  ENDPOINT2 : 'https://myserver.com'
-}
\ No newline at end of file

graphql/clients/otherclient.js

-import { HttpLink } from 'apollo-link-http'
-import { setContext } from 'apollo-link-context'
-import { from } from 'apollo-link'
-
-import {ENDPOINT2} from './endpoints'
-import {cache} from '../cache'
-
-export default ctx => {
-  const ssrMiddleware = setContext((_, { headers }) => {
-    if (process.client) return headers
-    return {
-      headers
-    }
-  })
-
-  const httpLink = new HttpLink({
-    uri: ENDPOINT2
-  })
-
-  const link = from([ssrMiddleware, httpLink])
-
-  return {
-    link,
-    cache,
-    // https://github.com/nuxt-community/apollo-module/issues/306#issuecomment-607225431
-    defaultHttpLink: false
-  }
-}
\ No newline at end of file

graphql/endpoints/AxiomTeam.js

+
+const { HttpLink } = require("apollo-link-http");
+const { setContext } = require("apollo-link-context");
+const { from } = require("apollo-link");
+const { cache } = require("../cache");
+
+const ssrMiddleware = setContext((_, { headers }) => {
+    if (process.client) return headers;
+    return { headers };
+});
+
+const httpLink = new HttpLink({ uri: "https://gql.wotwizard.axiom-team.fr/" });
+const link = from([ssrMiddleware, httpLink]);
+
+module.exports = () => ({
+    link,
+    cache,
+    defaultHttpLink: false
+});

graphql/endpoints/Pini.js

+
+const { HttpLink } = require("apollo-link-http");
+const { setContext } = require("apollo-link-context");
+const { from } = require("apollo-link");
+const { cache } = require("../cache");
+
+const ssrMiddleware = setContext((_, { headers }) => {
+    if (process.client) return headers;
+    return { headers };
+});
+
+const httpLink = new HttpLink({ uri: "https://wotwizard.pini.fr/" });
+const link = from([ssrMiddleware, httpLink]);
+
+module.exports = () => ({
+    link,
+    cache,
+    defaultHttpLink: false
+});

graphql/endpoints/trentesaux.js

+
+const { HttpLink } = require("apollo-link-http");
+const { setContext } = require("apollo-link-context");
+const { from } = require("apollo-link");
+const { cache } = require("../cache");
+
+const ssrMiddleware = setContext((_, { headers }) => {
+    if (process.client) return headers;
+    return { headers };
+});
+
+const httpLink = new HttpLink({ uri: "https://gql.wotwizard.trentesaux.fr/" });
+const link = from([ssrMiddleware, httpLink]);
+
+module.exports = () => ({
+    link,
+    cache,
+    defaultHttpLink: false
+});

graphql/generateEndpoints.js

+const fs = require('fs');
+const path = require('path');
+const endpoints = require('../endpoints.json');
+
+const endpointDir = path.join(__dirname, 'endpoints');
+
+const recreateDirectory = (directory) => {
+  if (fs.existsSync(directory)) {
+    fs.rmSync(directory, { recursive: true, force: true });
+  }
+
+  fs.mkdirSync(directory, { recursive: true });
+};
+
+recreateDirectory(endpointDir);
+
+const configTemplate = (uri) => `
+const { HttpLink } = require("apollo-link-http");
+const { setContext } = require("apollo-link-context");
+const { from } = require("apollo-link");
+const { cache } = require("../cache");
+
+const ssrMiddleware = setContext((_, { headers }) => {
+    if (process.client) return headers;
+    return { headers };
+});
+
+const httpLink = new HttpLink({ uri: "${uri}" });
+const link = from([ssrMiddleware, httpLink]);
+
+module.exports = () => ({
+    link,
+    cache,
+    defaultHttpLink: false
+});
+`;
+
+Object.keys(endpoints).forEach(key => {
+  const filePath = path.join(endpointDir, `${key}.js`);
+  const fileContent = configTemplate(endpoints[key]);
+  fs.writeFileSync(filePath, fileContent);
+});

i18n/index.js

-import en from './locales/en.json'
-import fr from './locales/fr.json'
-import es from './locales/es.json'
-import {dateTimeFormats} from './locales/dateTimeFormats'
+import { dateTimeFormats } from "./locales/dateTimeFormats"
 
 export default {
-  fallbackLocale: 'en',
-  dateTimeFormats,
-  messages: { en, fr, es }
-}
\ No newline at end of file
+	dateTimeFormats
+}