Maintenant que nous avons créé notre application Portfolio basée sur Solid avec Vue.js et que nous l’avons mise en ligne sur les pages statiques gh-pages de github . Nos utilisateurs peuvent maintenant envoyer leurs images, mais voyons un peu ce que cela donne…
Le résultat https://scenaristeur.github.io/portfolio/ (en cours de construction actuellement )
Pour rappel, les images sont enregistrées sur le POD de l’utilisateur, dans le dossier /public/portfolio/, alors allons y faire un tour… Dans l’exemple j’ai utilisé comme identifiant https://spoggy-test6.solidcommunity.net/profile/card#me donc les photos de cet utilisateur sont stockées à cette adresse https://spoggy-test6.solidcommunity.net/public/portfolio/
En cliquant sur le petit triangle à gauche de chaque nom de fichier, on peut voir les images postées
Mouais pas très ragoutant, me direz-vous…
Et c’est vrai que l’un des gros problèmes actuellement de Solid est l’interface de son databrowser, pas friendly, ni ergonomique du tout, mais cela s’explique par la nature même du projet Solid, qui est de dissocier les données des applications, donc les données sont ‘à l’état brut’, même si je ne désespère pas de voir évoluer cette interface vraiment ugly…
Au final, peu importe l’interface du databrowser pour ce qui nous intéresse, puisque justement, ce qui est intéressant, c’est que l’on peut la modifier très facilement en créant un fichier html dans le dossier concerné de notre POD.
Une fois ce fichier créé, nous importerons dans ce fichier la librairie solid-file-client afin de pouvoir lister le contenu du dossier, et nous n’aurons plus qu’à utiliser un peu de CSS pour afficher les images d’une manière sympathique comme ici par exemple https://zurb.com/blog/easily-turn-your-images-into-polaroids-wi
Allons-y
C’est un peu sauvage, je détaillerais plus tard (en video certainement), mais avec poPock, il suffit de créer un fichier index.html avec le contenu suivant pour voir la galerie s’afficher.
Dans poPock Editor, naviguez grâce au dossier vert jusqu’à votre dossier /public/portfolio/ puis fermer la popup de navigation, cliquez sur l’onglet ‘Text’, puis sur le ‘+’ pour créer un nouveau fichier. Coller le code ci-dessous, et cliquez sur le bouton jaune ‘Save’. Vérifiez le ‘Path’ ou chemin /public/porfolio/, pour Filename(nom de fichier) saisissez ‘index.html’ et pour MimeType, saisissez ‘text/html’
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/solid-auth-client@2.3.0/dist-lib/solid-auth-client.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/solid-file-client@1.0.0/dist/window/solid-file-client.bundle.js"></script>
<style>
section[role="main"] {
background: url(http://zurb.com/playground/uploads/upload/upload/87/wood-bg.jpg) repeat;
}
section[role="main"] p a, li a {
color: #7E3200;
}
section[role="main"] p a:hover, li a:hover {
color: #461C00;
}
div#sidebarAd.cleanslate {
background: rgba(255, 255, 255, 0.25);
}
.CodeRay { background: rgba(255, 255, 255, 0.75); }
.row { overflow: visible }
.project-header { margin-bottom: 1em; }
/* @media screen and (max-width: 767px) {
.polaroids li:nth-child(n+5) {
display: none;
}
}*/ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids li {
padding-left: 0;
}
@media screen and (max-width: 768px) {
ul.polaroids li a {
margin-left: 0;
}
}
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px; -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }ul.polaroids li.messy a {
margin-top: -400px;
position: relative;
left: 160px;
}ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
</style>
</head>
<body>
<h1>Portfolio</h1>
<section class="body" role="main">
<ul id="polaroids" class="polaroids large-block-grid-4 small-block-grid-2">
</ul>
</section>
</body>
<script>
const auth = solid.auth
const fc = new SolidFileClient(auth)
console.log(fc)
console.log(window.location)
var loc = window.location.href;
var dir = loc.substring(0, loc.lastIndexOf('/'));
console.log(dir)
async function update(){
document.getElementById("polaroids").innerHTML = ""
let folder = await fc.readFolder(dir)
console.log(folder)
folder.files.forEach((item) => {
console.log(item)
if(item.type.startsWith('image')){
addImage(item)
}
});
}
function addImage(image){
console.log(image)
var ul = document.getElementById("polaroids");
var li = document.createElement("li");
var a = document.createElement("a");
var img = document.createElement('img');
img.src = image.url
a.appendChild(img);
a.title = decodeURI(image.name)
// document.createTextNode(image.url)
a.setAttribute('href', image.url);
li.appendChild(a);
ul.appendChild(li);
}
update()
</script></html>
Maintenant, pour ajouter des photos, il suffit de les uploader avec l’application créée dans le premier tuto https://scenaristeur.github.io/portfolio/ et le portfolio est automatiquement mis à jour…
Ceci est une proposition pour donner un exemple de visualisation du portfolio. Libre à vous ensuite d’adapter le CSS. ou de proposer des suggestions https://github.com/scenaristeur/portfolio/doc/portfolio.html
Et n’oubliez pas de jeter un oeil aux deux premiers Tutos pour créer l’application permettant d’envoyer des photos sur un POD Solid https://dfaveris.medium.com/portfolio-comment-cr%C3%A9er-une-application-web-portfolio-bas%C3%A9e-sur-solid-avec-vue-js-c57b50502d21
Et de publier cette application sur les gh-pages github https://dfaveris.medium.com/publier-une-application-vuejs-sur-github-ee7662c94667
