# Nginx-Fancyindex-Theme
A responsive theme for Nginx Fancyindex module. Minimal, modern and simple.
Comes with a search form, aims to handle thousands of files without any problems.

The fancyindex module can be found [here](https://github.com/aperezdc/ngx-fancyindex).
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  - Root of the website (in English or in French)
[DIR]Nginx-Fancyindex-Theme-dark/2018-02-09 15:01 - A open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[DIR]Nginx-Fancyindex-Theme-light/2018-02-09 15:01 - A open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[DIR]screenshots/2018-02-09 15:16 -  
[TXT]HEADER.md2016-06-28 21:04 271  
[   ]LICENSE2017-03-06 14:13 1.1K 
[IMG]Nginx-Fancyindex-Theme__example1.png2016-06-28 21:04 211KA open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[IMG]Nginx-Fancyindex-Theme__example2.png2016-06-28 21:04 70KA open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[IMG]Nginx-Fancyindex-Theme__example3.png2016-06-28 21:04 36KA open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[IMG]Nginx-Fancyindex-Theme__example4.png2018-02-09 15:09 80KA open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[IMG]Nginx-Fancyindex-Theme__example5.png2018-02-09 15:09 80KA open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[IMG]Nginx-Fancyindex-Theme__example6.png2018-02-09 15:15 70KA open-source, clean and pretty theme for the FancyIndex module for the nginx webserver
[TXT]README.md2018-02-09 15:18 6.5KSome details about this page
[   ]_config.yml2017-03-06 14:13 26  
[   ]fancyindex.conf2018-02-09 15:01 520  
# Nginx-Fancyindex-Theme
A responsive theme for [Nginx](https://www.nginx.org/) Fancyindex module. Minimal, modern and simple.
Comes with a search form, aims to handle thousands of files without any problems.

The fancyindex module can be found [here](https://github.com/aperezdc/ngx-fancyindex) (by @aperezdc).

[![made-for-nginx](https://img.shields.io/badge/Made%20for-nginx-1f425f.svg)](https://www.nginx.org/)

### Demonstration of the Light theme:
![Demo #5](screenshots/Nginx-Fancyindex-Theme__example5.png "Example of Nginx-Fancyindex-Theme-light")

## Usage

1. Make sure you have the fancyindex module compiled with nginx, either by compiling it yourself or installing nginx via the full distribution (paquet ``nginx-extras``).
2. Include the content of [fancyindex.conf](fancyindex.conf) in your location directive (``location / {.....}``) in your nginx config (usually ``nginx.conf``).
3. Move the ``Nginx-Fancyindex-Theme/`` folder to the root of the site directory.
4. Restart/reload nginx.
5. Check that it's working, and enjoy!
6. A new feature is the automatic inclusion of `HEADER.md` and `README.md` file from the current directory (if any), as shown in the example above. It uses [JQuery](https://jquery.com/) and [ShowDown.js](https://github.com/showdownjs/showdown/), it is badly written but it works perfectly! I wanted this feature as I have it for Apache (see [this project](https://bitbucket.org/lbesson/autoindex-strapdown)).

## Configuration

A standard config looks something like this (use `-light` for the default light theme, or `-dark` for a dark theme):

```bash
fancyindex on;
fancyindex_localtime on;
fancyindex_exact_size off;
# Specify the path to the header.html and foother.html files (server-wise)
fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";
fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";
# Ignored files will not show up in the directory listing, but will still be public.
fancyindex_ignore "examplefile.html";
# Making sure folder where these files are do not show up in the listing.
fancyindex_ignore "Nginx-Fancyindex-Theme-light";
# Maximum file name length in bytes, change as you like.
fancyindex_name_length 255;
```

If you want to conserve a few more bytes in network transmissions enable gzip on the served assets.

```bash
# Enable gzip compression.
  gzip on;

  # Compression level (1-9).
  # 5 is a perfect compromise between size and CPU usage, offering about
  # 75% reduction for most ASCII files (almost identical to level 9).
  gzip_comp_level    5;

  # Don't compress anything that's already small and unlikely to shrink much
  # if at all (the default is 20 bytes, which is bad as that usually leads to
  # larger files after gzipping).
  gzip_min_length    256;

  # Compress data even for clients that are connecting to us via proxies,
  # identified by the "Via" header (required for CloudFront).
  gzip_proxied       any;

  # Tell proxies to cache both the gzipped and regular version of a resource
  # whenever the client's Accept-Encoding capabilities header varies;
  # Avoids the issue where a non-gzip capable client (which is extremely rare
  # today) would display gibberish if their proxy gave them the gzipped version.
  gzip_vary          on;

  # Compress all output labeled with one of the following MIME-types.
  gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
  # text/html is always compressed by gzip module

  # This should be turned on if you are going to have pre-compressed copies (.gz) of
  # static files available. If not it should be left off as it will cause extra I/O
  # for the check. It is best if you enable this in a location{} block for
  # a specific directory, or on an individual server{} level.
  # gzip_static on;
```

> Reference: [H5BP Nginx Server Config](https://github.com/h5bp/server-configs-nginx/blob/master/nginx.conf)

## Examples
### Showing a list of files (without search):
![Demo #2](screenshots/Nginx-Fancyindex-Theme__example2.png "Example of Nginx-Fancyindex-Theme")

---

### Filter a list of files (with search):
![Demo #1](screenshots/Nginx-Fancyindex-Theme__example1.png "Example of Nginx-Fancyindex-Theme")

---

### Filter a list of directories (with search):
![Demo #3](screenshots/Nginx-Fancyindex-Theme__example3.png "Example of Nginx-Fancyindex-Theme")

---

### Filter a list of directories (with search) -- Dark theme:
It also shows the automatic inclusion of `HEADER.md` file and `README.md` file.

![Demo #4](screenshots/Nginx-Fancyindex-Theme__example4.png "Example of Nginx-Fancyindex-Theme-dark")

### Include HEADER and README files automatically:
Another demo:

![Demo #6](screenshots/Nginx-Fancyindex-Theme__example6.png "Example of Nginx-Fancyindex-Theme-light")

---

### :scroll: License ? [![GitHub license](https://img.shields.io/github/license/Naereen/Nginx-Fancyindex-Theme.svg)](https://github.com/Naereen/Nginx-Fancyindex-Theme/blob/master/LICENSE)
[MIT Licensed](https://lbesson.mit-license.org/) (file [LICENSE](LICENSE)).
© [Lilian Besson](https://GitHub.com/Naereen), 2016-18.

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Naereen/Nginx-Fancyindex-Theme/graphs/commit-activity)
[![Ask Me Anything !](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg)](https://GitHub.com/Naereen/ama)
[![Analytics](https://ga-beacon.appspot.com/UA-38514290-17/github.com/Naereen/Nginx-Fancyindex-Theme/README.md?pixel)](https://GitHub.com/Naereen/Nginx-Fancyindex-Theme/)

[![ForTheBadge built-with-swag](http://ForTheBadge.com/images/badges/built-with-swag.svg)](https://GitHub.com/Naereen/)
[![ForTheBadge uses-js](http://ForTheBadge.com/images/badges/uses-js.svg)](http://ForTheBadge.com)
[![ForTheBadge uses-html](http://ForTheBadge.com/images/badges/uses-html.svg)](http://ForTheBadge.com)
[![ForTheBadge uses-css](http://ForTheBadge.com/images/badges/uses-css.svg)](http://ForTheBadge.com)
[![ForTheBadge uses-badges](http://ForTheBadge.com/images/badges/uses-badges.svg)](http://ForTheBadge.com)
[![ForTheBadge uses-git](http://ForTheBadge.com/images/badges/uses-git.svg)](https://GitHub.com/)