refactoring, add to remove hyphenation to make it work on firefox

i beleive that hyphen was messing up with markup

gridsome.server.js

@@ -6,8 +6,8 @@ module.exports = function (api) {
     store.addMetaData('sousTitre', 'Récits et échelles de la fabrique institutionnelle métropolitaine de rouen')
     store.addMetaData('auteurs', ['Jean Debrie','Xavier Desjardins'])
 
-    let data_chapters = await axios.get('https://popsu.strapi.figli.io/chapitres')
     // Ajout des chapitres
+    let data_chapters = await axios.get('https://popsu.strapi.figli.io/chapitres')
     const chapterContent = store.addContentType({
       typeName: 'chapitres',
     })
@@ -19,8 +19,9 @@ module.exports = function (api) {
         rubrique: item.rubrique,
       })
     }
-    let data_sections = await axios.get('https://popsu.strapi.figli.io/sections')
+
     // Ajout des sections
+    let data_sections = await axios.get('https://popsu.strapi.figli.io/sections')
     const sectionContent = store.addContentType({
       typeName: 'sections',
     })
@@ -31,8 +32,9 @@ module.exports = function (api) {
         contenu: item.contenu,
       })
     }
-    let data_fonds = await axios.get('https://popsu.strapi.figli.io/fonds')
+
     // Ajout des fonds
+    let data_fonds = await axios.get('https://popsu.strapi.figli.io/fonds')
     const fondContent = store.addContentType({
       typeName: 'fonds',
     })
@@ -42,8 +44,9 @@ module.exports = function (api) {
         url: item.image.url,
       })
     }
-    let data_credits = await axios.get('https://popsu.strapi.figli.io/credits')
+
     // Ajout des crédits
+    let data_credits = await axios.get('https://popsu.strapi.figli.io/credits')
     const creditContent = store.addContentType({
       typeName: 'credits',
     })

src/pages/Index.vue

@@ -1,24 +1,34 @@
 <template>
   <Layout>
     <!-- Titre, sous-titre -->
-    <div class="blank-page no-folio fill-green"></div>
+    <div class="blank-page no-folio fill-green" />
     <div class="v-center grow no-folio">
       <!-- <h1 class="pre-title center" v-html="$static.metaData.titreDuProjet" /> -->
       <!-- <h2 class="pre-sub-title center" v-html="$static.metaData.sousTitre" /> -->
     </div>
-    <div class="blank-page no-folio fill-motif-cross-left"></div>
+    <div class="blank-page no-folio fill-motif-cross-left" />
+
     <!-- Auteurs, titre, sous-titre -->
     <div class="column no-folio">
       <div class="fill-motif-cross-right layer-1">
 
       </div>
       <div class="column layer-2">
-        <div class="bold center" v-for="auteur in $static.metaData.auteurs">
+        <div
+          class="bold center"
+          v-for="auteur in $static.metaData.auteurs"
+        >
           {{auteur}}
         </div>
         <div class="v-center grow">
-          <h1 class="main-title center highlight-white" v-html="$static.metaData.titreDuProjet" />
+          <h1
-          <h2 class="main-pre-title center highlight-white" v-html="$static.metaData.sousTitre" />
+            class="main-title center highlight-white"
+            v-html="$static.metaData.titreDuProjet"
+          />
+          <h2
+            class="main-pre-title center highlight-white"
+            v-html="$static.metaData.sousTitre"
+          />
         </div>
         <div class="center">
           <img src="/logo_popsu.png" alt="" style="width:2cm;">
@@ -26,51 +36,95 @@
 
       </div>
     </div>
+
     <!-- Page de fond -->
-    <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'></div>
+    <div
+      class="column image-cover image-bleed"
+      v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'
+    />
+
     <!-- Sommaire -->
     <div class="column">
       <div class="section-title">
         Sommaire
       </div>
-    <div class="column justify-end table-of-content">
+      <div class="column justify-end table-of-content">
-    <span v-for="edge in $page.chapters.edges.slice().reverse()" :key="'content'+edge.node.id">
+        <span
-        <a :href="'#chapter'+edge.node.id">{{ edge.node.titre }}</a>
+          v-for="edge in $page.chapters.edges.slice().reverse()"
-    </span>
+          :key="'content'+edge.node.id"
+        >
+          <a :href="'#chapter'+edge.node.id">{{ edge.node.titre }}</a>
+        </span>
+      </div>
     </div>
-  </div>
+
-  <!-- Page blanche -->
+    <!-- Page blanche -->
-  <div class="blank-page no-folio"></div>
+    <div class="blank-page no-folio" />
-  <!-- Chapitres -->
+
-      <div class="hyphen" v-for="(edge,index) in $page.chapters.edges.slice().reverse()" :key="'chapter'+edge.node.id">
+    <!-- Chapitres -->
-        <h2 v-bind:data-rubrique="edge.node.rubrique" v-bind:id="'chapter'+edge.node.id" class="chapter-title" v-bind:class="{ canbreak: isNotFirst(index) }" >{{ edge.node.titre }}</h2>
+    <div
-          <VueMarkdown lang="fr" class="chapter-content justify">{{edge.node.contenu}}</VueMarkdown>
+      class="hyphen"
-      </div>
+      v-for="(edge,index) in $page.chapters.edges.slice().reverse()"
-      <!-- Notes de fin de document -->
+      :key="'chapter'+edge.node.id"
-      <h3 class="section-title canbreak">NOTES</h3>
+    >
-        <ol v-for="note in footnote">
+      <h2
-          <li>{{note}}</li>
+        v-bind:data-rubrique="edge.node.rubrique"
-        </ol>
+        v-bind:id="'chapter'+edge.node.id" class="chapter-title"
-      <!-- Pleine pages avant les sections -->
+        v-bind:class="{ canbreak: isNotFirst(index) }"
-      <div class="column image-cover cover-left green image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
+      >
-      </div>
+        {{ edge.node.titre }}
-      <div class="column image-cover cover-right green image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
+      </h2>
-      </div>
+      <VueMarkdown lang="fr" class="chapter-content justify">{{edge.node.contenu}}</VueMarkdown>
-      <!-- Page blanche -->
+    </div>
-      <div class="blank-page no-folio"></div>
+
-      <!-- Sections -->
+    <!-- Notes de fin de document -->
-      <div class="hyphen" v-for="(edge,index) in $page.sections.edges.slice().reverse()" :key="'section'+edge.node.id">
+    <h3 class="section-title canbreak">NOTES</h3>
-        <h3 class="section-title" v-bind:class="{ canbreak: isNotFirst(index) }">{{ edge.node.titre }}</h3>
+    <ol v-for="note in footnote">
-        <VueMarkdown lang="fr" class="section-content justify">{{ edge.node.contenu }}</VueMarkdown>
+      <li>{{note}}</li>
-      </div>
+    </ol>
-      <!-- Credits -->
+
-      <div class="credits" v-for="(edge,index) in $page.credits.edges.slice().reverse()" :key="'credits'+edge.node.id">
+    <!-- Pleine pages avant les sections -->
-        <h4>{{ edge.node.role }}</h4>
+    <div
-        <p>{{ edge.node.nom }}</p>
+      class="column image-cover cover-left green image-bleed"
-      </div>
+      v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'
-      <div class="blank-page no-folio fill-green"></div>
+    />
+    <div
+      class="column image-cover cover-right green image-bleed"
+      v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'
+    />
+
+    <!-- Page blanche -->
+    <div class="blank-page no-folio" />
+
+    <!-- Sections -->
+    <div
+      class="hyphen"
+      v-for="(edge,index) in $page.sections.edges.slice().reverse()"
+      :key="'section'+edge.node.id"
+    >
+      <h3
+        class="section-title"
+        v-bind:class="{ canbreak: isNotFirst(index) }"
+      >
+        {{ edge.node.titre }}
+      </h3>
+      <VueMarkdown lang="fr" class="section-content justify">{{ edge.node.contenu }}</VueMarkdown>
+    </div>
+
+    <!-- Credits -->
+    <div
+      class="credits"
+      v-for="(edge,index) in $page.credits.edges.slice().reverse()"
+      :key="'credits'+edge.node.id"
+    >
+      <h4>{{ edge.node.role }}</h4>
+      <p>{{ edge.node.nom }}</p>
+    </div>
+
+    <div class="blank-page no-folio fill-green" />
   </Layout>
 </template>
+
 <page-query>
   {
     chapters : allchapitres{
@@ -87,6 +141,7 @@
     }
   }
 </page-query>
+
 <static-query>
 query {
   metaData {
@@ -96,12 +151,11 @@ query {
   }
 }
 </static-query>
+
 <script>
   import VueMarkdown from 'vue-markdown'
+  import { Previewer } from 'pagedjs'
 
-  import {
-  	Previewer
-  } from 'pagedjs';
   export default {
     data:function(){
       return{
@@ -125,22 +179,24 @@ query {
         this.footnote.push(note.getAttribute("data-note"));
       });
       this.$nextTick(function () {
-        let hyphenopoly = document.createElement('script'),
+
-            hyph = document.createElement('script');
+        // let hyphenopoly = document.createElement('script'),
-        hyphenopoly.setAttribute('src', 'lib/Hyphenopoly-master/Hyphenopoly_Loader.js')
+        //     hyph = document.createElement('script');
-        hyph.setAttribute('src', 'lib/hyph.js')
+        // hyphenopoly.setAttribute('src', 'lib/Hyphenopoly-master/Hyphenopoly_Loader.js')
-        document.head.appendChild(hyph)
+        // hyph.setAttribute('src', 'lib/hyph.js')
-        document.head.appendChild(hyphenopoly)
+        // document.head.appendChild(hyph)
-        hyph.onload = ()=>{
+        // document.head.appendChild(hyphenopoly)
-          Hyphenopoly.handleEvent = {
+        // hyph.onload = ()=>{
-                hyphenopolyEnd:(e)=>{
+        //   Hyphenopoly.handleEvent = {
-                  let previewer = new Previewer();
+        //     hyphenopolyEnd:(e)=>{
-                  previewer.preview();
+              let previewer = new Previewer();
-                  document.documentElement.style.cssText = 'visibility:visible !important';
+              console.log('previewer', previewer);
-                }
+              previewer.preview();
-              }
+              document.documentElement.style.cssText = 'visibility:visible !important';
-            }
+        //     }
-          })
+        //   }
-        }
+        // }
-      }
+      })
+    }
+  }
 </script>