makeHTML.js

import fs from "fs-extra";
import { STATUSES } from "./constants.js";
import { discoverStories } from "./lib/misc.js";

const { readFileSync } = fs;

let stories = await discoverStories()
stories = stories.filter(f => f.status === STATUSES.SHAREABLE);

const printTexture = (initialLineSize = 40, initialNumberOfChars) => {
  const chars = [
    '▓', '▒', '░', '░', ' '
  ]

  const numberOfChars = initialNumberOfChars || parseInt(Math.random() * 100) + 100;
  let lineSize = initialLineSize // parseInt(Math.random() * 20) + 50;
  let introTexture = '';
  let j = 0;
  for (let i = 0; i < numberOfChars; i++) {
    introTexture += chars[parseInt(Math.random() * chars.length)];
    j++;
    if (j > lineSize) {
      introTexture += '\n';
      lineSize = initialLineSize // parseInt(Math.random() * 20) + 50;
      j = 0;
    }
  }
  return introTexture;
}

const outputStoryHTML = (story) => {
  const { basePath, id, title, date } = story;
  const txt = readFileSync(`${basePath}/transcription_partageable.txt`, 'utf8');
  return `<section class="story">
  <div class="header">
    <pre>${printTexture()}</pre>
    <!--<h4>Nos quotidiens numériques</h4>-->
    <h1>Histoire n°${+id} : ${title}</h1>
    <h4>Confiée le ${new Date(date).toLocaleDateString()} <h4>
  </div>
  <article>
    ${txt.split('\n').map(p => `<p>${p}</p>`).join('\n')}
  </article>
  <!--  <pre style="text-align: right;">${printTexture()}</pre> -->
</section>
  `
}
const outputCoverHTML = () => {
  return `
  <article id="cover">
    <div class="content">
    <div class="header-content">
    <h1>Nos quotidiens numériques</h1>
    <img class="bg-img" src="resources/3.numerique-louise-drul.png" alt="" />
    <h2>Un projet de&nbsp;recherche et&nbsp;d’expression citoyenne</h2>
    <!--<h3 id="emporter">Livret à emporter !</h3>-->
    </div>
    <h3 class="date">Édition du ${new Date().toLocaleDateString()}</h3>
    <div class="logos">
      <img src="resources/logomedialab.svg">
      <img src="resources/logoemmausconnect.svg">
    </div>
    <!--<h3 id="emportez">Lisez-moi !</h3>-->
    </div>
  </article>
  `
}

const outputShortPresentation = () => {
  return `
<article class="infopage overture">
  <blockquote class="big-quote">
    Nous avons tous·tes des histoires avec le numérique. Racontez la vôtre !
  </blockquote>
  <!--<img src="resources/2.permanence-louise-drul.png" alt="" />-->
</article>  
<article class="infopage overture">
  <blockquote>
      <h5>À quelles occasions j'utilise le numérique au quotidien ? </h5>
      <h5>Comment je me familiarise avec les outils et services ? </h5>
      <h5>Comment me former et répondre à mes besoins ?</h5>
  </blockquote>
  <blockquote>
    <h5>Qui est-ce qui m'aide au quotidien ?</h5>
    <h5>Qui est-ce que j'aide au quotidien ?</h5>
    <h5>Comment je fais mes démarches administratives ?</h5>
    <h5>Comment je fais mes achats ?</h5>
    <h5>Comment je communique avec mes proches ?</h5>
  </blockquote>
</article>
<article class="infopage repondeur">
  <img src="resources/1.dispositif-louise-drul.png" alt="le répondeur" />
</article>
<article class="infopage repondeur">
  <h2>Je participe au&nbsp;répondeur</h2>
  <p>Avec le répondeur je peux :</p>
  <ol>
    <li>écouter une petite histoire (positive ou négative) à propos de notre vie quotidienne avec le numérique</li>
    <li>raconter une histoire (positive ou négative) que j'ai vécue ou que j'ai observée, et en garder une trace écrite</li>
    <li>partager mon histoire anonymement</li>
  </ol>
</article>
<article class="infopage">
    <section>
      <h3><span>🔍</span><span> QUOI ?</span></h3>
      <p>
        Dans une société où tout change constamment et se dématérialise, <strong>racontez-nous comment vous utilisez le numérique au quotidien</strong>, qu’il s’agisse de discuter avec vos proches, faire une démarche administrative, acheter et vendre en ligne, ouvrir un compte, contacter un service après vente, donner son avis, gérer vos rendez-vous médicaux, vous protéger des arnaques, etc.
      </p>
    </section>
    <section>
      <h3><span>📢</span><span> POURQUOI ?</span></h3>
      <p>
      <strong>Tout le monde a quelque chose à dire sur le numérique</strong> : un vécu, des expériences et des pratiques. Nous avons toutes et tous des difficultés et des problèmes avec le numérique, mais certains sont davantage considérés que d’autres. Nous souhaitons donner une voix plus forte à toutes ces petites et grandes histoires.
      </p>
    </section>
  </article>
  <article class="infopage">
    <section>
      <h3>
      <span>✋</span><span> QUI PEUT PARTICIPER ?</span>
      </h3>
      <p>
        Celles et ceux qui viennent dans les locaux d’Emmaüs Connect : les personnes accompagnées en priorité, les bénévoles et les salariés. La participation est tout à fait volontaire et optionnelle, elle n’engage en rien vos droits à profiter des services d’Emmaüs Connect et à venir dans les Espaces de Solidarité Numérique.
      </p>
    </section>
    <section>
      <h3>
      <span>📆</span><span> OÙ ET QUAND ?</span>
      </h3>
      <p>
        Retrouvez-nous chaque semaine lors des permanences connectées le mardi ou le jeudi sur les sites Paris sud (Maison Blanche) et Paris nord (Villette) à partir de juin 2026.
      </p>
    </section>
    <section>
      <h3><span>🧐</span><span>QUI SOMMES-NOUS ?</span></h3>
      <p>
      Nous sommes Clémence, Robin et Maxime du médialab de Sciences Po, une institution de recherche qui étudie les relations entre la société et les technologies numériques. Nous aimons travailler en collectif et faire participer les personnes concernées à nos recherches.
      </p>
    </section>
  </article>
  <article class="infopage">
    <section>
      <h3>
        <span>✋</span><span>LA PARTICIPATION EST-ELLE OBLIGATOIRE ?</span>
      </h3>
      <p>
      Non, pas du tout ! Chacun des volets de la recherche repose sur le volontariat libre et n’est en aucun cas obligatoire, vous pouvez choisir de participer ou de ne pas participer sans conséquence pour vous ou pour votre accès aux services proposés par l’association Emmaüs Connect. Par ailleurs, vous pouvez participer à tout moment, et arrêter de participer quand vous le souhaitez également, même si vous avez déjà commencé.
      </p>
    </section>
    <section>
      <h3>
      <span>🔍</span><span> COMMENT ?</span>
      </h3>
      <p>
      Le dispositif de recherche repose sur l’observation participante, des entretiens avec bénévoles et personnes accompagnées, et la constitution d’un recueil collectif de petites histoires à propos de nos quotidiens numériques.
      </p>
      <p>
      À l’automne-hiver 2026, le projet continuera avec des ateliers de réflexion et d’expression citoyenne. Nous inviterons en priorité les personnes déjà rencontrées lors de nos observations et entretiens, et échanges autour du recueil de petites histoires, et ces ateliers sont ouverts à toutes et tous.
      </p>
      <p>
      À la fin du projet, nous produirons un ou plusieurs articles scientifiques et des médias d’expression écrite et audio (des livrets, des posters, des podcasts …). Ces médias d’expression permettront de faire connaître et discuter les problématiques du quotidien numérique, et elles supporteront les activités de plaidoyer d’Emmaüs Connect pour porter dans le débat public une meilleure prise en compte de la diversité des problèmes et solutions possibles.
      </p>
      <p>
      La participation est strictement anonyme, sauf pour les personnes contributrices des ateliers d’expression citoyenne qui le souhaitent : les personnes qui en expriment le souhait pourront être citées dans les crédits des médias d’expression aux côtés des membres de l’équipe de recherche et de l’équipe d’Emmaüs Connect participants.
      </p>
    </section>
  </article>
  `
}
const outputInfoHTML = () => {
  return `
  <article class="infopage">
    <h2 class="info-big-title">Annexes et&nbsp;informations utiles</h2>
  </article>
  <article class="infopage">
    <section>
      <h3>
      <span>📢</span><span> JE SOUHAITE PARTICIPER À LA RECHERCHE</span>
      </h3>
      <p>
        Je signale mon envie de participer au comptoir d’Emmaüs Connect qui me mettra en contact avec l’équipe, ou J’envoie un message à l’équipe de recherche à cette adresse : permanences-connexion@sciencespo.fr. 
      </p>
    </section>
    <section>
      <h3><span>💬</span><span> J’AI PARTICIPÉ À LA RECHERCHE ET JE NE SOUHAITE PLUS Y APPARAÎTRE</span></h3>
      <p>
      Je signale mon souhait de ne plus participer au comptoir d’Emmaüs Connect qui me mettra en contact avec l’équipe, ou j’envoie un message à l’équipe de recherche à cette adresse : permanences-connexion@sciencespo.fr.
      </p>
      <p>
      Pour toute réclamation ou recours, je contacte Sylvain Parasie, directeur du laboratoire de recherche médialab (sylvain.parasie@sciencespo.fr), ainsi que la déléguée à la protection des données de Sciences Po (dpo@sciencespo.fr) et le référent à l’intégrité scientifique de Sciences Po (integrite.scientifique@sciencespo.fr).
      </p>
    </section>
  </article>
  <article class="infopage">
    <section>
      <h3><span>🫙</span><span>COMMENT MES DONNÉES SONT-ELLES COLLECTÉES ET SÉCURISÉES ?</span></h3>
      <p>
      Le projet a fait l’objet d’une déclaration Réglement pour la protection des données personnelles (RGPD) garantissant la protection des données personnelles des participants.  Toutes les données recueillies sont anonymisées par l’équipe de recherche qui s’engage à les sécuriser et à les supprimer à la fin du projet. Les données ont pour objectif  de permettre l’analyse des pratiques du numérique des participants. Après avoir été anonymisées, elles pourront être utilisées dans le cadre de publications scientifiques par l’équipe de recherche ou de communication par Emmaüs Connect dans le cadre du collectif Citoyenneté numérique dont la présentation est accessible à cette adresse : https://citoyennete-et-numerique.org/
      </p>
      <p>
      Les données d'observations (notes de terrain) seront supprimées une année après la fin du projet de recherche.
      </p>
      <p>
       Les données brutes relatives aux entretiens (enregistrements audio pour réécoute par l’équipe de recherche) seront supprimées une année après la fin du projet de recherche, les transcriptions anonymisées seront supprimées trois années après la fin du projet de recherche, le reste des données (notes de synthèse, analyses) sera trié trois années après la fin du projet de recherche en fonction de leur pertinence pour des recherches à venir ou une réplication à vocation longitudinale.
      </p>
    </section>
  </article>
  <article class="infopage">
    <section>
      <h3><span>⚖️</span><span>MENTIONS LÉGALES</span></h3>
      <p>
      Responsables du traitement des données : Maxime Crépel maxime.crepel@sciencespo.fr et Robin de Mourat robin.demourat@sciencespo.fr – Sciences Po - 27, rue Saint Guillaume - 75337 Paris Cedex 07.
      </p>
      <p>
      Données collectées dans la finalité de conduire un projet de recherche sur les quotidiens numériques sur la base juridique de l’exécution d’une mission d’intérêt public. Les données sont destinées aux membres de l’équipe de recherche, elles sont partiellement partagées avec l’association Emmaüs Connect sous une forme pseudonymisée ou agrégée. 
      </p>
      <p>
      Vous bénéficiez d’un droit d’accès, de rectification ou de suppression de vos données à tout moment. Pour toute réclamation, vous êtes invité à saisir en premier lieu notre délégué à la protection des données (dpo@sciencespo.fr) qui se chargera, de manière indépendante, de trouver une solution amiable. Faute de réponse satisfaisante, vous aurez la possibilité de saisir la Commission nationale de l'informatique et des libertés (cnil.fr).
      </p>
    </section>
  </article>
  `
}

const html = `
<!DOCTYPE html>
        <html lang="fr">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Nos quotidiens numériques</title> 

            <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

            <link rel="stylesheet" type="text/css" href="resources/pagedjs-interface.css" />
            <link rel="stylesheet" type="text/css" href="resources/style.css" />
          </head>
          <body>
            ${outputCoverHTML()}
            ${outputShortPresentation()}
            <article class="story stories-header">
              <div class="header">
              <h2>Les petites histoires</h2>
              <h3>Écoutez-les sur&nbsp;le&nbsp;répondeur en retrouvant leur&nbsp;numéro !</h3>
              </div>
              <img src="resources/1.dispositif-louise-drul.png"/>
            </article>
            ${stories.map(s => outputStoryHTML(s)).join('\n')}
            ${outputInfoHTML()}
            
            <article id="backcover">
              <div>
                <h2>Nos quotidiens numériques</h2>
                <h3>Un projet de&nbsp;recherche et&nbsp;d’expression citoyenne</h3>
              </div>  
              <div>
                <p>Illustrations : Louise Drul</p>
                <p>Polices de caractère : PubliFluor, Banana, Cooper Hewitt.</p>
                <p>Licence : CC BY-NC-SA</p>
              </div>
            </article>
            <script type="text/javascript" src="resources/paged.polyfill.js"></script>
          </body>

        </html>`
fs.writeFileSync(`index.html`, html, 'utf8');