diff --git a/config/plugins.js b/config/plugins.js index f4ee382f..05123095 100644 --- a/config/plugins.js +++ b/config/plugins.js @@ -47,9 +47,9 @@ module.exports = { outputImageLocations: 'image-locations.json', // Output locations file name outputImageSizes: 'image-sizes.json', // Output sizes file name generateDefaultImages: true, // Generate default images - defaultImageSource: 'src/img/static/default.jpg', // Source image for generation + defaultImageSource: 'src/img/static/default.webp', // Source image for generation defaultImagesOutputDir: 'dist/images', // Default images output directory - defaultImageFormat: 'jpg', // Generated image format (jpg, png, webp, avif) + defaultImageFormat: 'webp', // Generated image format (jpg, png, webp, avif) silence: true, // Suppress console output }), new MiniCssExtractPlugin({ diff --git a/config/svgo.config.js b/config/svgo.config.js index b0450e0b..7e994e7a 100644 --- a/config/svgo.config.js +++ b/config/svgo.config.js @@ -1,38 +1,17 @@ module.exports = { plugins: [ - { cleanupAttrs: true }, - { removeDoctype: true }, - { removeXMLProcInst: true }, - { removeComments: true }, - { removeMetadata: true }, - { removeTitle: true }, - { removeDesc: true }, - { removeUselessDefs: true }, - { removeEditorsNSData: true }, - { removeEmptyAttrs: true }, - { removeHiddenElems: true }, - { removeEmptyText: true }, - { removeEmptyContainers: true }, - { cleanupEnableBackground: true }, - { convertStyleToAttrs: true }, - { convertColors: true }, - { convertPathData: true }, - { convertTransform: true }, - { removeUnknownsAndDefaults: true }, - { removeNonInheritableGroupAttrs: true }, - { removeUselessStrokeAndFill: true }, - { removeUnusedNS: true }, - { cleanupIDs: true }, - { cleanupNumericValues: true }, - { moveElemsAttrsToGroup: true }, - { moveGroupAttrsToElems: true }, - { collapseGroups: true }, - { removeRasterImages: false }, - { mergePaths: true }, - { convertShapeToPath: true }, - { sortAttrs: true }, - { removeDimensions: false }, - { prefixIds: true }, - { removeViewBox: false }, + { + name: 'preset-default', + params: { + overrides: { + // Disable a plugin included by default that you don't want (false) + removeViewBox: false, + }, + }, + }, + // Plugins that are not in the "preset-default" and that you want to activate + 'removeTitle', + 'convertStyleToAttrs', + 'prefixIds', ], } diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index d7a9618f..1b30a9af 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -41,9 +41,9 @@ class WebpackImageSizesPlugin { outputImageLocations: 'image-locations.json', outputImageSizes: 'image-sizes.json', generateDefaultImages: false, - defaultImageSource: 'src/img/static/default.jpg', + defaultImageSource: 'src/img/static/default.webp', defaultImagesOutputDir: 'dist/images', - defaultImageFormat: 'jpg', + defaultImageFormat: 'webp', silence: false, ...options, } @@ -543,8 +543,7 @@ class WebpackImageSizesPlugin { this.log( 'log', - `🖼️ Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${ - this.options.defaultImageSource + `🖼️ Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${this.options.defaultImageSource }` ) diff --git a/config/webpack.common.js b/config/webpack.common.js index 1e12ba68..8f7d00a4 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -18,14 +18,11 @@ module.exports = { minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { - // Lossless optimization with custom option - // Feel free to experiment with options for better result for you plugins: [ ['gifsicle', { interlaced: true }], ['jpegtran', { progressive: true }], ['optipng', { optimizationLevel: 5 }], - // Svgo configuration here https://github.com/svg/svgo#configuratio - ['svgo', { svgoconfig }], + ['svgo', svgoconfig], ], }, }, diff --git a/config/webpack.dev.js b/config/webpack.dev.js index 834f8892..fef55411 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -6,7 +6,7 @@ const loaders = require('./loaders') const mode = 'development' module.exports = merge(common, { - mode: mode, + mode, stats: 'errors-only', devtool: 'inline-source-map', devServer: { diff --git a/config/webpack.prod.js b/config/webpack.prod.js index 79b06500..aa6b4d66 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -5,7 +5,7 @@ const loaders = require('./loaders') const mode = 'production' module.exports = merge(common, { - mode: mode, + mode, stats: 'minimal', output: { filename: '[name].js', diff --git a/src/img/static/default.jpg b/src/img/static/default.jpg deleted file mode 100644 index 82629726..00000000 Binary files a/src/img/static/default.jpg and /dev/null differ diff --git a/src/img/static/default.webp b/src/img/static/default.webp new file mode 100644 index 00000000..02b7b6f6 Binary files /dev/null and b/src/img/static/default.webp differ diff --git a/src/img/static/logo-beapi.svg b/src/img/static/logo-beapi.svg deleted file mode 100644 index 5cf0fca4..00000000 --- a/src/img/static/logo-beapi.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/img/static/logo.jpg b/src/img/static/logo.jpg deleted file mode 100644 index 82629726..00000000 Binary files a/src/img/static/logo.jpg and /dev/null differ diff --git a/src/img/static/logo.webp b/src/img/static/logo.webp new file mode 100644 index 00000000..02b7b6f6 Binary files /dev/null and b/src/img/static/logo.webp differ diff --git a/src/scss/02-tools/_m-background-static.scss b/src/scss/02-tools/_m-background-static.scss deleted file mode 100644 index 0da1447e..00000000 --- a/src/scss/02-tools/_m-background-static.scss +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Background retina - Make an alignment (left or right) - * - * @author Cédric Andrietti - * - * @param $direction - * - * Examples : - * - * .test { - * @include background-static("your-image"); - * } - * - */ - -@mixin background-static($filename, $retina: true, $position: center center, $size: auto 100%, $type: "png" ) { - background-image: url(../img/static/#{$filename}.#{$type}); - background-repeat: no-repeat; - background-position: $position; - background-size: $size; - - @if ($retina) { - @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - background-image: url(../img/static/#{$filename}@2x.#{$type}); - } - } -} diff --git a/src/scss/login.scss b/src/scss/login.scss index ad1fdd5f..7f2726aa 100644 --- a/src/scss/login.scss +++ b/src/scss/login.scss @@ -1,7 +1,7 @@ // SCSS variables to customise the login page styles // The CSS file generated in dist/ by webpack is called automatically thanks to the WP Login Page mu-plugin present in the WP Skeleton. -$login-logo-path: "../../src/img/static/logo.jpg"; +$login-logo-path: "../../src/img/static/logo.webp"; $login-logo-size: 312px 43px; $login-logo-height: 60px; $login-body-bg-color: #666; @@ -16,6 +16,7 @@ $login-btn-hover-bg-color: #222; html, body { + &::before, &::after { display: none;