[FEATURE] Génération statique de pix-site

.buildpacks

@@ -0,0 +1,3 @@
+https://github.com/Scalingo/nodejs-buildpack
+https://github.com/Scalingo/nginx-buildpack
+

.gitignore

@@ -6,6 +6,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+nginx.conf
 
 # Runtime data
 pids

README.md

@@ -147,3 +147,27 @@ Exemples :
 Le contenu d'une slice est passé *en entier* et tel-quel au composant Vue équivalent via une propriété exposée `:slice`.
 
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+
+### NGINX
+
+Pour tester la configuration NGINX des sites statiques en local, il suffit de faire:
+
+```
+npm run build:site
+
+PORT=80 erb servers.conf.erb > nginx.conf && docker-compose up
+```
+
+Aller sur `http://localhost` ou `http://localhost.org`
+
+Pour que localhost.org soit fonctionnel, il faut éditer votre fichier `/etc/hosts` en y ajoutant la ligne suivante :
+```
+127.0.0.1	localhost.org
+```
+
+Des tests unitaires existent dans `tests.sh`.
+Pour les lancer il faut exécuter la commande: 
+
+```
+bash tests.sh
+```

components/LanguageDropdown.vue

@@ -1,12 +1,5 @@
 <template>
-  <div
-    v-if="
-      nonFrenchFranceLocales.length > 1 &&
-      $config.languageSwitchEnabled &&
-      domainAllowsLanguageSwitch
-    "
-    class="language-dropdown"
-  >
+  <div class="language-dropdown">
     <dropdown-button
       :options="options"
       :selected="currentLanguage"
@@ -49,9 +42,6 @@ export default {
         (locale) => locale.lang !== this.currentLocale
       )
     },
-    domainAllowsLanguageSwitch() {
-      return this.$store.state.host === this.$config.orgDomain
-    },
   },
   methods: {
     languageDidChange(selectedLocale) {

components/NavigationDropdown.vue

@@ -27,31 +27,6 @@ export default {
       default: null,
     },
   },
-  data() {
-    return {
-      eventListener: (event) => {
-        if (
-          event.target.getAttribute('dropdown-index') !== this.dropdownIndex
-        ) {
-          this.closeDropdown()
-        }
-      },
-    }
-  },
-  mounted() {
-    const page = document.getElementsByTagName('body')[0]
-    page.addEventListener('click', this.eventListener)
-  },
-  beforeDestroy() {
-    const page = document.getElementsByTagName('body')[0]
-    page.removeEventListener('click', this.eventListener)
-  },
-
-  methods: {
-    closeDropdown() {
-      this.$emit('closeNavigationDropdown', this.dropdownIndex)
-    },
-  },
 }
 </script>
 

components/OrganizationNav.vue

@@ -14,7 +14,11 @@ export default {
   },
   computed: {
     showLanguageDropdown() {
-      return this.$config.languageSwitchEnabled
+      return (
+        process.env.isPixSite &&
+        this.$config.languageSwitchEnabled &&
+        this.$i18n.locale !== 'fr-fr'
+      )
     },
   },
 }

components/PixLink.vue

@@ -26,14 +26,14 @@ export default {
 
       if (this.field.link_type === 'Document') {
         template = `
-          <router-link to="${this.localePath(url)}">
+          <router-link to="${this.localePath(url)}" exact>
             <slot/>
           </router-link>
         `
       } else if (relativeLinkPrefix) {
-        const relativeUrl = url.replace(relativeLinkPrefix, '')
+        const relativeUrl = url.replace(relativeLinkPrefix, '/')
         template = `
-          <router-link to="${this.localePath(relativeUrl)}">
+          <router-link to="${this.localePath(relativeUrl)}" exact>
             <slot/>
           </router-link>
         `
@@ -57,9 +57,9 @@ function getRelativeLinkPrefix(url) {
   }
   let defaultPrefixes
   if (process.env.isPixPro) {
-    defaultPrefixes = 'https://pro.pix.fr'
+    defaultPrefixes = 'https://pro.pix.fr/'
   } else {
-    defaultPrefixes = 'https://pix.org,https://pix.fr'
+    defaultPrefixes = 'https://pix.org/,https://pix.fr/'
   }
   const relativeLinkPrefixes = (
     process.env.RELATIVE_LINK_PREFIXES || defaultPrefixes

components/slices/NavigationZone.vue

@@ -16,15 +16,14 @@
           @click.stop.prevent
         >
           {{ menuItem.name }}
-          <fa v-if="showDropdown(`${index}`)" icon="angle-up" />
+          <fa v-if="isOpenDropdown(`${index}`)" icon="angle-up" />
           <fa v-else icon="angle-down" />
         </button>
         <navigation-dropdown
-          v-if="showDropdown(`${index}`)"
+          v-show="isOpenDropdown(`${index}`)"
           type="button"
           :options="menuItem.subNavigationLinks"
           :dropdown-index="`${index}`"
-          @closeNavigationDropdown="toggleDropdown(`${index}`)"
         >
         </navigation-dropdown>
       </div>
@@ -33,7 +32,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import NavigationDropdown from '@/components/NavigationDropdown'
 
 export default {
@@ -49,7 +47,7 @@ export default {
   },
   data() {
     return {
-      dropdownMap: {},
+      openDropdownIndex: undefined,
     }
   },
   computed: {
@@ -66,15 +64,24 @@ export default {
       return navigation.links
     },
   },
+  mounted() {
+    const page = document.getElementsByTagName('body')[0]
+    page.addEventListener('click', this.toggleDropdown)
+  },
+  beforeDestroy() {
+    const page = document.getElementsByTagName('body')[0]
+    page.removeEventListener('click', this.toggleDropdown)
+  },
   methods: {
-    showDropdown(dropdownIndex) {
-      if (!this.dropdownMap[dropdownIndex]) {
-        Vue.set(this.dropdownMap, dropdownIndex, false)
-      }
-      return this.dropdownMap[dropdownIndex]
+    isOpenDropdown(dropdownIndex) {
+      return this.openDropdownIndex === dropdownIndex
     },
     toggleDropdown(dropdownIndex) {
-      Vue.set(this.dropdownMap, dropdownIndex, !this.dropdownMap[dropdownIndex])
+      if (this.isOpenDropdown(dropdownIndex)) {
+        this.openDropdownIndex = undefined
+      } else {
+        this.openDropdownIndex = dropdownIndex
+      }
     },
   },
 }

components/slices/PageBanner.vue

@@ -105,7 +105,7 @@ export default {
       this.$modal.show('videoModal')
     },
     isVideo(link) {
-      return link.banner_link_url.url.includes('pix-videos/')
+      return link?.['banner_link_url']?.url?.includes('pix-videos/')
     },
     videoClass(link) {
       return this.isVideo(link)

components/slices/PageSection.vue

@@ -58,22 +58,22 @@ export default {
   },
   computed: {
     paragraphs() {
-      return this.slice.items
+      return this.slice?.items
     },
     title() {
-      return this.slice.primary.title
+      return this.slice?.primary?.title
     },
     image() {
-      return this.slice.primary.logo
+      return this.slice?.primary?.logo
     },
     description() {
-      return this.slice.primary.description
+      return this.slice?.primary?.description
     },
     buttonLink() {
-      return this.slice.primary.button_link
+      return this.slice?.primary?.['button_link']
     },
     buttonText() {
-      return this.slice.primary.button_title
+      return this.slice?.primary?.['button_title']
     },
     hasImage() {
       return this.image && this.image.url

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3'
+services:
+  nginx: 
+    image: nginx:latest
+    container_name: production_nginx
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+      - ./dist:/app/dist
+    ports:
+      - 80:80

middleware/current-page-path.js

@@ -0,0 +1,13 @@
+// Middleware computes og:url for meta tags (SEO)
+export default function (context) {
+  const { app, route } = context
+  const host = getHost(app.i18n.locale)
+  context.currentPagePath = `${host}${route.path}`
+}
+
+function getHost(locale) {
+  if (process.env.isPixSite) {
+    return locale === 'fr-fr' ? 'https://pix.fr' : 'https://pix.org'
+  }
+  return 'https://pro.pix.fr'
+}

nuxt.config.js

@@ -2,6 +2,7 @@ import { transports } from 'winston'
 
 export default {
   mode: 'universal',
+  target: 'static',
   publicRuntimeConfig: {
     languageSwitchEnabled: process.env.LANGUAGE_SWITCH_ENABLED || false,
     orgDomain: process.env.DOMAIN_ORG || 'pix.org',
@@ -15,7 +16,6 @@ export default {
   },
   dir: {
     pages: `pages/${process.env.SITE}`,
-    middleware: `middleware/${process.env.SITE}`,
   },
   /*
    ** Headers of the page
@@ -127,20 +127,28 @@ export default {
   axios: {},
   i18n: {
     defaultLocale: 'fr-fr',
-    locales: [
-      {
-        code: 'fr-fr',
-        file: 'fr-fr.js',
-      },
-      {
-        code: 'fr',
-        file: 'fr.js',
-      },
-      {
-        code: 'en-gb',
-        file: 'en-gb.js',
-      },
-    ],
+    locales:
+      process.env.SITE === 'pix-pro'
+        ? [
+            {
+              code: 'fr-fr',
+              file: 'fr-fr.js',
+            },
+          ]
+        : [
+            {
+              code: 'fr-fr',
+              file: 'fr-fr.js',
+            },
+            {
+              code: 'fr',
+              file: 'fr.js',
+            },
+            {
+              code: 'en-gb',
+              file: 'en-gb.js',
+            },
+          ],
     lazy: true,
     langDir: 'lang/',
     vueI18n: {

package.json

@@ -15,14 +15,12 @@
   },
   "scripts": {
     "clean": "rm -rf node_modules .nuxt",
-    "build": "nuxt build && npm run signal-github",
-    "start": "nuxt start",
+    "build": "nuxt build && nuxt export && npm run signal-github",
+    "start": "nuxt serve",
     "dev:site": "SITE=pix-site nuxt",
-    "build:site": "SITE=pix-site nuxt build",
-    "start:site": "SITE=pix-site nuxt start",
+    "build:site": "SITE=pix-site nuxt build && nuxt export",
     "dev:pro": "SITE=pix-pro nuxt",
-    "build:pro": "SITE=pix-pro nuxt build",
-    "start:pro": "SITE=pix-pro nuxt start",
+    "build:pro": "SITE=pix-pro nuxt build && nuxt export",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "test": "SITE=pix-site jest --no-coverage",
     "release": "npm run release:minor",

pages/pix-pro/employers.vue → pages/pix-pro/index.vue

@@ -128,13 +128,6 @@ import KeyNumbers from '~/components/slices/KeyNumbers'
 
 export default {
   name: 'Employers',
-  nuxtI18n: {
-    paths: {
-      fr: '/employeurs',
-      'fr-fr': '/employeurs',
-      'en-gb': '/employers',
-    },
-  },
   components: { HeroBanner, KeyNumbers, SectionColumnSlice, SectionSlice },
   async asyncData({ app, error, req, currentPagePath }) {
     try {