diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index d09be165..4783470a 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -20,10 +20,14 @@ jobs: steps: - uses: actions/checkout@v4 + - name: Enable Corepack + # Must run before setup-node's yarn cache: resolves Yarn from packageManager, not v1. + # See: https://github.com/actions/setup-node/issues/1027 + run: corepack enable - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} - - run: yarn set version berry + cache: yarn - run: yarn - run: yarn build diff --git a/config/plugins.js b/config/plugins.js index dd5858ee..32b9cbbb 100644 --- a/config/plugins.js +++ b/config/plugins.js @@ -1,4 +1,6 @@ const path = require('path') +const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') +const svgoconfig = require('./svgo.config') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const { WebpackManifestPlugin } = require('webpack-manifest-plugin') const ESLintPlugin = require('eslint-webpack-plugin') @@ -47,14 +49,29 @@ 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 }), ] if (mode === 'production') { + plugins.push( + new ImageMinimizerPlugin({ + minimizer: { + implementation: ImageMinimizerPlugin.imageminMinify, + options: { + plugins: [ + ['gifsicle', { interlaced: true }], + ['jpegtran', { progressive: true }], + ['optipng', { optimizationLevel: 5 }], + ['svgo', svgoconfig], + ], + }, + }, + }) + ) plugins.push( new BundleAnalyzerPlugin({ analyzerMode: 'json', diff --git a/config/svgo.config.js b/config/svgo.config.js index b0450e0b..9cafa52d 100644 --- a/config/svgo.config.js +++ b/config/svgo.config.js @@ -1,38 +1,16 @@ 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 + '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..c3886ef4 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -1,8 +1,6 @@ const path = require('path') const entries = require('./entries') -const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') const TerserPlugin = require('terser-webpack-plugin') -const svgoconfig = require('./svgo.config') module.exports = { entry: entries, @@ -14,22 +12,6 @@ module.exports = { }, optimization: { minimizer: [ - new ImageMinimizerPlugin({ - 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 }], - ], - }, - }, - }), new TerserPlugin({ parallel: true, terserOptions: { 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 4c0cd0fd..ec3c1ea3 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]-min.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; diff --git a/yarn.lock b/yarn.lock index ff870edd..8b063e38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2678,9 +2678,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": - version: 1.0.30001712 - resolution: "caniuse-lite@npm:1.0.30001712" - checksum: 10/1831ac3260b9657c5a0236d21c02bea6a6b88fd67a451a0ff166d27da17c95ab398c5721e08aeb24f766bced1d38f562f07c8de84e91a10a065808e83835e89e + version: 1.0.30001790 + resolution: "caniuse-lite@npm:1.0.30001790" + checksum: 10/2625ba0b9c2648d14b4b02daf2fe7013d4efe087a45b034f40849c97077d435dbc610b47a34d3d6360cd62b7972864ae16978955205b7b8f7397303ba793e0ed languageName: node linkType: hard