|
<!DOCTYPE html><meta charset=utf8> |
|
<link rel=stylesheet href=style.css> |
|
<style> |
|
iframe { |
|
margin:0; |
|
width: 100%; |
|
max-width: none; |
|
height: calc(100vh - 2.4rem - 4px) |
|
} |
|
div { max-width: none; } |
|
</style> |
|
<header> |
|
<img src=favicon.webp class=logo> |
|
WikiWord: <input name=page value=""><button>view</button> |
|
<div id=court>courtesy <a href="https://www.drit.ml/">Doctor I·T |
|
<img src=drit-pin.svg alt=drit-pin class=logo></a> |
|
</div> |
|
</header> |
|
<div class=modal> |
|
<div class=modal-popup> |
|
<h3>LOCALLY DISTRIBUTED WIKIPEDIA</h3> |
|
<p>To access to the wikipedia locally you would need to run |
|
<!-- |
|
echo "Your IPFS node is running locally on port 8080" | ipfs add --offline -Q |
|
-- --> |
|
an <b>IPFS node</b> on port <a href=http://127.0.0.1:8080/ipfs/QmeFswrU1ovgRxsiBnuAwMFbqjwDUk8rYpFHJstkEWF4P1>8080</a>. |
|
Alternatively you can still browse this wikipedia via a public gateway, however it defeats the purpose |
|
of having a "unstoppable" P2P version of the <a href="https://wikipedia.org">official wikipedia</a>. |
|
<p> |
|
To browse a specific page on wikipedia, please specify the page name in the "WikiWord" input field |
|
and click the view button. |
|
|
|
<p>To install <a href="">IPFS</a> follow the steps below: |
|
|
|
<p><b>INSTALL</b> |
|
<p>Run the following commands in a bash shell; this will install a docker instance of IPFS |
|
and run the IPFS daemon within this docker. |
|
<pre><code> |
|
sudo apt-get curl # you need to have <em>curl</em> installed |
|
|
|
curl -sL https://gist.github.com/DrI-T/882ae8a852ab2bc58a333e3c6f279d03/raw/one-liner-install.sh | sh - |
|
</code></pre> |
|
|
|
<button style="float:right" onclick="modal_close(0)">close</button> |
|
<br> |
|
</div> |
|
</div> |
|
<iframe src=""></iframe> |
|
<script> |
|
// console.info('hash:',location.hash, typeof location.hash) |
|
var fragment = (typeof location.hash == 'undefined' || location.hash == '') ? 'IPFS': location.hash.slice(1); |
|
var wkp_url='http://en.wikipedia-on-ipfs.org.ipns.localhost:8080/wiki/' |
|
var iframe = document.getElementsByTagName('iframe')[0] |
|
let input = document.getElementsByName('page')[0] |
|
let button = document.getElementsByTagName('button')[0] |
|
|
|
input.value = cap(fragment); |
|
fetch(wkp_url+input.value,{method:'HEAD'}) |
|
.then(_ => { modal_close(0); }) |
|
.catch(async _ => { |
|
await fetch('/ipns/en.wikipedia-on-ipfs.org/wiki/'+input.value,{method:'HEAD'}) |
|
.then(resp => { |
|
if (resp.ok) { |
|
wkp_url = '/ipns/en.wikipedia-on-ipfs.org/wiki/'; |
|
console.info('switching to wkp_url:',wkp_url); |
|
modal_close(0); |
|
} else { |
|
wkp_url='https://en-wikipedia--on--ipfs-org.ipns.cf-ipfs.com/wiki/' |
|
console.info('switching to wkp_url:',wkp_url); |
|
} |
|
}) |
|
.catch(_ => { |
|
wkp_url='https://en-wikipedia--on--ipfs-org.ipns.dweb.link/wiki/' |
|
console.info('switching to wkp_url:',wkp_url); |
|
}) |
|
}) |
|
.finally(_ => { update_page({target:input})}); |
|
|
|
input.addEventListener('change',update_page,true); |
|
button.addEventListener('click',e => { update_page({target:input}) },false); |
|
|
|
function nop(ev) { |
|
return void(0); |
|
} |
|
function modal_close(i) { |
|
let popup = document.getElementsByClassName('modal')[i]; |
|
popup.style.display='none'; |
|
} |
|
function update_page(ev) { |
|
//let wikiWord = ev.target.value.split(' ').map(cap).join(''); |
|
let wikiWord = cap(ev.target.value.replace(/ /g,'_')) |
|
console.log('wikiWord:',wikiWord); |
|
iframe.src=wkp_url + wikiWord |
|
return iframe.src |
|
} |
|
function cap(w) { return w.replace(/^\w/, x => x.toUpperCase()); } |
|
|
|
</script> |
|
<style> |
|
.modal { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
z-index: 1025; |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
outline: 0; |
|
} |
|
.modal-popup { |
|
max-width: 500px; |
|
margin: 20vh auto; |
|
background-color: white; |
|
padding: 1rem; |
|
box-shadow: 5px 5px 15px 2px rgba(4,3,5,0.9); |
|
|
|
} |
|
.modal-content { |
|
position: relative; |
|
width: 100%; |
|
pointer-events: auto; |
|
border: 1px solid #002b36; |
|
border-radius: .3rem; |
|
outline: 0; |
|
} |
|
</style> |