Astroport.ONE/ipfessay/index.html

649 lines
27 KiB
HTML

<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Astronaute - Astroport One - PROFIL MadeInZion - </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
<link rel="manifest" href="assets/icons/manifest.json">
<link rel="mask-icon" href="assets/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="assets/icons/favicon.ico">
<meta name="msapplication-config" content="assets/icons/browserconfig.xml">
<meta name="theme-color" content="#5fcbcf">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/simplemde.min.css">
<script src="assets/js/simplemde.min.js"></script>
<script>
(function() {
var Utilities = {
isMobileOrTablet : function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
},
hasClass : (el, className) => {
if(!el)
return;
if (el.classList)
return el.classList.contains(className)
else
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
},
addClass : (el, className) => {
if(!el)
return;
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className))
el.className += " " + className
},
removeClass : (el, className) => {
if(!el)
return;
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
el.className=el.className.replace(reg, ' ')
}
}
};
var FilesOverlay = {
isImage : false,
initialize : function() {
if(!document.querySelector('#image-overlay'))
return;
var self = this;
// Fixes the sticky hover effects in iOS
document.querySelector('#upload').addEventListener('click', () => {
setTimeout(() => {
this.className = '';
}, 300);
});
document.querySelector('#background').addEventListener('change', (event) => {
if(!event.target)
return;
var files = event.target.files;
if(files.count == 0)
return;
var file = files[0];
if(!file)
return;
// Remove the extension from the file
var name = file.name.replace(/\.[^/.]+$/, "");
IPFessay.files[file.name.toLowerCase()] = file;
var md_text = (this.isImage ? '![](' + file.name + ')' : '[' + file.name + '](' + file.name + ')');
var pos = IPFessay.simplemde.codemirror.getCursor();
IPFessay.simplemde.codemirror.setSelection(pos, pos);
IPFessay.simplemde.codemirror.replaceSelection(md_text);
this.closeOverlay();
});
var tabs = document.querySelectorAll('#image-overlay .tab');
for(var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function(event) {
var tab = this.dataset.tab;
if(Utilities.hasClass(this, 'active'))
return;
var tabs = document.querySelectorAll('#image-overlay .tab');
for(var k = 0; k < tabs.length; k++) {
var localTab = tabs[k];
if(localTab.dataset.tab.localeCompare(tab) == 0)
Utilities.addClass(localTab, 'active');
else
Utilities.removeClass(localTab, 'active');
}
var tabContents = document.querySelectorAll('#image-overlay [data-tabcontent]');
for(var j = 0; j < tabContents.length; j++) {
var tabContent = tabContents[j];
if(tabContent.dataset.tabcontent.localeCompare(tab) == 0)
Utilities.addClass(tabContent, 'active');
else
Utilities.removeClass(tabContent, 'active');
}
document.querySelector('#form-messages').innerHTML = '';
});
}
document.querySelector('#image-overlay form').addEventListener('submit', (event) => {
event.stopPropagation();
event.preventDefault();
var imageURL = document.getElementById('image_url').value;
var md_text = (this.isImage ? '![](' + imageURL + ')' : '[' + imageURL + '](' + imageURL + ')');
var pos = IPFessay.simplemde.codemirror.getCursor();
IPFessay.simplemde.codemirror.setSelection(pos, pos);
IPFessay.simplemde.codemirror.replaceSelection(md_text);
this.closeOverlay();
return false;
});
document.querySelector('#image-overlay').addEventListener('click', function(event) {
if(event.target != this)
return;
self.closeOverlay();
});
document.querySelector('#image-overlay .new-hash').addEventListener('submit', (event) => {
event.stopPropagation();
event.preventDefault();
return false;
});
document.addEventListener('keyup', (event) => {
if(this.isOverlayOpen && event.keyCode == 27)
this.closeOverlay();
});
var closeButtons = document.querySelectorAll('#image-overlay .closeoverlay');
for(i = 0; i < closeButtons.length; i++ )
closeButtons[i].addEventListener('click', () => { this.closeOverlay(); });
},
startUploading : function() {
document.querySelector('#background').disabled = 'disabled';
Utilities.addClass(document.querySelector('#upload'), 'uploading');
document.querySelector('#upload').innerHTML = 'Uploading...';
},
endUploading : function() {
document.querySelector('#background').disabled = '';
Utilities.removeClass(document.querySelector('#upload'), 'uploading');
document.querySelector('#upload').innerHTML = 'Upload';
},
openOverlay : function() {
document.getElementById('background').accept = (this.isImage ? 'image/*' : '');
Utilities.addClass(document.body, 'noscroll');
Utilities.addClass(document.querySelector('#image-overlay'), 'open');
setTimeout(() => {
if(!Utilities.isMobileOrTablet())
document.querySelector('#image_url').focus();
}, 100);
this.isOverlayOpen = true;
},
closeOverlay : function() {
Utilities.removeClass(document.body, 'noscroll');
Utilities.removeClass(document.querySelector('#image-overlay'), 'open');
Utilities.removeClass(document.querySelector('.overlay .pin-stats'), 'open');
Utilities.removeClass(document.querySelector('.field[data-name="hash"]'), 'error');
Utilities.removeClass(document.querySelector('.field[data-name="name"]'), 'error');
document.querySelector('#form-messages').innerHTML = '';
document.querySelector('#image_url').value = '';
this.isOverlayOpen = false;
}
};
var IPFessay = {
files : {},
initialize : function() {
var textArea = document.querySelector('#text-input');
this.simplemde = new SimpleMDE({
autofocus: true,
element: textArea,
toolbar: [
"bold", "italic", "heading", "|",
"quote", "unordered-list", "ordered-list", "|",
"link", "image", "table", "code", "|",
"preview", "side-by-side", "fullscreen", "|",
"guide"
],
});
this.simplemde.codemirror.on("beforeChange", (event, change) => {
if(!change.text || change.text.length == 0)
return;
var changeText = change.text[0];
var isImageButton = (changeText.length > 0 && "![](http://)".localeCompare(changeText) == 0);
var isLinkButton = (changeText.length > 0 && "[](http://)".localeCompare(changeText) == 0);
if(isImageButton || isLinkButton) {
FilesOverlay.isImage = isImageButton;
FilesOverlay.openOverlay();
change.cancel();
}
});
document.addEventListener('keydown', (event) => {
if ((event.ctrlKey || event.metaKey) &&
(event.keyCode == 13 || event.keyCode == 10))
this.publishEssay();
});
document.addEventListener('keyup', (event) => {
if(!this.overlayLoading && event.keyCode == 27)
this.closeOverlay();
});
document.querySelector('#overlay button').addEventListener('click', () => {
this.closeOverlay();
});
document.querySelector('.button-publish').addEventListener('click', () => {
this.publishEssay();
});
},
ipfsPUT : function(hash, data, filename, success) {
var req = new XMLHttpRequest();
req.onreadystatechange = () => {
if(req.readyState != XMLHttpRequest.DONE)
return;
if(req.status >= 200 && req.status < 300) {
var hash = req.getResponseHeader("Ipfs-Hash");
success && success(hash);
}
else
this.showError();
};
req.onerror = (error) => { this.showError(); };
req.open("PUT", "/ipfs/" + hash + "/" + filename, true);
req.setRequestHeader("Content-type", "text/html");
req.send(data);
},
uploadFiles : function(hash, files, callback) {
if(files.length == 0) {
callback && callback(hash);
return;
}
// Get the first file
var file = files[0];
var filename = undefined;
if(typeof file == 'string')
filename = 'index.html';
else
filename = file.name;
// Remove it from the files array
files.splice(files.indexOf(file),1);
this.ipfsPUT(hash, file, filename, (new_hash) => {
this.uploadFiles(new_hash, files, callback);
});
},
publishEssay : function() {
this.openOverlay();
this.simplemde.codemirror.save();
var md = document.querySelector('#text-input').value;
// Get the generated HTML
var mdHTML = this.simplemde.options.previewRender(md);
// Create a temp element
var div = document.createElement('div');
div.innerHTML = mdHTML;
var title = undefined;
if(div.children.length > 0 && div.children[0].tagName.match("^[hH][123]$"))
title = div.children[0].innerText;
var renderedPage = this.renderPage(mdHTML, title);
var addedFiles = [];
addedFiles.push(renderedPage);
// Look for images and links in the markdown file
var re = /(\[.*?\]\()(.+?)(\))/g;
while ((matches = re.exec(md)) !== null) {
if(matches.length < 3)
continue;
var filename = matches[2].toLowerCase();
// Cross match them with the ones in the files dictionary
if(filename in this.files)
addedFiles.push(this.files[filename]);
}
this.uploadFiles(
"QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn", // Empty folder hash
addedFiles,
(hash) => {
this.showLink(hash, title);
this.primeCaches(hash);
});
},
showError : function() {
this.closeOverlay();
setTimeout(() => {
alert('There was an error communicating with the IPFS gateway API.\n\n' +
'Please ensure the daemon is running, ipfs daemon --writable');
}, 500);
},
openOverlay : function() {
document.body.className = 'noscroll';
document.querySelector('#overlay').style.display = 'block';
document.querySelector('#overlay .loading').style.display = 'block';
document.querySelector('#overlay section').style.display = 'none';
this.overlayLoading = true;
},
closeOverlay : function() {
document.body.className = '';
document.querySelector('#overlay').style.display = 'none';
document.querySelector('#overlay section').style.display = 'none';
},
primeCaches : function(hash) {
// Make background GET requests to some public gateways just to
// add the file to their caches.
[
"gateway.ipfs.io",
// "hardbin.com",
"ipfs.eternum.io",
// "cloudflare-ipfs.com",
// "ipfs.infura.io",
"tube.copylaradio.com",
].forEach(function(gateway) {
var req = new XMLHttpRequest();
req.open("GET", "https://" + gateway + "/ipfs/" + hash);
req.send();
});
},
showLink : function(hash, title) {
var pinName = 'MadeInZion';
if(title)
pinName = title;
this.overlayLoading = false;
document.querySelector('#overlay .loading').style.display = 'none';
document.querySelector('#overlay section').style.display = 'block';
document.querySelector('#overlay a#essay-link').href = "http://localhost:8080/ipfs/" + hash;
document.querySelector('#overlay a#essay-link').innerText = "http://localhost:8080/ipfs/" + hash;
document.querySelector('#overlay a#eternum-link').href = "https://tube.copylaradio.com/ipfs/" + hash;
document.querySelector('#overlay a#eternum-link').innerText = "https://tube.copylaradio.com/ipfs/" + hash;
document.querySelector('#overlay #essay-pin').innerHTML = '<a href="https://www.eternum.io/pin/' + hash + '/?name=' + pinName + '" target="_blank">https://www.eternum.io/pin/' + hash + '/</a>';
document.querySelector('#overlay #pin-link').innerText = "$ ipfs pin add " + hash;
},
renderPage: function(mdHTML, title) {
var pageTitle = 'Profil Astronaute';
if(title)
pageTitle = title;
return '<html>' +
'<head>' +
'<meta name="viewport" content="width=device-width, initial-scale=1">' +
'<link rel="stylesheet" href="/ipfs/QmSMwjABWVBsnS3Gha3xmjb5zKYndvFrS74iCAwykQCqcY/typesettings-1.2-min.css">' +
'<title>' + pageTitle + '</title>' +
'<style>' +
'footer {padding: 3em 0; text-align: center; font-size: 1.4em; border-top: 1px solid #e1e1e1;}' +
'a:hover { color: #222; border-bottom-color: #555; }' +
'@media only screen and (min-width: 1441px) { .typesettings { font-size: 2.4em; } }' +
'.typesettings { max-width: 33em; margin: 0 auto; }' +
'a { color: #aeaeae; border-bottom: 1px dotted #aeaeae; text-decoration: none; }' +
'</style>' +
'</head>' +
'<body>' +
'<article class="typesettings golden">' +
mdHTML +
'</article>' +
// '<footer><a href="https://ipfessay.stavros.io/">Publish your own essay with IPFessay</a>' +
// ' | <a href="https://gitlab.com/stavros/IPFessay">Gitlab</a></footer>' +
'</body>' +
'</html>';
}
};
window.IPFessay = IPFessay;
window.FilesOverlay = FilesOverlay;
})();
window.addEventListener('DOMContentLoaded', () => {
IPFessay.initialize();
FilesOverlay.initialize();
});
</script>
</head>
<body>
<header>
<img src="assets/images/logo.svg" width="100"/>
<h1>Astroport ONE</h1>
<h2>Identité Numérique Libre</h2>
<span class="attr">
<a href="https://oasis.astroport.com">Blog</a> |
<a href="https://www.youtube.com/channel/UCgbd28yps5uF3NWDq-FLE9A">Youtube</a>
</span>
</header>
<article>
<textarea id="text-input" style="width: 100%;" oninput="this.editor.update()" rows="15" cols="60">
# _PLAYER_ / _PSEUDO_
Astronaute, décrivez-vous...
Qui. Quand. Quoi. Où. Pourquoi?
## Savoir-faire
exemple
* Bois (cousu, vis, emboitement
* Soudure
_VIDEOS_
## Matos
exemple
1. Van : RENAULT TRAFIC
2. Perçeuse Visseuse sans fil : HITACHI
_PHOTOS_
~~~
Astronaute de la communauté MadeInzion. Voyagez entre les stations Astroport.
Votre identité souveraine s'inscrit de façon inaliénable sur IPFS
~~~
</textarea>
</article>
<footer>
<button class="button-publish pure-button">Publier</button>
</footer>
<div id="overlay">
<span class="loading"><em>Chargement...</em></span>
<section>
<h3>Astroport One - Astronaute</h3>
<div>
<p>
Voici votre lien permanent, infalsifiable enregsitré sur IPFS:
</p>
<a id="essay-link" class="essayaddr" href="" target="_blank"></a>
<p>
Vous pouvez le faire publier sur le bootstrap astrXbian :
</p>
<a id="eternum-link" class="essayaddr" href="" target="_blank"></a>
</div>
<div class="note">
<p>
<strong>NOTE: Ceci est un document numérique officiel MadeInZion.</strong>
<br>Bienvenue extraterrestre, bricoleur de génie, ingénieur, inventeur, rêveur...
Autonomie et mode de vie en Forêt Jardin, œuvre collective de terraformation.
Aucune carte d'identité requise. Participez au jeu... Rejoignez la communauté des créateurs.
</p>
<p>Vous pouvez épingler votre profil avec la commande :</p>
<code id="pin-link"></code>
<p>
Connectez-votre station et profitez du service <a href="https://tube.copylaradio.com/"
target="_blank">CopyLaRadio</a>.
</p>
<p id="essay-pin"></p>
</div>
<button class="pure-button">Fermer</button>
</section>
</div>
<div class="overlay" id="image-overlay">
<div class="new-hash overlay-body">
<div class="tabs">
<a href="javascript:void(0);" data-tab="link" class="tab active">Lien</a>
<a href="javascript:void(0);" data-tab="upload" class="tab">Depuis votre ordinateur</a>
</div>
<div id="form-messages"></div>
<form data-tabcontent="link" class="active">
<div class="fields">
<div class="field" data-name="hash">
<label for="image_url">URL</label>
<input required type="text" id="image_url"/>
</div>
</div>
<div>
<button class="pure-button prominent" type="submit">Attacher</button>
</div>
<span class="closeoverlay">Fermer</span>
</form>
<div data-tabcontent="upload">
<div>
<label for="background" id="upload" class="prominent pure-button">Envoyer et Attacher</label>
<input type="file" accept="image/*" id="background"/>
</div>
<span class="closeoverlay">Fermer</span>
</div>
</div>
</div>
</body>
</html>