edit: post mastodon V2 en mode plus flexible (v0 un peu schlag mais ça marche x333)

v1-com-officielle/cutter/cutter.css

@@ -29,9 +29,9 @@ body, html {
 }
 
 body {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: auto;
 }
 
 :root {
@@ -54,15 +54,40 @@ body > *{
   padding: 15px;
 }
 
+/*===================Animation*/
+@keyframes blink {
+  0%   { color: var(--accent-color);}
+  15%  { color: var(--main-color);}
+  35%  { color: var(--main-color);}
+  50%  { color: var(--accent-color);}
+  65%  { color: var(--main-color);}
+  85%  { color: var(--main-color);}
+  100%  { color: var(--accent-color);}
+}
+
+/*===================Layout*/
 #welcome-panel {
   text-align: center;
 }
 
+#welcome-panel strong{
+  font-family:'lineal';
+  font-weight: normal;
+  font-size: 22.2px;
+}
+
 h1 {
     font-family: 'lineal', sans-serif;
     font-weight: bolder;
 }
 
+h2{
+  font-family: 'pressStart2P';
+  font-size: 13.12px;
+  font-weight: normal;
+  animation: blink 1.61s infinite;
+}
+
 #ui-canvas {
   display: block;
   height: 1350px;
@@ -70,3 +95,18 @@ h1 {
   margin-left: auto;
   margin-right: auto;
 }
+
+canvas{
+  max-width: 100%;
+}
+
+#cutter-panel{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3.33px;
+  margin-top: 13.12px;
+}
+
+#download{
+  margin: 7.77px;
+}

v1-com-officielle/cutter/cutter.js

@@ -1,42 +1,47 @@
-const CANVAS = document.getElementById("ui-canvas")
-const UI_CUTTER = new Image(CANVAS)
 const FORM = document.getElementById("cutter-form")
-
-async function updateFromForm(){
-    let data = new FormData(FORM)
-
-    let image = data.get("image")
-    if(image.size > 0){
-        if(UI_CUTTER.currentImageFile != image){
-            await UI_CUTTER.setImage(image)
-            UI_CUTTER.clearGlitch()
-        }
-    } else {
-        UI_CUTTER.clearImage()
-    }
-
-    document.getElementById("welcome-panel").hidden = image.size > 0
-    document.getElementById("glitch-panel").hidden = image.size == 0
-
-    UI_CUTTER.render()
-}
+const BUTTON = document.getElementById("download")
+const IMAGE = new Image()
+let rowCount
+let maxCount
 
 FORM.addEventListener("submit", e => {
         e.preventDefault()
-        updateFromForm()
+        const data = new FormData(FORM)
+        IMAGE.src = URL.createObjectURL(data.get('image'))
+        rowCount = data.get('rows')
+        console.log('ça marche :', data)
     })
 
-FORM.addEventListener("reset", e => {
-        FORM.elements["image"].value = ""
-        updateFromForm()
-    })
-
-document.getElementById("download-btn").addEventListener("click", async e => {
-    e.preventDefault();
-    let data = await UI_CUTTER.toBlob("image/jpeg", 1);
-    let a = document.createElement('a')
-    a.href = URL.createObjectURL(data)
-    a.download = UI_CUTTER.currentImageFile.name
-    a.click()
-    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+IMAGE.addEventListener('load', e => {
+    document.getElementById('cutter-panel').replaceChildren()
+    for(let i = 0; i<rowCount; i++){
+        for (let j = 0; j<3; j++){
+            let e = document.createElement('canvas')
+            e.width = 1080
+            e.height = 1350
+            let context = e.getContext('2d')
+            context.fillStyle = 'black'
+            context.drawImage(IMAGE,
+                j*(1080*0.94), i*1350,
+                1080*0.94, 1350,
+                1080*0.03, 0,
+                1080*0.94, 1350
+            )
+            document.getElementById('cutter-panel').append(e)
+        }
+    }
+})
+
+BUTTON.addEventListener('click', e => {
+    let imgList = document.querySelectorAll('canvas')
+    maxCount = imgList.length
+    for (let [i, img] of imgList.entries()){
+        img.toBlob(b => {
+            let aEl = document.createElement('a')
+            let index = maxCount - i
+            aEl.href = URL.createObjectURL(b)
+            aEl.download = 'img-' + index + '.jpg'
+            aEl.click()
+        },'image/jpeg',1)
+    }
 })

v1-com-officielle/cutter/index.html

@@ -7,21 +7,22 @@
     <title>Insta Ninja</title>
 </head>
 <body>
-
     <form id="cutter-form">
         <div id="welcome-panel">
             <h1>Insta Ninja</h1>
-            <p>Séléctionne un photo pour la découper<br>en une grille au format du feed insta</p>
-
-            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" />
+            <h2>Séléctionne un photo pour la découper<br>en une grille au format du feed insta<br></h2>
+            <p><strong>Attention :</strong> pour un permettre le bon affichage de la miniature sur le feed,<br>
+              il faut que <strong>la largeur de l'image d'entrée soit de 3 x (1080 x 0.94) = 3045 px</strong><br><br>
+              Pour la hauteur, il suffit de multiplier 1350 par le nombre de ligne voulu<br><br>
+              Ex : pour 6 post, soit <strong>2 lignes sur les 3 colonnes</strong> qui sont imposées par insta<br>
+              il faut que le format de l'image que tu crée soit <strong>3045 px de large par 2700 px de haut</strong></p>
+                <input type="number" name="rows" value="2" min="1">
+            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" required/>
+            <button>Cut !</button>
         </div>
-        <div id="cutter-panel" hidden>
-            <canvas id="ui-canvas"></canvas>
-            <nav>
-                <button type="reset">Reset</button>
-                <button type="button" id="download-btn">Télécharger</button>
-            </nav>
+        <div id="cutter-panel">
         </div>
+        <button id="download">Télécharger !</button>
     </form>
 
     <script type="module" src="cutter.js"></script>

v1-com-officielle/src/assets/style.css

@@ -91,7 +91,6 @@ a button{
 }
 
 p{
-  pointer-events: none;
   cursor: inherit;
 }
 
@@ -365,3 +364,38 @@ html, body{
 .moveable-control-box {
   display: none !important;
 }
+
+/*===========================For some fckn reason lien en description artist pannel*/
+
+.itemDesc p a{
+  display: block;
+  pointer-events: all;
+  background-color: var(--back-color);
+  color: var(--main-color);
+  font-size: 13.12px;
+  font-family: 'lineal';
+  border-color: var(--main-color);
+  border-width: thin;
+  border-style: solid;
+  border-radius: 16.1px;
+
+  width: 161px;
+  height: 16.1px;
+  padding: 7.77px;
+  margin-bottom: 0;
+
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+
+.itemDesc p a#text{
+  text-overflow: ellipsis;
+}
+
+.itemDesc p a:hover{
+  background-color: var(--main-color);
+  color: var(--back-color);
+}

v1-com-officielle/src/data/peopleData.js

@@ -10,10 +10,12 @@ function idAndDate(str){
 function titleAndContent(str){
   let data = str.split(" :");
   let title = "NO_TITLE";
+  let contentData = [""];
   if (data.length > 1){
     title = data[0];
+  } else {
+    contentData = data[0].split('<br>').filter(e => e);
   }
-  let contentData = [""];
   if (data[1]){
     contentData = data[1].split('<br>').filter(e => e);
   }
@@ -87,7 +89,14 @@ export async function loadPeopleData() {
   for (const user of pData){
     const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
     if (pouet){
-      description[user.name] = pouet.account.note;
+      let descData = pouet.account.note.split('<br>').filter(e => e);
+      if(descData.length > 0){
+          for (let line of descData){
+          description[user.name] += '\n' + line;
+        }
+      } else {
+        description[user.name] = 'NO DESCRIPTION'
+      }
     }
   }
 

v1-com-officielle/src/data/postData.js

@@ -0,0 +1,149 @@
+function idAndType(obj){
+  let data = obj.dateInfo.split('T')
+  let keyData = data[1].split('.')[0].split(':')
+  let uniqueKey = keyData[1] + keyData[2]
+  let id = obj.author + uniqueKey
+  //type : post, video, images
+  if (obj.videoSrc){
+    obj.type = "video"
+    id += ".video"
+  }else if(obj.imgSrc){
+    obj.type = "image"
+    id += ".image"
+  }else {
+    obj.type = "post"
+    id += ".post"
+  }
+  obj.caption = id
+}
+
+
+export async function loadPostData(){
+        //liste des utilisateurice
+  const usernamesRes = await fetch('/DATA/peopleData.json');
+  const pData = await usernamesRes.json();
+  //console.log("USERS :", pData);
+  const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");
+  if (!res.ok)
+    throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+  const pouets = await res.json();
+  //console.log("POUETS :" , pouets);
+  const filtered = pouets.filter(p => pData.some(user => p.account.username === user.name || p.reblog?.account.username === user.name));
+  console.log("FILTERED :" , filtered);
+          //création des dossiers
+  const files = {};
+  for (const user of pData) {
+    files[user.name] = [];
+  }
+  //console.log(files)
+          //récupérationn des descriptions/bio
+  const description = {};
+  for (const user of pData){
+    const pouet = filtered.find(p => p.account.username === user.name);
+    if(pouet?.account.note){
+        let data = pouet.account.note.split('<br>').filter(e => e)
+        let bio = "";
+        for (let line of data){
+          bio += line + '\n'
+        }
+        description[user.name] = bio
+    } else {
+      description[user.name] = 'NO DESCRIPTION'
+    }
+  }
+
+          //formattage des posts
+  for (const pouet of filtered){
+    let selectedPouet;
+    //si reblog chercher post origine
+    if(pouet.reblog){
+      selectedPouet = pouet.reblog;
+    } else {
+      selectedPouet = pouet;
+    }
+    //console.log(selectedPouet);
+    const username = selectedPouet.account.username;
+    const displayName = selectedPouet.account.display_name;
+    let date = selectedPouet.created_at;
+    let entry;
+
+    //ignorer réponses
+    if (selectedPouet.in_reply_to_account_id) {
+      continue;
+    }
+    //ignorer audio dans cette section
+    if (selectedPouet.media_attachments?.length > 0 &&selectedPouet.media_attachments[0].type.includes('audio')){
+      continue
+    }
+
+    // on commence par le texte du post
+    entry = {
+      type: "",
+      caption : "",
+      content : selectedPouet.content,
+      imgSrc : null,
+      videoSrc : null,
+      author : displayName,
+      dateInfo : date,
+      like : selectedPouet.favourites_count,
+      isSelected: false
+    }
+
+    if (selectedPouet.media_attachments?.length > 0){
+      if (selectedPouet.media_attachments[0].type.includes('video')){
+        entry.videoSrc = selectedPouet.media_attachments[0].url
+      } else if (selectedPouet.media_attachments[0].type.includes('image')){
+        entry.imgSrc = selectedPouet.media_attachments[0].url
+      }
+    }
+    //create id for title and unique name
+    idAndType(entry);
+    //console.log(entry);
+    //add to folder
+    files[username].push(entry);
+  }
+          //tri des post
+  const dragContent = pData.filter(user => user.folder === 0).map(user => (
+    {
+      type: "folder",
+      caption: user.name + '.info',
+      children: files[user.name],
+      description: description[user.name],
+      isSelected: false
+  }));
+  const nerdContent = pData.filter(user => user.folder === 1).map(user => (
+    {
+      type: "folder",
+      caption: user.name + '.info',
+      children: files[user.name],
+      description: description[user.name],
+      isSelected: false
+  }));
+
+  const otherContent = pData.filter(user => user.folder === 2).flatMap(user => files[user.name]);
+      //dossier final
+  const sortedContent = [
+    {
+    type: "folder",
+    caption : "Artistes Drags",
+    description:"Pour en savoir plus sur nos artistes drags, c'est par ici !",
+    children: dragContent,
+    isSelected: false
+    },
+    {
+    type: "folder",
+    caption : "Artistes Nerds",
+    description:"Pour en savoir plus sur nos artistes nerds, c'est par là !",
+    children: nerdContent,
+    isSelected: false
+    },
+    {
+    type: "folder",
+    caption : "Autres contenus",
+    description:"Dans cette section, on place pleins de contenu, en vrac, \n sur nous, nos copaines, des trucs qu'on trouve cool, etc.",
+    children: otherContent,
+    isSelected: false
+    }
+  ];
+  return sortedContent;
+}

v1-com-officielle/src/indieComponents/ArtistPannel.vue

@@ -5,7 +5,7 @@
   import ImgIcon from '../assets/icons/img.svg'
   import LinkIcon from '../assets/icons/link.svg'
   import BackIcon from '../assets/icons/back.svg'
-  import { loadPeopleData } from '@/data/peopleData.js'
+  import {loadPostData} from '@/data/postData.js'
 </script>
 
 <template>
@@ -36,20 +36,20 @@
         <p id="emptyFolderText" v-show="emptyFolder">Oopsi! Il n'y a rien  à afficher ici<br>(pour l'instant...)</p>
         <div v-show="gridDisplay" class="theMatrix" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
           <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
-            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'post'? TextIcon : ImgIcon" class="icon"/>
             <p class="itemCaption">{{item.caption}}</p>
           </div>
         </div>
         <div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
           <div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
-            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'post'? TextIcon : ImgIcon" class="icon"/>
             <p class="itemCaption" id="listTitle">{{item.caption}}</p>
             <p class="itemCaption" id="listAuthor">{{item.author}}</p>
             <p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
           </div>
         </div>
         <div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
-          <p>{{displayedDescription}}</p>
+          <p id="descText" ref="description">{{displayedDescription}}</p>
         </div>
       </div>
     </div>
@@ -72,7 +72,7 @@
   #artistPannel{
     position: fixed;
     width: 420px;
-    height: 600px;
+    height: auto;
     top: 16.1px;
     left: 16.1px;
     z-index: 33;
@@ -80,7 +80,7 @@
 
   #artistContent{
     width:100%;
-    height:87%;
+    height:100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -127,7 +127,7 @@
     grid-auto-rows: 150px;
     gap: 16.1px;
     width: 97%;
-    height: 66%;
+    height: 333px;
     overflow-y: auto;
     align-items: center;
     margin-left: 5px;
@@ -137,12 +137,14 @@
 
   .itemDesc{
     width: 90%;
-    height: 23%;
+    height: 161px;
     border-radius: 16.1px;
     border-color: var(--main-color);
     border-style: solid;
     border-width: thin;
     margin-top: 2%;
+    margin-bottom: 13.12px;
+    overflow-y: scroll;
 
     color: var(--main-color);
     font-family: 'velvelyne';
@@ -241,7 +243,7 @@
     justify-content: flex-start;
     align-items: center;
     width: 95%;
-    height: 66%;
+    height: 444px;
     overflow-y: scroll;
     overflow-x: hidden;
     padding-right: 7.77px;
@@ -251,6 +253,8 @@
     width:100%;
     height: 33px;
     display: flex;
+    flex-shrink: 0;
+
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
@@ -378,36 +382,28 @@
         if(e.type === 'image'){
             this.$emit('openImg');
             dataStorage.selectedImg = {
-              src: e.src,
+              src: e.imgSrc,
               caption: e.caption,
               like: e.like,
-              alt: e.alt,
               isLiked: e.isLiked
             }
-            this.displayedDescription = e.description;
-        }
-        if (e.type === 'link'){
-          this.$emit('openLink');
-          dataStorage.selectedLink = {
-            linksData: e.links,
-            caption: e.caption,
-            description: e.description
-          }
-          console.log(dataStorage.selectedLink);
+            this.$refs.description.innerHTML = e.content
         }
         if(e.type === 'video'){
             this.$emit('openVideo');
             dataStorage.selectedVideo = {
-              src: e.src,
+              src: e.videoSrc,
               caption: e.caption,
               like: e.like,
               alt: e.alt,
               format: e.format,
               isLiked: e.isLiked
             }
-            this.displayedDescription = e.description;
+            this.$refs.description.innerHTML = e.content
+        }
+        if (e.type === 'post'){
+          this.$refs.description.innerHTML = e.content
         }
-
         this.selectFile(e);
 
       },
@@ -418,7 +414,10 @@
           it.isSelected = false;
         })}
         e.isSelected = true;
+        if (e.description){
+          this.$refs.description.innerHTML = '{{displayedDescription}}'
           this.displayedDescription = e.description;
+        }
       },
       itemIsClicked(e){
         if (!this.dblClickTimer || this.lastClickedItem !== e){
@@ -474,7 +473,7 @@
       }
     },
     async mounted(){
-      this.linksData = await loadPeopleData();
+      this.linksData = await loadPostData();
       this.target = this.$refs.artistPannel;
       this.dataFirstLoad();
       console.log("Artist pannel is loaded!");

v1-com-officielle/src/indieComponents/DonationPannel.vue

@@ -20,10 +20,14 @@
         </button>
       </div>
       <div class="windowContent">
-          <p>On a besoin de ton aide ! <br><br> Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
+          <p>
+            Aujourd’hui, nous avons besoin<br>d’un coup de pouce pour<br>notre show du 22 mai.<br><br>
+            Cette cagnotte a pour objectif de financer<br>la rémunération des artistes drag et nerd participant·es, de soutenir le travail<br>de l’équipe l’orga, ainsi que d’investir dans le développement de Drags & Nerds<br>afin de vous proposer encore plus d’événements à l’avenir !<br><br>
+            Chaque don compte, vraiment.<br><br>
+            Merci du fond du cœur à tous·tes cell·eux qui prendront le temps de lire, de partager<br>et, bien sûr, de participer !
+          </p>
           <div id="linkRow">
-            <a href="#" class="textBtnStyle">Lydia</a>
-            <a href="#" class="textBtnStyle">Paypal</a>
+            <a href="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
           </div>
       </div>
     </div>
@@ -75,7 +79,7 @@
   }
 
   #linkRow .textBtnStyle{
-    width: 40%;
+    width: 77.7%;
     height: 50px;
     margin-bottom: 16.1px;
   }