Some fixes and colored links.

README.md

@@ -1,44 +1,67 @@
 h5ai - a beautified Apache index
 ================================
 
-Screenshot
-----------
+Screenshots
+-----------
 
-<img
-	width="800"
+<a href="http://repo.larsjung.de/screens/h5ai.png"><img
+	width="400"
 	src="http://repo.larsjung.de/screens/h5ai.png"
 	alt="screenshot"
 	title="screenshot"
 	style="border: 1px solid #ccc"
-/>
+/></a>
 
-
-compare it to apache's built in autoindex:
-
-<img
-	width="800"
-	src="http://repo.larsjung.de/screens/ai.png"
-	alt="apache autoindex"
-	title="apache autoindex"
+<a href="http://repo.larsjung.de/screens/h5ai-0.2.png"><img
+	width="400"
+	src="http://repo.larsjung.de/screens/h5ai-0.2.png"
+	alt="screenshot"
+	title="screenshot"
 	style="border: 1px solid #ccc"
-/>
+/></a>
 
 
 Live example
 ------------
 
-For a live experience browse [here](http://repo.larsjung.de/h5ai-sample)  
+View a [sample folder](http://repo.larsjung.de/h5ai-sample)  
 *(the files are all empty to save webspace)*
 
 
 Install
 -------
 
-* Copy the `h5ai` folder 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 in the directory
-  you want to be indexed (you might have to create this file). This directory and any subdirectories will be
-  styled.
+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 indexed (you might have to create this file). This directory and any subdirectories will be
+   styled.
+
+
+Changelog
+---------
+
+### v0.2.1
+*2011-06-16*
+
+* fixed croped filenames
+* fixed missing .png extension in header
+* removed .html extension from Header-/ReadmeName references in dot.htaccess
+* added some color to the links
+* added changelog
+
+### v0.2
+*2011-06-15*
+
+* added icon view
+
+
+Author
+------
+
+Lars Jung  
+[project site](http://github.com/larrrs/h5ai)  
+[website](http://larsjung.de)
 
 
 License
@@ -53,4 +76,3 @@ It is based on the awesome [HTML5 Boilerplate](http://html5boilerplate.com) and
 [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228), please respect their rights.
 
 
-

dot-htaccess

@@ -1,87 +0,0 @@
-
-<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>
-

dot.htaccess

@@ -16,8 +16,8 @@
 	# h5ai header and footer
 	################################
 
-	HeaderName           /h5ai/header.html
-	ReadmeName           /h5ai/footer.html
+	HeaderName           /h5ai/header
+	ReadmeName           /h5ai/footer
 
 
 	################################
@@ -33,7 +33,7 @@
 
 	IndexOrderDefault    Ascending Name
 
-	# IndexOptions         Charset=UTF-8
+	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable
 	IndexOptions         XHTML
@@ -44,21 +44,26 @@
 	IndexOptions         IgnoreCase
 	IndexOptions         IconsAreLinks
 	IndexOptions         VersionSort
+	IndexOptions         NameWidth=*
 
 
 	################################
 	# icon mapping
 	################################
 
-	AddIcon              /h5ai/icons/log.png         log  Log  LOG
-	AddIcon              /h5ai/icons/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/install.png     INSTALL
-	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	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/makefile.png    .pom  pom.xml  build.xml
 	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
@@ -105,10 +110,6 @@
 
 	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

@@ -3,12 +3,13 @@
 		<section id="h5ai-bottom"></section>
 	</section>
 	<footer>
-		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics & CSS3">
+		<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/larrrs/h5ai" target="_blank" title="html5autoindex v0.1.1">h5ai</a>
+		<a href="http://github.com/larrrs/h5ai" target="_blank" title="h5ai v0.2.1">h5ai</a>
 		using
 		<a href="http://html5boilerplate.com" target="_blank" title="a rock-solid default for HTML5 awesome">HTML5 Boilerplate</a>
 		and

h5ai/header.html

@@ -11,7 +11,9 @@
 <body>
 	<nav>
 		<ul>
-			<li id="domain"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="icons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
+			<li id="details" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
 		</ul>
 		<div class="clearfix"></div>
 	</nav>

h5ai/main.css

@@ -15,7 +15,7 @@ a, a:visited {
 	text-decoration: none;
 }
 a:hover {
-	color: #333;
+	color: #e80;
 }
 
 
@@ -31,13 +31,16 @@ nav {
 	-moz-box-shadow: 0px 0px 30px #555;
 	box-shadow: 0px 0px 30px #555;
 }
-nav li.crumb {
-	float: left;
-	border-right: 1px dotted rgb(225,225,225);
+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.crumb:hover, nav li.crumb:hover a {
+nav li:hover, nav li:hover a {
+	color: #e80;
 	background-color: rgba(255,255,255,0.5);
 	opacity: 1.0;
 }
@@ -52,6 +55,14 @@ nav img {
 	padding-right: 6px;
 	padding-bottom: 6px;
 }
+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);
+}
 
 
 section#h5ai-top {
@@ -85,8 +96,8 @@ table {
 }
 table tr.entry:hover, table tr.entry:hover a {
 	background-color: rgb(235,245,250);
-	background-color: #eeeeee;
-	color: #333;
+	background-color: #f0f0f0;
+	color: #e80;
 	cursor: pointer;
 }
 table th, table td {
@@ -97,8 +108,13 @@ table th, table td {
 table 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;
 }
-table th.header:hover {
+table th.header:hover, table th.header:hover a {
+	color: #555;
 	cursor: pointer;
 	opacity: 0.9;
 }
@@ -155,6 +171,37 @@ div#empty {
 }
 
 
+#box {
+	padding: 10px;
+	border: 1px solid #eee;
+	border-radius: 15px;
+}
+#box .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);
+}
+#box .entry:hover {
+	color: #e80;
+	border-color: #eee;
+	-webkit-box-shadow: 0px 0px 20px #555;
+	-moz-box-shadow: 0px 0px 20px #555;
+	box-shadow: 0px 0px 20px #999;
+}
+#box .entry img {
+	width: 48px;
+	height: 48px;
+	margin: 0px 0px 8px 0px;
+}
+
+
 section#special {
 	display: none;
 	text-align: center;
@@ -177,6 +224,16 @@ footer {
 	-moz-box-shadow: 0px 0px 30px #555;
 	box-shadow: 0px 0px 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 {
@@ -186,9 +243,13 @@ footer {
 	float: left;
 }
 #html5 img {
-	opacity: 0.4;
 	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

@@ -3,6 +3,7 @@
 	var columnClasses = [ "icon", "name", "date", "size" ];
 	var defaultSortOrder = "C=N;O=A"
 	var h5aiPath = "/h5ai"
+	var views = [ "details", "icons" ];
 
 
 	$( function() {
@@ -19,9 +20,11 @@
 		initTableRows();
 		addSortOrderIcons();
 		addTopAndBottom();
+		initViews();
+		checkView();
 	};
 
-	
+
 	function convertToHtml5() {
 
 		$( "td" ).removeAttr( "align" ).removeAttr( "valign" );
@@ -39,12 +42,11 @@
 			var part = parts[idx];
 			if ( part !== "" ) {
 				path += part + "/";
-				$ul.append( $( "<li><a href='" +  path + "'><img src='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
+				$ul.append( $( "<li class=\"crumb\"><a href='" +  path + "'><img src='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
 			}
 		}
 
 		$( "nav li a" ).closest( "li" )
-			.addClass( "crumb" )
 			.click( function () {
 				document.location.href = $( this ).find( "a" ).attr( "href" );
 			} );
@@ -129,4 +131,65 @@
 		} );
 	};
 
+
+	function checkView() {
+		
+		if ( getView() === "icons" ) {
+			$( "#content table" ).hide();
+			$( "#content #empty" ).hide();
+			$( "#content #box" ).show();
+		} else {
+			$( "#content table" ).show();
+			$( "#content #empty" ).show();
+			$( "#content #box" ).hide();
+		}
+	};
+
+
+	function getView() {
+	
+		var view = localStorage.getItem( "h5ai.view" );
+		if ( $.inArray( view, views ) ) {
+			return view;
+		};
+		return views[0];
+	};
+
+
+	function setView( view ) {
+	
+		localStorage.setItem( "h5ai.view", view );
+		checkView();
+	};
+
+	
+	function initViews() {
+
+		var $box = $( "<div id=\"box\"></div>" );
+		$( "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( $box );
+		} );
+		$box.append( $( "<div class=\"clearfix\"></div>" ) );
+		$( "#content table" ).after( $box );
+
+
+		$( "#details" ).closest( "li" )
+			.click( function () {
+				setView( "details" );
+			} );
+		$( "#icons" ).closest( "li" )
+			.click( function () {
+				setView( "icons" );
+			} );
+	};
+
 } )( jQuery );