123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <template>
- <Layout>
- <!-- Mise en page -->
- <!-- introductions -->
- <div class="v-center grow">
- <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
- <VueMarkdown class="intro">{{edge.node.contenu}}
- </VueMarkdown>
- </div>
- </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">
- <div class="center">
- <h1 class="main-title center highlight-white" v-html="$static.metadata.title" />
- </br>
- <h2 class="main-pre-title center highlight-white" v-html="$static.metadata.subtitle" />
- </div>
- </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">
- <div class="section-title still">
- 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 v-if="edge.node.alternatif" v-html="edge.node.alternatif" :href="'#chapitres'+edge.node.id">
- </a>
- <a v-else :href="'#chapitres'+edge.node.id">
- {{ edge.node.Titre }}
- </a>
- </span>
- </div>
- </div>
- <!-- Chapitres -->
- <div v-for="(edge,index) in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
- <div class="blank-page no-folio breakBeforeLeft" />
- <div v-if="edge.node.Rubrique">
- <div class="section-title" >
- {{edge.node.Rubrique}}
- </div>
- <h2 :id="`chapitres${edge.node.id}`" class="chapter-title ">{{edge.node.Titre}}</h2>
- </div>
- <div v-else>
- <h2 :id="`chapitres${edge.node.id}`" class="chapter-title">{{edge.node.Titre}}</h2>
- </div>
- <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
- </VueMarkdown>
- </div>
- <!-- Page blanche -->
- <div class="blank-page" />
- <!-- Sections -->
- <div v-for="edge in orderBy($page.sections.edges,'node.Ordre')">
- <h2 :id="`chapitres${edge.node.id}`" class="section-title canbreak">{{edge.node.Titre}}</h2>
- <VueMarkdown class="chapter-content">{{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'
- import Vue2Filters from 'vue2-filters'
- export default {
- mixins: [Vue2Filters.mixin],
- components: {
- VueMarkdown
- },
- mounted() {
- // Ajouter les citations
- let citations = Array.from(document.querySelectorAll("blockquote"));
- citations.forEach((c, index) => {
- c.id = `citation-${index}`;
- });
- // Ajouter les images
- 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);
- img.id = `image-${img_id}`;
- img.parentNode.classList.add("breakBefore");
- let promise = new Promise((resolve, reject) => {
- img.onload = function() {
- let legend = document.createElement("p");
- legend.classList.add("breakAfter");
- legend.classList.add("legend");
- legend.innerHTML = found.legende;
- legend.id = `legend-${img_id}`;
- if (found.double) {
- let clone = img.parentNode.cloneNode(true);
- clone.classList.add("breakBefore");
- clone.querySelector("img").id += "-end";
- img.parentNode.insertBefore(clone, img.previousSibling);
- clone.parentNode.insertBefore(legend, clone.nextSibling);
- } else {
- 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
- Ordre
- }
- }
- }
- chapitres: allChapitres {
- edges {
- node {
- id
- Titre
- Contenu
- alternatif
- Rubrique
- }
- }
- }
- introductions: allIntroductions {
- edges {
- node {
- id
- contenu
- }
- }
- }
- }
- </page-query>
- <static-query>
- query {
- metadata {
- title
- subtitle
- authors
- }
- }
- </static-query>
|