@internetarchive/dweb-archive-dist
Version:
Internet Archive offline UI distribution for use by dweb-mirror
109 lines (103 loc) • 5.91 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decentralized Web Boot loader</title>
<!-- Allow relative URLs here (in this header), otherwise will be relative to URL supplied, not relative to this file which has been substituted by nginx. -->
<!-- this could also be https://ipfs.io/ipfs/Q11...-->
<!-- Getting the relative/absolute links for the libraries is hard, this is loaded as a blob, so relative links could go to anywhere,
<!-- if you set a "base" then it forces load from that resource (i.e. not directly from dweb)
<!-- so relative is probably best and make sure the nginx etc server handles appropriately -->
<!--<base href="https://dweb.me/examples/bootloader.html">-->
<script src="./dweb-transports-bundle.js" type="text/javascript"></script>
<script src="./dweb-objects-bundle.js" type="text/javascript"></script>
<style type="text/css">
/* These are required for DWeb statuses */
#statuselement { margin: 0 0 3px 10px; display: block; } /* "floatright" Grouped in top right corner */
#statuselement li {display: table-row; padding-top: 3px; padding-right: 0; margin: 0 0 3px 3px;}
.formbox {display:table-cell; background-color:#dddddd;border: 1px dotted grey; padding-left: 0.3em; padding-right: 0.3em;}
.button { border: 1px black solid; background-color:#dddddd; padding-bottom:0.1em; display:inline;} /* Buttons */
.transportstatus0 {color: lawngreen} /*STATUS_CONNECTED*/
.transportstatus1 {color: red} /*STATUS_FAILED*/
.transportstatus2 {color: yellow} /*STATUS_STARTING*/
.transportstatus3 {color: black} /*STATUS_LOADED*/
.transportstatus4 {color: purple} /*STATUS_PAUSED*/
#statusdiv span {display: block; }
</style>
</head>
<body>
<!-- Summary of logic below all based on the url the user requested
*
* dweb.xxxx.yyy:aaa/bbb?searchstring -> name= arc/xxxx.yyy/aaa/bbb
* /archive.org/aaa/bbb?searchstring -> name= arc/archive.org/aaa/bbb
* Name lookup -> [ urls ], path
* Redirect url?path=remainder&searchstring
-->
<p>The decentralized web is everywhere, but we have to find it.</p>
<div id="statuselement"></div>
<form style="display:block" onsubmit="p_bootfromfield('urlorname'); return false;">
Name: <input type="text" class="formbox" id="urlorname" placeholder="/arc/archive.org/details/foo" size="70"/>
<input type="submit" class="button" style="display:none;" value="Fetch"/>
</form>
<p> </p>
<div id="statusdiv"></div>
<script>
function statusupdate(args) {
console.log(...arguments);
statusdiv = document.getElementById("statusdiv");
statusdiv.appendChild(DwebObjects.utils.createElement("span", {}, ...arguments));
}
async function main() {
await DwebTransports.p_connect({
statuselement: document.getElementById("statuselement"),
transports: searchparams.getAll("transport")
});
const orighref = searchparams.get("url") || window.location.href;
if (!orighref.startsWith("file:///")) {
statusupdate("Loading URL: ", orighref);
const url = new URL(orighref);
let name;
const pathname = (url.pathname === "/") ? "/details/home" : url.pathname; // Remove extraneous / if added by browser
url.pathname = ""; // Leave empty as intended, will resolve to Domain or Leaf of the domain name
if (url.hostname === "dweb.me") { // e.g. https://dweb.me/arc/archive.org/foo
name = pathname.substring(1); // should be arc/ or ipfs/ or something like that
} else if (url.hostname.startsWith("dweb.")) { // e.g. https://dweb.archive.org/details/commute
name = ["arc/", url.hostname.substring(5), pathname].join(""); // arc/archive.org/details/commute
} else if (pathname.startsWith("/archive.org")) { // e.g. https://localhost:4244/archive.org/detais/commu
name = ["arc", pathname].join(""); // arc/archive.org/details/commute
} else {
statusupdate("Unable to bootstrap ", orighref, " unrecognized pattern");
return;
}
const search_supplied = url.search.slice(1); // Skip initial ?
await p_bootname(name, {search_supplied});
}
}
async function p_bootname(name, {search_supplied=undefined}={}) {
/*
Boot from a name,searchparams
name: e.g. /arc/archive.org/details in form that Domain.js can resolve
search_supplied: Anything provided after the ? - should be appended to the url during the boot.
*/
document.getElementById("urlorname").value = name;
statusupdate("Resolving name: ",name, "?", search_supplied || ""); // Appears after loading
try {
await DwebObjects.Domain.p_resolveAndBoot(name, {search_supplied})
} catch(err) { // If cant resolve to leaf, or boot fails
console.error("Got error",err);
statusupdate(err.message);
}
}
async function p_bootfromfield(field) {
const nameandsearch = document.getElementById(field).value.split('?')
return await p_bootname(nameandsearch, {});
}
// Next few lines need explaining! If passed an extra parameter url= then it will use that as the URL instead of ...bootloader.html
// This is only useful until we have the server returning this file for anything under dweb.archive.org
var searchparams = new URL(window.location.href).searchParams; // Original parameters, which includes url if faking
localStorage.debug = "dweb-transports:* dweb-objects:* dweb-archive:*";
main()
</script>
<!--TODO add a form here -->
</body>
</html>