Add Dockerfile for building the theme

If the client uses a dark color-scheme, the CSS will switch to a dark
color scheme as well.

.clang-format

@@ -17,17 +17,17 @@
 #
 #
 # Copyright (C)
-#  2018 Alexander Haase <ahaase@alexhaase.de>
+#  2018-2024 Alexander Haase <ahaase@alexhaase.de>
 
 # This is the clang-format configuration for JavaScript files.
 #
 # Clang-format should help to beautify the code, so that every developer can
 # write code, while the beautifier will take care about the style guides. Please
-# read the README and/or docs for more informations, how to use this
+# read the README and/or docs for more information, how to use this
 # configuration with clang-format.
 
 
-# Basicaly we use LLVM style, but have some changes listet in this
+# Basically we use LLVM style, but have some changes listed in this
 # configuration.
 BasedOnStyle: LLVM
 

.editorconfig

@@ -0,0 +1,33 @@
+# This file is part of nginx-fancyindex-flat-theme.
+#
+# nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
+# modify it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or (at your
+# option) any later version.
+#
+# nginx-fancyindex-flat-theme is distributed in the hope that it will be
+# useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+# Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# this program. If not, see
+#
+#  http://www.gnu.org/licenses/
+#
+#
+# Copyright (C)
+#  2018-2024 Alexander Haase <ahaase@alexhaase.de>
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size  = 4
+end_of_line  = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.js]
+indent_size = 2

.gitignore

@@ -1,2 +1,23 @@
+# This file is part of nginx-fancyindex-flat-theme.
+#
+# nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
+# modify it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or (at your
+# option) any later version.
+#
+# nginx-fancyindex-flat-theme is distributed in the hope that it will be
+# useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+# Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# this program. If not, see
+#
+#  http://www.gnu.org/licenses/
+#
+#
+# Copyright (C)
+#  2018-2024 Alexander Haase <ahaase@alexhaase.de>
+
 /layout/theme.css*
 /layout/theme.d

Dockerfile

@@ -0,0 +1,32 @@
+# This file is part of nginx-fancyindex-flat-theme.
+#
+# nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
+# modify it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or (at your
+# option) any later version.
+#
+# nginx-fancyindex-flat-theme is distributed in the hope that it will be
+# useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+# Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along with
+# this program. If not, see
+#
+#  http://www.gnu.org/licenses/
+#
+#
+# Copyright (C)
+#  2018-2024 Alexander Haase <ahaase@alexhaase.de>
+
+FROM debian
+
+ENV DEBIAN_FRONTEND=noninteractive
+RUN apt update && \
+    apt install -y \
+        make \
+        uglifyjs \
+        node-less \
+        node-less-plugin-clean-css \
+        && \
+    rm -rf /var/lib/apt/lists/*

Makefile

@@ -17,7 +17,7 @@
 #
 #
 # Copyright (C)
-#  2018 Alexander Haase <ahaase@alexhaase.de>
+#  2018-2024 Alexander Haase <ahaase@alexhaase.de>
 
 all: build/theme.css         \
      build/js/list.js        \

README.md

@@ -3,13 +3,15 @@
 [![](https://img.shields.io/github/issues-raw/alehaa/nginx-fancyindex-flat-theme.svg?style=flat-square)](https://github.com/alehaa/nginx-fancyindex-flat-theme/issues)
 [![](https://img.shields.io/badge/license-GPLv3-blue.svg?style=flat-square)](LICENSE)
 
+![](doc/screenshot.png)
+
 
 ## About
 
 The [fancyindex module](https://github.com/aperezdc/ngx-fancyindex) of
 [nginx](http://nginx.org/) has the powerful capability to be customizable.
-Instead of using an external application, this gives us the ability to use use
+Instead of using an external application, this gives us the ability to use
-just the webservers capabilities to generate beautiful directory listings.
+just the webserver's capabilities to generate beautiful directory listings.
 
 This theme provides a simple, flat interface based on
 [Bootstrap 4](https://getbootstrap.com), [Font Awesome](https://fontawesome.com)
@@ -22,10 +24,11 @@ dynamic code.
 
 ## Usage
 
-1. Get the latest ressources from [GitHub releases](https://github.com/alehaa/nginx-fancyindex-flat-theme/releases)
+1. Get the latest resources from [GitHub releases][releases], or build them
-   or build them on your own by running `make` inside this repository and copy
+   yourself by running `make` inside this repository. Instructions on how to
-   these files into any location accessible by *nginx*.
+   build the resources can be found [below](#build).
-2. Configure your vhost to use the theme's ressources for fancyindex:
+1. Copy these files into any location accessible by *nginx*.
+1. Configure your vhost to use the theme's resources for fancyindex:
     ```
     # Fancyindex
     fancyindex             on;
@@ -36,11 +39,28 @@ dynamic code.
     fancyindex_exact_size  off;
     fancyindex_localtime   on;
 
-    location /theme {
+    location /theme/{
-        alias /srv/www/fileserver/theme;
+        alias /srv/www/fileserver/theme/;
     }
     ```
 
+[releases]: https://github.com/alehaa/nginx-fancyindex-flat-theme/releases
+
+
+## Build
+
+Instead of using pre-built sources, you can build them on a local machine. For
+convenience, a [Dockerfile](Dockerfile) is provided that creates a container
+with all the necessary tools to compile the sources. You can easily build the
+theme using the following commands:
+
+```
+docker build -t fancyindex-flat .
+docker run --rm -it -v ./:/mnt -w /mnt fancyindex-flat make
+```
+
+The compiled sources for the theme will be located in the `build` directory.
+
 
 ## License
 
@@ -54,4 +74,4 @@ ANY WARRANTY**; without even the implied warranty of **MERCHANTABILITY** or
 **FITNESS FOR A PARTICULAR PURPOSE**. A Copy of the GNU General Public License
 can be found in the [LICENSE](LICENSE) file.
 
-© 2018 Alexander Haase
+© 2018-2024 Alexander Haase

layout/js/breadcrumbs.js

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  *
  *
  * NOTE: The following comment will be used as short version of the copyright
@@ -30,7 +30,7 @@
  * General Public License. See the LICENSE file for details.
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**
@@ -47,7 +47,7 @@ function generateBreadcrumbs()
    *
    * @param string name   the name of the breadcrumb
    * @param string url    the url of the breadcrumb
-   * @param string active wheter this breadcrumb is active or not
+   * @param string active whether this breadcrumb is active or not
    *
    * @return string the breadcrumb string
    */

layout/js/list.js

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  *
  *
  * NOTE: The following comment will be used as short version of the copyright
@@ -30,7 +30,7 @@
  * General Public License. See the LICENSE file for details.
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**
@@ -165,7 +165,7 @@ function generateList()
    * Get the font awesome icon to be used for a specific filetype.
    *
    *
-   * @param string filetype the filetype for wich an icon is required
+   * @param string filetype the filetype for which an icon is required
    *
    * @return string the HTML icon tag to be used
    */
@@ -175,7 +175,7 @@ function generateList()
      * Get the font awesome class of the icon to be used.
      *
      *
-     * @param string filetype the filetype for wich an icon is required
+     * @param string filetype the filetype for which an icon is required
      *
      * @return string the icon class to be used
      */
@@ -221,8 +221,8 @@ function generateList()
   list.classList.add('table', 'table-sm', 'table-hover', 'text-nowrap');
 
   /* As file size and last-modified date will be hidden at mobile devices, also
-   * hide the the table header for mobile devices, as it's unneccessary for the
+   * hide the the table header for mobile devices, as it's unnecessary for the
-   * single remaining cell containig the filename. */
+   * single remaining cell containing the filename. */
   list.tHead.children[0].classList.add('d-none', 'd-md-table-row');
 
   /* If we're in a subdirectory, remove the 'Parent Directory' row, as the

layout/less/body.less

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**
@@ -32,3 +32,16 @@ body {
      * the content and the footer. */
     padding-bottom: @footer-height;
 }
+
+/* If the client prefers a dark color scheme, the following classes will be
+ * applied to give the site a dark look and feel.
+ *
+ * NOTE: These classes need to be at the end of this file, as they override the
+ *       default settings previously defined, if the dark color scheme is
+ *       requested. */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: @gray-800;
+        color:            white;
+    }
+}

layout/less/breadcrumb.less

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**

layout/less/colors.less

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**
@@ -33,7 +33,7 @@
  * Grayscale colors.
  *
  * NOTE: Although not all colors of the grayscale palette will be used, all
- *       colors have been copied for simlicity when fixing color issues in
+ *       colors have been copied for simplicity when fixing color issues in
  *       future commits.
  */
 @white:    #fff;

layout/less/footer.less

@@ -17,12 +17,12 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**
  * This file configures the footer navbar. The navbar will be transparent with
- * muted text. If the content doesn't fill the whole brwoser window, the footer
+ * muted text. If the content doesn't fill the whole browser window, the footer
  * will stick to the bottom of it, otherwise it will reside at the bottom of the
  * page.
  *

layout/less/header.less

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**

layout/less/list.less

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /**
@@ -27,8 +27,8 @@
 
 #list {
     /* Filenames and the table headings may link to the relating file or sort
-     * the table. However, these links shoul NOT be highlighted. Decorations
+     * the table. However, these links should NOT be highlighted. Decorations
-     * will be kept enabled for underlineing the link when hovering. */
+     * will be kept enabled for underlining the link when hovering. */
     a,
     a:hover,
     a:focus {
@@ -49,3 +49,19 @@
         white-space: normal;
     }
 }
+
+/* If the client prefers a dark color scheme, the following classes will be
+ * applied to give the site a dark look and feel.
+ *
+ * NOTE: These classes need to be at the end of this file, as they override the
+ *       default settings previously defined, if the dark color scheme is
+ *       requested. */
+@media (prefers-color-scheme: dark) {
+    #list {
+        a,
+        a:hover,
+        a:focus {
+            color: @white;
+        }
+    }
+}

layout/theme.less

@@ -17,7 +17,7 @@
  *
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  */
 
 /* This theme heavily uses Twitter Bootstrap (v4). That means, bootstrap CSS
@@ -61,7 +61,7 @@
  * license) and uses Twitter Bootstrap (v4) (licensed under the MIT license).
  *
  * Copyright (C)
- *  2018 Alexander Haase <ahaase@alexhaase.de>
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
  *
  * See the LICENSE file for details.
  */