diff --git a/.clang-format b/.clang-format index 0c234c7..faa6baf 100644 --- a/.clang-format +++ b/.clang-format @@ -17,17 +17,17 @@ # # # Copyright (C) -# 2018 Alexander Haase +# 2018-2024 Alexander Haase # 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 diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e0e3c93 --- /dev/null +++ b/.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 + +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 diff --git a/.gitignore b/.gitignore index 129ad0b..a2b8946 100644 --- a/.gitignore +++ b/.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 + /layout/theme.css* /layout/theme.d diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..d8997ef --- /dev/null +++ b/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 + +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/* diff --git a/Makefile b/Makefile index fa13e7b..caa7556 100644 --- a/Makefile +++ b/Makefile @@ -17,7 +17,7 @@ # # # Copyright (C) -# 2018 Alexander Haase +# 2018-2024 Alexander Haase all: build/theme.css \ build/js/list.js \ diff --git a/README.md b/README.md index 4aad0ae..dd301d9 100644 --- a/README.md +++ b/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 -just the webservers capabilities to generate beautiful directory listings. +Instead of using an external application, this gives us the ability to use +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) - or build them on your own by running `make` inside this repository and copy - these files into any location accessible by *nginx*. -2. Configure your vhost to use the theme's ressources for fancyindex: +1. Get the latest resources from [GitHub releases][releases], or build them + yourself by running `make` inside this repository. Instructions on how to + build the resources can be found [below](#build). +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 { - alias /srv/www/fileserver/theme; + location /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 diff --git a/doc/screenshot.png b/doc/screenshot.png new file mode 100644 index 0000000..7e2c3a6 Binary files /dev/null and b/doc/screenshot.png differ diff --git a/layout/js/breadcrumbs.js b/layout/js/breadcrumbs.js index 91e67b7..81dd94b 100644 --- a/layout/js/breadcrumbs.js +++ b/layout/js/breadcrumbs.js @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase * * * 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 + * 2018-2024 Alexander Haase */ /** @@ -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 */ diff --git a/layout/js/list.js b/layout/js/list.js index c782a26..674b8f7 100644 --- a/layout/js/list.js +++ b/layout/js/list.js @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase * * * 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 + * 2018-2024 Alexander Haase */ /** @@ -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 - * single remaining cell containig the filename. */ + * hide the the table header for mobile devices, as it's unnecessary for the + * 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 diff --git a/layout/less/body.less b/layout/less/body.less index 5a301f8..73160cc 100644 --- a/layout/less/body.less +++ b/layout/less/body.less @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase */ /** @@ -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; + } +} diff --git a/layout/less/breadcrumb.less b/layout/less/breadcrumb.less index 78aac25..9fc38ff 100644 --- a/layout/less/breadcrumb.less +++ b/layout/less/breadcrumb.less @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase */ /** diff --git a/layout/less/colors.less b/layout/less/colors.less index 9bc67e6..25fb231 100644 --- a/layout/less/colors.less +++ b/layout/less/colors.less @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase */ /** @@ -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; diff --git a/layout/less/footer.less b/layout/less/footer.less index d4bd38e..48c1995 100644 --- a/layout/less/footer.less +++ b/layout/less/footer.less @@ -17,12 +17,12 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase */ /** * 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. * diff --git a/layout/less/header.less b/layout/less/header.less index 3af6eff..64e9eb8 100644 --- a/layout/less/header.less +++ b/layout/less/header.less @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase */ /** diff --git a/layout/less/list.less b/layout/less/list.less index 9490a71..fb4b1ab 100644 --- a/layout/less/list.less +++ b/layout/less/list.less @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase */ /** @@ -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 - * will be kept enabled for underlineing the link when hovering. */ + * the table. However, these links should NOT be highlighted. Decorations + * 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; + } + } +} diff --git a/layout/theme.less b/layout/theme.less index 3f5f698..7c893cd 100644 --- a/layout/theme.less +++ b/layout/theme.less @@ -17,7 +17,7 @@ * * * Copyright (C) - * 2018 Alexander Haase + * 2018-2024 Alexander Haase */ /* 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 + * 2018-2024 Alexander Haase * * See the LICENSE file for details. */