168 lines
4.0 KiB
Vue
168 lines
4.0 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="intro">{{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(https://popsu-rouen-en.strapi.figli.io/uploads/50424a6a43e44551a4faa699f8ef3caa.JPEG)`, }' />
|
|
|
|
|
|
|
|
<!-- 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>
|