Code Monkey home page Code Monkey logo

fancy-index's Introduction

Fancy Index

A responsive Apache index page.

I was tired of seeing the ugly apache-generated index page, so I decided to do something about it. Inspired by Seti UI and atom file-icons, this project adds an .htaccess file which tells apache to use a table, among other things, instead of <pre>.

Before Fancy Index:

before fancy index

After Fancy Index

after fancy index

Setup

I'm going to assume you're using a Sites folder with apache, but it could be done differently. Wherever you see USERNAME, use your username.

  1. Clone or download the files.
  2. Add them to your Sites directory. The structure should be /Users/USERNAME/Sites/fancy-index.
  3. Copy the .htaccess file up one directory to /Users/USERNAME/Sites/.htaccess.
  4. Update your DocumentRoot in /etc/apache2/users/USERNAME.conf to point to your Sites. This will also cause localhost to point to Sites and you won't have to use the ~USERNAME to access it.

This is what mine looks like:

DocumentRoot "/Users/glen.cheney/Sites"

<Directory "/Users/glen.cheney/Sites">
    AllowOverride All
    Options Indexes MultiViews FollowSymLinks
    Require all granted
</Directory>

Now restart apache sudo apachectl restart.

If you're having trouble or don't see the correct files, follow one of these guides (Yosemite, El Capitan, Sierra, High Sierra) to get your Sites folder working.

Mobile Comparison

Now you don't have to zoom in or be a sniper with your finger!

Default Fancy
before fancy index (mobile) after fancy index (mobile)

Customizing hidden files and directories

If you want to hide some files or directories, for example the fancy-index directory, there is a IndexIgnore directive in .htaccess file.

  1. Edit .htaccess file in root directory.
  2. Look for the "IGNORE THESE FILES" section.
  3. Update the IndexIgnore directive with the path of files and directories to hide, separated by spaces.
    • For example: IndexIgnore .ftpquota .DS_Store .git /fancy-index
  4. Save the changes.
  5. Reload the index page.

fancy-index's People

Contributors

akpr2007 avatar dredkin avatar leojimenezcr avatar lukaseder avatar schliflo avatar staniond avatar steveclement avatar vestride avatar xue-blood 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

fancy-index's Issues

epub and pdf icons ?

Hello,

Is it possible to add epub and pdf in #SPECIFIC FILE ICONS and #FILE DESCRIPTION ?

Thanks

add Charset=utf-8 to IndexOptions

as it sends this http header

Content-Type: text/html;charset=ISO-8859-1

on my server by default, but filesystem supports utf-8 names.

After adding Charset=utf-8 the server spits this http header:

Content-Type: text/html;charset=utf-8

The metatag

<meta charset="utf-8">

in header.html is ignored by browser in favor of http header value.

decodeURI() titles

If window.location.pathname has URI-encoded components (like %20 for spaces), then the title comes out quite ugly (and titleize()) doesn't work as intended. Using decodeURI(window.location.pathname.replace(/\/$/g, '')) solves it.

Personally, I got rid of the toLowerCase() titleize() altogether.

css: break long filenames

so it does not break layout on small displays.

tbody td {word-break:break-all;}

example: touch longfilenameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.txt

Add a select box before the file type icon

Hi Vestride, wondering if you could help me to modify your code to add an select box icon before the file type icon to be able to download many files at the same time (maybe in a zipped folder).
Thanks

-vrack

Deploying on live websites

I already have a website at say http://example.com hosted from /var/www/html/

If I place a folder called notes inside /var/www/html/notes and clone fancy-index inside notes/, then copied .htaccess from fancy-index to /var/www/html/ and restarted apache, things should start working right?

But they are not. I also added a staged this folder inside /etc/apache2/apache2.conf as follows:

<Directory /var/www/html/notes>
AllowOverride All
Options Indexes MultiViews FollowSymlinks
Require all granted

Any idea what's going on?

search not working due no indexcolname class

On a shared server mod_autoindex does not put the classes into the th and td tags.

So no class indexcolname:

const nameColumns = Array.from(document.querySelectorAll('tbody .indexcolname'));

My workaround for current fancy-index:

const nameColumns = Array.from(document.querySelectorAll('tbody td:nth-child(1)'));

Nothing is working!

Hello @Vestride
I tried installing your plugin but Somehow all the styles were not working. It was displaying just like that previous ulgy index thing.
Can you please help me install this?
I wan to install it in a subdirectory (FOLDER) e.g:

www.mysite.com/FOLDER

Please help me. Thank you.

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.