davidmerfield/photos.html

## photos.html
<!DOCTYPE html>
<html>
<title>{{title}}</title>
  {{> head}}
  <body>
    {{> header}}
    <style type="text/css">
    #photos {display: flex;flex-wrap: wrap;align-items: center;justify-content: center}
    #photos a {width: 33.3333%;padding: 1em;flex-shrink: 1;flex-grow: 1;box-sizing: border-box;background: none;}
    .pre-loaded {visibility: hidden;opacity: 0;will-change: opacity;transition: opacity .3s, visibility .3s;}
    .loaded {visibility: visible;opacity: 1;transition: opacity .3s, visibility .3s;}
    </style>
    <div class="container">
      <div class="main">
        <h1>Photos</h1>
        <div id="photos" class="wide"></div>
        {{> footer}}
      </div>
    </div>
    <script type="text/javascript">
    loadPage(1);

    function addImage(url, src) {
      photos.innerHTML += '<a href="' + url + '"><img src="' + src + '" class="pre-loaded" onload="this.className+=\' loaded\';"></a>';
    }

    function loadPage(number) {
      getJSON("/page/" + number + "?json=true", function(err, data) {
        if (err) return;
        data.entries.forEach(function(entry) {
          extractImages(entry.html).map(addImage.bind(null, entry.url));
        });
        if (data.pagination && data.pagination.next)
          return loadPage(number + 1);
      });
    }

    function extractImages(html) {
      var m;
      var urls = [];
      var rex = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
      while ((m = rex.exec(html))) {
        urls.push(m[1]);
      }
      return urls;
    }

    function getJSON(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 400) {
          return callback(null, JSON.parse(xhr.responseText));
        } else {
          return callback(new Error(xhr.responseText));
        }
      };
      xhr.onerror = callback;
      xhr.send();
    }

    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<title>{{title}}</title>
	{{> head}}
	<body>
	{{> header}}
	<style type="text/css">
	#photos {display: flex;flex-wrap: wrap;align-items: center;justify-content: center}
	#photos a {width: 33.3333%;padding: 1em;flex-shrink: 1;flex-grow: 1;box-sizing: border-box;background: none;}
	.pre-loaded {visibility: hidden;opacity: 0;will-change: opacity;transition: opacity .3s, visibility .3s;}
	.loaded {visibility: visible;opacity: 1;transition: opacity .3s, visibility .3s;}
	</style>
	<div class="container">
	<div class="main">
	<h1>Photos</h1>
	<div id="photos" class="wide"></div>
	{{> footer}}
	</div>
	</div>
	<script type="text/javascript">
	loadPage(1);

	function addImage(url, src) {
	photos.innerHTML += '<a href="' + url + '"><img src="' + src + '" class="pre-loaded" onload="this.className+=\' loaded\';"></a>';
	}

	function loadPage(number) {
	getJSON("/page/" + number + "?json=true", function(err, data) {
	if (err) return;
	data.entries.forEach(function(entry) {
	extractImages(entry.html).map(addImage.bind(null, entry.url));
	});
	if (data.pagination && data.pagination.next)
	return loadPage(number + 1);
	});
	}

	function extractImages(html) {
	var m;
	var urls = [];
	var rex = /<img.?src="([^">]\/([^">]?))".?>/g;
	while ((m = rex.exec(html))) {
	urls.push(m[1]);
	}
	return urls;
	}

	function getJSON(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url);
	xhr.onload = function() {
	if (xhr.status >= 200 && xhr.status < 400) {
	return callback(null, JSON.parse(xhr.responseText));
	} else {
	return callback(new Error(xhr.responseText));
	}
	};
	xhr.onerror = callback;
	xhr.send();
	}

	</script>

	</body>
	</html>