IMPR: WebP format + some minor improvements
This commit is contained in:
Tony Air
parent
bc7fea884a
commit
2c97a2a4cf
|
|
@ -10,4 +10,5 @@ Site\Templates\WebpackTemplateProvider:
|
|||
SRC: client/src
|
||||
DIST: client/dist
|
||||
TYPESJS: client/src/js/types
|
||||
TYPESSCSS: client/src/scss/types
|
||||
TYPESSCSS: client/src/scss/types
|
||||
webp: false
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<i class="fas fa-times"></i>
|
||||
</b>
|
||||
|
||||
<% if $Title %>
|
||||
<% if $DisplayTitle && $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 %>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
30
package.json
30
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/plugin-proposal-object-rest-spread": "^7.10.1",
|
||||
"@babel/plugin-transform-react-jsx": "^7.10.1",
|
||||
"@babel/preset-env": "^7.10.2",
|
||||
"@babel/core": "^7.10.4",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
|
||||
"@babel/plugin-transform-react-jsx": "^7.10.4",
|
||||
"@babel/preset-env": "^7.10.4",
|
||||
"@google/markerclusterer": "^1.0.3",
|
||||
"animate.css": "^3.7.2",
|
||||
"ansi-html": "^0.0.7",
|
||||
"ansi-regex": "^5.0.0",
|
||||
"autoprefixer": "^9.8.0",
|
||||
"autoprefixer": "^9.8.4",
|
||||
"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",
|
||||
|
|
|
|||
4
test.php
4
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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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]';
|
||||
},*/
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue