Ajout de Markdown

package-lock.json

@@ -1574,6 +1574,22 @@
         "resolve": "^1.4.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -5411,6 +5427,24 @@
         "pluralize": "^7.0.0"
       }
     },
+    "handlebars": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
+      "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
+      "requires": {
+        "neo-async": "^2.6.0",
+        "optimist": "^0.6.1",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -5543,6 +5577,14 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "highlight.js": {
+      "version": "9.17.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.17.1.tgz",
+      "integrity": "sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==",
+      "requires": {
+        "handlebars": "^4.5.3"
+      }
+    },
     "hirestime": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/hirestime/-/hirestime-3.2.2.tgz",
@@ -6483,6 +6525,14 @@
         "verror": "1.10.0"
       }
     },
+    "katex": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.6.0.tgz",
+      "integrity": "sha1-EkGOCRIcBckgQbazuftrqyE8tvM=",
+      "requires": {
+        "match-at": "^0.1.0"
+      }
+    },
     "keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -6522,6 +6572,14 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "linkify-it": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz",
+      "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -6746,6 +6804,99 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-6.1.1.tgz",
+      "integrity": "sha1-ztA39Ec+6fUVOsQU933IPJG6knw=",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "~1.2.2",
+        "mdurl": "~1.0.1",
+        "uc.micro": "^1.0.1"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        }
+      }
+    },
+    "markdown-it-abbr": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-it-abbr/-/markdown-it-abbr-1.0.4.tgz",
+      "integrity": "sha1-1mtTZFIcuz3Yqlna37ovtoZcj9g="
+    },
+    "markdown-it-deflist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.0.3.tgz",
+      "integrity": "sha512-/BNZ8ksW42bflm1qQLnRI09oqU2847Z7MVavrR0MORyKLtiUYOMpwtlAfMSZAQU9UCvaUZMpgVAqoS3vpToJxw=="
+    },
+    "markdown-it-emoji": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz",
+      "integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw="
+    },
+    "markdown-it-footnote": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-2.0.0.tgz",
+      "integrity": "sha1-FOnE9o/xLPNU+jZa43gnboEEypQ="
+    },
+    "markdown-it-ins": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-ins/-/markdown-it-ins-2.0.0.tgz",
+      "integrity": "sha1-papqMPHi9x6Ul1Z8/f9A8f3mdIM="
+    },
+    "markdown-it-katex": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-katex/-/markdown-it-katex-2.0.3.tgz",
+      "integrity": "sha1-17hqGuoLnWSW+rTnkZoY/e9YnDk=",
+      "requires": {
+        "katex": "^0.6.0"
+      }
+    },
+    "markdown-it-mark": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz",
+      "integrity": "sha1-RqGqlHEFrtgYiXjgoBYXnkBPQsc="
+    },
+    "markdown-it-sub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz",
+      "integrity": "sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g="
+    },
+    "markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M="
+    },
+    "markdown-it-task-lists": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
+    },
+    "markdown-it-toc-and-anchor": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-toc-and-anchor/-/markdown-it-toc-and-anchor-4.2.0.tgz",
+      "integrity": "sha512-DusSbKtg8CwZ92ztN7bOojDpP4h0+w7BVOPuA3PHDIaabMsERYpwsazLYSP/UlKedoQjOz21mwlai36TQ04EpA==",
+      "requires": {
+        "clone": "^2.1.0",
+        "uslug": "^1.0.4"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        }
+      }
+    },
+    "match-at": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.1.tgz",
+      "integrity": "sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q=="
+    },
     "md5-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/md5-file/-/md5-file-4.0.0.tgz",
@@ -6766,6 +6917,11 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7513,6 +7669,22 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "requires": {
+        "minimist": "~0.0.1",
+        "wordwrap": "~0.0.2"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.10",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+        }
+      }
+    },
     "optimize-css-assets-webpack-plugin": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz",
@@ -10427,6 +10599,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -10536,6 +10713,11 @@
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
     },
+    "unorm": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/unorm/-/unorm-1.6.0.tgz",
+      "integrity": "sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA=="
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -10684,6 +10866,14 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "uslug": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/uslug/-/uslug-1.0.4.tgz",
+      "integrity": "sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=",
+      "requires": {
+        "unorm": ">= 1.0.0"
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -10821,6 +11011,26 @@
         }
       }
     },
+    "vue-markdown": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/vue-markdown/-/vue-markdown-2.2.4.tgz",
+      "integrity": "sha512-hoTX/W1UIdHZrp/b0vpHSsJXAEfWsafaQLgtE2VX4gY8O/C3L2Gabqu95gyG429rL4ML1SwGv+xsPABX7yfFIQ==",
+      "requires": {
+        "highlight.js": "^9.12.0",
+        "markdown-it": "^6.0.1",
+        "markdown-it-abbr": "^1.0.3",
+        "markdown-it-deflist": "^2.0.1",
+        "markdown-it-emoji": "^1.1.1",
+        "markdown-it-footnote": "^2.0.0",
+        "markdown-it-ins": "^2.0.0",
+        "markdown-it-katex": "^2.0.3",
+        "markdown-it-mark": "^2.0.0",
+        "markdown-it-sub": "^1.0.0",
+        "markdown-it-sup": "^1.0.0",
+        "markdown-it-task-lists": "^2.0.1",
+        "markdown-it-toc-and-anchor": "^4.1.2"
+      }
+    },
     "vue-meta": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.3.1.tgz",
@@ -11113,6 +11323,11 @@
         "string-width": "^2.1.1"
       }
     },
+    "wordwrap": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
+    },
     "worker-farm": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",

package.json

@@ -7,9 +7,11 @@
     "explore": "gridsome explore"
   },
   "dependencies": {
+    "babel-runtime": "^6.26.0",
     "gridsome": "^0.7.0",
     "gridsome-source-strapi": "^0.1.3",
-    "pagedjs": "^0.1.35"
+    "pagedjs": "^0.1.35",
+    "vue-markdown": "^2.2.4"
   },
   "devDependencies": {
     "node-sass": "^4.13.0",

src/pages/Index.vue

@@ -1,12 +1,33 @@
 <template>
   <Layout>
+
     <!-- Mise en page -->
-    <div v-for="edge in $page.chapitres.edges" :key="`sommaire${edge.node.id}`">
-      <h2>{{edge.node.titre}}</h2>
+
+    <!-- Sommaire -->
+
+    <div class="column no-folio">
+      <div class="section-title">
+        Sommaire
+      </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>
+        </span>
+      </div>
     </div>
-    <div v-for="edge in $page.chapitres.edges" :key="`chapitres${edge.node.id}`">
-      <h2>{{edge.node.titre}}</h2>
-      {{edge.node.contenu}}
+
+    <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitres${edge.node.id}`">
+      <h2
+      :id="`chapitres${edge.node.id}`"
+      class="chapter-title canbreak"
+      >{{edge.node.titre}}</h2>
+      <VueMarkdown
+      class="chapter-content justify"
+      >{{edge.node.contenu}}
+    </VueMarkdown>
     </div>
 
   </Layout>
@@ -14,8 +35,12 @@
 
 <script>
 import { Previewer } from 'pagedjs'
+import VueMarkdown from 'vue-markdown'
 
 export default {
+  components: {
+    VueMarkdown
+  },
   mounted(){
     this.$nextTick(()=>{
       let previewer = new Previewer();