Giter VIP home page Giter VIP logo

naereen / nginx-fancyindex-theme Goto Github PK

View Code? Open in Web Editor NEW
472.0 17.0 114.0 663 KB

A :iphone: responsive theme for Nginx Fancyindex module :wrench:. Minimal, modern and simple. ☀ Light & 😎 Dark themes. Comes with a search form :mag_right:, aims to handle thousands of files without any problems :open_file_folder:

Home Page: https://perso.crans.org/besson/publis/Nginx-Fancyindex-Theme/

License: MIT License

CSS 53.08% HTML 32.56% JavaScript 14.36%
nginx-fancyindex-theme fancyindex nginx responsive-theme

nginx-fancyindex-theme's Introduction

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 (by @aperezdc).

made-for-nginx

Demonstration of the Light theme:

Demo #5

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 in your location directive (location / {.....}) in your nginx config (usually nginx.conf).
  3. Move the Nginx-Fancyindex-Theme-light/ and/or Nginx-Fancyindex-Theme-dark/ 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 and ShowDown.js, it is not so cleanly written but it works perfectly! I wanted this feature as I have it for Apache (see this project).

Configuration

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

fancyindex on;
fancyindex_localtime on;
fancyindex_exact_size off;
# Specify the path to the header.html and foother.html files, that are server-wise,
# ie served from root of the website. Remove the leading '/' otherwise.
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";

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

# 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

Examples

Showing a list of files (without search):

Demo #2


Filter a list of files (with search):

Demo #1


Filter a list of directories (with search):

Demo #3


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

Include HEADER and README files automatically:

Another demo:

Demo #6


📜 License ? GitHub license

MIT Licensed (file LICENSE). © Lilian Besson, 2016-18.

Maintenance Ask Me Anything ! Analytics

ForTheBadge built-with-swag ForTheBadge uses-js ForTheBadge uses-html ForTheBadge uses-css ForTheBadge uses-badges ForTheBadge uses-git

nginx-fancyindex-theme's People

Contributors

deadbaed avatar fgh1999 avatar garbee avatar jtweet avatar naereen avatar rfilmyer avatar sebastiants avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nginx-fancyindex-theme's Issues

Populate README to subdirectories

Is this possible? I would like to have the same header from the site root populate to all subdirs.

The README contains the impressum which should apply on all pages. I would like to avoid creating redundant files or stating this explicit in the README.

Recursive Search

It's a great work! Thanks! I totally indulge in it, But I want to achieve a recursive search in my website. I think we use that most of times.
Is there some way I can achieve that. I will do a research on it at the same time.

fancyindex_name_length

I picked up the sample .conf file and it died with this. Removing the name_length argument got this back on track...

Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: Starting A high performance web server and a reverse proxy server...
Mar 16 23:47:47 ip-172-26-0-47 nginx[27719]: nginx: [emerg] unknown directive "fancyindex_name_length" in /etc/nginx/sites-enabled/default:45
Mar 16 23:47:47 ip-172-26-0-47 nginx[27719]: nginx: configuration file /etc/nginx/nginx.conf test failed
Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: nginx.service: control process exited, code=exited status=1
Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: Failed to start A high performance web server and a reverse proxy server.
Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: Unit nginx.service entered failed state.

fancyindex-can-t-print-list-with-auth-ldap-module

https://www.bountysource.com/issues/56084981-fancyindex-can-t-print-list-with-auth-ldap-module

ldap_server ldap.domain.com {
url ldaps://ldap.domain.com/OU=People,DC=domain,DC=com?uid?sub?(objectClass=posixAccount);
binddn "uid=ssomanager,ou=admin,dc=domain,dc=com";
binddn_passwd acblfebadiced@T;
group_attribute uniquemember;
group_attribute_is_dn on;
require valid_user;

ssl_check_cert off;
satisfy any;

}

server {
listen 80 default_server backlog=1024;
server_name _;

auth_ldap "Forbidden";
auth_ldap_servers ldap.domain.com;

..blah..blah

location / {
    if ( $http_user_agent ~* "bot" ) {
        access_log off;
    }

    if ( $request_filename ~* "\.(js|css|png|jpg|jpeg|gif|ico)$" ) {
        access_log off;
    }

    fancyindex on;
    fancyindex_localtime on;
    fancyindex_exact_size off;
    fancyindex_header "/fancyindex/header.html";
    fancyindex_footer "/fancyindex/footer.html";
}

}

Search does not work with unicode chars

Hi.

JS search does not work with unicode chars. It seems, the reason is '\b' in regexp (just because it does not match on boundaries of unicode words). As far as i can tell, there're at least two ways to fix it:

  1. Do not use '\b'.
  2. UseXRegExp, then we may try to reimplement '\b' using '\p{L}'.

May be something else is possible, but i don't really know JS, so these are the first, which come from google.

r4s

大佬r4s lan口一黄一绿两个指示灯黄灯闪烁绿灯怎么一直不亮?什么原因?谢谢!

styles.css not found

it is because the header.html does not link to the light directory for styles.css, I think?

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/Nginx-Fancyindex-Theme/styles.css">
        <script type="text/javascript" src="/Nginx-Fancyindex-Theme-light/jquery.min.js"></script>
    </head>
<body>

Odd styling

Hi,

I'm probably missing something simple, but when I try to use your theme, the results are a bit odd
.
If I leave the references to the header and footer in my nginix.conf, no styling is applied to the index at all.
If I remove the references to header and footer, the styling is off, but there. See the screenshot I included.

2018-05-27_02 32 38
The blank looking lines are files that should be listed.

Again, I'm not sure if this is a bug or if I missed something.

Thanks for sharing your work!

Changing white background

Sorry if this sound newbiesh
but i want to change white background to an image.
i try adding this code in header.html

<head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <title>Topkek</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/Nginx-Fancyindex-Theme/styles.css">
<style>
body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('bg.jpg');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
</style>
    </head>

But it seems not changing,
Any ideas?

Add note about upcoming removal of fancyindex_name_length

The readme suggests using fancyindex_name_length and says you may encounter an error if using an old version of fancyindex and should comment it out. In fact, you will also encounter an error with the latest not-yet-released version of fancyindex, since fancyindex_name_length has been removed. See aperezdc/ngx-fancyindex@5930c29. You may want to amend that comment to account for this impending breaking change.

fancyindex_name_length

I picked up the sample .conf file and it died with this. Removing the name_length argument got this back on track...

Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: Starting A high performance web server and a reverse proxy server...
Mar 16 23:47:47 ip-172-26-0-47 nginx[27719]: nginx: [emerg] unknown directive "fancyindex_name_length" in /etc/nginx/sites-enabled/default:45
Mar 16 23:47:47 ip-172-26-0-47 nginx[27719]: nginx: configuration file /etc/nginx/nginx.conf test failed
Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: nginx.service: control process exited, code=exited status=1
Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: Failed to start A high performance web server and a reverse proxy server.
Mar 16 23:47:47 ip-172-26-0-47 systemd[1]: Unit nginx.service entered failed state.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.