DrI-T/index.html

## index.html
<!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>

## z-background.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              z-background.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## z-copy.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path fill="currentColor" d="M434 66l-52-52a48 48 0 00-34-14H176c-27 0-48 21-48 48v48H48c-27 0-48 21-48 48v320c0 27 21 48 48 48h224c27 0 48-21 48-48v-48h80c27 0 48-21 48-48V100a48 48 0 00-14-34zM266 464H54a6 6 0 01-6-6V150a6 6 0 016-6h74v224c0 27 21 48 48 48h96v42a6 6 0 01-6 6zm128-96H182a6 6 0 01-6-6V54a6 6 0 016-6h106v88c0 13 11 24 24 24h88v202a6 6 0 01-6 6zm6-256h-64V48h10l4 2 48 48a6 6 0 012 4v10z"/>
</svg>


## z-drit-pin-logo.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              z-drit-pin-logo.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>-- <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>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
	<path fill="currentColor" d="M434 66l-52-52a48 48 0 00-34-14H176c-27 0-48 21-48 48v48H48c-27 0-48 21-48 48v320c0 27 21 48 48 48h224c27 0 48-21 48-48v-48h80c27 0 48-21 48-48V100a48 48 0 00-14-34zM266 464H54a6 6 0 01-6-6V150a6 6 0 016-6h74v224c0 27 21 48 48 48h96v42a6 6 0 01-6 6zm128-96H182a6 6 0 01-6-6V54a6 6 0 016-6h106v88c0 13 11 24 24 24h88v202a6 6 0 01-6 6zm6-256h-64V48h10l4 2 48 48a6 6 0 012 4v10z"/>
	</svg>