Set version to 0.3.1.

.gitignore

@@ -0,0 +1,47 @@
+
+# Build folders to ignore
+bin
+build
+#target
+
+# Eclipse
+.classpath
+.ant-targets-build.xml
+
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.vi
+*~
+*.sass-cache
+
+# OS or Editor folders
+.DS_Store
+.cache
+.project
+.settings
+.tmproj
+nbproject
+Thumbs.db
+
+# Dreamweaver added files
+_notes
+dwsync.xml
+
+# Komodo
+*.komodoproject
+.komodotools
+
+# Folders to ignore
+.hg
+.svn
+.CVS
+intermediate
+publish
+.idea
+

README.md

@@ -1,37 +1,62 @@
-h5ai - a beautified Apache index
-================================
+# h5ai v0.3.1   ·   a beautified Apache index
 
-Screenshots
------------
 
-<a href="http://repo.larsjung.de/screens/h5ai-v0.2.1-details.png" target="_blank" style="float: left">
-	<img src="http://repo.larsjung.de/screens/h5ai-v0.2.1-details.png" width="400px" alt="screenshot" title="screenshot"/>
+## Screenshots
+
+<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-details.png" target="_blank">
+	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-details.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
 </a>
-<a href="http://repo.larsjung.de/screens/h5ai-v0.2.1-icons.png" target="_blank" style="float: right">
-	<img src="http://repo.larsjung.de/screens/h5ai-v0.2.1-icons.png" width="400px" alt="screenshot" title="screenshot" />
+&#160; &#160; &#160;
+<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-icons.png" target="_blank">
+	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-icons.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
 </a>
-<div style="clear: both"/>
 
 
-Live example
-------------
+## Live example
 
 View a [sample folder](http://repo.larsjung.de/h5ai-sample)  
 *(the files are all empty to save webspace)*
 
 
-Install
--------
+## Install
 
-1. Copy the `h5ai` folder to the web-root directory of your server or alternativly set an alias `/h5ai/` to
-   this folder.
-2. Add the content of file `dot.htaccess` to the `.htaccess` file in the directory
-   you want to be styled (you might have to create this file). This directory and any subdirectories will be
-   styled by h5ai.
+Everything you need is located in folder `target`.
+
+* Copy folder `h5ai` to the web-root directory of your server or alternativly set an alias `/h5ai/` to
+  this folder.
+* Add the content of file `dot.htaccess` to the `.htaccess` file inside the directory
+  you want to be styled (you might have to create this file). This directory and any subdirectories will be
+  styled by h5ai.
+
+Optionally add `h5ai.header.html` and/or `h5ai.footer.html` files to any of the styled folders to [display
+custom top or bottom sections](http://repo.larsjung.de/h5ai-sample/customize). The content of those files
+will be wrapped by `<header>` and `<footer>` tags.
 
 
-Changelog
----------
+## Changelog
+
+### v0.3.1
+*2011-06-24*
+
+* refactored js
+* added `folderClick` and `fileClick` callback hooks
+* fixed .emtpy style
+
+
+### v0.3
+*2011-06-23*
+
+* included build stuff, files previously found in the base directory are now located in folder `target`
+* styles and scripts are now minified
+* added Modernizr 2.0.4 for future use
+* updated jQuery to version 1.6.1
+
+
+### v0.2.3
+*2011-06-17*
+
+* more refactoring in main.js
+* ~~added custom js support, and global includes~~ *removed, only custom top and bottom sections supported*
 
 
 ### v0.2.2
@@ -57,22 +82,21 @@ Changelog
 * added icon view
 
 
-Author
-------
+## Author
 
 [Lars Jung](http://larsjung.de)  
-[h5ai on github](http://github.com/larrrs/h5ai)  
+[h5ai on github](http://github.com/lrsjng/h5ai)  
 
 
-License
--------
+## License
 
-<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a>
-
-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.
+<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a>  
+This project is licensed under the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).  
+It is based on
+[HTML5 Boilerplate](http://html5boilerplate.com),
+[jQuery](http://jquery.com),
+[Modernizr](http://www.modernizr.com) and
+[Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228),
+please respect their rights.
 
 

build.properties

@@ -0,0 +1,19 @@
+custom                           = true
+
+
+# project
+project.name                     = h5ai
+project.version                  = 0.3.1
+
+
+# src
+src.dir                          = src
+
+
+# build
+build.dir                        = target
+
+
+# libs
+lib.scripp.jar                   = tools/scripp.jar
+

build.xml

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project
+	name="h5ai"
+	basedir="."
+	xmlns:scripp="antlib:de.larsjung.scripp.ant"
+>
+	<target name="init">
+		<property file="build.properties" />
+		<tstamp>
+			<format property="build.stamp" pattern="yyyy-MM-dd-HHmmss" />
+		</tstamp>
+		<property name="build.label" value="${project.name} ${project.version} b${build.stamp}" />
+		<echo>Build: ${build.label}</echo>
+        <taskdef
+        	resource="de/larsjung/scripp/ant/antlib.xml"
+        	uri="antlib:de.larsjung.scripp.ant"
+        	classpath="${lib.scripp.jar}"
+        />
+	</target>
+
+
+	<target name="clean" depends="init">
+		<delete dir="${build.dir}" />
+	</target>
+
+
+	<target name="build" depends="clean">
+		<mkdir dir="${build.dir}" />
+		<copy todir="${build.dir}">
+		    <fileset dir="${src.dir}" />
+		</copy>
+		<replace dir="${build.dir}">
+			<replacefilter token="%BUILD%" value="${build.label}" />
+			<replacefilter token="%BUILD_NAME%" value="${project.name}" />
+			<replacefilter token="%BUILD_VERSION%" value="${project.version}" />
+			<replacefilter token="%BUILD_STAMP%" value="${build.stamp}" />
+		</replace>
+
+		<scripp.dir dir="${build.dir}/h5ai/css" />
+		<scripp.dir dir="${build.dir}/h5ai/js" />
+	</target>
+
+
+	<macrodef name="scripp.dir">
+		<attribute name="dir" />
+		<sequential>
+			<scripp:process>
+		        <fileset dir="@{dir}" includes="**/*.less,**/*.css,**/*.js" excludes="inc/**/*,**/*.min.css,**/*.min.js" />
+				<globmapper from="*.less" to="*.css" />
+		        <globmapper from="*.css" to="*.css" />
+		        <globmapper from="*.js" to="*.js" />
+			</scripp:process>
+			<delete dir="@{dir}/inc">
+				<fileset dir="@{dir}" includes="**/*.less" />
+			</delete>
+		</sequential>
+	</macrodef>
+</project>

h5ai/main.css

@@ -1,248 +0,0 @@
-
-@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: #e80;
-}
-
-
-nav {
-	position: fixed;
-	z-index: 1;
-	width: 100%;
-	left: 0;
-	top: 0;
-	font-size: 0.85em;
-	background-color: rgb(240,240,240);
-	border-bottom: 1px solid rgb(225,225,225);
-	-webkit-box-shadow: 0 0 30px #555;
-	-moz-box-shadow: 0 0 30px #555;
-	box-shadow: 0 0 30px #555;
-}
-nav li {
-	cursor: pointer;
-	opacity: 0.7;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-nav li:hover, nav li:hover a {
-	color: #e80;
-	background-color: rgba(255,255,255,0.5);
-	opacity: 1.0;
-}
-nav a {
-	display: block;
-	height: 30px;
-	line-height: 30px;
-	padding: 0 10px;
-}
-nav img {
-	vertical-align: bottom;
-	padding: 0 6px 6px 0;
-}
-nav li.crumb {
-	float: left;
-	border-right: 1px dotted rgb(225,225,225);
-}
-nav li.view {
-	float: right;
-	border-left: 1px dotted rgb(225,225,225);
-}
-
-
-#top {
-	display: none;
-	padding-bottom: 10px;
-	margin-bottom: 80px;
-	border-bottom: 2px dashed #ddd;
-}
-#bottom {
-	display: none;
-	padding-top: 10px;
-	margin-top: 80px;
-	border-top: 2px dashed #ddd;
-}
-
-
-#content {
-	max-width: 980px;
-	margin: 0 auto;
-}
-
-
-#details {
-	display: none;
-}
-#details table {
-	display: block;
-	width: 100%;
-	border-collapse: collapse;
-}
-#details tr.entry:hover, #details tr.entry:hover a {
-	background-color: rgb(235,245,250);
-	background-color: #f0f0f0;
-	color: #e80;
-	cursor: pointer;
-}
-#details th, #details td {
-	padding: 3px 6px;
-	text-align: left;
-	border: none;
-}
-#details th {
-	padding-bottom: 18px;
-	opacity: 0.4;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-#details th.header:hover, #details th.header:hover a {
-	color: #555;
-	cursor: pointer;
-	opacity: 0.9;
-}
-#details th a, #details th a:visited {
-	color: #555;
-	font-weight: normal;
-}
-#details th a img {
-	width: 12px;
-	height: 12px;
-	padding: 0 8px;
-}
-#details td {
-	border: 1px solid #ddd;
-	border-left: none;
-	border-right: none;
-}
-#details .icon {
-	text-align: center;
-	width: 16px;
-}
-#details .icon img {
-	width: 16px;
-	height: 16px;
-	padding-top: 2px;
-}
-#details .name {
-	width: 682px;
-	max-width: 682px;
-	overflow: hidden;
-	white-space: nowrap;
-}
-#details .date {
-	text-align: right;
-	width: 160px;
-	min-width: 160px;
-	white-space: nowrap;
-}
-#details .size {
-	text-align: right;
-	width: 70px;
-	min-width: 70px;
-	white-space: nowrap;
-}
-#details .empty {
-	text-align: center;
-	margin: 50px 0;
-	color: #ddd;
-	font-size: 5em;
-	font-weight: bold;
-}
-
-
-#icons {
-	display: none;
-	padding: 10px;
-	border: 1px solid #eee;
-	border-radius: 15px;
-}
-#icons .entry {
-	margin: 8px;
-	padding: 8px;
-	width: 100px;
-	height: 120px;
-	float: left;
-	text-align: center;
-	overflow: hidden;
-	border-radius: 5px;
-	cursor: pointer;
-	border: 1px solid rgba(0,0,0,0);
-}
-#icons .entry:hover {
-	color: #e80;
-	border-color: #eee;
-	-webkit-box-shadow: 0 0 20px #555;
-	-moz-box-shadow: 0 0 20px #555;
-	box-shadow: 0 0 20px #999;
-}
-#icons .entry img {
-	width: 48px;
-	height: 48px;
-	margin-bottom: 8px;
-}
-
-
-footer {
-	position: fixed;
-	z-index: 1;
-	width: 100%;
-	left: 0;
-	bottom: 0;
-	padding: 10px 0;
-	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: 0 0 30px #555;
-	-moz-box-shadow: 0 0 30px #555;
-	box-shadow: 0 0 30px #555;
-}
-footer a, footer a:visited {
-	color: #555;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-footer a:hover {
-	color: #e80;
-}
-
-
-#html5 {
-	position: absolute;
-	left: 6px;
-	bottom: 6px;
-	float: left;
-}
-#html5 img {
-	width: 20px;
-	height: 20px;
-	opacity: 0.4;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-#html5:hover img {
-	opacity: 0.8;
-}
-

h5ai/main.js

@@ -1,245 +0,0 @@
-( function( $ ) {
-
-
-	/*******************************
-	 * init after dom load
-	 *******************************/
-
-	$( function() {
-
-		checkViewmode();
-		addBreadcrumb();
-		addTopAndBottom();
-		initViews();
-	} );
-
-
-
-
-	/*******************************
-	 * config
-	 *******************************/
-
-	var columnClasses = [ "icon", "name", "date", "size" ];
-	var defaultSortOrder = "C=N;O=A"
-	var h5aiPath = "/h5ai"
-	var viewmodes = [ "details", "icons" ];
-
-
-
-
-	/*******************************
-	 * local stored viewmode
-	 *******************************/
-
-	function getViewmode() {
-	
-		var viewmode = localStorage.getItem( "h5ai.viewmode" );
-		if ( $.inArray( viewmode, viewmodes ) ) {
-			return viewmode;
-		};
-		return viewmodes[0];
-	};
-
-
-	function setViewmode( viewmode ) {
-	
-		localStorage.setItem( "h5ai.viewmode", viewmode );
-		checkViewmode();
-	};
-
-	
-	function checkViewmode() {
-		
-		if ( getViewmode() === "icons" ) {
-			$( "#details" ).hide();
-			$( "#icons" ).show();
-		} else {
-			$( "#details" ).show();
-			$( "#icons" ).hide();
-		}
-	};
-
-
-
-
-	/*******************************
-	 * breadcrumb
-	 *******************************/
-
-	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" )
-			.click( function () {
-				document.location.href = $( this ).find( "a" ).attr( "href" );
-			} );
-
-		document.title = document.domain + pathname;
-	};
-
-
-
-
-	/*******************************
-	 * details view
-	 *******************************/
-
-	function convertToHtml5() {
-
-		$( "#details td" ).removeAttr( "align" ).removeAttr( "valign" );
-	};
-
-
-	function getColumnClass( idx ) {
-
-		if ( idx >= 0 && idx < columnClasses.length ) {
-			return columnClasses[idx];
-		}
-		return "unknown";
-	};
-
-
-	function addColumnClasses() {
-
-		$( "#details tr" ).each( function () {
-			var colIdx = 0;
-			$( this ).find( "th,td" ).each( function () {
-				$( this ).addClass( getColumnClass( colIdx ) );
-				colIdx++;
-			} );
-		} );
-	};
-
-
-	function initTableRows() {
-
-		$( "#details th a" ).closest( "th" )
-			.addClass( "header" )
-			.click( function () {
-				document.location.href = $( this ).find( "a" ).attr( "href" );
-			} );
-		$( "#details td.name a" ).closest( "tr" )
-			.addClass( "entry" )
-			.click( function () {
-				document.location.href = $( this ).find( "td.name a" ).attr( "href" );
-			} );
-		$dataRows = $( "#details td" ).closest( "tr" );
-		if ( $dataRows.size() === 0 || $dataRows.size() === 1 && $dataRows.find( "td.name a" ).text() === "Parent Directory" ) {
-			$( "#details" ).append( $( "<div class='empty'>empty</div>" ) );
-		}
-	};
-
-
-	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 ) {
-			$( "#details th.name a" ).append( $icon );
-		} else if ( order.indexOf( "C=M" ) >= 0 ) {
-			$( "#details th.date a" ).prepend( $icon );
-		} else if ( order.indexOf( "C=S" ) >= 0 ) {
-			$( "#details th.size a" ).prepend( $icon );
-		}
-	};
-
-
-	function initDetailsView() {
-
-		convertToHtml5();
-		addColumnClasses();
-		initTableRows();
-		addSortOrderIcons();
-	};
-
-
-
-
-	/*******************************
-	 * icons view
-	 *******************************/
-
-	function initIconsView() {
-
-		var $div = $( "<div></div>" );
-		$( "#details td.name a" ).closest( "tr" ).each( function () {
-			var $tr = $( this );
-			var icon = $tr.find( "td.icon img" ).attr( "src" ).replace( "icon", "image" );
-			var name = $tr.find( "td.name a" ).text();
-			$( "<div class=\"entry\"></div>" )
-				.append( $( "<img src='" + icon + "' />" ) )
-				.append( $( "<div class='label'>" + name + "</div>" ) )
-				.click( function () {
-					document.location.href = $tr.find( "td.name a" ).attr( "href" );
-				} ).
-				appendTo( $div );
-		} );
-		$div.append( $( "<div class='clearfix'></div>" ) );
-		$( "#icons" ).append( $div );
-	};
-
-
-
-
-	/*******************************
-	 * init views
-	 *******************************/
-
-	function initViews() {
-
-		initDetailsView();
-		initIconsView();
-
-		$( "#viewdetails" ).closest( "li" )
-			.click( function () {
-				setViewmode( "details" );
-			} );
-		$( "#viewicons" ).closest( "li" )
-			.click( function () {
-				setViewmode( "icons" );
-			} );
-	};
-
-
-
-
-	/*******************************
-	 * top and bottom messages
-	 *******************************/
-
-	function addTopAndBottom() {
-
-		$( "#top" ).load( "h5ai.top.html", function( response, status, xhr ) {
-			if (status != "error") {
-				$( "#top" ).show();
-			}
-		} );
-		$( "#bottom" ).load( "h5ai.bottom.html", function( response, status, xhr ) {
-			if (status != "error") {
-				$( "#bottom" ).show();
-			}
-		} );
-	};
-
-} )( jQuery );

src/dot.htaccess

@@ -0,0 +1,137 @@
+################################
+# %BUILD_NAME% %BUILD_VERSION%
+# customized .htaccess
+################################
+
+
+# Options  +Indexes
+# Options  +FollowSymLinks
+
+
+################################
+# cache images for 52 weeks
+################################
+
+<IfModule mod_headers.c>
+	<FilesMatch "\.png$">
+		Header set Cache-Control "max-age=31449600, public"
+	</FilesMatch>
+</IfModule>
+
+
+################################
+# style auto index
+################################
+
+<IfModule mod_autoindex.c>
+
+	################################
+	# uncomment the following line to force directory listing
+	# even for directories with valid index files
+	################################
+
+	# DirectoryIndex       IGNORE-DEFAULT-INDEX-FILES
+
+
+	################################
+	# h5ai header and footer
+	################################
+
+	HeaderName           /h5ai/header.html
+	ReadmeName           /h5ai/footer.html
+
+
+	################################
+	# hide h5ai folder and config files from index
+	################################
+
+	IndexIgnore          h5ai  h5ai.header.html  h5ai.footer.html
+
+
+	################################
+	# table options
+	################################
+
+	IndexOrderDefault    Ascending Name
+
+	IndexOptions         Charset=UTF-8
+	IndexOptions         FancyIndexing
+	IndexOptions         HTMLTable
+	IndexOptions         XHTML
+	IndexOptions         SuppressHTMLPreamble
+	IndexOptions         SuppressRules
+	IndexOptions         SuppressDescription
+	IndexOptions         FoldersFirst
+	IndexOptions         IgnoreCase
+	IndexOptions         IconsAreLinks
+	IndexOptions         VersionSort
+	IndexOptions         NameWidth=*
+
+
+	################################
+	# icon mapping
+	################################
+
+	AddIcon              /h5ai/icons/parent.png      ..
+	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
+	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
+
+	AddIcon              /h5ai/icons/readme.png      README
+	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	AddIcon              /h5ai/icons/install.png     INSTALL
+	AddIcon              /h5ai/icons/authors.png     AUTHORS
+	AddIcon              /h5ai/icons/log.png         LOG  Log  log
+
+	AddIcon              /h5ai/icons/css.png         .less
+	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
+	AddIcon              /h5ai/icons/bin.png         .so  .o
+
+	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
+
+	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
+	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/py.png          text/x-python
+	AddIconByType        /h5ai/icons/rb.png          application/x-ruby
+	AddIconByType        /h5ai/icons/java.png        text/x-java
+	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/pdf.png         application/pdf
+
+	AddIconByType        /h5ai/icons/rtf.png         text/rtf  application/rtf
+	AddIconByType        /h5ai/icons/tex.png         text/x-tex
+	AddIconByType        /h5ai/icons/makefile.png    text/x-makefile
+
+	AddIconByType        /h5ai/icons/bin.png         application/java-vm
+	AddIconByType        /h5ai/icons/exe.png         application/x-executable application/x-msdos-program
+
+	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
+
+	DefaultIcon          /h5ai/icons/unknown.png
+
+</IfModule>
+

src/h5ai/css/inc/mixins.less

@@ -0,0 +1,87 @@
+
+.border-radius ( @radius: 5px ) {
+	-webkit-border-radius: @radius;
+	-moz-border-radius: @radius;
+	border-radius: @radius;
+}
+
+
+.border-top-right-radius ( @radius: 5px ) {
+	-webkit-border-top-right-radius: @radius;
+	-moz-border-radius-topright: @radius;
+	border-top-right-radius: @radius;
+}
+
+
+.border-bottom-right-radius ( @radius: 5px ) {
+	-webkit-border-bottom-right-radius: @radius;
+	-moz-border-radius-bottomright: @radius;
+	border-bottom-right-radius: @radius;
+}
+
+
+.box-shadow ( @x: 10px, @y: 10px, @blur: 5px, @color: #ccc ) {
+	-webkit-box-shadow: @x @y @blur @color;
+	-moz-box-shadow: @x @y @blur @color;
+	box-shadow: @x @y @blur @color;
+}
+
+
+.transition ( @transitions ) {
+	-webkit-transition: @transitions;
+	-moz-transition: @transitions;
+	-o-transition: @transitions;
+	transition: @transitions;
+}
+
+
+.transform ( @transforms ) {
+	-webkit-transform: @transforms;
+	-moz-transform: @transforms;
+	-o-transform: @transforms;
+	transform: @transforms;
+}
+
+
+.rhythm ( @height, @size ) {
+
+	@base: @size / 16;
+	font-size: 1% * @base * 100;
+	@factor: @height / @size;
+	@rhythm: 1em * @factor;
+
+	p {
+		font-size: 1em;
+		line-height: @rhythm;
+		margin-top: @rhythm;
+		margin-bottom: @rhythm;
+	}
+
+	h1 {
+		font-size: @rhythm;
+		line-height: 1em;
+		margin-bottom: 1em;
+		margin-top: 1em;
+	}
+
+	h2 {
+		font-size: @rhythm / 1.1;
+		line-height: 1.1em;
+		margin-bottom: 1.1em;
+		margin-top: 1.1em;
+	}
+
+	h3 {
+		font-size: @rhythm / 1.2;
+		line-height: 1.2em;
+		margin-bottom: 1.2em;
+		margin-top: 1.2em;
+	}
+
+	h4 {
+		font-size: @rhythm / 1.3;
+		line-height: 1.3em;
+		margin-bottom: 1.3em;
+		margin-top: 1.3em;
+	}
+}

src/h5ai/css/main.less

@@ -0,0 +1,244 @@
+
+@import "inc/html5reset";
+@import "inc/mixins";
+
+
+body {
+	font-family: Ubuntu, sans-serif;
+	font-size: 16px;
+	color: #555;
+	margin: 80px 30px;
+}
+
+
+a, a:visited {
+	color: #555;
+	text-decoration: none;
+
+	&:hover {
+		color: #e80;
+	}
+}
+
+
+body > nav {
+	position: fixed;
+	z-index: 1;
+	width: 100%;
+	left: 0;
+	top: 0;
+	font-size: 0.85em;
+	background-color: rgb(240,240,240);
+	border-bottom: 1px solid rgb(225,225,225);
+	.box-shadow( 0, 0, 30px, #555 );
+
+	li {
+		cursor: pointer;
+		opacity: 0.7;
+		.transition( all 0.2s ease-in-out );
+		
+		&.crumb {
+			float: left;
+			border-right: 1px dotted rgb(225,225,225);
+		}
+		&.view {
+			float: right;
+			border-left: 1px dotted rgb(225,225,225);
+		}
+		&:hover, &:hover a {
+			color: #e80;
+			background-color: rgba(255,255,255,0.5);
+			opacity: 1.0;
+		}
+	}
+	a {
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+	}
+	img {
+		width: 16px;
+		height: 16px;
+		vertical-align: bottom;
+		padding: 0 6px 6px 0;
+	}
+}
+
+
+#content {
+	max-width: 980px;
+	margin: 0 auto;
+
+	> header {
+		display: none;
+		padding-bottom: 10px;
+		margin-bottom: 80px;
+		border-bottom: 2px dashed #ddd;
+	}
+	> footer {
+		display: none;
+		padding-top: 10px;
+		margin-top: 80px;
+		border-top: 2px dashed #ddd;
+	}
+}
+
+
+#details {
+	display: none;
+
+	table {
+		display: block;
+		width: 100%;
+		border-collapse: collapse;
+
+		tr.entry:hover, tr.entry:hover a {
+			background-color: #f0f0f0;
+			color: #e80;
+			cursor: pointer;
+		}
+		th, td {
+			padding: 3px 6px;
+			text-align: left;
+			border: none;
+		}
+		th {
+			padding-bottom: 18px;
+			opacity: 0.4;
+			.transition( all 0.2s ease-in-out );
+	
+			&.header:hover, &.header:hover a {
+				color: #555;
+				cursor: pointer;
+				opacity: 0.9;
+			}
+			a, a:visited {
+				color: #555;
+				font-weight: normal;
+	
+				img {
+					width: 12px;
+					height: 12px;
+					padding: 0 8px;
+				}
+			}
+		}
+		td {
+			border: 1px solid #ddd;
+			border-left: none;
+			border-right: none;
+		}
+		.icon {
+			text-align: center;
+			width: 16px;
+	
+			img {
+				width: 16px;
+				height: 16px;
+				padding-top: 2px;
+			}
+		}
+		.name {
+			width: 682px;
+			max-width: 682px;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+		.date {
+			text-align: right;
+			width: 160px;
+			min-width: 160px;
+			white-space: nowrap;
+		}
+		.size {
+			text-align: right;
+			width: 70px;
+			min-width: 70px;
+			white-space: nowrap;
+		}
+	}
+	.empty {
+		text-align: center;
+		margin: 50px 0;
+		color: #ddd;
+		font-size: 5em;
+		font-weight: bold;
+	}
+}
+
+
+#icons {
+	display: none;
+	padding: 10px;
+	border: 1px solid #eee;
+	border-radius: 15px;
+
+	.entry {
+		margin: 8px;
+		padding: 8px;
+		width: 100px;
+		height: 120px;
+		float: left;
+		text-align: center;
+		overflow: hidden;
+		border-radius: 5px;
+		cursor: pointer;
+		border: 1px solid rgba(0,0,0,0);
+
+		&:hover {
+			color: #e80;
+			border-color: #eee;
+			.box-shadow( 0, 0, 20px, #999 );
+		}
+		img {
+			width: 48px;
+			height: 48px;
+			margin-bottom: 8px;
+		}
+	}
+}
+
+
+body > footer {
+	position: fixed;
+	z-index: 1;
+	width: 100%;
+	left: 0;
+	bottom: 0;
+	padding: 10px 0;
+	border-top: 1px solid rgb(225,225,225);
+	background-color: rgb(240,240,240);
+	color: #999;
+	font-size: 0.85em;
+	text-align: center;
+	.box-shadow( 0, 0, 30px, #555 );
+
+	a, a:visited {
+		color: #555;
+		.transition( all 0.2s ease-in-out );
+
+		&:hover {
+			color: #e80;
+		}
+	}
+}
+
+
+#html5 {
+	position: absolute;
+	left: 6px;
+	bottom: 6px;
+	float: left;
+
+	img {
+		width: 20px;
+		height: 20px;
+		opacity: 0.4;
+		.transition( all 0.2s ease-in-out );
+	}
+	&:hover img {
+		opacity: 0.8;
+	}
+}
+

src/h5ai/footer.html

@@ -0,0 +1,23 @@
+			<!-- generated code ends here -->
+		</section>
+		<section id="icons"></section>
+		<footer></footer>
+	</section>
+	<footer>
+		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & 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-storage.png" alt="html5-storage" />
+			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
+		</a>
+		<a href="http://github.com/lrsjng/h5ai" target="_blank" title="%BUILD_NAME% %BUILD_VERSION%">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.6.1/jquery.min.js"></script>
+	<script>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery-1.6.1.min.js"><\/script>' )</script>
+	<script src="/h5ai/js/main.js"></script>
+</body>
+</html>

src/h5ai/header.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="no-js">
+<head>
+	<meta charset="utf-8">
+	<title>Directory index · styled with h5ai</title>
+	<meta name="h5ai-version" content="%BUILD_NAME% %BUILD_VERSION%">
+	<meta name="description" content="Directory index styled with h5ai (http://github.com/lrsjng/h5ai)">
+	<meta name="keywords" content="directory, index, autoindex, h5ai">
+	<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/css/main.css">
+	<script src="/h5ai/js/lib/modernizr-2.0.4.min.js"></script>
+</head>
+<body>
+	<nav>
+		<ul>
+			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
+			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
+		</ul>
+		<div class="clearfix"></div>
+	</nav>
+	<section id="content">
+		<header></header>
+		<section id="details">
+			<!--
+				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.
+			-->