[FEATURE] Ajouter une page d'accueil proposant à l'utilisateur de cho…

…isir sa langue (PIX-6433).
1024pix · Dec 29, 2022 · 0042f79 · 0042f79
2 parents 733b7e4 + d47c03f
commit 0042f79
Show file tree

Hide file tree

Showing 28 changed files with 218 additions and 36 deletions.
diff --git a/assets/scss/globals/_colors.scss b/assets/scss/globals/_colors.scss
@@ -20,7 +20,7 @@ $pure-orange: #f45c00;
 
 // gradients
 $blue-gradient: linear-gradient(135deg, #12a3ff 0%, #3d68ff 100%);
-$default-gradient: linear-gradient(135deg, #388aff 0%, #985fff 100%);
+$default-gradient: linear-gradient(91.59deg, #3d68ff 0%, #8845ff 100%);
 $green-gradient: linear-gradient(0deg, #52d987 0%, #1a8c89 100%);
 $pix-orange-gradient: linear-gradient(180deg, #f24645 0%, #f1a141 100%);
 $pix-orga-gradient: linear-gradient(134deg, #00ddff 0%, #0095c0 100%);
@@ -76,3 +76,5 @@ $box-shadow-competence-cards: 0 3px 4px 0 rgba(12, 22, 58, 0.1),
   0 1px 3px 0 rgba($grey-200, 0.1);
 $box-shadow-competence-cards-hover: 0 7px 14px 0 rgba(12, 22, 58, 0.2),
   0 3px 6px 0 rgba($grey-200, 0.2);
+
+$shadow-xs: 0 4px 8px rgba(7, 20, 46, 0.08);
diff --git a/components/BurgerMenuNavItems.vue b/components/BurgerMenuNavItems.vue
@@ -10,9 +10,9 @@
           : 'burger-menu-nav-items__link--regular-link'
       "
     >
-      <pix-link :field="item.link">
+      <pix-prismic-link :field="item.link">
         {{ $prismic.asText(item.name) }}
-      </pix-link>
+      </pix-prismic-link>
     </li>
   </ul>
 </template>

diff --git a/components/CtaButton.vue b/components/CtaButton.vue
@@ -1,7 +1,7 @@
 <template>
-  <pix-link :field="link" class="cta-button">
+  <pix-prismic-link :field="link" class="cta-button">
     {{ name }}
-  </pix-link>
+  </pix-prismic-link>
 </template>
 
 <script>

diff --git a/components/FooterSliceZone.vue b/components/FooterSliceZone.vue
@@ -22,7 +22,7 @@
           class="footer-left__social-media"
         >
           <li>
-            <pix-link
+            <pix-prismic-link
               v-for="(socialMedia, socialMediaIndex) in slice.items"
               :key="`socialMedia-${socialMediaIndex}`"
               :field="socialMedia.socialmedia_url"
@@ -33,7 +33,7 @@
                 :has-fixed-dimensions="true"
                 :max-height="30"
               />
-            </pix-link>
+            </pix-prismic-link>
           </li>
         </ul>
       </div>

diff --git a/components/LocaleLink.vue b/components/LocaleLink.vue
@@ -0,0 +1,60 @@
+<template>
+  <a class="locale-link" :href="indexForGivenLocale()">
+    <img :src="'/images/' + locale.icon" alt="" />
+    <span class="locale-link__text">{{ locale.name }}</span>
+  </a>
+</template>
+
+<script>
+import { getAbsoluteUrlIfSwitchWebsite } from '~/services/get-absolute-url-if-switch-website'
+
+export default {
+  name: 'LocaleLink',
+  props: {
+    locale: {
+      type: Object,
+      default: null,
+    },
+  },
+  methods: {
+    indexForGivenLocale() {
+      return getAbsoluteUrlIfSwitchWebsite({
+        relativeTarget:
+          this.locale.code === 'fr-fr' ? '/' : `/${this.locale.code}`,
+        targetDomain: this.locale.domain,
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.locale-link {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.8);
+  transition: background-color ease-out 320ms;
+  box-shadow: $shadow-xs;
+  border-radius: 16px;
+  font-family: $font-roboto;
+  font-weight: $font-medium;
+  font-size: 18px;
+  color: $grey-90;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  &:focus,
+  &:active {
+    transition: none;
+    background: rgba(193, 199, 208, 0.6);
+  }
+
+  &__text {
+    overflow-wrap: break-word;
+  }
+}
+</style>
diff --git a/components/MainNav.vue b/components/MainNav.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="navigation">
-    <pix-link
+    <pix-prismic-link
       v-for="(item, index) in mainNavItems"
       :key="item.id"
       :field="item.primary.link"
@@ -15,7 +15,7 @@
       ]"
     >
       {{ $prismic.asText(item.primary.title) }}
-    </pix-link>
+    </pix-prismic-link>
   </div>
 </template>
 

diff --git a/components/NavigationDropdown.vue b/components/NavigationDropdown.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="btn-group navigation-dropdown">
     <ul class="dropdown-menu">
-      <pix-link
+      <pix-prismic-link
         v-for="option in options"
         :key="option.key"
         :field="option.link"
       >
         <li>
           {{ $prismic.asText(option.name) }}
         </li>
-      </pix-link>
+      </pix-prismic-link>
     </ul>
   </div>
 </template>

diff --git a/components/PixLink.vue → components/PixPrismicLink.vue b/components/PixLink.vue → components/PixPrismicLink.vue
@@ -9,7 +9,7 @@ import prismicDOM from 'prismic-dom'
 import { getCurrentSiteHost } from '~/services/get-current-site-host'
 
 export default {
-  name: 'PixLink',
+  name: 'PixPrismicLink',
   props: {
     field: {
       required: true,

diff --git a/components/slices/ActionsZone.vue b/components/slices/ActionsZone.vue
@@ -3,7 +3,7 @@
     <language-switcher type="with-dropdown" />
     <ul>
       <li v-for="(menuItem, index) in slice.items" :key="`item-${index}`">
-        <pix-link
+        <pix-prismic-link
           :field="menuItem.link"
           class="actions-zone__item"
           :class="{
@@ -21,7 +21,7 @@
             height="22"
           />
           {{ $prismic.asText(menuItem.name) }}
-        </pix-link>
+        </pix-prismic-link>
       </li>
     </ul>
   </nav>

diff --git a/components/slices/Article.vue b/components/slices/Article.vue
@@ -37,13 +37,13 @@
             :link="content.article_link_url"
             :name="content.article_link_name"
           />
-          <pix-link
+          <pix-prismic-link
             v-else-if="content.article_link_type === 'link-to'"
             :field="content.article_link_url"
             class="article-content__link-to"
           >
             <fa icon="arrow-right" /> {{ content.article_link_name }}
-          </pix-link>
+          </pix-prismic-link>
         </div>
       </div>
       <pix-image

diff --git a/components/slices/LatestNews.vue b/components/slices/LatestNews.vue
@@ -18,13 +18,13 @@
         :uid="item.uid"
       />
     </ul>
-    <pix-link
+    <pix-prismic-link
       class="latest-news__link-to"
       :field="slice.primary.latest_news_redirection_link_url"
     >
       <fa icon="arrow-right" />
       {{ slice.primary.latest_news_redirection_link_text }}
-    </pix-link>
+    </pix-prismic-link>
   </section>
 </template>
 

diff --git a/components/slices/LogosZone.vue b/components/slices/LogosZone.vue
@@ -5,13 +5,13 @@
       :key="`logo-${index}`"
       class="logos-zone__content"
     >
-      <pix-link v-if="hasLink(logo)" :field="logo.url">
+      <pix-prismic-link v-if="hasLink(logo)" :field="logo.url">
         <pix-image
           :field="logo.image"
           :has-fixed-dimensions="true"
           :max-height="maxHeight"
         />
-      </pix-link>
+      </pix-prismic-link>
       <pix-image
         v-else
         :field="logo.image"

diff --git a/components/slices/NavigationGroup.vue b/components/slices/NavigationGroup.vue
@@ -11,9 +11,9 @@
           :key="`link-${index}`"
           class="navigation-group-link"
         >
-          <pix-link :field="link.link_url">
+          <pix-prismic-link :field="link.link_url">
             <prismic-rich-text :field="link.link_name" />
-          </pix-link>
+          </pix-prismic-link>
         </li>
       </ul>
     </div>

diff --git a/components/slices/NavigationZone.vue b/components/slices/NavigationZone.vue
@@ -30,9 +30,13 @@
             >
             </navigation-dropdown>
           </div>
-          <pix-link v-else :field="menuItem.link" class="navigation-zone__item">
+          <pix-prismic-link
+            v-else
+            :field="menuItem.link"
+            class="navigation-zone__item"
+          >
             {{ $prismic.asText(menuItem.name) }}
-          </pix-link>
+          </pix-prismic-link>
         </template>
       </li>
     </ul>

diff --git a/components/slices/PageBanner.vue b/components/slices/PageBanner.vue
@@ -15,14 +15,14 @@
         <slot></slot>
         <div class="banner__button-group">
           <div v-for="(link, index) in links" :key="`item-${index}`">
-            <pix-link
+            <pix-prismic-link
               v-if="!isVideo(link)"
               :field="link.banner_link_url"
               class="button"
               :class="videoClass(link)"
             >
               {{ link.banner_link_text }}
-            </pix-link>
+            </pix-prismic-link>
             <template v-if="isVideo(link)">
               <button
                 class="button button-video"

diff --git a/components/slices/PageSection.vue b/components/slices/PageSection.vue
@@ -16,9 +16,13 @@
           <prismic-rich-text :field="item.paragraph" />
         </div>
       </div>
-      <pix-link v-if="hasButton" :field="buttonLink" :class="buttonClass">
+      <pix-prismic-link
+        v-if="hasButton"
+        :field="buttonLink"
+        :class="buttonClass"
+      >
         {{ $prismic.asText(buttonText) }}
-      </pix-link>
+      </pix-prismic-link>
     </div>
   </section>
 </template>

diff --git a/config/language/pix-site.js b/config/language/pix-site.js
@@ -5,21 +5,29 @@ export const availableLocales = [
     code: 'fr',
     file: 'fr.js',
     domain: config.domain.international,
+    name: 'International Français',
+    icon: 'globe-europe.svg',
   },
   {
     code: 'en-gb',
     file: 'en-gb.js',
     domain: config.domain.international,
+    name: 'International English',
+    icon: 'globe-europe.svg',
   },
   {
     code: 'fr-be',
     file: 'fr-be.js',
     domain: config.domain.international,
+    name: 'FWB',
+    icon: 'flag-be.svg',
   },
   {
     code: 'fr-fr',
     file: 'fr-fr.js',
     domain: config.domain.french,
+    name: 'France',
+    icon: 'flag-fr.svg',
   },
 ]
 

diff --git a/layouts/home.vue b/layouts/home.vue
@@ -0,0 +1,29 @@
+<template>
+  <main class="home">
+    <nuxt />
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+}
+</script>
+
+<style lang="scss">
+.home {
+  width: 100%;
+  min-width: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 1rem 0;
+  background: url('/images/stars.svg') repeat, $default-gradient;
+
+  @include device-is('large-mobile') {
+    padding: 0;
+  }
+}
+</style>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -18,6 +18,8 @@ const i18nConfigurationForInternationalDomain = {
   vueI18n: {
     fallbackLocale: 'fr',
   },
+  rootRedirect:
+    config.isPixSite && !config.isFrenchDomain ? 'locale-choice' : undefined,
 }
 
 const nuxtConfig = {
@@ -35,7 +37,7 @@ const nuxtConfig = {
     port: process.env.PORT || 5000,
   },
   env: {
-    // Nuxt env are required to be usable client-side (e.g.: PixLink)
+    // Nuxt env are required to be usable client-side (e.g.: PixPrismicLink)
     SITE: process.env.SITE,
     DOMAIN_ORG: process.env.DOMAIN_ORG,
     DOMAIN_FR: process.env.DOMAIN_FR,