hai

h5ai makes browsing directories on webservers more pleasant. Directories get styled in a modern way and browsing through the folders is enhanced by different views, a breadcrumb and a tree overview.

See the demo directory.

The sources are available on GitHub where you'll also find a changelog.

Works fine with Apache httpd, lighttpd, nginx and cherokee
in Chrome, Firefox, Safari, Opera and IE7+

Installation

Webservers with PHP

Requires PHP 5.2.1+

• Copy folder _h5ai to the document root directory of your web server and make sure http://YOUR-DOMAIN.TLD/_h5ai/ is reachable. This page will give you some hints on your server's capabilities.

• Add /_h5ai/php/h5ai-index.php to the end of your webservers default index-file list. All directories that don't have a valid index file will get styled by h5ai.

  Tested webservers:

  • Apache httpd 2.2/2.4: in httpd.conf or in any directory's .htaccess file set for example:

    DirectoryIndex  index.html  index.php  /_h5ai/php/h5ai-index.php
    

  • lighttpd 1.4: in lighttpd.conf set for example:

    index-file.names += ( "index.html", "index.php", "/_h5ai/php/h5ai-index.php" )
    

  • nginx 1.2: in nginx.conf set for example:

    index  index.html  index.php  /_h5ai/php/h5ai-index.php;
    

  • cherokee 1.2: in cherokee.conf set for example:

    vserver!1!directory_index = index.html,index.php,/_h5ai/php/h5ai-index.php
    

Apache httpd with mod-autoindex

• Copy folder _h5ai to the document root directory of your web server and make sure http://YOUR-DOMAIN.TLD/_h5ai/ is reachable. This page will give you some hints on your server's capabilities.

• Add the content of file _h5ai/apache/autoindex.htaccess to the .htaccess file inside the directory you want to get styled (you might have to create this file). This directory and all its subdirectories will get styled by h5ai.

Apache httpd with mod-autoindex (user directory)

If you don't have access to the document root directory, but want to use h5ai in your home directory it's a little bit different. Let USER be your username.

• Copy folder _h5ai to the document root directory inside your home directory and make sure http://YOUR-DOMAIN.TLD/~USER/_h5ai/ is reachable. This page will give you some hints on your server's capabilities.

• In _h5ai/apache/h5ai-header.html replace all references of /_h5ai/ with /~USER/_h5ai/ (7x).

  Also update two lines in _h5ai/config.js:

  "rootAbsHref": "/~USER/",
  "h5aiAbsHref": "/~USER/_h5ai/",
  

• Add the content of file _h5ai/apache/autoindex.htaccess to the .htaccess file inside the directory you want to get styled (you might have to create this file). This directory and all its subdirectories will get styled by h5ai.

At this point h5ai should be working but you should have a look at the configuration section right below.

Configuration

config.js

The main configuration file is _h5ai/config.js. You might want to adjust some of the documented settings. The settings in this file affect all versions of h5ai.

config.php

If you are running the PHP implementation you should check _h5ai/php/config.php too. Also consider to make folder _h5ai/cache writable for your Apache server to enable some caching.

note: files or folders of name _h5ai* are hidden from the index by default.

Contact

Lars Jung
lrsjng [at] gmail [dot] com
@lrsjng

License

h5ai is provided under the terms of the MIT License.

It profits from these great projects: AmplifyJS (MIT/GPL), Faenza icon set (GPL), HTML5 ★ Boilerplate, jQuery (MIT/GPL), jQuery.fracs (MIT), jQuery.mousewheel (MIT), modernizr (MIT/BSD), Moment.js (MIT), qrcode (MIT), underscore.js (MIT)