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>
import { Previewer } from 'pagedjs'
import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  },
  mounted(){
    this.$nextTick(()=>{
      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>