DrI-T/app.js

## app.js

var cached;
get_loc()
.then( json => {
  el = document.getElementsByTagName('div')[0];
  el.innerHTML = el.innerHTML.replace(':location',`${json.city}, ${json.region}`)
  el.innerHTML = el.innerHTML.replace(':ip',json.ip)
})


function get_loc() {
  let url = 'https://ipinfo.io/json'
  return cached_fetch(url ,{ mode:'cors'}).catch(console.warn)
}


function cached_fetch(url,options) {
  let tics = Date.now();
  cached = JSON.parse(localStorage.getItem('cached-fetch'));
  if (cached == null || typeof(cached) == 'undefined') { cached = {}; }
  if (typeof(cached[url]) == 'undefined' || (cached[url][0] - tics) < 0) {
     let ttl = (typeof(options.ttl) != 'undefined') ? options.ttl : 300000;
     exp = tics + ttl;
     return fetch(url,options).then( resp => resp.json() )
     .then( json => {
       cached[url] = [exp, json ];
       localStorage.setItem('cached-fetch',JSON.stringify(cached));
       return json
     }).catch(console.warn);
  } else {
    return Promise.resolve(cached[url][1]);
  }
}

true;

## build.sh
#

pandoc --template=layout.htm index.md -o index.html

## index.html
<!DOCTYPE html><meta charset="utf8">
<link rel="stylesheet" href=style.css>
<title>location.js</title>
<div>
<p>Your location is :location (:ip)</p>
</div>
<script src=app.js></script>

## index.md

      
    Raw
  

              index.md
            
          
  title
  
  
  location.js
  
  
Your location is :location (:ip)

  
## layout.htm
<!DOCTYPE html><meta charset="utf8">
<link rel="stylesheet" href=style.css>
<title>$title$</title>
<div>
$body$
</div>
<script src=app.js></script>

## style.css
body {
 background-color: #300133;
 margin: 0;
 padding: 0;
 height: 100vh;
}
body > div {
  padding: 1.2rem;
  max-width: 480px;
  height: 10%;
  margin: auto;
  margin-top: calc(50vh - 5%);
  background-color: white;
  opacity: 0.94;
  box-shadow: 5px 5px 15px 2px rgba(4,3,5,0.9);
  border-radius: 12px;
}

	var cached;
	get_loc()
	.then( json => {
	el = document.getElementsByTagName('div')[0];
	el.innerHTML = el.innerHTML.replace(':location',`${json.city}, ${json.region}`)
	el.innerHTML = el.innerHTML.replace(':ip',json.ip)
	})


	function get_loc() {
	let url = 'https://ipinfo.io/json'
	return cached_fetch(url ,{ mode:'cors'}).catch(console.warn)
	}


	function cached_fetch(url,options) {
	let tics = Date.now();
	cached = JSON.parse(localStorage.getItem('cached-fetch'));
	if (cached == null \|\| typeof(cached) == 'undefined') { cached = {}; }
	if (typeof(cached[url]) == 'undefined' \|\| (cached[url][0] - tics) < 0) {
	let ttl = (typeof(options.ttl) != 'undefined') ? options.ttl : 300000;
	exp = tics + ttl;
	return fetch(url,options).then( resp => resp.json() )
	.then( json => {
	cached[url] = [exp, json ];
	localStorage.setItem('cached-fetch',JSON.stringify(cached));
	return json
	}).catch(console.warn);
	} else {
	return Promise.resolve(cached[url][1]);
	}
	}

	true;
	<!DOCTYPE html><meta charset="utf8">
	<link rel="stylesheet" href=style.css>
	<title>location.js</title>
	<div>
	<p>Your location is :location (:ip)</p>
	</div>
	<script src=app.js></script>
	<!DOCTYPE html><meta charset="utf8">
	<link rel="stylesheet" href=style.css>
	<title>$title$</title>
	<div>
	$body$
	</div>
	<script src=app.js></script>
	body {
	background-color: #300133;
	margin: 0;
	padding: 0;
	height: 100vh;
	}
	body > div {
	padding: 1.2rem;
	max-width: 480px;
	height: 10%;
	margin: auto;
	margin-top: calc(50vh - 5%);
	background-color: white;
	opacity: 0.94;
	box-shadow: 5px 5px 15px 2px rgba(4,3,5,0.9);
	border-radius: 12px;
	}