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

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/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;
+            this.$refs.description.innerHTML = e.content
-        }
-        if (e.type === 'link'){
-          this.$emit('openLink');
-          dataStorage.selectedLink = {
-            linksData: e.links,
-            caption: e.caption,
-            description: e.description
-          }
-          console.log(dataStorage.selectedLink);
         }
         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;
-        this.displayedDescription = e.description;
+        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!");