Adds option for alternate sites layout

jumpapp/assets/css/src/styles.css

@@ -251,6 +251,61 @@ body {
         white-space: nowrap;
     }
 
+    .sites.alternate {
+        width:100%;
+        margin-top: 20px;
+    }
+        .sites.alternate li {
+            float: left;
+            width: 50%;
+            text-align: left;
+            padding: 0 5px;
+            margin-bottom: 10px;
+        }
+            .sites.alternate li a {
+                background-color: rgba(255,255,255,0.8);
+                box-shadow: 0 1px 5px rgba(0,0,0,.3);
+                padding: 8px;
+                width: 100%;
+                transition: background-color .1s, box-shadow .1s;
+                position:relative;
+                overflow:hidden;
+            }
+                .sites.alternate li a:hover {
+                    background-color:#fff;
+                    box-shadow: 0 1px 5px rgba(0,0,0,.6);
+                }
+        .sites.alternate .icon {
+            width: 35px;
+            height:35px;
+            display:inline-block;
+            padding: 0;
+            border: none;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow: none;
+            vertical-align: middle;
+            margin: 0 8px 0 0;
+        }
+        .sites.alternate .name {
+            width:auto;
+            display:inline-block;
+            vertical-align: middle;
+            text-shadow: none;
+            color: #202124;
+            position: absolute;
+            top: 50%;
+            height: 14px;
+            line-height: 14px;
+            margin-top: -7px;
+        }
+
+        @media (max-width: 500px) {
+            .sites.alternate li {
+                width: 100%;
+            }
+        }
+
 .tags {
     display:none;
     color: #202124;

jumpapp/classes/Pages/HomePage.php

@@ -29,6 +29,7 @@ class HomePage extends AbstractPage {
             return $template->render([
                 'hassites' => !empty($sites->get_sites()),
                 'sites' => $sites->get_sites_by_tag('home'),
+                'altlayout' => $this->config->parse_bool($this->config->get('altlayout', false)),
             ]);
         });
     }

jumpapp/classes/Pages/TagPage.php

@@ -35,6 +35,7 @@ class TagPage extends AbstractPage {
             return $template->render([
                 'hassites' => !empty($taggedsites),
                 'sites' => $taggedsites,
+                'altlayout' => $this->config->parse_bool($this->config->get('altlayout', false)),
             ]);
         });
     }

jumpapp/config.php

@@ -29,6 +29,8 @@ return [
     'bgblur'         => getenv('BGBLUR')         ?:   '70',
     // Background brightness percentage.
     'bgbright'       => getenv('BGBRIGHT')       ?:   '85',
+    // Display alternative layout of sites list.
+    'altlayout'     => getenv('ALTLAYOUT')     ?:   false,
 
     // Open Weather Map API key.
     'owmapikey'      => getenv('OWMAPIKEY')      ?:   '',

jumpapp/templates/footer.mustache

@@ -23,6 +23,6 @@
         </div>
         {{/ hastags}}
         <div class="background fixed"></div>
-        <script defer src="/assets/js/index.bundle.js"></script>
+        <script defer src="../assets/js/index.52c1dcb71f05502fb292.min.js"></script>
     </body>
 </html>

jumpapp/templates/header.mustache

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {{# noindex}}<meta name="robots" content="noindex">{{/ noindex}}
-        <link rel="stylesheet" href="/assets/css/styles.css">
+        <link rel="stylesheet" href="/assets/css/styles.16bdbba8f5c4dda86818.min.css">
         <link rel="stylesheet" href="/background-css.php">
         <link rel="stylesheet" href="/assets/css/weather-icons.min.css">
         <link rel="icon" type="image/png" href="/favicon.png">
@@ -24,3 +24,4 @@
             {{# greeting}}<span class="tagname"><span>#</span>{{greeting}}</span>{{/ greeting}}
             {{^ greeting}}Good <span class="chosen"></span>{{/ greeting}}
             </div>
+

jumpapp/templates/sites.mustache

@@ -1,5 +1,5 @@
 {{# hassites}}
-<ul class="sites">
+<ul class="sites {{# altlayout}}alternate{{/ altlayout}}">
     {{# sites}}
     <li><a {{# newtab}}target="_blank"{{/ newtab}} rel="{{# nofollow}}nofollow {{/ nofollow}}{{# newtab}}noopener{{/ newtab}}" title="{{name}}" href="{{url}}">
         <span class="icon">

jumpapp/templates/src/footer.mustache

@@ -0,0 +1,28 @@
+        </div>
+        <span class="time-weather hidden">
+            <a class="weather widget clickable" href="https://openweathermap.org/">
+                <span class="weather-info">
+                    <span class="desc"></span>
+                    <span class="temp"></span>
+                </span>
+                <i class="weather-icon wi"></i>
+            </a>
+            {{# showclock}}<span class="time widget"></span>{{/ showclock}}
+        </span>
+        <span class="useclientlocation widget clickable"></span>
+        <div class="header-bar">
+           {{# hastags }}<a href="#tags" class="show-tags"></a>{{/ hastags }}
+        </div>
+        {{# hastags}}
+        <div id="tags" class="tags">
+            <span class="header">Tags<span class="close"></span></span>
+            <ul>
+                <li><a href="/">home</a></li>
+                {{# tags}}<li><a href="/tag/{{.}}/">{{.}}</a></li>{{/ tags}}
+            </ul>
+        </div>
+        {{/ hastags}}
+        <div class="background fixed"></div>
+        <script defer src="<%= htmlWebpackPlugin.files.js %>"></script>
+    </body>
+</html>

jumpapp/templates/src/header.mustache

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        {{# noindex}}<meta name="robots" content="noindex">{{/ noindex}}
+        <link rel="stylesheet" href="/assets/css/<%= _.last(htmlWebpackPlugin.files.css[0].split('/')) %>">
+        <link rel="stylesheet" href="/background-css.php">
+        <link rel="stylesheet" href="/assets/css/weather-icons.min.css">
+        <link rel="icon" type="image/png" href="/favicon.png">
+        <title>{{title}}</title>
+        <script>
+            const JUMP = {
+                owmapikey: '{{owmapikey}}',
+                metrictemp: '{{metrictemp}}',
+                ampmclock: '{{ampmclock}}',
+                token: '{{csrftoken}}'
+            };
+        </script>
+    </head>
+    <body>
+        <div class="content fixed hidden">
+            <div class="greeting">
+            {{# greeting}}<span class="tagname"><span>#</span>{{greeting}}</span>{{/ greeting}}
+            {{^ greeting}}Good <span class="chosen"></span>{{/ greeting}}
+            </div>
+

package.json

@@ -7,9 +7,15 @@
         "build": "webpack"
     },
     "devDependencies": {
+        "clean-webpack-plugin": "^4.0.0",
+        "css-loader": "^6.7.1",
+        "css-minimizer-webpack-plugin": "^3.4.1",
+        "html-webpack-plugin": "^5.5.0",
+        "mini-css-extract-plugin": "^2.6.0",
         "terser-webpack-plugin": "^5.3.1",
         "webpack": "^5.68.0",
-        "webpack-cli": "^4.9.2"
+        "webpack-cli": "^4.9.2",
+        "webpack-remove-empty-scripts": "^0.8.0"
     },
     "dependencies": {
         "eventemitter3": "^4.0.7"

webpack.config.js

@@ -1,13 +1,64 @@
 const path = require('path');
 const Terser = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
     mode: 'production',
-    entry: './jumpapp/assets/js/src/index.js',
+    entry: {
+        index: './jumpapp/assets/js/src/index.js',
+        styles: './jumpapp/assets/css/src/styles.css',
+    },
     output: {
-        filename: 'index.bundle.js',
+        filename: '[name].[contenthash].min.js',
         path: path.resolve(__dirname, './jumpapp/assets/js/'),
     },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader
+                    },
+                    {
+                        loader: "css-loader",
+                        options: {
+                            url: false // Stop webpack emitting image/font from URLs found in CSS.
+                        }
+                    }
+                ],
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: path.resolve(__dirname, './jumpapp/templates/header.mustache'),
+            template: path.resolve(__dirname, './jumpapp/templates/src/header.mustache'),
+            inject: false,
+            minify: false, // Required to prevent addition of closing tags like body and html.
+        }),
+        new HtmlWebpackPlugin({
+            filename: path.resolve(__dirname, './jumpapp/templates/footer.mustache'),
+            template: path.resolve(__dirname, './jumpapp/templates/src/footer.mustache'),
+            inject: false,
+            minify: false, // Required to prevent addition of closing tags like body and html.
+        }),
+        new MiniCssExtractPlugin({filename: '../css/[name].[contenthash].min.css'}),
+        new RemoveEmptyScriptsPlugin(),
+        new CleanWebpackPlugin({
+            verbose: true,
+            cleanStaleWebpackAssets: true,
+            cleanOnceBeforeBuildPatterns: [
+                'index.*.min.js',
+                path.resolve(__dirname, './jumpapp/assets/css/styles.*.min.css')
+            ],
+            dangerouslyAllowCleanPatternsOutsideProject: true,
+        })
+    ],
     optimization: {
         minimizer: [
             new Terser({
@@ -18,6 +69,7 @@ module.exports = {
                 },
                 extractComments: false,
             }),
+            new CssMinimizerPlugin(),
         ],
     },
 };