portfolio iyo-bisseck

assets/css/portfolio.css

@@ -22,14 +22,6 @@
       @top-left-corner { content: none; display: none; }
 }
 
-@page portfolio :nth(2){
-   
-    @top-left { content: none;}
-    @top-right { content: none; }
-    @top-center { content: none;}
-     @top-right-corner { content: none;}
-      @top-left-corner { content: none; display: none; }
-}
 
 
 
@@ -119,6 +111,10 @@
 
 /* IYO BISSECK -------------------------------------------- */
 
+
+#fig-iyo-bisseck-1{
+break-before: right;
+}
 #fig-iyo-bisseck-3{
   break-before: page;
 }

assets/css/typesetting.css

@@ -5,7 +5,16 @@
 /* (print-break:) */
 /* (nbsp:) */
 
-/* Outdoor computer club */
+/* Iyo Bisseck -----------------------------------------------  */
+
+[data-unique-id="p-wgeujvnqel"]{
+letter-spacing: -0.015rem;
+     background-color: var(--bg-type);
+}
+
+
+
+/* Outdoor computer club -----------------------------------------------  */
 
 #tv-communales-televisions-populaires-au-venezuela{
     margin-top: 0px;
@@ -30,7 +39,7 @@
 }
 
 
-/* Olivain Porry */
+/* Olivain Porry ---------------------------------------------------------- */
 
 [data-unique-id="p-slmeuuadai"]{
     letter-spacing: -0.01rem;

assets/js/handlers.js

@@ -3,6 +3,8 @@ class asciiTextFill extends Paged.Handler {
     super(chunker, polisher, caller);
   }
 
+
+
   afterRendered(pages) {
     const PAD = 5;
     const chars = ["-", "+", "{", "[", "}", "]", ";", "<", ">"];
@@ -110,76 +112,6 @@ class asciiTextFill extends Paged.Handler {
     });
 
 
-    // document.querySelectorAll('.chapter').forEach(chapter => {
-    //   // /* ── Titre : h2 + h3 dans .chapter-title ── */
-    //   // const titleEl = chapter.querySelector('.chapter-title');
-    //   // if(titleEl){
-    //   //   const titleLinesH3 = Array.from(titleEl.querySelectorAll('h3'))
-    //   //     .map(n => n.textContent.trim()).filter(Boolean);
-    //   //   if (titleLinesH3.length) {
-    //   //     // Supprimer les h2/h3 originaux
-    //   //     titleEl.querySelectorAll('h3').forEach(el => el.remove());
-    //   //     const preH3 = document.createElement('pre');
-    //   //     preH3.textContent = makeBox(titleLinesH3);
-    //   //     // Insérer la boîte juste après fill-top
-    //   //     const fillTop = titleEl.querySelector('.fill-top');
-    //   //     fillTop.insertAdjacentElement('afterend', preH3);
-    //   //   }
-    //   //   const titleLinesH2 = Array.from(titleEl.querySelectorAll('h2'))
-    //   //     .map(n => n.textContent.trim()).filter(Boolean);
-    //   //   if (titleLinesH2.length) {
-    //   //     // Supprimer les h2/h3 originaux
-    //   //     titleEl.querySelectorAll('h2').forEach(el => el.remove());
-    //   //     const pre = document.createElement('pre');
-    //   //     pre.textContent = makeBox(titleLinesH2);
-    //   //     // Insérer la boîte juste après fill-top
-    //   //     const fillTop = titleEl.querySelector('.fill-top');
-    //   //     fillTop.insertAdjacentElement('afterend', pre);
-    //   //   }
-    //   // }
-
-    //   // /* ── Bio : .biographie dans ce chapter ── */
-    //   // const bioEl     = chapter.querySelector('.biographie');
-    //   // if(bioEl){
-    //   //   const bioText   = Array.from(bioEl.querySelectorAll('p'))
-    //   //     .map(p => p.textContent.trim()).join(' ');
-    //   //   const bioInnerW = COLS - 50;
-
-    //   //   if (bioText) {
-    //   //     const wrapped = [];
-    //   //     let cur = '';
-    //   //     bioText.split(/\s+/).forEach(w => {
-    //   //       const test = cur ? cur + ' ' + w : w;
-    //   //       if (test.length <= bioInnerW) { cur = test; }
-    //   //       else { if (cur) wrapped.push(cur); cur = w; }
-    //   //     });
-    //   //     if (cur) wrapped.push(cur);
-
-    //   //     const border = '|' + '-'.repeat(bioInnerW) + '|';
-    //   //     const pre    = document.createElement('pre');
-    //   //     pre.textContent = border + '\n\n' + wrapped.join('\n') + '\n\n' + border;
-    //   //     bioEl.innerHTML = '';
-    //   //     bioEl.appendChild(pre);
-    //   //   }
-    //   // }
-
-    //   const totalH = pages[0].height;
-    //   // const fixedH = titleEl.offsetHeight + bioEl.offsetHeight;
-    //   const fixedH = (titleEl ? titleEl.offsetHeight : 0) + (bioEl   ? bioEl.offsetHeight   : 0);
-    //   const spare  = Math.max(0, totalH - fixedH);
-
-    //   const ratios = [1/3, 1/3, 1/3];
-    //   const fills  = ['.fill-top', '.fill-mid', '.fill-bottom'];
-
-    //   fills.forEach((sel, i) => {
-    //     const spare  = Math.max(0, totalH - fixedH);
-    //     const el = chapter.querySelector(sel);
-    //     if (!el) return;
-    //     const n = Math.max(0, Math.floor((spare * ratios[i]) / lineH));
-    //     el.textContent = Array(n).fill(DASH).join('\n');
-    //   });
-
-    // });
   }
 }
 

assets/js/plugins/beforeParsed.js

@@ -6,7 +6,6 @@ class before extends Paged.Handler {
 
     beforeParsed(content) {
         paragraphId(content);
-        portfolioSpread(content);
     }
 }
 
@@ -31,12 +30,3 @@ function paragraphId(content) {
 
 }
 
-
-function portfolioSpread(content){
-    content.querySelectorAll('.portfolio-spread').forEach(block => {
-        const clone = block.cloneNode(true);
-        clone.classList.add('portfolio-spread-right');
-        block.classList.add('portfolio-spread-left');
-        block.parentNode.insertBefore(clone, block.nextSibling);
-    });
-}

assets/js/plugins/portfolio.js

@@ -0,0 +1,36 @@
+
+class portfolio extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+    }
+
+    beforeParsed(content) {
+        portfolioSpread(content);
+    }
+
+
+    // delete running title page 2
+    afterPageLayout(pageElement, page, breakToken) {
+        if(pageElement.classList.contains("pagedjs_portfolio_page") && pageElement.querySelector(".chapter-header")){
+            pageElement.querySelector(".pagedjs_margin-top").style.display = "none";
+            pageElement.querySelector(".pagedjs_margin-top-left-corner-holder").style.display = "none";
+        }
+  
+    }
+}
+
+Paged.registerHandlers(portfolio);
+
+
+
+
+
+
+function portfolioSpread(content){
+    content.querySelectorAll('.portfolio-spread').forEach(block => {
+        const clone = block.cloneNode(true);
+        clone.classList.add('portfolio-spread-right');
+        block.classList.add('portfolio-spread-left');
+        block.parentNode.insertBefore(clone, block.nextSibling);
+    });
+}

content/2_iyo-bisseck/chapitre.txt

@@ -2,11 +2,11 @@ Title: Wilderness Garden
 
 ----
 
-Maquette: false
+Maquette: true
 
 ----
 
-Typesetting: false
+Typesetting: true
 
 ----
 
@@ -30,7 +30,7 @@ Bio:
 
 ----
 
-Text: [{"content":{"text":"<p>Wilderness Garden est un jeu vidéo narratif qui explore les histoires entremêlées des technologies contemporaines et des héritages coloniaux. À travers une série d’espaces interconnectés, le joueur traverse des lieux où se dévoilent les infrastructures visibles et invisibles du pouvoir : une salle d’archives, un bureau administratif, les profondeurs d’Internet, ou encore des souvenirs familiaux fragmentés. Le projet interroge les dynamiques d’accès aux ressources, aux territoires et aux espaces numériques, et examine comment les technologies actuelles peuvent prolonger, transformer ou dissimuler des logiques de domination.</p><p>Le titre du jeu fait écho à la métaphore controversée formulée par Josep Borrell, qui décrivait l’Europe comme un « jardin » à protéger du reste du monde. En reprenant cette image, Wilderness Garden questionne les récits qui naturalisent les frontières et les hiérarchies entre peuples, territoires et formes de vie.</p><p>L’expérience commence dans un espace inspiré du sac amniotique, où la voix et l’avatar d’Iyo invitent les joueurs à prendre conscience de leur propre corps et de leurs histoires transgénérationnelles. Ce point de départ suggère que la mémoire et la présence peuvent devenir des formes de résistance face à l’effacement produit par le neurocapitalisme et les récits coloniaux.</p><p>Au fil du parcours, les joueurs rencontrent un jardin clos où la surveillance rappelle les mécanismes du «contrat racial », une salle d’archives où la conférence de Berlin, l’exploitation minière au Congo et la construction de la ligne Congo-Océan révèlent la logistique coloniale qui a redessiné territoires et vies. Sous les océans, les câbles d’Internet réactivent d’anciennes routes impériales, révélant comment l’infrastructure numérique s’inscrit dans des géographies façonnées par l’expansion coloniale.</p><p>Un espace administratif, inspiré des bureaux de la CAF, met en scène un système algorithmique qui envoie des lettres recommandées et produit des formes contemporaines de tri, de profilage et de contrôle des populations vulnérables.</p><p>Entre ces lieux surgissent aussi des moments plus intimes : une cérémonie de mémoire au cœur des infrastructures numériques, ou un espace poétique évoquant les ancêtres disparus et les fractures familiales.</p><p>À travers ce voyage non linéaire, Wilderness Garden invite les joueurs à dépasser les lignes droites des frontières et des récits dominants, pour imaginer des formes de vie plus vastes, capables de reconnaître les graines enfouies dans l’histoire et les possibles retours qu’elles portent.</p>"},"id":"84b8861c-0e6f-4767-ad55-523766865d95","isHidden":false,"type":"text"},{"content":[],"id":"de1021ac-030f-46be-8673-b48556f62b1f","isHidden":false,"type":"break"},{"content":{"image":["file://36fsvvwod97nz1ga"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-full-page"},"id":"b9b6bc49-ccef-4600-a790-7e89038dfcb5","isHidden":false,"type":"image"},{"content":{"image":["file://czj4n0r93jw8ofsb"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"3c909f8b-7039-4534-887a-d3e3503bc0dd","isHidden":false,"type":"image"},{"content":{"image":["file://coa5h7f71hdru7mj"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"3f146491-fb30-44c7-9efa-d06d46f24b2c","isHidden":false,"type":"image"},{"content":{"image":["file://ujynt8nqvk8r2qie"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"f844e22d-3270-4fcd-98e6-5b7fe6a20b7f","isHidden":false,"type":"image"},{"content":{"image":["file://shprtv8wmmlccuma"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"98e0f3bf-571c-45f7-bc08-59ea5b4aa4cb","isHidden":false,"type":"image"},{"content":{"image":["file://1doh2xvgznjyh1b5"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"96a2ee17-2755-4791-a4fd-89216171636b","isHidden":false,"type":"image"},{"content":{"image":["file://rkfkgfwvwaoqqqkb"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"f6f02f7e-0006-4b92-8831-e611a8f07cde","isHidden":false,"type":"image"}]
+Text: [{"content":{"text":"<p><em>Wilderness Garden</em> est un jeu vidéo narratif qui explore les histoires entremêlées des technologies contemporaines et des héritages coloniaux. À travers une série d’espaces interconnectés, le·la joueur·euse traverse des lieux où se dévoilent les infrastructures visibles et invisibles du pouvoir&nbsp;: une salle d’archives, un bureau administratif, les profondeurs d’Internet ou encore des souvenirs familiaux fragmentés. Le projet interroge les dynamiques d’accès aux ressources, aux territoires et aux espaces numériques, et examine comment les technologies actuelles peuvent prolonger, transformer ou dissimuler des logiques de domination.</p><p>Le titre du jeu fait écho à la métaphore controversée formulée par Josep Borrell, qui décrivait l’Europe comme un «&nbsp;jardin&nbsp;» à protéger du reste du monde. En reprenant cette image, <em>Wilderness Garden </em>questionne les récits qui naturalisent les frontières et les hiérarchies entre peuples, territoires et formes de vie.</p><p>L’expérience commence dans un espace inspiré du sac amniotique, où la voix et l’avatar d’Iyo invitent les joueur·eusess à prendre conscience de leur propre corps et de leurs histoires transgénérationnelles. Ce point de départ suggère que la mémoire et la présence peuvent devenir des formes de résistance face à l’effacement produit par le neurocapitalisme et les récits coloniaux.</p><p>Au fil du parcours, les joueur·euses rencontrent un jardin clos où la surveillance rappelle les mécanismes du «&nbsp;contrat racial&nbsp;», une salle d’archives où la conférence de Berlin, l’exploitation minière au Congo et la construction de la ligne Congo-Océan révèlent la logistique coloniale qui a redessiné territoires et vies. Sous les océans, les câbles d’Internet réactivent d’anciennes routes impériales, révélant comment l’infrastructure numérique s’inscrit dans des géographies façonnées par l’expansion coloniale.</p><p>Un espace administratif, inspiré des bureaux de la Caf, met en scène un système algorithmique qui envoie des lettres recommandées et produit des formes contemporaines de tri, de profilage et de contrôle des populations vulnérables.</p><p>Entre ces lieux surgissent aussi des moments plus intimes&nbsp;: une cérémonie de mémoire au cœur des infrastructures numériques ou un espace poétique évoquant les ancêtres disparus et les fractures familiales.&nbsp;</p><p>À travers ce voyage non linéaire, <em>Wilderness Garden</em> invite les joueur·euses à dépasser les lignes droites des frontières et des récits dominants, pour imaginer des formes de vie plus vastes, capables de reconnaître les graines enfouies dans l’histoire et les possibles retours qu’elles portent.</p>"},"id":"84b8861c-0e6f-4767-ad55-523766865d95","isHidden":false,"type":"text"},{"content":[],"id":"de1021ac-030f-46be-8673-b48556f62b1f","isHidden":false,"type":"break"},{"content":{"image":["file://36fsvvwod97nz1ga"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-full-page"},"id":"b9b6bc49-ccef-4600-a790-7e89038dfcb5","isHidden":false,"type":"image"},{"content":{"image":["file://czj4n0r93jw8ofsb"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"3c909f8b-7039-4534-887a-d3e3503bc0dd","isHidden":false,"type":"image"},{"content":{"image":["file://coa5h7f71hdru7mj"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"3f146491-fb30-44c7-9efa-d06d46f24b2c","isHidden":false,"type":"image"},{"content":{"image":["file://ujynt8nqvk8r2qie"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"f844e22d-3270-4fcd-98e6-5b7fe6a20b7f","isHidden":false,"type":"image"},{"content":{"image":["file://shprtv8wmmlccuma"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"98e0f3bf-571c-45f7-bc08-59ea5b4aa4cb","isHidden":false,"type":"image"},{"content":{"image":["file://1doh2xvgznjyh1b5"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"96a2ee17-2755-4791-a4fd-89216171636b","isHidden":false,"type":"image"},{"content":{"image":["file://rkfkgfwvwaoqqqkb"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"f6f02f7e-0006-4b92-8831-e611a8f07cde","isHidden":false,"type":"image"}]
 
 ----
 

site/snippets/blocks/fullpageimage.php

@@ -13,14 +13,11 @@ if ($block->location() == 'web') {
     $src = $image->url();
 }
 
-$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
-$figId = 'fig-' . Str::slug($block->parent()?->author() ?? '') . '-' . $GLOBALS['figCount'];
-
 ?>
 
 <?php if ($src): ?>
 	<div class="full-bleed-image full-page">
-		<figure id="<?= $figId ?>" class="<?= $fullWidth ? 'full-width' : '' ?>">
+		<figure class="<?= $fullWidth ? 'full-width' : '' ?>">
 			<img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
 			<?php if ($caption->isNotEmpty()): ?>
 			  <figcaption><?= $caption ?></figcaption>

site/snippets/blocks/gallery.php

@@ -4,10 +4,8 @@ $caption = $block->caption();
 $crop    = $block->crop()->isTrue();
 $ratio   = $block->ratio()->or('auto');
 
-$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
-$figId = 'fig-' . Str::slug($block->parent()?->author() ?? '') . '-' . $GLOBALS['figCount'];
 ?>
-<figure id="<?= $figId ?>"<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
+<figure<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
   <ul>
     <?php foreach ($block->images()->toFiles() as $image): ?>
     <li class="<?= $image->taille()->esc()?> <?= $image->orientation()?>">

site/snippets/blocks/image.php

@@ -5,14 +5,10 @@ $alt     = $block->alt();
 $caption = $block->caption();
 $src     = $block->image()->toFile()->url();
 
-$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
-$figId = 'fig-' . Str::slug($block->parent()?->author() ?? '') . '-' . $GLOBALS['figCount'];
-
-
 ?>
 
 <?php if ($src): ?>
-<figure id="<?= $figId ?>">
+<figure>
 
     <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
 

site/snippets/blocks/imagefloat.php

@@ -5,13 +5,10 @@ $alt     = $block->alt();
 $caption = $block->caption();
 $src     = $block->image()->toFile()->url();
 
-$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
-$figId = 'fig-' . Str::slug($block->parent()?->author() ?? '') . '-' . $GLOBALS['figCount'];
-
 ?>
 
 <?php if ($src): ?>
-<figure id="<?= $figId ?>" class="float-image">
+<figure class="float-image">
   <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
   <?php if ($caption->isNotEmpty()): ?>
   <figcaption>

site/snippets/blocks/spreadimage.php

@@ -13,14 +13,11 @@ if ($block->location() == 'web') {
     $src = $image->url();
 }
 
-$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
-$figId = 'fig-' . Str::slug($block->parent()?->author() ?? '') . '-' . $GLOBALS['figCount'];
-
 ?>
 
 <?php if ($src): ?>
 	<div class="spread-image">
-		<figure id="<?= $figId ?>" class="<?= $fullWidth ? 'full-width' : '' ?>">
+		<figure class="<?= $fullWidth ? 'full-width' : '' ?>">
 			<img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
 			<?php if ($caption->isNotEmpty()): ?>
 			  <figcaption><?= $caption ?></figcaption>

site/snippets/head.php

@@ -41,6 +41,7 @@
       "assets/js/plugins/decor-blockquote.js",
       "assets/js/plugins/decor-num-pages.js",
       "assets/js/plugins/decor-subtitles.js",
+      "assets/js/plugins/portfolio.js",
       "assets/js/plugins/toc.js",
       "assets/js/handlers.js",
       '@auto'

site/templates/print.php

@@ -94,9 +94,18 @@
 
 
       <div class="chapter-content">
-          <?php $GLOBALS['figCount'] = 0; ?>
+          <?php $figCount = 0; $figTypes = ['image', 'imagefloat', 'gallery', 'fullpageimage', 'spreadimage']; ?>
           <?php foreach ($chapitre->text()->toBlocks() as $block): ?>
-          <div id="<?= $block->id() ?>" class="block block-type-<?= $block->type() ?><?= $block->classes()->isNotEmpty() ? ' ' . implode(' ', $block->classes()->split(',')) : '' ?>">
+          <?php
+            $isFig = in_array($block->type(), $figTypes);
+            if ($isFig) {
+              $figCount++;
+              $blockId = 'fig-' . Str::slug($chapitre->author()) . '-' . $figCount;
+            } else {
+              $blockId = $block->id();
+            }
+          ?>
+          <div id="<?= $blockId ?>" class="block block-type-<?= $block->type() ?><?= $block->classes()->isNotEmpty() ? ' ' . implode(' ', $block->classes()->split(',')) : '' ?>">
             <?= $block ?>
           </div>
           <?php endforeach ?>