IMPR: WebP format + some minor improvements

app/_config/webpack.yml

@@ -11,3 +11,4 @@ Site\Templates\WebpackTemplateProvider:
   DIST: client/dist
   TYPESJS: client/src/js/types
   TYPESSCSS: client/src/scss/types
+  webp: false

app/src/Elements/MapElement.php

@@ -74,7 +74,7 @@ class MapElement extends ElementContent
         return $fields;
     }
 
-    public function MapAPIKey(): string
+    public static function MapAPIKey(): string
     {
         $type = self::config()->get('map_type');
 

app/src/Extensions/LeftAndMainExtension.php

@@ -3,11 +3,24 @@
 
 namespace Site\Extensions;
 
+use SilverStripe\Core\Config\Config;
 use SilverStripe\Core\Extension;
+use SilverStripe\FontAwesome\FontAwesomeField;
+use SilverStripe\View\Requirements;
+use Site\Templates\DeferredRequirements;
 
 class LeftAndMainExtension extends Extension
 {
     public function init()
     {
+        $config = Config::inst()->get(DeferredRequirements::class);
+        // App libs
+        if (!$config['nofontawesome']) {
+            $v = !isset($config['fontawesome_version']) || !$config['fontawesome_version']
+                ? Config::inst()->get(FontAwesomeField::class, 'version')
+                : $config['fontawesome_version'];
+
+            Requirements::css('//use.fontawesome.com/releases/v'.$v.'/css/all.css');
+        }
     }
 }

app/src/Templates/WebpackTemplateProvider.php

@@ -31,6 +31,7 @@ class WebpackTemplateProvider implements TemplateGlobalProvider
      * @var string assets static files directory
      */
     private static $dist = 'client/dist';
+    private static $webp = false;
 
     /**
      * @return array
@@ -81,7 +82,20 @@ class WebpackTemplateProvider implements TemplateGlobalProvider
 
     public static function resourcesURL($link = null): string
     {
-        return Controller::join_links(Director::baseURL(), '/resources/'.self::projectName().'/client/dist/img/', $link);
+        $cfg = self::config();
+
+        if ($cfg['webp'] && !self::isActive()) {
+            $link = str_replace(['.png','.jpg','.jpeg'], '.webp', $link);
+        }
+
+        return Controller::join_links(
+            Director::baseURL(),
+            '/resources/',
+            self::projectName(),
+            $cfg['dist'],
+            'img',
+            $link
+        );
     }
 
 

app/src/Tests/TestServer.php

@@ -80,6 +80,13 @@ class TestServer extends BuildTask
             echo self::error('Assets dir <b>'.ASSETS_DIR.'</b> dir is no writable!');
         }
 
+        if (function_exists('imagewebp')) {
+            echo self::success('WebP is available');
+        } else {
+            echo self::error('WebP is not available');
+        }
+
+
         die();
     }
 

app/src/Traits/PaginatedListing.php

@@ -0,0 +1,18 @@
+<?php
+
+
+namespace Site\Traits;
+
+trait PaginatedListing
+{
+    private $filter = [];
+
+    public function NextPage($pageID = null)
+    {
+        $vars = $this->getRequest()->requestVars();
+        $vars = array_filter($vars);
+        $vars['page'] = $pageID ? $pageID : '2';
+
+        return $this->Link('?'.http_build_query($vars));
+    }
+}

app/templates/Includes/NavItem.ss

@@ -9,7 +9,6 @@
                 aria-haspopup="true"
                 aria-expanded="false"
                 href="{$Link}"
-                title="$Title.XML"
         >
             $MenuTitle.XML
             <% if $isCurrent || $isSection %><i class="sr-only">(current)</i><% end_if %>

app/templates/Site/Objects/NotificationsList.ss

@@ -3,11 +3,7 @@
     <% loop $NotificationsToday %>
         <div class="alert alert-warning">
             <div class="container">
-                <b class="btn btn-danger btn-close" data-dismiss="alert" aria-label="Close">
+                <% if $DisplayTitle && $Title %>
-                    <i class="fas fa-times"></i>
-                </b>
-
-                <% if $Title %>
                     <h2>$Title</h2>
                 <% end_if %>
 
@@ -25,6 +21,10 @@
                         </a>
                     <% end_with %>
                 <% end_if %>
+
+                <b class="btn btn-danger btn-close" data-dismiss="alert" aria-label="Close">
+                    <i class="fas fa-times"></i>
+                </b>
             </div>
         </div>
     <% end_loop %>

composer.json

@@ -44,7 +44,8 @@
     "a2nt/silverstripe-font-awesome-field": "dev-master",
     "a2nt/silverstripe-mapboxfield": "dev-master",
     "a2nt/silverstripe-progressivewebapp": "dev-master",
-    "bummzack/sortablefile": "*"
+    "bummzack/sortablefile": "*",
+    "showpro/silverstripe-seo-images": "*"
   },
   "require-dev": {
     "phpunit/phpunit": "^5.7",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ss-webpack-boilerplate",
-	"version": "2.2.1",
+	"version": "2.0.2",
 	"description": "Lets you create SilverStripe faster",
 	"author": "Tony Air <tony@twma.pro>",
 	"license": "MIT",
@@ -32,7 +32,7 @@
 	],
 	"dependencies": {
 		"@a2nt/meta-lightbox": "^2.2.1",
-		"@a2nt/ss-bootstrap-ui-webpack-boilerplate": "^2.2.1",
+		"@a2nt/ss-bootstrap-ui-webpack-boilerplate": "^2.3.1",
 		"bootbox": "^4.4.0",
 		"bootstrap": "^4.5.0",
 		"bootstrap-confirmation2": "^4.1.0",
@@ -40,6 +40,7 @@
 		"bootstrap-offcanvas": "^1.0.0",
 		"bootstrap-table": "^1.16.0",
 		"bootstrap-timepicker": "^0.5.2",
+		"exif-js": "^2.3.0",
 		"font-awesome": "^4.7.0",
 		"hammerjs": "^2.0.8",
 		"inputmask": "^5.0.3",
@@ -50,23 +51,25 @@
 		"jquery.appear": "^1.0.1",
 		"mapbox-gl": "^1.11.0",
 		"material-design-color": "^2.3.2",
+		"moment": "^2.27.0",
+		"offcanvas-bootstrap": "^2.5.2",
 		"popper.js": "*",
 		"select2": "^4.0.13",
+		"setimmediate": "^1.0.5",
 		"smooth-scroll": "^14.2.1",
 		"sticky-sidebar": "^3.3.1",
+		"tablednd": "^1.0.3",
 		"yarn": "^1.22.4"
 	},
 	"devDependencies": {
 		"@a2nt/image-sprite-webpack-plugin": "^0.2.5",
-		"@babel/core": "^7.10.2",
+		"@babel/core": "^7.10.4",
-		"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
+		"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
-		"@babel/plugin-transform-react-jsx": "^7.10.1",
+		"@babel/plugin-transform-react-jsx": "^7.10.4",
-		"@babel/preset-env": "^7.10.2",
+		"@babel/preset-env": "^7.10.4",
 		"@google/markerclusterer": "^1.0.3",
 		"animate.css": "^3.7.2",
-		"ansi-html": "^0.0.7",
+		"autoprefixer": "^9.8.4",
-		"ansi-regex": "^5.0.0",
-		"autoprefixer": "^9.8.0",
 		"babel-eslint": "^8.2.6",
 		"babel-loader": "^8.1.0",
 		"copy-webpack-plugin": "^4.6.0",
@@ -74,21 +77,22 @@
 		"cross-env": "^5.2.1",
 		"css-loader": "^3.6.0",
 		"eslint": "^4.19.1",
-		"eslint-plugin-import": "^2.21.2",
+		"eslint-plugin-import": "^2.22.0",
 		"eslint-plugin-jquery": "^1.5.1",
-		"eslint-plugin-react": "^7.20.0",
+		"eslint-plugin-react": "^7.20.3",
 		"exports-loader": "^0.7.0",
 		"favicons-webpack-plugin": "0.0.9",
 		"file-loader": "^5.1.0",
 		"font-awesome": "^4.7.0",
 		"hard-source-webpack-plugin": "^0.13.1",
-		"html-entities": "^1.3.1",
 		"html-webpack-plugin": "^4.3.0",
 		"imagemin-gifsicle": "^7.0.0",
 		"imagemin-jpegtran": "^6.0.0",
 		"imagemin-optipng": "^7.1.0",
 		"imagemin-svgo": "^7.1.0",
+		"imagemin-webp": "^6.0.0",
 		"imagemin-webpack": "^5.1.1",
+		"img-optimize-loader": "^1.0.4",
 		"loglevel": "^1.6.8",
 		"mini-css-extract-plugin": "^0.9.0",
 		"node-sass": "^4.14.1",
@@ -102,8 +106,6 @@
 		"sass-lint-fix": "^1.12.1",
 		"sass-loader": "^8.0.2",
 		"script-ext-html-webpack-plugin": "^2.1.4",
-		"sockjs-client": "^1.4.0",
-		"strip-ansi": "^6.0.0",
 		"style-loader": "^0.19.1",
 		"svg-url-loader": "^2.3.3",
 		"terser-webpack-plugin": "^2.3.7",

test.php

@@ -5,9 +5,9 @@ ini_set('display_startup_errors', 1);
 error_reporting(E_ALL);
 
 require_once('vendor/autoload.php');
-require_once('framework/core/Constants.php');
+//require_once('vendor/silverstripe/framework/src/Core/Constants.php');
 
-require_once('app/code/Tasks/TestServer.php');
+require_once('app/src/Tests/TestServer.php');
 
 $req = new \SilverStripe\Control\NullHTTPRequest();
 

webpack.config.common.js

@@ -12,7 +12,6 @@ const filesystem = require('fs');
 
 const includes = {};
 const modules = [
-	path.resolve(__dirname, 'public'),
 	path.resolve(__dirname, conf.APPDIR, 'client', 'src'),
 	path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'js'),
 	path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'scss'),
@@ -20,9 +19,11 @@ const modules = [
 	path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'thirdparty'),
 	path.resolve(__dirname, conf.APPDIR, 'client', 'node_modules'),
 	path.resolve(__dirname, 'node_modules'),
+	path.resolve(__dirname),
+	path.resolve(__dirname, 'public'),
 ];
 
-const _addAppFiles = theme => {
+const _addAppFiles = (theme) => {
 	const dirPath = path.resolve(__dirname, theme);
 	const themeName = path.basename(theme);
 
@@ -44,11 +45,11 @@ const _addAppFiles = theme => {
 	modules.push(path.join(dirPath, 'client', 'src', 'img'));
 	modules.push(path.join(dirPath, 'client', 'src', 'thirdparty'));
 
-	const _getAllFilesFromFolder = function(dir, includeSubFolders = true) {
+	const _getAllFilesFromFolder = function (dir, includeSubFolders = true) {
 		const dirPath = path.resolve(__dirname, dir);
 		let results = [];
 
-		filesystem.readdirSync(dirPath).forEach(file => {
+		filesystem.readdirSync(dirPath).forEach((file) => {
 			if (file.charAt(0) === '_') {
 				return;
 			}
@@ -72,7 +73,7 @@ const _addAppFiles = theme => {
 	const typesJSPath = path.join(theme, conf.TYPESJS);
 	if (filesystem.existsSync(typesJSPath)) {
 		const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
-		pageScripts.forEach(file => {
+		pageScripts.forEach((file) => {
 			includes[`${themeName}_${path.basename(file, '.js')}`] = file;
 		});
 	}
@@ -81,7 +82,7 @@ const _addAppFiles = theme => {
 	const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
 	if (filesystem.existsSync(typesSCSSPath)) {
 		const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
-		scssIncludes.forEach(file => {
+		scssIncludes.forEach((file) => {
 			includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
 		});
 	}
@@ -90,7 +91,7 @@ const _addAppFiles = theme => {
 _addAppFiles(conf.APPDIR);
 
 // add themes
-commonVariables.themes.forEach(theme => {
+commonVariables.themes.forEach((theme) => {
 	_addAppFiles(theme);
 });
 

webpack.config.dev.js

@@ -77,7 +77,7 @@ const config = merge.strategy({
         ],
       },
       {
-        test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|woff(2)?)$/,
+        test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
         use: [
           {
             loader: 'file-loader',

webpack.config.prod.js

@@ -102,10 +102,11 @@ let plugins = [
             ],
           },
         ],
+        ['webp', { quality: 100 }],
       ],
     },
   }),
-  new ImageSpritePlugin({
+  /*new ImageSpritePlugin({
     exclude: /exclude|original|default-|icons|sprite/,
     commentOrigin: false,
     compress: true,
@@ -115,11 +116,11 @@ let plugins = [
     //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
     outputFilename: 'img/sprite-[hash].png',
     padding: 0,
-  }),
+  }),*/
 ];
 
 // add themes favicons
-commonVariables.themes.forEach(theme => {
+commonVariables.themes.forEach((theme) => {
   const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
   if (filesystem.existsSync(faviconPath)) {
     plugins.push(
@@ -272,17 +273,24 @@ module.exports = merge(common, {
         ],
       },
       {
-        test: /\.(png|jpg|jpeg|gif|svg)$/,
+        test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
+        loader: 'img-optimize-loader',
+        options: {
+          compress: {
+            // This will take more time and get smaller images.
+            mode: 'high', // 'lossless', 'low'
+            disableOnDevelopment: true,
+            webp: conf['webp'],
+          },
+        },
+      },
+      {
+        test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[ext]',
+          name: conf['webp'] ? '[name].webp' : '[name].[ext]',
           outputPath: 'img/',
           publicPath: '../img/',
-          /*,
-                          name(file) {
-                              //return 'public/[path][name].[ext]';
-                              return '[hash].[ext]';
-                          },*/
         },
       },
     ],