Skip to content

Instantly share code, notes, and snippets.

@DrI-T
Last active Apr 27, 2021
Embed
What would you like to do?
an (editable) one-page hostless static website
<!DOCTYPE html><meta charset="utf8">
<div id=container contenteditable oninput="update(event);">
<img id=logo src=https://ipfs.blockring™.ml/ipfs/QmVFJEec5cD9nCmzx9ic6rGJSe8hDzMWEchcoxnZtG1QK8/drit-pin-logo.svg>
<h3>I believe this page is super cool ...</h3>
<p>You can write anything you want on it,
hit the publish button, and you have a free online webpage to you to send a message across the world.
<p>
<i>Requirement you need to have an IPFS node running on your machine at
<a href="http://127.0.0.1:8080/ipfs/:qm/" contenteditable=false> 127.0.0.1:8080</a> /
<a href="#" data-href="http://127.0.0.1:5001/api/v0/config/show" onclick="post(this.dataset.href);"
contenteditable=false>:5001</a>
and you must have <span id=origin>:origin</span> in the "Allow-Origins" list.</i>
<hr>
<button onclick="publish(event);">publish</button>
to push this page to the <a href=https://ipfs.blockring™.ml/ipfs/:qm/ contenteditable=false>IPFS</a> network.
<p>
You can share this page using the
<a target=_ipfs href=https://gateway.ipfs.io/ipfs/:qm/ contenteditable=false>permalink</a> below:
<p>
<input name=permalink title=permalink value="https://ipfs.blockring™.ml/ipfs/:qm/" style="border:0; width:100%; background-color: white;">
<button onclick="copy(event);" contenteditable=false><img class=button alt="copy url" src=http://127.0.0.1:8080/ipfs/QmRKtQoJaQC61g3jWBXdmrYoqQrbHEJ3iTmmg5hRwcJSAS/copy.svg></button>
<p><code><span value=https://ipfs.blockring™.ml/ipfs/:qm/>dnslink=/ipfs/:qm/</span></code>
<p>--&nbsp;<br><span contenteditable=false>This page is provided by <a href="https://www.drit.ml">Doctor I·T</a></span>
</div>
<style>
body {
background-color: #300233;
background-image: URL(https://ipfs.blockring™.ml/ipfs/QmSoyQm59v121sGy75ReMZNe4GaMvVWvr3C87khfWiZjee/z-background.svg);
background-size: 100% 100%;
min-height: 100vh;
}
.button { width: 1rem; height: 1rem; padding: 0; }
#container {
max-width: 680px;
margin: auto;
margin-bottom: 1vh;
padding: 1.2rem;
background-color: white;
opacity: 0.90;
box-shadow: 5px 5px 15px 2px rgba(4,3,5,0.9);
}
i { color: grey }
#logo { float: right; max-width: 140px; }
img[alt=gonohost] { max-width: 80%; margin: auto; }
</style>
<script>
var prevhash = ':qm';
let el = document.getElementById('origin');
el.innerText = el.innerText.replace(/:origin/,location.origin);
var html = document.getElementsByTagName('html')[0];
var templ = html.innerHTML;
function post(url) {
console.log('post.url:',url);
return fetch(url,{method:'POST'}).then(resp => resp.text()).then(buf => { document.writeln(buf); return void(0); }).catch(console.warn);
}
function copy(ev) {
let el=document.getElementsByName('permalink')[0]
el.select();
el.setSelectionRange(0, 99999); // for mobile devices
document.execCommand('copy');
}
function publish(ev) {
const api_url = 'http://127.0.0.1:5001/api/v0/';
//const api_url = 'https://ipfs.blockring™.ml/api/v0/'
//return fetch(location.href).then(resp => resp.text()).then(buf => { console.log('buf:',buf); });
var html = document.getElementsByTagName('html')[0];
console.debug('prevhash:',prevhash);
let innerHTML = html.innerHTML.replace(RegExp(prevhash,'g'),':qm');
html.innerHTML = innerHTML;
var buf = `<!DOCTYPE html>${innerHTML}`;
let form = new FormData();
form.append('file',buf);
let headers = new Headers();
//headers.set('X-APIkey','fiThSGmvb2IJMCnsttKaXKTh6JwDbUeU')
return fetch(api_url+'add?pin=true',{method:'POST', body:form}).
then(resp => resp.json()).
then(obj => {
if (typeof(obj.Code) == 'undefined') {
console.debug('resp.json:',obj);
console.debug('prevhash:',prevhash);
let sc = document.getElementsByTagName('script')[0];
console.debug('sc.innerHTML:',(sc.innerText.split('\n'))[1]);
sc.innerHTML = sc.innerHTML.replace(RegExp(prevhash,'g'),obj.Hash);
let el = document.getElementById('container');
el.innerHTML = el.innerHTML.replace(/:qm/g,obj.Hash);
prevhash = obj.Hash
fetch(`https://gateway.ipfs.io/ipfs/${obj.Hash}/`,{method:'HEAD',mode:'no-cors'}).
then(resp => { console.info('resp:',resp); return resp; }).
catch(console.warn);
return obj.Hash;
} else {
// ipfs add -w -r index.html style.css js img --pin=true -Q
return Promise.reject('QmeQVu3NGEcjmzx1rVytrSV9Ht9sc3KgavnpyhaE8gBip1')
}
}).
catch(console.warn);
}
publish({});
function update(ev) {
console.log('update.change:',ev);
}
</script>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment