feat: country flags (#96)

Co-authored-by: pulsartronic <[email protected]>
Co-authored-by: Marcin Rataj <[email protected]>

README.md

@@ -4,7 +4,7 @@
 
 You can view this website on GitHub Pages: https://ipfs.github.io/public-gateway-checker/
 
-[![screenshot_2020-01-05.png](https://ipfs.io/ipfs/QmPw3s2zijn3zmCDAnWMEaHx9JTSevfG7uZaiCKc5A21U1?filename=screenshot_2020-01-05.png)](https://ipfs.github.io/public-gateway-checker/)
+[![screenshot_2020-01-05.png](https://ipfs.io/ipfs/QmRjQyxLwvd6D4fGSDx3uPM1nRmBnX4HwEaK5p8fuZFtpp?filename=screenshot.jpg)](https://ipfs.github.io/public-gateway-checker/)
 
 **NOTE:** All of these (except `ipfs.io` and `dweb.link`) are hosted by third-parties and should be treated as such.
 

app.js

@@ -8,6 +8,13 @@ const HASH_TO_TEST = 'bafybeifx7yeb55armcsxwwitkymga5xf53dxiarykms3ygqic223w5sk3
 const SCRIPT_HASH = 'bafybeietzsezxbgeeyrmwicylb5tpvf7yutrm3bxrfaoulaituhbi7q6yi';
 const HASH_STRING = 'Hello from IPFS Gateway Checker';
 
+const ipfs_http_client = window.IpfsHttpClient({
+  host: 'ipfs.io',
+  port: 443,
+  protocol: 'https'
+});
+
+
 let checker = document.getElementById('checker');
 checker.nodes = [];
 
@@ -169,6 +176,75 @@ Origin.prototype.onerror = function() {
 	this.tag.textContent = '❌';
 };
 
+let Flag = function(parent, hostname) {
+	this.parent = parent;
+	this.tag = document.createElement("div");
+	this.tag.className = "Flag";
+	this.tag.textContent = '';
+
+	let ask = true;
+
+	try{
+		let savedSTR = localStorage.getItem(hostname);
+		if (savedSTR) {
+			let saved = JSON.parse(savedSTR);
+			let now = Date.now();
+			let savedTime = saved.time;
+			let elapsed = now - savedTime;
+			let expiration = 7 * 24 * 60 * 60 * 1000; // 7 days
+			if (elapsed < expiration) {
+				ask = false;
+				this.onResponse(saved);
+			}
+		}
+	} catch(e) {
+    console.error(`error while getting savedSTR for ${hostname}`, e)
+	}
+
+	if (ask) {
+		setTimeout(() => {
+			let request = new XMLHttpRequest();
+			request.open('GET', `https://cloudflare-dns.com/dns-query?name=${hostname}&type=A`);
+			request.setRequestHeader("accept", "application/dns-json");
+			request.onreadystatechange = async () => {
+				if (4 == request.readyState) {
+					if (200 == request.status) {
+						try {
+							let response = JSON.parse(request.responseText);
+							let ip = null;
+							for (let i = 0; i < response.Answer.length && !ip; i++) {
+								let answer = response.Answer[i];
+								if (1 == answer.type) {
+									ip = answer.data;
+								}
+							}
+							if (ip) {
+								let geoipResponse = await window.IpfsGeoip.lookup(ipfs_http_client, ip);
+								if (geoipResponse && geoipResponse.country_code) {
+									this.onResponse(geoipResponse);
+									geoipResponse.time = Date.now();
+									let resposeSTR = JSON.stringify(geoipResponse);
+									localStorage.setItem(hostname, resposeSTR);
+								}
+							}
+						} catch(e) {
+              console.error(`error while getting DNS A record for ${hostname}`, e)
+						}
+					}
+				}
+			};
+			request.onerror = (e) => {};
+			request.send();
+		}, 500 * Flag.requests++); // 2 / second, request limit
+	}
+};
+
+Flag.prototype.onResponse = function(response) {
+	this.tag.style["background-image"] = `url('https://ipfs.io/ipfs/QmaYjj5BHGAWfopTdE8ESzypbuthsZqTeqz9rEuh3EJZi6/${response.country_code.toLowerCase()}.svg')`;
+	this.tag.title = response.country_name;
+};
+
+Flag.requests = 0;
 
 let Node = function(parent, gateway, index) {
 	this.parent = parent;
@@ -185,11 +261,15 @@ let Node = function(parent, gateway, index) {
 	this.origin = new Origin(this);
 	this.tag.append(this.origin.tag);
 
+
 	this.link = document.createElement("div");
 	let gatewayAndHash = gateway.replace(':hash', HASH_TO_TEST);
 	this.link.url = new URL(gatewayAndHash);
 	this.link.textContent = gatewayHostname(this.link.url);
 	this.link.className = "Link";
+
+	this.flag = new Flag(this, this.link.textContent);
+	this.tag.append(this.flag.tag);
 	this.tag.append(this.link);
 
 	this.took = document.createElement("div");

index.html

@@ -8,6 +8,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/tachyons.min.css" integrity="sha256-XiJ+PedljEmPP2VaQzSzekfCZdPr0fpqmh9dY6kpsuQ=" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ipfs.css" integrity="sha256-crEOQ/1aKoWgku50e0aqNzt0Tt/ev2C97PVr5hGpeEY=" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js" integrity="sha256-TMFHdG0nkNPPHBpd2UNil3TMjSPxWLcRgvwANAmjuRg=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js" integrity="sha256-xVFCr/DOPgR7kCrn6mb3xCnj2C1BOVxTCP4/h4UzGiQ=" crossorigin="anonymous"></script>
 	<link href="styles.css" type="text/css" rel="stylesheet"/>
 </head>
 <body id="checker" class="sans-serif charcoal bg-snow-muted">
@@ -27,5 +29,5 @@
 		</div>
 	</div>
 </body>
-<script src="./app.js?v=0.2"></script>
+<script src="./app.js?v=0.3"></script>
 </html>

styles.css

@@ -100,6 +100,14 @@ div.Node div.Origin {
 	user-select: none;
 }
 
+div.Node div.Flag {
+	width: 2em;
+	height: 1em;
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center;
+}
+
 div.Node div.Took {
 	min-width: 5em;
 	text-align: right;