Ajout de Markdown

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();