Use Font Awesome for icons

app/Bootstrap/ViewComposer.php

@@ -26,6 +26,14 @@ class ViewComposer
             })
         );
 
+        $twig->getEnvironment()->addFunction(
+            new TwigFunction('icon', function ($file) use ($config) {
+                $extension = pathinfo($file, PATHINFO_EXTENSION);
+
+                return $config->get("icons.{$extension}", 'fa-file');
+            })
+        );
+
         $twig->getEnvironment()->addFunction(
             new TwigFunction('sizeForHumans', function ($bytes) {
                 $sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

app/config/icons.php

@@ -0,0 +1,33 @@
+<?php
+
+return [
+    'icons' => [
+        /** Images */
+        'gif' => 'fa-file-image',
+        'jpeg' => 'fa-file-image',
+        'jpg' => 'fa-file-image',
+        'png' => 'fa-file-image',
+
+        /** Data */
+        'csv' => 'fa-file-csv',
+        'json' => 'fa-file-code',
+        'yaml' => 'fa-file-alt',
+
+        /** Code */
+        'js' => 'fa-file-code',
+        'php' => 'fa-file-code',
+
+        /** Text and Markup */
+        'md' => 'fa-file-download',
+        'txt' => 'fa-file-alt',
+
+        /** Documents */
+        'doc' => 'fa-file-word',
+        'docx' => 'fa-file-word',
+        'pdf' => 'fa-file-pdf',
+        'ppt' => 'fa-file-powerpoint',
+        'pptx' => 'fa-file-powerpoint',
+        'xls' => 'fa-file-excel',
+        'xlsx' => 'fa-file-excel'
+    ]
+];

app/themes/default/index.twig

@@ -19,26 +19,46 @@
 
     <div class="container mx-auto px-4">
         <ul class="py-8">
+            <div class="flex justify-between font-bold p-4">
+                <div class="flex-grow mr-2">
+                    File Name
+                </div>
+
+                <div class="hidden text-right w-1/6 mx-2 sm:block">
+                    Size
+                </div>
+
+                <div class="hidden text-right w-1/4 ml-2  sm:block">
+                    Date
+                </div>
+            </div>
+
             {% for file in files %}
                 <a
                     href="{{ file.getRelativePathname }}"
-                    class="flex justify-between rounded-lg p-4 hover:bg-gray-200 hover:p-4 hover:shadow"
+                    class="flex justify-between items-center rounded-lg p-4 hover:bg-gray-200 hover:p-4 hover:shadow"
                 >
-                    <div class="flex-grow truncate mr-4">
+                    <div class="flex-shrink text-gray-700 pr-2">
                         {% if file.isDir %}
-                            📁
+                            <i class="fas fa-fw fa-lg fa-folder"></i>
                         {% else %}
-                            📄
+                            <i class="fas fa-fw fa-lg {{ icon(file.getBasename) }}"></i>
                         {% endif %}
+                    </div>
 
+                    <div class="flex-grow truncate mr-2">
                         {{ file.getBasename }}
                     </div>
 
-                    <div class="hidden whitespace-no-wrap text-right mx-4 sm:block">
-                        {{ sizeForHumans(file.getSize) }}
+                    <div class="hidden whitespace-no-wrap text-right mx-2 w-1/6 sm:block">
+                        {% if file.isDir %}
+                            —
+                        {% else %}
+                            {{ sizeForHumans(file.getSize) }}
+                        {% endif %}
                     </div>
 
-                    <div class="hidden whitespace-no-wrap text-right truncate ml-4 sm:block">
+                    <div class="hidden whitespace-no-wrap text-right truncate ml-2 w-1/4 sm:block">
                         {{ file.getMTime | date }}
                     </div>
                 </a>

app/themes/default/src/sass/app.scss

@@ -1,3 +1,12 @@
+// Tailwind
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+// Icons
+$fa-font-path: "./webfonts";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "~@fortawesome/fontawesome-free/scss/solid.scss";
+
+// Fonts
+// @import url("https://fonts.googleapis.com/css?family=Lato");

app/themes/default/webpack.mix.js

@@ -9,9 +9,15 @@ mix.sass('src/sass/app.scss', 'dist').options({
 
 mix.js('src/js/app.js', 'dist');
 
+mix.copyDirectory(
+    'node_modules/@fortawesome/fontawesome-free/webfonts',
+    'dist/webfonts'
+);
+
 mix.purgeCss({
-    extensions: ['html', 'scss', 'twig'],
-    globs: ['*.twig'],
-    folders: ['src'],
-    whitelist: ['html', 'body', 'main']
+    extensions: ["html", "scss", "twig"],
+    globs: ["*.twig"],
+    folders: ["src"],
+    whitelist: ["html", "body", "main"],
+    whitelistPatterns: [/^fa\-/]
 });