danielhumgon/index.html

## index.html
<!DOCTYPE html>

<!--
  This HTML creates a web page that loads an IPFS node. You can interact with it by opening a browser console and interacting
with the 'node' variable.
-->

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>IPFS in the Browser</title>
  <link rel="icon favicon" href="favicon.ico" />
</head>

<body>
  <h1>IPFS in the Browser</h1>
  <p>
    This page creates an IPFS node in your browser and drops it into the
    global Javascript namespace as
    <b><em style="background-color:#d7d6d6">node</em></b>. Open the console to play around with it.
  </p>
  <p>
    Note that opening two tabs of this page in the same browser won't work
    well, because they will share node configuration. You'll end up trying to
    run two instances of the same node, with the same private key and
    identity, which is a Bad Idea.
  </p>
  <h1 id="status">Node status: offline</h1>

  <h2>Some suggestions</h2>

  <p>Try adding a new file:</p>

  <code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
      async function addFile () { const { cid } = await node.add('Hello world!')
      console.log('successfully stored', cid) } addFile()
    </code>

  <p>
    You can cat that same file. If you used the exact same string as above
    ('Hello world!') you should have an hash like this:
    'QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY'
  </p>

  <code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
      async function catFile () { for await (const data of
      node.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY')) {
      console.log(data.toString()) } } catFile()
    </code>

  <h2 id="wss-status">WSS Servers Status.</h2>

</body>

<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", async () => {
    const insertAfter = (referenceNode, newNode) => {
      referenceNode.parentNode.insertBefore(
        newNode,
        referenceNode.nextSibling
      );
    };

    const node = await Ipfs.create({ repo: "ipfs-" + Math.random() });
    window.node = node;

    const status = node.isOnline() ? "online" : "offline";
    const id = await node.id();

    console.log(`Node status: ${status}`);

    const statusDOM = document.getElementById("status");
    statusDOM.innerHTML = `Node status: ${status}`;

    const newDiv = document.createElement("div");
    newDiv.id = "node";
    const newContent = document.createTextNode(`ID: ${id.id}`);
    newDiv.appendChild(newContent);

    insertAfter(statusDOM, newDiv);

    // Obtains the WSS server list
    await getNodes()

    // You can write more code here to use it. Use methods like
    // node.add, node.get. See the API docs here:
    // https://github.com/ipfs/js-ipfs/tree/master/packages/interface-ipfs-core
  });
</script>

<script>
  async function getNodes() {
    const insertAfter = (referenceNode, newNode) => {
      referenceNode.parentNode.insertBefore(
        newNode,
        referenceNode.nextSibling
      );
    };

    const gistUrl =
      'https://api.github.com/gists/e818ecdaed6c35075bfc0751bf222258'

    // Fetch list
    const result = await axios.get(gistUrl)

    const content = result.data.files['psf-circuit-relays.json'].content

    const list = JSON.parse(content)
    const browserList = list.browser
    // const nodeList = list.node

    const browserDOM = document.getElementById("wss-status");

    for (let i = 0; i < browserList.length; i++) {
      const nodeData = browserList[i]

      // Div wrapper
      const div = document.createElement("div");
      div.id = "node" + i;
      const content = document.createTextNode(`- ${nodeData.name}`);
      div.style.padding = "1em"
      div.style.borderBottom = "1px solid gray"
      div.appendChild(content);

      // Status button
      const btn = document.createElement("button");
      btn.innerHTML = "Connecting..."
      btn.id = nodeData.ipfsId
      btn.style.marginLeft = "1em"

      div.appendChild(btn);

      insertAfter(browserDOM, div);
    }
    await ConnectAll(browserList.reverse())

    setInterval(async () => {
      await ConnectAll(browserList.reverse())
    }, 60000)

  }


</script>

<script>
  // Tries to connect to the ipfs node to a multi address
  async function Connect(multiaddr) {
    try {
      const node = window.node

      const connected = await node.swarm.connect(multiaddr)
      return true
    } catch (error) {
      return false
    }

  }
  // Connects to a list of nodes
  async function ConnectAll(list) {
    try {
      console.log("Try connection")
      for (let i = 0; i < list.length; i++) {
        const nodeData = list[i]
        const isConnected = await Connect(nodeData.multiaddr)

        const btn = document.getElementById(nodeData.ipfsId)
        btn.innerHTML = isConnected ? "Connected" : "Disconnected"
        btn.style.background = isConnected ? "green" : "red"
        btn.style.color = "white"
      }
    } catch (error) {
      console.log("ERROR in ConnectAll()")
      return false
    }

  }
</script>

</html>
	<!DOCTYPE html>

	<!--
	This HTML creates a web page that loads an IPFS node. You can interact with it by opening a browser console and interacting
	with the 'node' variable.
	-->

	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<title>IPFS in the Browser</title>
	<link rel="icon favicon" href="favicon.ico" />
	</head>

	<body>
	<h1>IPFS in the Browser</h1>
	<p>
	This page creates an IPFS node in your browser and drops it into the
	global Javascript namespace as
	<b><em style="background-color:#d7d6d6">node</em></b>. Open the console to play around with it.
	</p>
	<p>
	Note that opening two tabs of this page in the same browser won't work
	well, because they will share node configuration. You'll end up trying to
	run two instances of the same node, with the same private key and
	identity, which is a Bad Idea.
	</p>
	<h1 id="status">Node status: offline</h1>

	<h2>Some suggestions</h2>

	<p>Try adding a new file:</p>

	<code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
	async function addFile () { const { cid } = await node.add('Hello world!')
	console.log('successfully stored', cid) } addFile()
	</code>

	<p>
	You can cat that same file. If you used the exact same string as above
	('Hello world!') you should have an hash like this:
	'QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY'
	</p>

	<code style="display:block; white-space:pre-wrap; background-color:#d7d6d6">
	async function catFile () { for await (const data of
	node.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY')) {
	console.log(data.toString()) } } catFile()
	</code>

	<h2 id="wss-status">WSS Servers Status.</h2>

	</body>

	<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js" defer></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

	<script>
	document.addEventListener("DOMContentLoaded", async () => {
	const insertAfter = (referenceNode, newNode) => {
	referenceNode.parentNode.insertBefore(
	newNode,
	referenceNode.nextSibling
	);
	};

	const node = await Ipfs.create({ repo: "ipfs-" + Math.random() });
	window.node = node;

	const status = node.isOnline() ? "online" : "offline";
	const id = await node.id();

	console.log(`Node status: ${status}`);

	const statusDOM = document.getElementById("status");
	statusDOM.innerHTML = `Node status: ${status}`;

	const newDiv = document.createElement("div");
	newDiv.id = "node";
	const newContent = document.createTextNode(`ID: ${id.id}`);
	newDiv.appendChild(newContent);

	insertAfter(statusDOM, newDiv);

	// Obtains the WSS server list
	await getNodes()

	// You can write more code here to use it. Use methods like
	// node.add, node.get. See the API docs here:
	// https://github.com/ipfs/js-ipfs/tree/master/packages/interface-ipfs-core
	});
	</script>

	<script>
	async function getNodes() {
	const insertAfter = (referenceNode, newNode) => {
	referenceNode.parentNode.insertBefore(
	newNode,
	referenceNode.nextSibling
	);
	};

	const gistUrl =
	'https://api.github.com/gists/e818ecdaed6c35075bfc0751bf222258'

	// Fetch list
	const result = await axios.get(gistUrl)

	const content = result.data.files['psf-circuit-relays.json'].content

	const list = JSON.parse(content)
	const browserList = list.browser
	// const nodeList = list.node

	const browserDOM = document.getElementById("wss-status");

	for (let i = 0; i < browserList.length; i++) {
	const nodeData = browserList[i]

	// Div wrapper
	const div = document.createElement("div");
	div.id = "node" + i;
	const content = document.createTextNode(`- ${nodeData.name}`);
	div.style.padding = "1em"
	div.style.borderBottom = "1px solid gray"
	div.appendChild(content);

	// Status button
	const btn = document.createElement("button");
	btn.innerHTML = "Connecting..."
	btn.id = nodeData.ipfsId
	btn.style.marginLeft = "1em"

	div.appendChild(btn);

	insertAfter(browserDOM, div);
	}
	await ConnectAll(browserList.reverse())

	setInterval(async () => {
	await ConnectAll(browserList.reverse())
	}, 60000)

	}


	</script>

	<script>
	// Tries to connect to the ipfs node to a multi address
	async function Connect(multiaddr) {
	try {
	const node = window.node

	const connected = await node.swarm.connect(multiaddr)
	return true
	} catch (error) {
	return false
	}

	}
	// Connects to a list of nodes
	async function ConnectAll(list) {
	try {
	console.log("Try connection")
	for (let i = 0; i < list.length; i++) {
	const nodeData = list[i]
	const isConnected = await Connect(nodeData.multiaddr)

	const btn = document.getElementById(nodeData.ipfsId)
	btn.innerHTML = isConnected ? "Connected" : "Disconnected"
	btn.style.background = isConnected ? "green" : "red"
	btn.style.color = "white"
	}
	} catch (error) {
	console.log("ERROR in ConnectAll()")
	return false
	}

	}
	</script>

	</html>