126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
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>
|
|
|
|
<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>
|
|
</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 {
|
|
chapitres: allChapitres {
|
|
edges {
|
|
node {
|
|
id
|
|
Titre
|
|
Contenu
|
|
}
|
|
}
|
|
}
|
|
|
|
introductions: allIntroductions {
|
|
edges {
|
|
node {
|
|
id
|
|
contenu
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</page-query>
|
|
<static-query>
|
|
query {
|
|
metadata {
|
|
title
|
|
subtitle
|
|
authors
|
|
}
|
|
}
|
|
</static-query>
|