diff --git a/.htaccess b/.htaccess index c6537ce..102af81 100644 --- a/.htaccess +++ b/.htaccess @@ -31,27 +31,42 @@ AddEncoding gzip svgz ReadmeName /fancy-index/footer.html # IGNORE THESE FILES - IndexIgnore .htaccess .ftpquota .DS_Store *,v *,t .??* *~ *# + IndexIgnoreReset ON + IndexIgnore .ftpquota .DS_Store .git # DEFAULT ICON DefaultIcon /fancy-index/icons/file-text.svg AddIcon /fancy-index/icons/back.svg .. + AddIcon /fancy-index/icons/github.svg .github + AddIcon /fancy-index/icons/nodejs.svg node_modules AddIcon /fancy-index/icons/file-directory.svg ^^DIRECTORY^^ # SPECIFIC FILE ICONS - AddIcon /fancy-index/icons/file-code.svg .c .h .mustache .rust .source .apache .styl .jade - AddIcon /fancy-index/icons/file-media.svg .png .jpg .jpeg .webp .gif .bmp .psd .mp4 .webm .ogv .mov + # https://github.com/file-icons/source + AddIcon /fancy-index/icons/file-code.svg .c .h .mustache .rust .source .apache .yml .jade + AddIcon /fancy-index/icons/file-media.svg .png .jpg .jpeg .webp .gif .bmp .mp4 .webm .ogv .mov .ico AddIcon /fancy-index/icons/file-pdf.svg .pdf AddIcon /fancy-index/icons/file-text.svg .txt README readme Procfile AddIcon /fancy-index/icons/file-zip.svg .zip .z .gz .Z .tgz .tar.gz .tar .rar - AddIcon /fancy-index/icons/less.png .less + AddIcon /fancy-index/icons/gear.svg .htaccess .env .env-dev .env-production .env-staging + AddIcon /fancy-index/icons/config.svg .conf .ini .cfg .prefs + AddIcon /fancy-index/icons/less.svg .less AddIcon /fancy-index/icons/css.svg .css AddIcon /fancy-index/icons/html.svg .html .htm AddIcon /fancy-index/icons/coffee.svg .coffee AddIcon /fancy-index/icons/java.svg .java AddIcon /fancy-index/icons/markdown.svg .markdown .md + AddIcon /fancy-index/icons/eslint.svg *.eslintignore *.eslintrc.js *.eslintrc.json *.eslintrc *.eslintrc.yml + AddIcon /fancy-index/icons/webpack.svg webpack.config.js + AddIcon /fancy-index/icons/rollup.svg rollup.config.js + AddIcon /fancy-index/icons/postcss.svg postcss.config.js *.postcssrc *.postcssrc.json *.postcssrc.js *.postcssrc.yml + AddIcon /fancy-index/icons/grunt.svg gruntfile.js Gruntfile.js + AddIcon /fancy-index/icons/gulp.svg gulpfile.js Gulpfile.js AddIcon /fancy-index/icons/js.svg .js + AddIcon /fancy-index/icons/composer.svg composer.json composer.lock composer.phar + AddIcon /fancy-index/icons/bower.svg bower.json + AddIcon /fancy-index/icons/npm.svg package.json package-lock.json AddIcon /fancy-index/icons/settings.svg .json AddIcon /fancy-index/icons/mustache.svg .mustache AddIcon /fancy-index/icons/php.svg .php @@ -60,8 +75,23 @@ AddEncoding gzip svgz AddIcon /fancy-index/icons/rust.svg .rust AddIcon /fancy-index/icons/sass.svg .sass AddIcon /fancy-index/icons/scss.svg .scss - AddIcon /fancy-index/icons/svg.svg .svg .svgx .eps .ai + AddIcon /fancy-index/icons/svg.svg .svg .svgx .eps AddIcon /fancy-index/icons/xml.svg .xml + AddIcon /fancy-index/icons/typescript.svg .ts + AddIcon /fancy-index/icons/vue.svg .vue + AddIcon /fancy-index/icons/yarn.svg yarn.lock + AddIcon /fancy-index/icons/babel.svg *.babelrc + AddIcon /fancy-index/icons/git.svg *.gitignore *.gitattributes + AddIcon /fancy-index/icons/editor-config.svg .editorconfig + AddIcon /fancy-index/icons/shopify.svg .liquid + AddIcon /fancy-index/icons/nunjucks.svg .nunjucks + AddIcon /fancy-index/icons/pug.svg .pug + AddIcon /fancy-index/icons/adobe-photoshop.svg .psd + AddIcon /fancy-index/icons/adobe-illustrator.svg .ai + AddIcon /fancy-index/icons/stylus.svg .styl + AddIcon /fancy-index/icons/terminal.svg .sh .bash + AddIcon /fancy-index/icons/database.svg .sql .mysql .sqlite .dsql .db + AddIcon /fancy-index/icons/vagrant.svg vagrantfile Vagrantfile # FILE DESCRIPTIONS AddDescription "MPEG Layer 3 Format" .mp3 diff --git a/README.md b/README.md index 0755433..5bab5ae 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 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](https://github.com/jesseweed/seti-ui), this project adds an `.htaccess` file which tells apache to use a table, among other things, instead of `
`.
+I was tired of seeing the ugly apache-generated index page, so I decided to do something about it. Inspired by [Seti UI](https://github.com/jesseweed/seti-ui) and [atom file-icons](https://github.com/file-icons/atom), this project adds an `.htaccess` file which tells apache to use a table, among other things, instead of `
`.
 
 ### Before Fancy Index:
 ![before fancy index](before.png)
diff --git a/after.png b/after.png
index 59715c0..2e47790 100644
Binary files a/after.png and b/after.png differ
diff --git a/after_mobile.png b/after_mobile.png
index 5df49f6..27c8de7 100644
Binary files a/after_mobile.png and b/after_mobile.png differ
diff --git a/before.png b/before.png
index 3a82ef9..079e2ce 100644
Binary files a/before.png and b/before.png differ
diff --git a/before_mobile.png b/before_mobile.png
index b924fdc..828cd5b 100644
Binary files a/before_mobile.png and b/before_mobile.png differ
diff --git a/icons/Babel.svg b/icons/Babel.svg
new file mode 100644
index 0000000..cef35d0
--- /dev/null
+++ b/icons/Babel.svg
@@ -0,0 +1 @@
+
diff --git a/icons/adobe-illustrator.svg b/icons/adobe-illustrator.svg
new file mode 100644
index 0000000..6bdcaff
--- /dev/null
+++ b/icons/adobe-illustrator.svg
@@ -0,0 +1 @@
+
diff --git a/icons/adobe-photoshop.svg b/icons/adobe-photoshop.svg
new file mode 100644
index 0000000..45f553b
--- /dev/null
+++ b/icons/adobe-photoshop.svg
@@ -0,0 +1 @@
+
diff --git a/icons/composer.svg b/icons/composer.svg
new file mode 100644
index 0000000..ddab2fc
--- /dev/null
+++ b/icons/composer.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/icons/config.svg b/icons/config.svg
new file mode 100644
index 0000000..bed5d33
--- /dev/null
+++ b/icons/config.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/icons/database.svg b/icons/database.svg
new file mode 100644
index 0000000..b20d102
--- /dev/null
+++ b/icons/database.svg
@@ -0,0 +1 @@
+
diff --git a/icons/editor-config.svg b/icons/editor-config.svg
new file mode 100644
index 0000000..d90c2f3
--- /dev/null
+++ b/icons/editor-config.svg
@@ -0,0 +1 @@
+
diff --git a/icons/eslint.svg b/icons/eslint.svg
new file mode 100644
index 0000000..dd535a8
--- /dev/null
+++ b/icons/eslint.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+	
+	
+
+
diff --git a/icons/git.svg b/icons/git.svg
new file mode 100644
index 0000000..0be7588
--- /dev/null
+++ b/icons/git.svg
@@ -0,0 +1,15 @@
+
+
+
+
+	
+
+
diff --git a/icons/github.svg b/icons/github.svg
new file mode 100644
index 0000000..073bef2
--- /dev/null
+++ b/icons/github.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/icons/grunt.svg b/icons/grunt.svg
old mode 100755
new mode 100644
index 3d27d39..8804a6c
--- a/icons/grunt.svg
+++ b/icons/grunt.svg
@@ -1,294 +1,294 @@
-
-
-
-
-
-	
-		
-			
-		
-	
-
-
-	
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-			
-		
-		
-		
-			
-				
-			
-			
-				
-			
-		
-		
-			
-				
-			
-			
-				
-			
-		
-		
-		
-		
-			
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-		
-			
-		
-		
-		
-		
-			
-				
-			
-			
-				
-			
-		
-		
-			
-				
-			
-			
-				
-			
-		
-		
-		
-		
-		
-		
-			
-		
-		
-		
-		
-		
-			
-			
-		
-		
-	
-
-
+
+
+
+
+
+	
+		
+			
+		
+	
+
+
+	
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+			
+		
+		
+		
+			
+				
+			
+			
+				
+			
+		
+		
+			
+				
+			
+			
+				
+			
+		
+		
+		
+		
+			
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+			
+		
+		
+		
+		
+			
+				
+			
+			
+				
+			
+		
+		
+			
+				
+			
+			
+				
+			
+		
+		
+		
+		
+		
+		
+			
+		
+		
+		
+		
+		
+			
+			
+		
+		
+	
+
+
diff --git a/icons/gulp.png b/icons/gulp.png
deleted file mode 100755
index 805d528..0000000
Binary files a/icons/gulp.png and /dev/null differ
diff --git a/icons/gulp.svg b/icons/gulp.svg
new file mode 100644
index 0000000..66f87b8
--- /dev/null
+++ b/icons/gulp.svg
@@ -0,0 +1,15 @@
+
+
+    
+    gulp
+    Created with Sketch.
+    
+    
+        
+            
+        
+    
+
\ No newline at end of file
diff --git a/icons/less.png b/icons/less.png
deleted file mode 100755
index 1a739b3..0000000
Binary files a/icons/less.png and /dev/null differ
diff --git a/icons/less.svg b/icons/less.svg
new file mode 100644
index 0000000..edfa721
--- /dev/null
+++ b/icons/less.svg
@@ -0,0 +1 @@
+
diff --git a/icons/nodejs.svg b/icons/nodejs.svg
new file mode 100644
index 0000000..83ed45c
--- /dev/null
+++ b/icons/nodejs.svg
@@ -0,0 +1 @@
+
diff --git a/icons/npm.svg b/icons/npm.svg
old mode 100755
new mode 100644
index 672c8f4..c612a22
--- a/icons/npm.svg
+++ b/icons/npm.svg
@@ -1,80 +1 @@
-
-
-
-
-  
-  
-  
-    
-      
-        image/svg+xml
-        
-        
-      
-    
-  
-  
-    
-    
-    
-    
-    
-  
-
+n
\ No newline at end of file
diff --git a/icons/nunjucks.svg b/icons/nunjucks.svg
new file mode 100644
index 0000000..5210f41
--- /dev/null
+++ b/icons/nunjucks.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/icons/php.svg b/icons/php.svg
old mode 100755
new mode 100644
index bd31028..cad05a1
--- a/icons/php.svg
+++ b/icons/php.svg
@@ -1,44 +1 @@
-
-
-
-
-
-
-
-
-	
-	
-
-
-	
-	
-	
-
-
+
diff --git a/icons/postcss.svg b/icons/postcss.svg
new file mode 100644
index 0000000..dfe0432
--- /dev/null
+++ b/icons/postcss.svg
@@ -0,0 +1 @@
+postcss-logo-symbol
\ No newline at end of file
diff --git a/icons/pug.svg b/icons/pug.svg
new file mode 100644
index 0000000..612d79a
--- /dev/null
+++ b/icons/pug.svg
@@ -0,0 +1,117 @@
+
+
+
+
+
+	
+
+
+	
+	
+	
+	
+		
+		
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+		
+		
+	
+	
+		
+		
+	
+	
+		
+	
+	
+	
+	
+	
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+		
+		
+		
+	
+	
+		
+		
+		
+	
+
+
diff --git a/icons/rollup.svg b/icons/rollup.svg
new file mode 100644
index 0000000..f19c816
--- /dev/null
+++ b/icons/rollup.svg
@@ -0,0 +1,70 @@
+
+
+
+
+
+	
+		
+		
+		
+		
+		
+		
+	
+	
+
+
+	
+		
+		
+		
+	
+	
+
+
+	
+	
+	
+	
+	
+
+
+
+	
+		
+		
+		
+		
+		
+		
+	
+	
+
+
+	
+	
+
+
+
+	
+	
+
+
+
diff --git a/icons/shopify.svg b/icons/shopify.svg
new file mode 100644
index 0000000..fe4e183
--- /dev/null
+++ b/icons/shopify.svg
@@ -0,0 +1,23 @@
+
+
+
+
+
+	
+	
+	
+
+
diff --git a/icons/sketch.svg b/icons/sketch.svg
new file mode 100644
index 0000000..2d87df2
--- /dev/null
+++ b/icons/sketch.svg
@@ -0,0 +1,17 @@
+
+  
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+      
+      
+    
+  
+
diff --git a/icons/stylus.svg b/icons/stylus.svg
new file mode 100644
index 0000000..1a92db2
--- /dev/null
+++ b/icons/stylus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/icons/terminal.svg b/icons/terminal.svg
new file mode 100644
index 0000000..868d016
--- /dev/null
+++ b/icons/terminal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/icons/typescript.svg b/icons/typescript.svg
new file mode 100644
index 0000000..bbf2809
--- /dev/null
+++ b/icons/typescript.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
diff --git a/icons/vagrant.svg b/icons/vagrant.svg
new file mode 100644
index 0000000..2f6481f
--- /dev/null
+++ b/icons/vagrant.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/icons/vue.svg b/icons/vue.svg
new file mode 100644
index 0000000..c5eb1d7
--- /dev/null
+++ b/icons/vue.svg
@@ -0,0 +1,4 @@
+
+  
+  
+
diff --git a/icons/webpack.svg b/icons/webpack.svg
new file mode 100644
index 0000000..900e14e
--- /dev/null
+++ b/icons/webpack.svg
@@ -0,0 +1 @@
+icon-square-small
\ No newline at end of file
diff --git a/icons/yarn.svg b/icons/yarn.svg
new file mode 100644
index 0000000..504dc9d
--- /dev/null
+++ b/icons/yarn.svg
@@ -0,0 +1 @@
+
diff --git a/script.js b/script.js
index 5c0882f..64b43fb 100644
--- a/script.js
+++ b/script.js
@@ -1,116 +1,78 @@
-void(function () {
-  'use strict';
-
-  if (!Array.prototype.forEach) return;
-
-  var toArray = function (arrayLike) {
-    return [].slice.call(arrayLike);
-  };
-
-  var fixTable = function () {
-
-    var table = document.querySelector('table');
+{
+  function fixTable() {
+    const table = document.querySelector('table');
 
     // Remove 
s
-    toArray(table.querySelectorAll('hr')).forEach(function (hr) {
-      var row = hr.parentNode.parentNode;
+    Array.from(table.querySelectorAll('hr')).forEach(({ parentNode }) => {
+      const row = parentNode.parentNode;
       row.parentNode.removeChild(row);
     });
 
     // Make a table head.
-    var thead = document.createElement('thead');
-    var firstRow = table.querySelector('tr');
+    const thead = document.createElement('thead');
+    const firstRow = table.querySelector('tr');
     firstRow.parentNode.removeChild(firstRow);
     thead.appendChild(firstRow);
     table.insertBefore(thead, table.firstElementChild);
 
     // Remove the first column and put the image in the next.
-    var rows = toArray(table.querySelectorAll('tr'));
-    rows.forEach(function (row) {
-      var iconColumn = row.children[0];
-      var fileColumn = row.children[1];
+    const rows = Array.from(table.querySelectorAll('tr'));
+    rows.forEach((row) => {
+      const iconColumn = row.children[0];
+      const fileColumn = row.children[1];
 
       // Remove icon column.
       row.removeChild(iconColumn);
 
-      var image = iconColumn.firstElementChild;
+      const image = iconColumn.firstElementChild;
 
       if (!image) {
         return;
       }
 
       // Wrap icon in a div.img-wrap.
-      var div = document.createElement('div');
+      const div = document.createElement('div');
       div.className = 'img-wrap';
       div.appendChild(image);
 
       // Insert icon before filename.
       fileColumn.insertBefore(div, fileColumn.firstElementChild);
     });
-
-    // Swap special images.
-    var special = [
-      {
-        icon: '/fancy-index/icons/grunt.svg',
-        match: 'gruntfile.js',
-      }, {
-        icon: '/fancy-index/icons/gulp.png',
-        match: 'gulpfile.js',
-      }, {
-        icon: '/fancy-index/icons/bower.svg',
-        match: 'bower.json',
-      }, {
-        icon: '/fancy-index/icons/gulp.png',
-        match: 'gulpfile.js',
-      }, {
-        icon: '/fancy-index/icons/npm.svg',
-        match: 'package.json',
-      },
-    ];
-
-    toArray(table.querySelectorAll('.indexcolname')).forEach(function (cell) {
-      for (var i = 0, len = special.length; i < len; i++) {
-        if (cell.textContent.match(new RegExp(special[i].match, 'i'))) {
-          cell.querySelector('img').src = special[i].icon;
-          return;
-        }
-      }
-    });
-  };
+  }
 
   // Underscore string's titleize.
-  var titleize = function (str) {
-    return str.toLowerCase().replace(/(?:^|\s|-)\S/g, function (c) {
-      return c.toUpperCase();
-    });
-  };
+  function titleize(str) {
+    return str.toLowerCase().replace(/(?:^|\s|-)\S/g, c => c.toUpperCase());
+  }
 
-  var addTitle = function () {
-    var path = window.location.pathname.replace(/\/$/g, '');
-    var titleText;
+  function addTitle() {
+    let path = window.location.pathname.replace(/\/$/g, '');
+    let titleText;
 
     if (path) {
-      var parts = path.split('/');
+      const parts = path.split('/');
       path = parts[parts.length - 1];
-      titleText = titleize(path).replace(/\-|\_/g, ' ');
-
+      titleText = titleize(path).replace(/-|_/g, ' ');
     } else {
       titleText = window.location.host;
     }
 
-    titleText = 'Index of ' + titleText;
+    titleText = `Index of ${titleText}`;
 
-    var h1 = document.createElement('h1');
+    const container = document.createElement('div');
+    container.id = 'page-header';
+    const h1 = document.createElement('h1');
     h1.appendChild(document.createTextNode(titleText));
-    h1.style.cssText = 'width:93%;margin-left:auto;margin-right:auto;';
-    document.body.insertBefore(h1, document.body.firstChild);
+    container.appendChild(h1);
+
+    document.body.insertBefore(container, document.body.firstChild);
     document.title = titleText;
-  };
+  }
 
-  var getTimeSince = function (seconds) {
-    var intervalType;
+  function getTimeSince(seconds) {
+    let intervalType;
 
-    var interval = Math.floor(seconds / 31536000);
+    let interval = Math.floor(seconds / 31536000);
     if (interval >= 1) {
       intervalType = 'year';
     } else {
@@ -142,34 +104,77 @@ void(function () {
       intervalType += 's';
     }
 
-    return interval + ' ' + intervalType;
-  };
+    return `${interval} ${intervalType}`;
+  }
 
-  var fixTime = function () {
-    var dates = toArray(document.querySelectorAll('.indexcollastmod'));
-    var now = new Date();
-    dates.forEach(function (date, i) {
-      var stamp = date.textContent.trim();
+  function fixTime() {
+    const dates = Array.from(document.querySelectorAll('.indexcollastmod'));
+    const now = new Date();
+    dates.forEach((date, i) => {
+      const stamp = date.textContent.trim();
       if (!stamp || i === 0) return;
 
       // 2014-12-09 10:43 -> 2014, 11, 09, 10, 43, 0.
-      var parts = stamp.split(' ');
-      var day = parts[0].split('-');
-      var timeOfDay = parts[1].split(':');
-      var year = parseInt(day[0], 10);
-      var month = parseInt(day[1], 10) - 1;
-      var _day = parseInt(day[2], 10);
-      var hour = parseInt(timeOfDay[0], 10);
-      var minutes = parseInt(timeOfDay[1], 10);
+      const parts = stamp.split(' ');
+      const day = parts[0].split('-');
+      const timeOfDay = parts[1].split(':');
+      const year = parseInt(day[0], 10);
+      const month = parseInt(day[1], 10) - 1;
+      const _day = parseInt(day[2], 10);
+      const hour = parseInt(timeOfDay[0], 10);
+      const minutes = parseInt(timeOfDay[1], 10);
 
-      var time = new Date(year, month, _day, hour, minutes, 0);
-      var difference = Math.round((now.getTime() - time.getTime()) / 1000);
-      date.textContent = getTimeSince(difference) + ' ago';
+      const time = new Date(year, month, _day, hour, minutes, 0);
+      const difference = Math.round((now.getTime() - time.getTime()) / 1000);
+      date.textContent = `${getTimeSince(difference)} ago`;
     });
-  };
+  }
+
+  function addSearch() {
+    const input = document.createElement('input');
+    input.type = 'search';
+    input.id = 'search';
+    input.setAttribute('placeholder', 'Search');
+    document.getElementById('page-header').appendChild(input);
+
+    const sortColumns = Array.from(document.querySelectorAll('thead a'));
+    const nameColumns = Array.from(document.querySelectorAll('tbody .indexcolname'));
+    const rows = nameColumns.map(({ parentNode }) => parentNode);
+    const fileNames = nameColumns.map(({ textContent }) => textContent);
+
+    function filter(value) {
+      // Allow tabbing out of the search input and skipping the sort links
+      // when there is a search value.
+      sortColumns.forEach((link) => {
+        if (value) {
+          link.tabIndex = -1;
+        } else {
+          link.removeAttribute('tabIndex');
+        }
+      });
+
+      // Test the input against the file/folder name.
+      let even = false;
+      fileNames.forEach((name, i) => {
+        if (!value || name.toLowerCase().includes(value.toLowerCase())) {
+          const className = even ? 'even' : '';
+          rows[i].className = className;
+          even = !even;
+        } else {
+          rows[i].className = 'hidden';
+        }
+      });
+    }
+
+    document.getElementById('search').addEventListener('input', ({ target }) => {
+      filter(target.value);
+    });
+
+    filter('');
+  }
 
   fixTable();
   addTitle();
   fixTime();
-
-})();
+  addSearch();
+}
diff --git a/style.css b/style.css
index 772e315..efb4537 100644
--- a/style.css
+++ b/style.css
@@ -1,62 +1,39 @@
 body {
   margin: 0;
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 300;
   color: #404040;
 }
+
 table {
   width: 100%;
   background: white;
   border: 0;
   table-layout: auto;
 }
-table caption {
-  background: transparent;
-  color: #222222;
-  font-size: 1rem;
-  font-weight: bold;
-}
+
 table thead {
-  background: whitesmoke;
-}
-table thead tr th,
-table thead tr td {
-  padding: 0.5rem 0.625rem 0.625rem;
-  font-size: 0.875rem;
-  font-weight: bold;
-  color: #222222;
-}
-table tfoot {
-  background: whitesmoke;
-}
-table tfoot tr th,
-table tfoot tr td {
-  padding: 0.5rem 0.625rem 0.625rem;
-  font-size: 0.875rem;
-  font-weight: bold;
-  color: #222222;
+  background: #efefef;
 }
+
 table tr th,
 table tr td {
   padding: 0.5625rem 0.625rem;
   font-size: 0.875rem;
   color: #222222;
   text-align: left;
-}
-table tr.alt,
-table tr:nth-of-type(even) {
-  background: #f9f9f9;
-}
-table thead tr th,
-table tfoot tr th,
-table tfoot tr td,
-table tbody tr th,
-table tbody tr td,
-table tr td {
-  display: table-cell;
   line-height: 1.125rem;
 }
 
+table thead tr th {
+  padding: 0.5rem 0.625rem 0.625rem;
+  font-weight: bold;
+}
+
+table tr.even {
+  background: whitesmoke;
+}
+
 a {
   text-decoration: none;
   color: #3498db;
@@ -74,18 +51,52 @@ a:visited {
   vertical-align: middle;
   display: inline-block;
   margin-right: 8px;
-  margin-bottom: 2px;
   width: 16px;
+  height: 16px;
 }
 
-.indexcolicon {
-  display: none\9;
-}
-
-td img {
+.img-wrap img {
   display: block;
   width: 100%;
-  height: auto;
+  height: 100%;
+  max-width: none;
+  object-fit: contain;
+}
+
+.img-wrap + a {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.hidden {
+  display: none;
+}
+
+#page-header {
+  display: flex;
+  align-items: center;
+  margin-left: 0.625rem;
+  margin-right: 0.625rem;
+}
+
+#search {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #464a4c;
+  background-color: #fff;
+  background-image: none;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  margin-left: 1rem;
+  -webkit-appearance: textfield;
+}
+
+#search:focus {
+  border-color: #3498db;
+  outline: 0;
 }
 
 /* Hide extra columns so they don't squash file names */
@@ -99,10 +110,21 @@ td img {
   h1 {
     font-size: 1.5em;
   }
+
+  #page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    margin-bottom: 1em
+  }
+
+  #search {
+    margin-left: 0;
+  }
 }
 
 @media (max-width: 400px) {
   h1 {
-    font-size: 1.125em;
+    font-size: 1.375em;
   }
 }
diff --git a/test/jade.jade b/test/.babelrc
similarity index 100%
rename from test/jade.jade
rename to test/.babelrc
diff --git a/test/lesscss.less b/test/.editorconfig
similarity index 100%
rename from test/lesscss.less
rename to test/.editorconfig
diff --git a/test/.env b/test/.env
new file mode 100644
index 0000000..e69de29
diff --git a/test/.eslintignore b/test/.eslintignore
new file mode 100644
index 0000000..e69de29
diff --git a/test/.eslintrc.js b/test/.eslintrc.js
new file mode 100644
index 0000000..e69de29
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
new file mode 100644
index 0000000..e69de29
diff --git a/test/.gitignore b/test/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/test/browserslist b/test/browserslist
new file mode 100644
index 0000000..e69de29
diff --git a/test/composer.lock b/test/composer.lock
new file mode 100644
index 0000000..e69de29
diff --git a/test/config.conf b/test/config.conf
new file mode 100644
index 0000000..e69de29
diff --git a/test/less.less b/test/less.less
new file mode 100644
index 0000000..e69de29
diff --git a/test/liquid.liquid b/test/liquid.liquid
new file mode 100644
index 0000000..e69de29
diff --git a/test/package-lock.json b/test/package-lock.json
new file mode 100644
index 0000000..e69de29
diff --git a/test/pug.pug b/test/pug.pug
new file mode 100644
index 0000000..e69de29
diff --git a/test/rollup.config.js b/test/rollup.config.js
new file mode 100644
index 0000000..e69de29
diff --git a/test/shell.sh b/test/shell.sh
new file mode 100644
index 0000000..e69de29
diff --git a/test/sql.sql b/test/sql.sql
new file mode 100644
index 0000000..e69de29
diff --git a/test/stylus.styl b/test/stylus.styl
new file mode 100644
index 0000000..e69de29
diff --git a/test/typescript.ts b/test/typescript.ts
new file mode 100644
index 0000000..e69de29
diff --git a/test/vagrantfile b/test/vagrantfile
new file mode 100644
index 0000000..e69de29
diff --git a/test/vue.vue b/test/vue.vue
new file mode 100644
index 0000000..e69de29
diff --git a/test/webpack.config.js b/test/webpack.config.js
new file mode 100644
index 0000000..e69de29
diff --git a/test/yarn.lock b/test/yarn.lock
new file mode 100644
index 0000000..e69de29
diff --git a/test/yml.yml b/test/yml.yml
new file mode 100644
index 0000000..e69de29