popsu_rouen_strapi/src/pages/Index.vue

<template>
<Layout>

  <!-- Mise en page -->
  <!-- introductions -->
  <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
    <VueMarkdown class="chapter-content justify">{{edge.node.contenu}}
    </VueMarkdown>
  </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.authors">
        {{auteur}}
      </div>
      <div class="v-center grow">
        <h1 class="main-title center highlight-white" v-html="$static.metadata.title" />
        <h2 class="main-pre-title center highlight-white" v-html="$static.metadata.subtitle" />
      </div>
      <div class="center">
        <img src="/logo_popsu.png" alt="" style="width:2cm;">
      </div>

    </div>
  </div>
  <!-- Page de fond -->
  <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: `url()`, }' />
  <!-- 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>

  <!-- Chapitres -->

  <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitre${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>

  <!-- Page blanche -->

  <div class="blank-page no-folio" />


  <!-- Sections -->


  <div v-for="edge in $page.sections.edges.slice().reverse()" :key="`section${edge.node.id}`">
    <h2 :id="`chapitres${edge.node.id}`" class="section-title canbreak">{{edge.node.Titre}}</h2>
    <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
    </VueMarkdown>
  </div>


</Layout>
</template>

<script>
const axios = require('axios'),
  path = require('path'),
  param = require(`../../param.JSON`);

import {
  Previewer
} from 'pagedjs'
import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  },
  mounted() {
    let docImages = Array.from(
      document.querySelectorAll("img")
    )
    let toLoad = docImages.filter(img => img.alt === "insert");

    let imgSource;
    axios.get(path.join(param.source, "images")).then(r => {
      imgSource = r.data;
      let allPromises = [];
      toLoad.forEach(img => {
        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);
        let promise = new Promise((resolve, reject) => {
          img.onload = function() {
            let legend = document.createElement("p");
            legend.classList.add("breakAfter");
            img.parentNode.classList.add("breakBefore");
            legend.innerHTML = found.legende;
            img.parentNode.insertBefore(legend, img.nextSibling);
            resolve();
          }
        });
        allPromises.push(promise);
      });
      Promise.all(allPromises).then(() => {
        let previewer = new Previewer();
        previewer.preview();
      });
    });
  }
}
</script>

<page-query>
  query {
    sections: allSections {
      edges {
        node {
          id
          Titre
          Contenu
        }
      }
    }

    chapitres: allChapitres {
      edges {
        node {
          id
          Titre
          Contenu
        }
      }
    }

    introductions: allIntroductions {
      edges {
        node {
          id
          contenu
        }
      }
    }

  }
</page-query>
<static-query>
query {
  metadata {
    title
    subtitle
    authors
  }
}
</static-query>