From 10b35ec5da41982964fd0c007c711b7ea13bd1d2 Mon Sep 17 00:00:00 2001 From: Laurent DAVERIO Date: Thu, 17 Feb 2022 11:03:26 +0300 Subject: [PATCH 1/8] WIP - Replace JS dependency: node-sass -> sass --- package.json | 5 ++--- src/sass/mixins/_grid.scss | 4 ++-- src/sass/mixins/_triangle.scss | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 45aae24..e6b6122 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,7 @@ }, "resolutions": { "**/jquery": "~3.5.1", - "webpack-dev-server/**/yargs-parser": "^13.1.0", - "node-sass/**/yargs-parser": "^13.1.0" + "webpack-dev-server/**/yargs-parser": "^13.1.0" }, "dependencies": { "animate.css": "^3.5.1", @@ -48,11 +47,11 @@ "hugo-bin": "^0.57.2", "imports-loader": "^0.8.0", "mini-css-extract-plugin": "^0.9.0", - "node-sass": "^4.13.1", "npm-run-all": "^4.1.5", "postcss-loader": "^3.0.0", "raw-loader": "^4.0.0", "rimraf": "^3.0.2", + "sass": "^1.49.8", "sass-loader": "^8.0.2", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", diff --git a/src/sass/mixins/_grid.scss b/src/sass/mixins/_grid.scss index 98200fe..05d9cfb 100644 --- a/src/sass/mixins/_grid.scss +++ b/src/sass/mixins/_grid.scss @@ -3,7 +3,7 @@ @mixin box-fixed($gutter: $grid-gutter-width) { margin-right: auto; margin-left: auto; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); + padding-left: calc($gutter / 2); + padding-right: calc($gutter / 2); @include clearfix; } diff --git a/src/sass/mixins/_triangle.scss b/src/sass/mixins/_triangle.scss index 1c00b7e..88f3983 100644 --- a/src/sass/mixins/_triangle.scss +++ b/src/sass/mixins/_triangle.scss @@ -21,7 +21,7 @@ @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { - $width: $width / 2; + $width: calc($width / 2); $height: if(length($size) > 1, $height, $height/2); @if $direction == up { From b3a0689765c0f570d6d2ad9aa382da2d5f46f66c Mon Sep 17 00:00:00 2001 From: Laurent DAVERIO Date: Fri, 18 Feb 2022 22:45:21 +0300 Subject: [PATCH 2/8] WIP - Update JS dependencies: webpack-merge, webpack-manifest-plugin --- package.json | 4 ++-- webpack.common.js | 4 ++-- webpack.dev.js | 2 +- webpack.prod.js | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index e6b6122..8d9b37e 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3", - "webpack-manifest-plugin": "^2.2.0", - "webpack-merge": "^4.2.2" + "webpack-manifest-plugin": "^4.1.1", + "webpack-merge": "^5.8.0" } } diff --git a/webpack.common.js b/webpack.common.js index 651398c..f4e404e 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,5 +1,5 @@ const path = require('path'); -const ManifestPlugin = require('webpack-manifest-plugin'); +const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const webpack = require('webpack'); @@ -81,7 +81,7 @@ module.exports = { $: 'jquery', jQuery: 'jquery', }), - new ManifestPlugin({ + new WebpackManifestPlugin({ fileName: path.resolve('data', 'manifest.json'), writeToFileEmit: true, }), diff --git a/webpack.dev.js b/webpack.dev.js index 904d8e3..014113a 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,7 +1,7 @@ const path = require("path"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const merge = require("webpack-merge"); +const { merge } = require("webpack-merge"); const common = require("./webpack.common"); diff --git a/webpack.prod.js b/webpack.prod.js index e730e44..7313a7f 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -1,4 +1,4 @@ -const merge = require("webpack-merge"); +const { merge } = require("webpack-merge"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const common = require("./webpack.common"); From 63c887d63380bb53132301697c12ba2a2aafffd2 Mon Sep 17 00:00:00 2001 From: Laurent DAVERIO Date: Fri, 18 Feb 2022 23:09:10 +0300 Subject: [PATCH 3/8] WIP - Upgrade JS dependency: bootstrap 3 -> 4, bootstrap-sass no longer relevant --- package.json | 10 +++++----- src/sass/_base.scss | 11 ++++++++++- src/sass/_config.scss | 27 +++++++++++++++++++++------ src/sass/_mixins.scss | 2 +- src/sass/layout/_layout.scss | 6 +++--- src/sass/layout/_nav.scss | 2 +- src/sass/modules/_home.scss | 2 +- 7 files changed, 42 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 8d9b37e..467eb9e 100644 --- a/package.json +++ b/package.json @@ -18,19 +18,19 @@ "build:webpack": "webpack --config webpack.prod.js" }, "resolutions": { - "**/jquery": "~3.5.1", + "**/jquery": "~3.6.0", "webpack-dev-server/**/yargs-parser": "^13.1.0" }, "dependencies": { "animate.css": "^3.5.1", - "bootstrap": "^3.3.7", + "bootstrap": "4.6.1", "bootstrap-multiselect": "0.9.15", - "bootstrap-sass": "^3.3.6", "font-awesome": "^4.6.3", "highlight.js": "^10.4.1", "isotope-layout": "^3.0.0", - "jquery": "~3.5.1", - "jquery-bridget": "^2.0.0" + "jquery": "^3.6.0", + "jquery-bridget": "^2.0.0", + "popper.js": "^1.16.1" }, "devDependencies": { "@babel/core": "^7.9.0", diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 5427440..19e4e50 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -27,6 +27,15 @@ a { text-decoration: $link-hover-decoration; } + // WebKit-style focus, missing from Bootstrap 4 + @mixin tab-focus { + // WebKit-specific. Other browsers will keep their default outline style. + // (Initially tried to also force default via `outline: initial`, + // but that seems to erroneously remove the outline in Firefox altogether.) + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; + } + &:focus { @include tab-focus; } @@ -36,7 +45,7 @@ hr { margin-top: $line-height-computed; margin-bottom: $line-height-computed; border: 0; - border-top: 1px solid $hr-border; + border-top: 1px solid $hr-border-color; } strong { diff --git a/src/sass/_config.scss b/src/sass/_config.scss index 4310d3d..3a5b48b 100644 --- a/src/sass/_config.scss +++ b/src/sass/_config.scss @@ -1,14 +1,16 @@ // Config -@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; +@import "~bootstrap/scss/mixins/clearfix"; +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; // Colors -$color-primary: $brand-primary; -$color-success: $brand-success; -$color-info: $brand-info; -$color-warning: $brand-warning; -$color-danger: $brand-danger; +$color-primary: $primary; +$color-success: $success; +$color-info: $info; +$color-warning: $warning; +$color-danger: $danger; $color-alert: #10cfbd; $color-system: #6d5cae; $color-dark: #3a3a3a; @@ -16,6 +18,7 @@ $color-light: #ececec; $white: #ffffff; $black: #000000; +$gray-lighter: #eee; // From Bootstrap 3 $tpc-red: #bf1e2d; $tpc-gray: #bfbfbf; @@ -108,3 +111,15 @@ $footer-background-color: $color-dark; $block-padding-ends: 60px; $block-padding-sides: 0; +// Devices +// The names are adapted from Bootstrap 3, but with Bootstrap 4 breakpoint values + +$screen-sm-min: map-get($grid-breakpoints, "sm"); // 576px (BS 3: 768px) +$screen-md-min: map-get($grid-breakpoints, "md"); // 768px (BS 3: 992px) +$screen-lg-min: map-get($grid-breakpoints, "lg"); // 992px (BS 3: 1200px) +$screen-xl-min: map-get($grid-breakpoints, "xl"); // 1200px + +$screen-xs-max: $screen-sm-min - 1; +$screen-sm-max: $screen-md-min - 1; +$screen-md-max: $screen-lg-min - 1; +$screen-lg-max: $screen-xl-min - 1; diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss index f948385..b709af4 100644 --- a/src/sass/_mixins.scss +++ b/src/sass/_mixins.scss @@ -1,6 +1,6 @@ // Mixins Imports -@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins"; +@import "~bootstrap/scss/variables"; @import "mixins/colors"; @import "mixins/grid"; diff --git a/src/sass/layout/_layout.scss b/src/sass/layout/_layout.scss index e582254..6f9eacf 100644 --- a/src/sass/layout/_layout.scss +++ b/src/sass/layout/_layout.scss @@ -25,13 +25,13 @@ .box { @include box-fixed; - @media (min-width: $screen-sm-min) { + @media (min-width: $screen-md-min) { width: $box-sm; } - @media (min-width: $screen-md-min) { + @media (min-width: $screen-lg-min) { width: $box-md; } - @media (min-width: $screen-lg-min) { + @media (min-width: $screen-xl-min) { width: $box-lg; } } diff --git a/src/sass/layout/_nav.scss b/src/sass/layout/_nav.scss index b89a7b9..96ffcff 100644 --- a/src/sass/layout/_nav.scss +++ b/src/sass/layout/_nav.scss @@ -116,7 +116,7 @@ nav#nav { } } -@media (max-width: $screen-xs-max) { +@media (max-width: $screen-sm-max) { nav#nav { &.index-transparent { .navbar { diff --git a/src/sass/modules/_home.scss b/src/sass/modules/_home.scss index 0f08008..2889158 100644 --- a/src/sass/modules/_home.scss +++ b/src/sass/modules/_home.scss @@ -109,7 +109,7 @@ } } -@media (max-width: $screen-sm-max) { +@media (max-width: $screen-md-max) { .home { h1.title { &.not-first { From 56321d3c57bdc5f833503a76cb2e8a02f3e28064 Mon Sep 17 00:00:00 2001 From: Laurent DAVERIO Date: Fri, 18 Feb 2022 23:14:11 +0300 Subject: [PATCH 4/8] WIP - Upgrade JS dependency: webpack 4 -> 5 --- package.json | 26 ++++++++++++-------------- webpack.common.js | 33 +++++++++++++-------------------- webpack.dev.js | 30 ++++++++++++++---------------- 3 files changed, 39 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 467eb9e..116cef8 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "resolutions": { "**/jquery": "~3.6.0", - "webpack-dev-server/**/yargs-parser": "^13.1.0" + "webpack-dev-server/**/yargs-parser": "^21.0.0" }, "dependencies": { "animate.css": "^3.5.1", @@ -38,24 +38,22 @@ "autoprefixer": "^9.7.6", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", - "clean-webpack-plugin": "^3.0.0", + "clean-webpack-plugin": "^4.0.0", "core-js": "^3.6.4", - "css-loader": "^3.5.0", + "css-loader": "^6.6.0", "eslint": "^6.8.0", - "expose-loader": "^0.7.5", - "file-loader": "^6.0.0", - "hugo-bin": "^0.57.2", - "imports-loader": "^0.8.0", - "mini-css-extract-plugin": "^0.9.0", + "expose-loader": "^3.1.0", + "imports-loader": "^3.1.1", + "mini-css-extract-plugin": "^2.5.3", "npm-run-all": "^4.1.5", - "postcss-loader": "^3.0.0", - "raw-loader": "^4.0.0", + "postcss": "^8.4.6", + "postcss-loader": "^6.2.1", "rimraf": "^3.0.2", "sass": "^1.49.8", - "sass-loader": "^8.0.2", - "webpack": "^4.42.1", - "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3", + "sass-loader": "^12.6.0", + "webpack": "^5.69.1", + "webpack-cli": "^4.9.2", + "webpack-dev-server": "^4.7.4", "webpack-manifest-plugin": "^4.1.1", "webpack-merge": "^5.8.0" } diff --git a/webpack.common.js b/webpack.common.js index f4e404e..8a017c1 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -6,6 +6,7 @@ const webpack = require('webpack'); module.exports = { entry: path.resolve('src', 'main.js'), output: { + publicPath: '/', path: path.resolve('dist'), }, module: { @@ -26,38 +27,30 @@ module.exports = { }, { test: /\.(png|jpg|ico|gif|svg|pdf)$/, - loader: 'file-loader', - options: { - name: 'img/[name].[ext]', + type: 'asset/resource', + generator: { + filename: 'img/[name][ext]', }, }, { test: /\.(woff|woff2|ttf|eot)(\?.*)?$/, - loader: 'file-loader', - options: { - name: 'fonts/[name].[ext]', + type: 'asset/resource', + generator: { + filename: 'fonts/[name][ext]', }, }, // imports/expose are here to trick bootstrap-multiselect { test: require.resolve('jquery'), - use: [ - { - loader: 'expose-loader', - options: 'jQuery', - }, - { - loader: 'expose-loader', - options: '$', - }, - ], + loader: 'expose-loader', + options: { + exposes: ['$', 'jQuery'], + }, }, { - test: [ - require.resolve('bootstrap-multiselect'), - ], - use: 'imports-loader?this=>window', + test: require.resolve('bootstrap-multiselect'), + use: 'imports-loader?wrapper=window', }, ], }, diff --git a/webpack.dev.js b/webpack.dev.js index 014113a..c0df67c 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,39 +1,37 @@ -const path = require("path"); +const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const { merge } = require("webpack-merge"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const { merge } = require('webpack-merge'); -const common = require("./webpack.common"); +const common = require('./webpack.common'); module.exports = merge(common, { - mode: "development", + mode: 'development', output: { - filename: "[name].js", + filename: '[name].js', }, devServer: { port: process.env.PORT || 3000, - contentBase: path.resolve("dist"), - watchContentBase: true, - quiet: false, + static: path.resolve('dist'), open: true, historyApiFallback: { - rewrites: [{from: /./, to: "404.html"}] - } + rewrites: [{ from: /./, to: '404.html' }], + }, }, plugins: [ new CleanWebpackPlugin({ verbose: true, cleanOnceBeforeBuildPatterns: [ - "dist/**/*.js", - "dist/**/*.css", - "data/manifest.json", + 'dist/**/*.js', + 'dist/**/*.css', + 'data/manifest.json', ], }), new MiniCssExtractPlugin({ - filename: "[name].css", + filename: '[name].css', }), - ] + ], }); From 975884d3d87b27f96d1f99fb3294ec417a58d118 Mon Sep 17 00:00:00 2001 From: Laurent DAVERIO Date: Sat, 19 Feb 2022 01:06:24 +0300 Subject: [PATCH 5/8] WIP - Upgrade navbar to bootstrap 4 --- layouts/partials/nav.html | 83 ++++++++++--------- src/sass/layout/_nav.scss | 164 +++++--------------------------------- 2 files changed, 61 insertions(+), 186 deletions(-) diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 61deb42..10a6ad0 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,46 +1,43 @@ -