First commit.

README.md

@@ -0,0 +1,31 @@
+h5ai - a beautified Apache index
+================================
+
+Screenshot
+----------
+
+![screenshot](screen.jpg "screenshot")
+
+compare it to the built in index
+
+![original index](org.jpg "original index")
+
+
+Install
+-------
+
+* copy the `h5ai` folder to the web-root directory of your server
+* add the content of file `dot-htaccess` to the `.htaccess` file in the directory
+  you want to be indexed (you might have to create this file)
+
+
+License
+-------
+
+This project is licensed under the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/)
+
+It is based on the awesome [HTML5 Boilerplate](http://html5boilerplate.com) and the beautiful
+[Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228), please respect their rights.
+
+
+

dot-htaccess

@@ -0,0 +1,87 @@
+
+<IfModule mod_autoindex.c>
+
+	Options              +Indexes  +FollowSymLinks
+
+	IndexOptions         Charset=UTF-8
+	IndexOptions         FancyIndexing
+	IndexOptions         HTMLTable
+	IndexOptions         XHTML
+	IndexOptions         SuppressHTMLPreamble
+	IndexOptions         SuppressRules
+	IndexOptions         SuppressDescription
+	IndexOptions         FoldersFirst
+	IndexOptions         IgnoreCase
+	IndexOptions         IconsAreLinks
+	IndexOptions         VersionSort
+
+	DirectoryIndex       IGNORE-DEFAULT-INDEX-FILES
+	IndexOrderDefault    Ascending Name
+	IndexIgnore          h5ai  .??*  *~  *#  RCS  CVS  *,v  *,t
+
+	HeaderName           /h5ai/header.html
+	ReadmeName           /h5ai/footer.html
+
+	AddIconByType        /h5ai/icons/png.png         image/png
+	AddIconByType        /h5ai/icons/jpg.png         image/jpeg
+	AddIconByType        /h5ai/icons/gif.png         image/gif
+	AddIconByType        /h5ai/icons/ico.png         image/x-icon
+	AddIconByType        /h5ai/icons/bmp.png         image/x-ms-bmp
+
+	AddIconByType        /h5ai/icons/html.png        text/html
+	AddIconByType        /h5ai/icons/css.png         text/css
+	AddIcon              /h5ai/icons/css.png         .less
+	AddIconByType        /h5ai/icons/xml.png         application/xml
+	AddIconByType        /h5ai/icons/js.png          application/javascript  application/json
+	AddIconByType        /h5ai/icons/php.png         application/x-httpd-php
+
+	AddIconByType        /h5ai/icons/java.png        text/x-java
+	AddIconByType        /h5ai/icons/py.png          text/x-python
+	AddIconByType        /h5ai/icons/rb.png          application/x-ruby
+	AddIconByType        /h5ai/icons/cpp.png         text/x-c++src
+	AddIconByType        /h5ai/icons/hpp.png         text/x-c++hdr
+	AddIconByType        /h5ai/icons/c.png           text/x-csrc
+	AddIconByType        /h5ai/icons/h.png           text/x-chdr
+	AddIconByType        /h5ai/icons/tex.png         text/x-tex
+	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+
+	AddIcon              /h5ai/icons/log.png         log  Log  LOG
+
+	AddIconByType        /h5ai/icons/bin.png         application/java-vm
+	AddIcon              /h5ai/icons/bin.png         .so  .o
+	AddIconByType        /h5ai/icons/exe.png         application/x-executable application/x-msdos-program
+
+	AddIconByType        /h5ai/icons/makefile.png    text/x-makefile
+	AddIcon              /h5ai/icons/makefile.png    pom.xml  .pom  build.xml
+
+	AddIconByType        /h5ai/icons/pdf.png         application/pdf
+	AddIconByType        /h5ai/icons/rtf.png         text/rtf  application/rtf
+
+	AddIcon              /h5ai/icons/zip.png         .zip  .Z  .z  .jar  .war
+	AddIcon              /h5ai/icons/tar.png         .tar
+	AddIcon              /h5ai/icons/archive.png     .tar.gz  .tgz  .tar.bz2
+	AddIcon              /h5ai/icons/pdf.png         .pdf
+	AddIcon              /h5ai/icons/deb.png         .deb
+	AddIcon              /h5ai/icons/rpm.png         .rpm
+	AddIcon              /h5ai/icons/cd.png          .iso  .cue
+
+	AddIcon              /h5ai/icons/authors.png     AUTHORS
+	AddIcon              /h5ai/icons/install.png     INSTALL
+	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	AddIcon              /h5ai/icons/readme.png      README
+
+	AddIconByType        /h5ai/icons/text.png        text/*
+	AddIconByType        /h5ai/icons/image.png       image/*
+	AddIconByType        /h5ai/icons/audio.png       audio/*
+	AddIconByType        /h5ai/icons/video.png       video/*
+
+	AddIconByEncoding    /h5ai/icons/zip.png         x-compress  x-gzip  x-bzip2
+
+	AddIcon              /h5ai/icons/parent.png      ..
+	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
+	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
+
+	DefaultIcon          /h5ai/icons/unknown.png
+
+</IfModule>
+

h5ai/footer.html

@@ -0,0 +1,21 @@
+		<!-- generated code ends here -->
+		<div id="empty">empty</div>
+		<div id="special"></div>
+	</section>
+	<footer>
+		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics & CSS3">
+			<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
+			<img class="techclass" src="/h5ai/images/html5-semantics.png" alt="html5-semantics" />
+			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
+		</a>
+		<a href="http://github.com/larrrs/h5ai" target="_blank" title="html5autoindex v0.1">h5ai</a>
+		using
+		<a href="http://html5boilerplate.com" target="_blank" title="a rock-solid default for HTML5 awesome">HTML5 Boilerplate</a>
+		and
+		<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
+	</footer>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
+	<script>window.jQuery || document.write( '<script src="/h5ai/lib/jquery-1.5.min.js"><\/script>' )</script>
+	<script src="/h5ai/main.js"></script>
+</body>
+</html>

h5ai/header.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Index</title>
+	<link rel="shortcut icon" href="/h5ai/icons/folder.png" />
+	<link rel="apple-touch-icon" href="/h5ai/images/folder.png">
+	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
+	<link rel="stylesheet" type="text/css" href="/h5ai/main.css">
+</head>
+<body>
+	<nav>
+		<ul>
+			<li id="domain"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
+		</ul>
+		<div class="clearfix"></div>
+	</nav>
+	<section id="content">
+		<!--
+			The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
+			reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are
+			removed via javascript. The actual page should render as perfect HTML 5, even if the produced
+			source is not valid HTML 5.
+		-->

h5ai/lib/html5reset.css

@@ -0,0 +1,140 @@
+
+/* HTML5 ✰ Boilerplate reset */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content: ""; content: none; }
+ins { background-color: #ff9; color: #000; text-decoration: none; }
+mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+del { text-decoration: line-through; }
+abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+table { border-collapse: collapse; border-spacing: 0; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+input, select { vertical-align: middle; }
+
+body { font:13px/1.231 sans-serif; *font-size:small; }
+select, input, textarea, button { font:99% sans-serif; }
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+/*
+html { overflow-y: scroll; }
+*/
+a:hover, a:active { outline: none; }
+ul, ol { margin-left: 2em; }
+ol { list-style-type: decimal; }
+nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+td { vertical-align: top; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
+textarea { overflow: auto; } 
+.ie6 legend, .ie7 legend { margin-left: -7px; } 
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+button, input, select, textarea { margin: 0; }
+input:valid, textarea:valid   {  }
+input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
+.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
+
+
+::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
+::selection { background:#FF5E99; color:#fff; text-shadow: none; }
+a:link { -webkit-tap-highlight-color: #FF5E99; }
+button {  width: auto; overflow: visible; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+body, select, input, textarea { color: #444; }
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+a, a:active, a:visited { color: #607890; }
+a:hover { color: #036; }
+
+
+/**
+ * Primary styles
+ *
+ * Author: 
+ */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.hidden { display: none; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+@media all and (orientation:portrait) {
+
+}
+
+@media all and (orientation:landscape) {
+
+}
+
+@media screen and (max-device-width: 480px) {
+  
+  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
+}
+
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
+  -ms-filter: none !important; } 
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } 
+  tr, img { page-break-inside: avoid; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3{ page-break-after: avoid; }
+}
+
+/* END - HTML5 ✰ Boilerplate */

h5ai/main.css

@@ -0,0 +1,180 @@
+
+@import "lib/html5reset.css";
+
+
+body {
+	font-family: Ubuntu, sans-serif;
+	font-size: 16px;
+	color: #555;
+	margin: 80px 30px;
+}
+
+
+a, a:visited {
+	color: #555;
+	text-decoration: none;
+}
+a:hover {
+	color: #333;
+}
+
+
+nav {
+	position: fixed;
+	width: 100%;
+	left: 0px;
+	top: 0px;
+	font-size: 0.85em;
+	background-color: rgb(240,240,240);
+	border-bottom: 1px solid rgb(225,225,225);
+	-webkit-box-shadow: 0px 0px 30px #555;
+	-moz-box-shadow: 0px 0px 30px #555;
+	box-shadow: 0px 0px 30px #555;
+}
+nav li {
+	float: left;
+	border-right: 1px dotted rgb(225,225,225);
+	cursor: pointer;
+	opacity: 0.7;
+}
+nav li.hover, nav li.hover a {
+	background-color: rgba(255,255,255,0.5);
+	opacity: 1.0;
+}
+nav a {
+	display: block
+	height: 30px;
+	line-height: 30px;
+	padding: 4px 10px;
+}
+nav img {
+	vertical-align: bottom;
+	padding-right: 6px;
+	padding-bottom: 6px;
+}
+
+
+section#content {
+	max-width: 980px;
+	margin: 0px auto;
+}
+
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+}
+table {
+	display: block;
+}
+table tr.hover, table tr.hover a {
+	background-color: rgb(235,245,250);
+	background-color: #eeeeee;
+	color: #333;
+	cursor: pointer;
+}
+table th, table td {
+    padding: 3px 6px;
+    text-align: left;
+	border: none;
+}
+table th {
+	padding-bottom: 18px;
+	opacity: 0.4;
+}
+table th.hover {
+	cursor: pointer;
+	opacity: 0.9;
+}
+table th a, table th a:visited {
+	color: #555;
+	font-weight: normal;
+}
+table th a img {
+	width: 12px;
+	height: 12px;
+    padding: 0px 8px;
+}
+table td {
+    border: 1px solid #ddd;
+    border-left: 0px;
+    border-right: 0px;
+}
+table .icon {
+	text-align: center;
+	width: 16px;
+}
+table .icon img {
+	width: 16px;
+	height: 16px;
+	padding-top: 2px;
+}
+table .name {
+	width: 682px;
+	max-width: 682px;
+	overflow: hidden;
+	white-space: nowrap;
+}
+table .date {
+	text-align: right;
+	width: 160px;
+	min-width: 160px;
+	white-space: nowrap;
+}
+table .size {
+	text-align: right;
+	width: 70px;
+	min-width: 70px;
+	white-space: nowrap;
+}
+
+
+div#empty {
+	display: none;
+	text-align: center;
+	margin: 50px 0px;
+	color: #ddd;
+	font-size: 5em;
+	font-weight: bold;
+}
+
+
+div#special {
+	display: none;
+	text-align: center;
+	margin: 50px 0px;
+}
+
+
+footer {
+	position: fixed;
+	width: 100%;
+	left: 0px;
+	bottom: 0px;
+	padding: 10px 0px;
+	border-top: 1px solid rgb(225,225,225);
+	background-color: rgb(240,240,240);
+	color: #999;
+	font-size: 0.85em;
+	text-align: center;
+	-webkit-box-shadow: 0px 0px 30px #555;
+	-moz-box-shadow: 0px 0px 30px #555;
+	box-shadow: 0px 0px 30px #555;
+}
+
+
+#html5 {
+	position: absolute;
+	left: 6px;
+	bottom: 6px;
+	float: left;
+}
+#html5 img {
+	opacity: 0.4;
+	width: 20px;
+	height: 20px;
+}
+#html5:hover img {
+	opacity: 0.8;
+}
+

h5ai/main.js

@@ -0,0 +1,159 @@
+( function( $ ) {
+
+	var columnClasses = [ "icon", "name", "date", "size" ];
+	var defaultSortOrder = "C=N;O=A"
+	var h5aiPath = "/h5ai"
+
+
+	$( function() {
+
+		init();
+	} );
+
+
+	function init () {
+
+		convertToHtml5();
+		addBreadcrumb();
+		addColumnClasses();
+		initTableRows();
+		addSortOrderIcons();
+		//specialFiles();
+	};
+
+	
+	function convertToHtml5() {
+
+		$( "td" ).removeAttr( "align" ).removeAttr( "valign" );
+	};
+
+
+	function addBreadcrumb() {
+
+		$( "#domain span" ).text( document.domain );
+		var pathname = decodeURI( document.location.pathname );
+		var parts = pathname.split( "/" );
+		var path = "/";
+		var $ul = $( "nav ul" );
+		for ( idx in parts ) {
+			var part = parts[idx];
+			if ( part !== "" ) {
+				path += part + "/";
+				$ul.append( $( "<li class='crumb'><a href='" +  path + "'><img src='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
+			}
+		}
+
+		$( "nav li a" ).closest( "li" )
+			.hover(
+				function () {
+					$( this ).addClass( "hover" );
+				},
+				function () {
+					$( this ).removeClass( "hover" );
+				}
+			)
+			.click( function () {
+				document.location.href = $( this ).find( "a" ).attr( "href" );
+			} );
+
+		document.title = document.domain + pathname;
+	};
+
+
+	function getColumnClass( idx ) {
+
+		if ( idx >= 0 && idx < columnClasses.length ) {
+			return columnClasses[idx];
+		}
+		return "unknown";
+	};
+
+
+	function addColumnClasses() {
+
+		$( "tr" ).each( function () {
+			var colIdx = 0;
+			$( this ).find( "th,td" ).each( function () {
+				$( this ).addClass( getColumnClass( colIdx ) );
+				colIdx++;
+			} );
+		} );
+	};
+
+
+	function initTableRows() {
+
+		$( "th a" ).closest( "th" )
+			.hover(
+				function () {
+					$( this ).addClass( "hover" );
+				},
+				function () {
+					$( this ).removeClass( "hover" );
+				}
+			)
+			.click( function () {
+				document.location.href = $( this ).find( "a" ).attr( "href" );
+			} );
+		$( "td.name a" ).closest( "tr" )
+			.hover(
+				function () {
+					$( this ).addClass( "hover" );
+				},
+				function () {
+					$( this ).removeClass( "hover" );
+				}
+			)
+			.click( function () {
+				document.location.href = $( this ).find( "td.name a" ).attr( "href" );
+			} );
+		$dataRows = $( "td" ).closest( "tr" );
+		if ( $dataRows.size() === 0 || $dataRows.size() === 1 && $dataRows.find( "td.name a" ).text() === "Parent Directory" ) {
+			$( "#empty" ).show();
+		}
+	};
+
+
+	function addSortOrderIcons() {
+
+		var order = document.location.search;
+		if ( order === "" ) {
+			order = defaultSortOrder;
+		}
+		var $icon;
+		if ( order.indexOf( "O=A" ) >= 0 ) {
+			$icon = $( "<img src='" + h5aiPath + "/icons/ascending.png' class='sort' alt='ascending' />" );
+		} else {
+			$icon = $( "<img src='" + h5aiPath + "/icons/descending.png' class='sort' alt='descending' />" );
+		}
+		if ( order.indexOf( "C=N" ) >= 0 ) {
+			$( "th.name a" ).append( $icon );
+		} else if ( order.indexOf( "C=M" ) >= 0 ) {
+			$( "th.date a" ).prepend( $icon );
+		} else if ( order.indexOf( "C=S" ) >= 0 ) {
+			$( "th.size a" ).prepend( $icon );
+		}
+	};
+
+
+	function specialFiles() {
+
+		specialFile( "README", "readme.png" );
+		specialFile( "ChangeLog", "changelog.png" );
+		specialFile( "INSTALL", "install.png" );
+		specialFile( "COPYING", "copying.png" );
+		specialFile( "LICENSE", "copying.png" );
+		specialFile( "AUTHORS", "authors.png" );
+	};
+
+
+	function specialFile( name, img ) {
+
+		if ( $( "td.name a:contains(" + name + ")" ).size() > 0 ) {
+			$( "#special" )
+				.append( $( "<img src='" + h5aiPath + "/images/" + img + "' alt='readme' />" ) )
+				.show();
+		}
+	};
+
+} )( jQuery );