michel47/_jsRedirect.md

## _jsRedirect.md

      
    Raw
  

              _jsRedirect.md
            
          
  head
  gist
  hash
  qm
  
  
  6b79faa
  5d06c7e30abe8b4e1c1eb31edb34affd
  QmSNKruojmACYPRwT3Fx8N5yovZmxBGuWWgrK3uiaD1Z3v
  Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz
  
  
Javascript IPFS redirect


This gist is piece of javascript
to redirecting a web page using the fragment passed with the url location.
The fragment can be a hash or an path on IPFS.
This code can be used as a soft linking mechanism
example: /ipfs/QmSkGW3bkHttcSYZ8U2LdJYcPt3w4GCF2M2ok3mT4oc837/README.html
see how it works on the demo page at: http://127.0.0.1:8080/ipfs/Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz
Alternatively you can fill the  box at the url above.


## code.html
<title>IPFS redirect GIST code</title>
<meta charset="utf8"/>
<script>
 const gist = '5d06c7e30abe8b4e1c1eb31edb34affd';
 const qm = 'Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz';
 const hash = 'QmSNKruojmACYPRwT3Fx8N5yovZmxBGuWWgrK3uiaD1Z3v';
</script>
<style>
.gist-data { border: 1px dotted red; }
#file-detour-png { display:none; }
#file-favicon-png { display:none; }
img[alt=input] { height: 24px; }
</style>
<h3>IPFS redirect GIST code</h3>

<p>
Usage: add a hash as a fragment of the <a href=http://localhost:8080/ipfs/Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz>url</a> like below
<p style="margin-left:10%; margin-right:10%;"><code>
 https://gateway.ipfs.io/ipfs/Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz/#:hash
</code>
<hr>
<script src="https://gist.github.com/michel47/5d06c7e30abe8b4e1c1eb31edb34affd.js"></script>

--&nbsp;<br>
by: michelc (via <a href="https://github.com/search?q=37wtmyvnagq2q+g!">37wtmyvnagq2q</a> aka Letha J. Serve)

<script>
  let code = document.getElementsByTagName('code')[0];
  let content = code.textContent.replace(':hash',hash);
  code.innerHTML = `<a href="${content}" title="${hash}">${content}</a>`;
  console.info('code:',content);
</script>

## detour.png

      
    Raw
  

              detour.png
            
          
## favicon.ico

      
    Raw
  

              favicon.ico
            
          
            View raw
        
    
## favicon.png

      
    Raw
  

              favicon.png
            
          
## index.html
<!DOCTYPE html>
<!--
 release:
  ipfs add -w code.html index.html detour.png favicon.*

 head: 6b79faa
 prev: Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz
 gist: 5d06c7e30abe8b4e1c1eb31edb34affd
-->
<meta charset="utf8"/>
<link rel="shortcut icon" href="favicon.png">
<script>
  const prev = 'Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz';
  const head = '6b79faa';
  const gist = '5d06c7e30abe8b4e1c1eb31edb34affd';
  const clone_url = 'git@gist.github.com:5d06c7e30abe8b4e1c1eb31edb34affd.git';
</script>
<style>
#container {
  border: 3px solid purple;
}
#form {
  display: flex;
  height: 98vh;
/*  max-width: 480px; */
  justify-content: center;
  align-items: center;
}
#footer {
  position: absolute;
  padding: 1rem;
  bottom: 0.8em;
}
#file-detour-png { display:none; }
img[alt=input] { height: 24px; }
</style>
<div id=container>
<div id=form></div>
<div id=footer>see source <a href=code.html>code</a>: <a href=https://gist.github.com/search?q=michel47>gists</a></div>
</div>
<script>
  /* update gist elements */
  let gist_link = document.getElementById('footer').getElementsByTagName('a')[1];
  gist_link.href = `https://gist.github.com/${gist}/`;
  gist_link.innerHTML = `gist:${gist}`;

  let url;
  let ipath=window.location.hash.slice(1);
  console.log('location.href:',location.href)
  if (ipath !== '') {
     if (! ipath.match('/ip[fn]s/')) {
       ipath='/ipfs/'+ipath;
     }
     console.dir('hostname:',location.hostname);
     let hostname = location.hostname;
     if (hostname.match(/\.ipfs\./) || hostname == 'localhost') {
        url='http://localhost:8080'+ipath;
     } else {
        url=ipath;
     }
     console.log('url:', url);
     if (location.href !== url) {
       location.href = url;
     }
  } else {
    document.getElementById('form').innerHTML =
      '<img alt="detour" src="detour.png" height="26">'+
      '<input name=hash placeholder="please enter a hash" size=39 onchange="location=\'#\'+this.value;">';
  }

  // see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
  window.addEventListener('hashchange', redirect)
  function redirect(e) {
    event.preventDefault();
    let fragment=window.location.hash.slice(1);
    console.log('fragment:',fragment);
    location.reload();
  }
  console.dir(window.location);


</script>
<!-- coded by: [michel47](https://git.io/michelc) -->


## publish.sh
#

tic=$(date +%s)
head=$(git rev-parse --short HEAD)
push_url=$(git remote get-url --push origin)
clone_url=$(git remote get-url origin)
gist=${push_url##*:}
gist=${gist%%.*}
echo gist: $gist

sed -i -e "s/:gist/$gist/g" \
    -e "s/gist: .*/gist: $gist/" \
    -e "s/head: .*/head: $head/g" \
    -e "s/head = '.*'/head = '$head'/" \
    -e "s/clone_url = '.*'/clone_url = '$clone_url'/" \
    -e "s/gist = '.*'/gist = '$gist'/" index.html
sed -i -e "s/:gist/$gist/g" \
    -e "s/gist: .*/gist: $gist/" \
    -e "s,gist.github.com/.*\.git,gist.github.com/$gist.git," \
    -e "s/head: .*/head: $head/" _jsRedirect.md


# compute why-hello hash (example)
if [ -d ../8e42ca3a69902dc060738787e1a8a12f ]; then
  hash=$(ipfs add -Q -r ../8e42ca3a69902dc060738787e1a8a12f)
else
  hash=QmSkGW3bkHttcSYZ8U2LdJYcPt3w4GCF2M2ok3mT4oc837
fi
echo hash: $hash
qm=$(ipfs add -Q -w index.html detour.png favicon.* qm.log code.html $0)
sed -i -e "s/prev: .*/prev: $qm/" \
    -e "s/prev = '.*'/prev = '$qm'/" index.html

sed -i -E \
    -e "s/qm = ':?\w+'/qm = '$qm'/" \
    -e "s/hash = ':?\w+'/hash = '$hash'/" \
    -e "s/gist = '\w+'/gist = '$gist'/" \
    -e "s/:gist/$gist/g" \
    -e "s/:qm/$qm/g" \
    -e "s,:8080/ipfs/Qm\w+,:8080/ipfs/$qm,g" \
    -e "s,ipfs\.io/ipfs/Qm\w+,ipfs\.io/ipfs/$qm,g" \
    code.html

sed -i -E \
    -e "s/hash: \w+/hash: $hash/" \
    -e "s/qm: \w+/qm: $qm/" \
    -e "s,8080/ipfs/Qm\w+,8080/ipfs/$qm,g" \
    -e  "s/:qm/$qm/g" \
    _jsRedirect.md

echo qm: $qm
echo $tic: $qm >> qm.log
git add code.html index.html _jsRedirect.md qm.log

## qm.log
# blockring™ mutable history
1607461424: QmZrNjHXn29Ah5BL6N6NAb39b9sPvd7anbVH2qD1KRwnkh
1607502285: QmZMLiym5F8JfqqYcRasWqPggs5YbBT2wQLqX4NsrocNfV
1607502450: QmaTFfKKFsbVZWaPzw7VpMrma53UFySUKNmr1R66YfcPai
1607503355: QmPHJu9vTTdi9g6aE5iTT5bg1HmrqSZ4aEScTf9xp9XDK8
1607512822: Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz
	<title>IPFS redirect GIST code</title>
	<meta charset="utf8"/>
	<script>
	const gist = '5d06c7e30abe8b4e1c1eb31edb34affd';
	const qm = 'Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz';
	const hash = 'QmSNKruojmACYPRwT3Fx8N5yovZmxBGuWWgrK3uiaD1Z3v';
	</script>
	<style>
	.gist-data { border: 1px dotted red; }
	#file-detour-png { display:none; }
	#file-favicon-png { display:none; }
	img[alt=input] { height: 24px; }
	</style>
	<h3>IPFS redirect GIST code</h3>

	<p>
	Usage: add a hash as a fragment of the <a href=http://localhost:8080/ipfs/Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz>url</a> like below
	<p style="margin-left:10%; margin-right:10%;"><code>
	https://gateway.ipfs.io/ipfs/Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz/#:hash
	</code>
	<hr>
	<script src="https://gist.github.com/michel47/5d06c7e30abe8b4e1c1eb31edb34affd.js"></script>

	-- <br>
	by: michelc (via <a href="https://github.com/search?q=37wtmyvnagq2q+g!">37wtmyvnagq2q</a> aka Letha J. Serve)

	<script>
	let code = document.getElementsByTagName('code')[0];
	let content = code.textContent.replace(':hash',hash);
	code.innerHTML = `<a href="${content}" title="${hash}">${content}</a>`;
	console.info('code:',content);
	</script>
	<!DOCTYPE html>
	<!--
	release:
	ipfs add -w code.html index.html detour.png favicon.*

	head: 6b79faa
	prev: Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz
	gist: 5d06c7e30abe8b4e1c1eb31edb34affd
	-->
	<meta charset="utf8"/>
	<link rel="shortcut icon" href="favicon.png">
	<script>
	const prev = 'Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz';
	const head = '6b79faa';
	const gist = '5d06c7e30abe8b4e1c1eb31edb34affd';
	const clone_url = 'git@gist.github.com:5d06c7e30abe8b4e1c1eb31edb34affd.git';
	</script>
	<style>
	#container {
	border: 3px solid purple;
	}
	#form {
	display: flex;
	height: 98vh;
	/* max-width: 480px; */
	justify-content: center;
	align-items: center;
	}
	#footer {
	position: absolute;
	padding: 1rem;
	bottom: 0.8em;
	}
	#file-detour-png { display:none; }
	img[alt=input] { height: 24px; }
	</style>
	<div id=container>
	<div id=form></div>
	<div id=footer>see source <a href=code.html>code</a>: <a href=https://gist.github.com/search?q=michel47>gists</a></div>
	</div>
	<script>
	/* update gist elements */
	let gist_link = document.getElementById('footer').getElementsByTagName('a')[1];
	gist_link.href = `https://gist.github.com/${gist}/`;
	gist_link.innerHTML = `gist:${gist}`;

	let url;
	let ipath=window.location.hash.slice(1);
	console.log('location.href:',location.href)
	if (ipath !== '') {
	if (! ipath.match('/ip[fn]s/')) {
	ipath='/ipfs/'+ipath;
	}
	console.dir('hostname:',location.hostname);
	let hostname = location.hostname;
	if (hostname.match(/\.ipfs\./) \|\| hostname == 'localhost') {
	url='http://localhost:8080'+ipath;
	} else {
	url=ipath;
	}
	console.log('url:', url);
	if (location.href !== url) {
	location.href = url;
	}
	} else {
	document.getElementById('form').innerHTML =
	'<img alt="detour" src="detour.png" height="26">'+
	'<input name=hash placeholder="please enter a hash" size=39 onchange="location=\'#\'+this.value;">';
	}

	// see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
	window.addEventListener('hashchange', redirect)
	function redirect(e) {
	event.preventDefault();
	let fragment=window.location.hash.slice(1);
	console.log('fragment:',fragment);
	location.reload();
	}
	console.dir(window.location);


	</script>
	<!-- coded by: [michel47](https://git.io/michelc) -->
	#

	tic=$(date +%s)
	head=$(git rev-parse --short HEAD)
	push_url=$(git remote get-url --push origin)
	clone_url=$(git remote get-url origin)
	gist=${push_url##*:}
	gist=${gist%%.*}
	echo gist: $gist

	sed -i -e "s/:gist/$gist/g" \
	-e "s/gist: .*/gist: $gist/" \
	-e "s/head: .*/head: $head/g" \
	-e "s/head = '.*'/head = '$head'/" \
	-e "s/clone_url = '.*'/clone_url = '$clone_url'/" \
	-e "s/gist = '.*'/gist = '$gist'/" index.html
	sed -i -e "s/:gist/$gist/g" \
	-e "s/gist: .*/gist: $gist/" \
	-e "s,gist.github.com/.*\.git,gist.github.com/$gist.git," \
	-e "s/head: .*/head: $head/" _jsRedirect.md


	# compute why-hello hash (example)
	if [ -d ../8e42ca3a69902dc060738787e1a8a12f ]; then
	hash=$(ipfs add -Q -r ../8e42ca3a69902dc060738787e1a8a12f)
	else
	hash=QmSkGW3bkHttcSYZ8U2LdJYcPt3w4GCF2M2ok3mT4oc837
	fi
	echo hash: $hash
	qm=$(ipfs add -Q -w index.html detour.png favicon.* qm.log code.html $0)
	sed -i -e "s/prev: .*/prev: $qm/" \
	-e "s/prev = '.*'/prev = '$qm'/" index.html

	sed -i -E \
	-e "s/qm = ':?\w+'/qm = '$qm'/" \
	-e "s/hash = ':?\w+'/hash = '$hash'/" \
	-e "s/gist = '\w+'/gist = '$gist'/" \
	-e "s/:gist/$gist/g" \
	-e "s/:qm/$qm/g" \
	-e "s,:8080/ipfs/Qm\w+,:8080/ipfs/$qm,g" \
	-e "s,ipfs\.io/ipfs/Qm\w+,ipfs\.io/ipfs/$qm,g" \
	code.html

	sed -i -E \
	-e "s/hash: \w+/hash: $hash/" \
	-e "s/qm: \w+/qm: $qm/" \
	-e "s,8080/ipfs/Qm\w+,8080/ipfs/$qm,g" \
	-e "s/:qm/$qm/g" \
	_jsRedirect.md

	echo qm: $qm
	echo $tic: $qm >> qm.log
	git add code.html index.html _jsRedirect.md qm.log
	# blockring™ mutable history
	1607461424: QmZrNjHXn29Ah5BL6N6NAb39b9sPvd7anbVH2qD1KRwnkh
	1607502285: QmZMLiym5F8JfqqYcRasWqPggs5YbBT2wQLqX4NsrocNfV
	1607502450: QmaTFfKKFsbVZWaPzw7VpMrma53UFySUKNmr1R66YfcPai
	1607503355: QmPHJu9vTTdi9g6aE5iTT5bg1HmrqSZ4aEScTf9xp9XDK8
	1607512822: Qmb4Ga8fW5a7X8TUVuGegQFYeFnEkUDMSvLX4U35bv4Goz