spring-raining/pretty-autoindex

Show nginx autoindex more pretty!

pretty-autoindex

Show nginx autoindex more pretty!

Installation

Download files to your server.

$ git clone https://github.com/spring-raining/pretty-autoindex.git
or
$ npm install pretty-autoindex

Before using it, you need to set some nginx configurations. (In this expamle, The IP address and the port represent as 192.168.10.108:10080 so you should replace them as necessary.)

# pretty-autoindex try to access this address, and display indexes dynamically.
server {
    listen  10080;

    location / {
        root    /path/to/you/want/to/show;
        autoindex   on;
        autoindex_format    json;

        # Enable your browser to access here.
        add_header  Access-Control-Allow-Origin "http://192.168.10.108";
        add_header  Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header  Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header  Access-Control-Allow-Credentials true;
    }
}

# This is an actual page.
server {
    listen  80;

    location / {
        root    /path/to/pretty-autoindex/dist;
    }
}

And set a conf variable in index.html.

$ vim /path/to/pretty-autoindex/dist/config.js

var conf = {
      name: 'A wonderful name that you want',
      address: 'http://192.168.10.108:10080',

      visibilityOptions: {
          size: {
              use: true,
              type: 'readable' //raw, readable, both
          },
          date: {
              use: true,
              type: 'moment' //raw, moment, both
          }
      }
};

Then, restart nginx and access http://192.168.10.108.

CAUTION! If you intend to open your page in public network, beware your nginx configuration and exclude files that you wouldn't like to expose from the directory.

Development

To build pretty-autoindex,

1. Install Node.js

2. Install dependent libraries

   $ npm install

3. Run build

   $ npm run build

License

MIT

Author

spring-raining

pretty-autoindex's Issues

[Suggestion] "location" instead of two servers in nginx

Instead of creating two different servers on different ports you can create one single server using "location". For example with these configs:

nginx:

server {

  listen               80;
  listen               [::]:80;

  server_name          example.com;

  location / {
    root    /smth/pretty-autoindex/dist;
  }

  location /json-index/ {
      alias            /smth/to/show;
      autoindex        on;
      autoindex_format json;

      # Enable your browser to access here.
      add_header  Access-Control-Allow-Origin "http://example.com";
      add_header  Access-Control-Allow-Methods "GET, POST, OPTIONS";
      add_header  Access-Control-Allow-Headers "Origin, Authorization, Accept";
      add_header  Access-Control-Allow-Credentials true;
  }
}

config.js:

var conf = {
      name: 'example.com',
      address: 'http://example.com/json-index',

      visibilityOptions: {
          size: {
              use: true,
              type: 'readable' //raw, readable, both
          },
          date: {
              use: true,
              type: 'moment' //raw, moment, both
          }
      }
};

I probably could have made some mistakes, but overall I did something like this and it works.

根目录下的文件下载链接多了一个斜杠

假如我在根目录下有个a.zip
我的下载地址会变成http://x.x.x.x//a.zip

Directory with space(s) get its url encoded to %2520

Version: 1.1.0

Steps to reproduce:

1. Create a directory and give it a name containing one or more spaces.
2. Open it
3. You'll find the following bugs:
   3.1. If the directory contains another directory with space(s), it will fail to load if you try to open it. The parent directory's url path will get its space(s) encoded to %2520.
   3.2. Navigating using the breadcrumb__directory link (either with subdir or not) results in the same bug. Looking at the source, the spaces also get converted to %2520.

Expected:

1. The % character in %20 should not be encoded to %25.
2. Improvement: encode all spaces in the url with %20 or +.
3. Improvement: keep the spaces in the breadcrumb__directory link text.

XHR withCredentials maybe?

Hey there!
I'm using this with some authentication on top of it (like SSO), that means the XHR request needs cookies to work.
I just added .withCredentials = true; which seems reasonably safe as a default in the code.
Would you take such change? I can send a PR.