artizirk/.ls_footer

## .ls_footer
</div>
<p style="text-align: center;"><a href="http://img.imelik.info/">moar</a></p>
</html>

## .ls_head.html
<!doctype html>
<html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>ls</title>
<style>
#ls {
    display: none;
}

body {
    background-image: url("/img/imagedoc-darknoise.png");
    background-color: rgb(33,33,33);
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: white;
    font-family: sans serif;
}

a  {
    color: white;
}

#dirlist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#dirlist > div {
    padding: 5px;
    max-width: 400px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#dirlist > div > video,img {
  box-shadow: 0 0 15px #000;
  max-width:100%;
}

#dirlist > div span {
}

</style>

<div class="container">
    <h1 style="text-align: center;">¯\_(ツ)_/¯</h1>
    <div id="dirlist"></div>
</div>

<script>
(function(){
  if (typeof Object.defineProperty === 'function'){
    try{Object.defineProperty(Array.prototype,'sortBy',{value:sb}); }catch(e){}
  }
  if (!Array.prototype.sortBy) Array.prototype.sortBy = sb;

  function sb(f){
    for (var i=this.length;i;){
      var o = this[--i];
      this[i] = [].concat(f.call(o,o,i),o);
    }
    this.sort(function(a,b){
      for (var i=0,len=a.length;i<len;++i){
        if (a[i]!=b[i]) return a[i]<b[i]?-1:1;
      }
      return 0;
    });
    for (var i=this.length;i;){
      this[--i]=this[i][this[i].length-1];
    }
    return this;
  }
})();

document.addEventListener("DOMContentLoaded", function() {
    let ls = JSON.parse(document.getElementById("ls").innerHTML);
    ls.sortBy(function(o){ return new Date(o.mtime) })
    ls.reverse()
    let fancy = ""
    let hidden = ["img", "css", "js", "audio", "favicon.ico", "index.html", "video.html"];
    for (let i of ls) {
        console.log(i);
        if (hidden.indexOf(i.name) != -1 ) {
            continue;
        }
        if (i.type === "file") {
            if (i.name.endsWith(".webm")) {
                fancy += `<div>
                            <video src="/${i.name}" controls>
                            </video>
                            <a href="/${i.name}"><span>${i.name}</span></a>
                          </div>`;
            } else if (i.name.endsWith(".jpg") | i.name.endsWith(".png")) {
                fancy += `<div>
                            <a href="/${i.name}">
                                <img src="/${i.name}" alt="${i.name}">
                                </span>${i.name}</span>
                            </a>
                          </div>`;
            } else {
                fancy += `<div><a href="/${i.name}">${i.name}</a></div>`;
            }
        } else {
            fancy += `<div><a href="/${i.name}">${i.name}</a></div>`;
        }
    }
    document.getElementById("dirlist").innerHTML = fancy;
});

function play_video(el) {
    console.log(el);
    if (el.pause) {
        el.play();
    } else {
        el.pause();
    }
}
</script>

<div id="ls">

## nginx.conf
location /ls {
      autoindex                                   on;
      autoindex_format                            json;
      addition_types                              application/json;
      add_before_body                             /.ls_head;
      add_after_body                              /.ls_footer;
      add_header                                  Content-Type text/html;
      alias                                       /srv/http/u.wut.ee;
      index                                       usfdauydsfuyfsdasafdiusdaouisaduiower;
}
	</div>
	<p style="text-align: center;"><a href="http://img.imelik.info/">moar</a></p>
	</html>
	<!doctype html>
	<html>
	<meta charset="utf-8">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<title>ls</title>
	<style>
	#ls {
	display: none;
	}

	body {
	background-image: url("/img/imagedoc-darknoise.png");
	background-color: rgb(33,33,33);
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	color: white;
	font-family: sans serif;
	}

	a {
	color: white;
	}

	#dirlist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}

	#dirlist > div {
	padding: 5px;
	max-width: 400px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	}

	#dirlist > div > video,img {
	box-shadow: 0 0 15px #000;
	max-width:100%;
	}

	#dirlist > div span {
	}

	</style>

	<div class="container">
	<h1 style="text-align: center;">¯\_(ツ)_/¯</h1>
	<div id="dirlist"></div>
	</div>

	<script>
	(function(){
	if (typeof Object.defineProperty === 'function'){
	try{Object.defineProperty(Array.prototype,'sortBy',{value:sb}); }catch(e){}
	}
	if (!Array.prototype.sortBy) Array.prototype.sortBy = sb;

	function sb(f){
	for (var i=this.length;i;){
	var o = this[--i];
	this[i] = [].concat(f.call(o,o,i),o);
	}
	this.sort(function(a,b){
	for (var i=0,len=a.length;i<len;++i){
	if (a[i]!=b[i]) return a[i]<b[i]?-1:1;
	}
	return 0;
	});
	for (var i=this.length;i;){
	this[--i]=this[i][this[i].length-1];
	}
	return this;
	}
	})();

	document.addEventListener("DOMContentLoaded", function() {
	let ls = JSON.parse(document.getElementById("ls").innerHTML);
	ls.sortBy(function(o){ return new Date(o.mtime) })
	ls.reverse()
	let fancy = ""
	let hidden = ["img", "css", "js", "audio", "favicon.ico", "index.html", "video.html"];
	for (let i of ls) {
	console.log(i);
	if (hidden.indexOf(i.name) != -1 ) {
	continue;
	}
	if (i.type === "file") {
	if (i.name.endsWith(".webm")) {
	fancy += `<div>
	<video src="/${i.name}" controls>
	</video>
	<a href="/${i.name}"><span>${i.name}</span></a>
	</div>`;
	} else if (i.name.endsWith(".jpg") \| i.name.endsWith(".png")) {
	fancy += `<div>
	<a href="/${i.name}">
	<img src="/${i.name}" alt="${i.name}">
	</span>${i.name}</span>
	</a>
	</div>`;
	} else {
	fancy += `<div><a href="/${i.name}">${i.name}</a></div>`;
	}
	} else {
	fancy += `<div><a href="/${i.name}">${i.name}</a></div>`;
	}
	}
	document.getElementById("dirlist").innerHTML = fancy;
	});

	function play_video(el) {
	console.log(el);
	if (el.pause) {
	el.play();
	} else {
	el.pause();
	}
	}
	</script>

	<div id="ls">
	location /ls {
	autoindex on;
	autoindex_format json;
	addition_types application/json;
	add_before_body /.ls_head;
	add_after_body /.ls_footer;
	add_header Content-Type text/html;
	alias /srv/http/u.wut.ee;
	index usfdauydsfuyfsdasafdiusdaouisaduiower;
	}