Titre alternatif

package-lock.json

@@ -11124,6 +11124,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue2-filters": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vue2-filters/-/vue2-filters-0.9.1.tgz",
+      "integrity": "sha512-peQHwZIT4cv/SsFodfmS8QREOnpdbsblIcKg19Kgu6kDCZ2Q9vorI9QyRLDIdvziFsKYjDL4NtwqgKDUrgxNQg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -11,7 +11,8 @@
     "gridsome": "^0.7.0",
     "gridsome-source-strapi": "^0.1.3",
     "pagedjs": "^0.1.35",
-    "vue-markdown": "^2.2.4"
+    "vue-markdown": "^2.2.4",
+    "vue2-filters": "^0.9.1"
   },
   "devDependencies": {
     "node-sass": "^4.13.0",

src/css/styles_de_paragraphes.scss

@@ -59,8 +59,12 @@
 
 
 	a {
+		display: block;
 		text-decoration: none;
 		color: inherit;
+		& p{
+			margin: 0;
+		}
 	}
 
 	a::after {

src/pages/Index.vue

@@ -39,7 +39,11 @@
     </div>
     <div class="column justify-end table-of-content">
       <span v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`sommaire${edge.node.id}`">
-        <a :href="'#chapitres'+edge.node.id">{{ edge.node.Titre }}</a>
+        <a v-if="edge.node.alternatif" v-html="edge.node.alternatif" :href="'#chapitres'+edge.node.id">
+        </a>
+        <a v-else :href="'#chapitres'+edge.node.id">
+          {{ edge.node.Titre }}
+        </a>
       </span>
     </div>
   </div>
@@ -62,7 +66,7 @@
   <!-- Sections -->
 
 
-  <div v-for="edge in $page.sections.edges.slice().reverse()" :key="`section${edge.node.Ordre}`">
+  <div v-for="edge in orderBy($page.sections.edges,'node.Ordre')">
     <h2 :id="`chapitres${edge.node.id}`" class="section-title canbreak">{{edge.node.Titre}}</h2>
     <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
     </VueMarkdown>
@@ -81,8 +85,10 @@ import {
   Previewer
 } from 'pagedjs'
 import VueMarkdown from 'vue-markdown'
+import Vue2Filters from 'vue2-filters'
 
 export default {
+  mixins: [Vue2Filters.mixin],
   components: {
     VueMarkdown
   },
@@ -106,7 +112,7 @@ export default {
         let img_id = img.src.split("/").pop();
         let found = imgSource.find(element => element.id == img_id);
         img.src = path.join(param.source, found.images.url);
-        img.id = `${image}-${img_id}`;
+        img.id = `image-${img_id}`;
         let promise = new Promise((resolve, reject) => {
           img.onload = function() {
             let legend = document.createElement("p");
@@ -147,6 +153,7 @@ export default {
           id
           Titre
           Contenu
+          alternatif
         }
       }
     }