release(2.20.0): up to bootstrap-italia v2.12.1 and pagine-statiche 2…

….4.3

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ouitoulia/skenografia",
-  "version": "2.8.0",
+  "version": "2.19.0",
   "description": "Skenografia è un sub-theme drupal, basato su bootstrap_italia, che implementa il design delle scuole.",
+  "type": "module",
   "engineStrict": true,
   "engines": {
     "node": ">=v20.0.0"
@@ -38,19 +39,20 @@
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss-loader": "^8.1.1",
-    "rimraf": "^5.0.7",
     "sass": "^1.77.4",
-    "sass-loader": "^14.2.1",
+    "sass-loader": "^16.0.4",
     "semver": "^7.6.2",
     "style-loader": "^4.0.0",
-    "svg-sprite-loader": "^6.0.11",
+    "svg-chunk-webpack-plugin": "^7.0.0",
     "svgo-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^6.0.1"
   },
   "dependencies": {
     "bootstrap-italia": "2.12.1",

skenografia.info.yml

@@ -2,7 +2,7 @@ name: "Skenografia"
 type: theme
 description: "Skenografia is a Drupal sub-theme, based on bootstrap_italia, which implements school design."
 package: "Ouitoulía"
-core_version_requirement: ^10
+core_version_requirement: ^10 || ^11
 base theme: bootstrap_italia
 
 # Choose libraries to use. Global is managed with theme settings UI.

skenografia.theme

@@ -16,6 +16,19 @@ function skenografia_library_info_build(): array {
 
 // Include all files from the includes directory.
 $includes_path = __DIR__ . '/includes/*.inc';
-foreach (glob($includes_path) as $filename) {
+
+/**
+ * All files in path.
+ *
+ * @var array<int, string>|false $files
+ */
+$files = glob($includes_path);
+
+/**
+ * Name of single file.
+ *
+ * @var string $filename
+ */
+foreach ((array) $files as $filename) {
   require_once __DIR__ . '/includes/' . basename($filename);
 }

src/js/custom/custom.js

@@ -3,11 +3,8 @@
  * Use this folder and file to manage your custom styles.
  */
 
-// Example JS
-//import './example'
-//import './example-alert-event'
-//import './example-bootstrap-italia-modules'
-import './icons'
+import './icons.js';
+import './main-menu--close.js';
 
 /**
  * Customize your bootstrap

src/js/custom/main-menu--close.js

@@ -0,0 +1,13 @@
+(function () {
+  'use strict';
+
+  Drupal.behaviors.mainMenuClose = {
+    attach: function (context, settings) {
+      document.addEventListener('DOMContentLoaded', function () {
+        const e = document.querySelector('.hamburger');
+        document.addEventListener('keyup', function (event) {if (event.key === 'Escape') {if (e.classList.contains('is-active')) {e.click();}}});
+      });
+    }
+  };
+
+})(Drupal);

src/js/index.js

@@ -8,11 +8,9 @@
  */
 
 // Import Bootstrap-italia components.
-import { loadPlugin } from 'bootstrap-italia/src/js/load-plugin'
-import init from 'bootstrap-italia/src/js/plugins/init'
-// import loadFonts from 'bootstrap-italia/src/js/plugins/fonts-loader'
-// import { cookies } from 'bootstrap-italia/src/js/plugins/util/cookies'
-import * as icons from 'bootstrap-italia/src/js/icons'
+import { loadPlugin } from 'bootstrap-italia/src/js/load-plugin.js';
+import init from 'bootstrap-italia/src/js/plugins/init.js';
+import * as icons from 'bootstrap-italia/src/js/icons.js';
 
 /**
  * Import all components, to choose components use
@@ -62,10 +60,10 @@ import {
   List,
   //Transfer,
   //VideoPlayer,
-} from 'bootstrap-italia'
+} from 'bootstrap-italia';
 
-loadPlugin(icons)
-init()
+loadPlugin(icons);
+init();
 
 const bootstrap = {
   Alert,
@@ -108,18 +106,18 @@ const bootstrap = {
   //ValidatorSelectAutocomplete,
   //loadFonts,
   //cookies,
-}
+};
 
 // Component library initialization.
-import './component-library-initialization'
+import './component-library-initialization.js';
 
 // Import custom JS.
-import './custom/custom'
+import './custom/custom.js';
 
 /**
  * Export all bootstrap-italia components as `bootstrap`,
  * use your custom.js to customize object.
  *
  * @type {any}
  */
-window.bootstrap = bootstrap
+window.bootstrap = bootstrap;

src/scss/_bootstrap.scss

@@ -24,7 +24,6 @@
 @import 'bootstrap/scss/breadcrumb';
 @import 'bootstrap/scss/pagination';
 @import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/alert';
 @import 'bootstrap/scss/progress';
 @import 'bootstrap/scss/list-group';
 @import 'bootstrap/scss/close';

src/scss/custom/r-engineering/override/_cards.scss

@@ -1054,9 +1054,9 @@
 
 // Questo tipo di card si può realizzare con le utility di bootstrap 5.2
 // components/card/card-vertical-thumb.html.twig
-//.card-vertical-thumb {
+.card-vertical-thumb {
 //  padding: 0;
-//  .card-body {
+  .card-body {
 //    display: flex;
 //    padding: 0;
 //    .card-thumb {
@@ -1085,8 +1085,14 @@
 //        }
 //      }
 //    }
-//  }
-//}
+    .card-title {
+      a {
+        // Fix bootstrap-italia v2.12.1
+        display: inherit;
+      }
+    }
+  }
+}
 
 //.card-event {
 //  padding: 0;

src/scss/custom/r-engineering/parts/_hero.scss

@@ -71,9 +71,8 @@
     }
   }
   small {
-    font-size: 1rem;
+    font-size: 1.2rem;
     font-weight: 700;
-    text-transform: uppercase;
     margin: 0 0 25px 0;
     display: block;
   }

svgo.config.js

@@ -0,0 +1,22 @@
+// https://svgo.dev/docs/plugins/
+export default {
+  multipass: true,
+  plugins: [
+    'cleanupAttrs',
+    'cleanupAttrs',
+    'removeEmptyAttrs',
+    'removeComments',
+    'convertStyleToAttrs',
+    'removeEmptyContainers',
+    'removeEmptyText',
+    'removeRasterImages',
+    'removeUnknownsAndDefaults',
+    'reusePaths',
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: '(fill)',
+      },
+    },
+  ],
+};

webpack.common.js

@@ -1,13 +1,16 @@
-const fs = require('fs')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
-const rimraf = require('rimraf')
-const check = require('./webpack.check')
+import fs from 'fs/promises';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import SvgChunkWebpackPlugin from 'svg-chunk-webpack-plugin';
+import paths from './webpack.paths.js';
+import semver from 'semver';
+import packageJson from './package.json' assert { type: 'json' };
 
-const paths = require('./webpack.paths')
+if (!semver.satisfies(process.version, packageJson.engines.node)) {
+  throw new Error(`The current Node.js version (${process.version}) does not satisfy the required version (${packageJson.engines.node}).`);
+}
 
-module.exports = {
+export default {
   // Entry
   entry: {
     "bootstrap-italia": [paths.src + '/js/index.js', paths.src + '/scss/theme.scss'],
@@ -33,26 +36,8 @@ module.exports = {
         ],
         use: [
           {
-            loader: 'svg-sprite-loader',
-            options: {
-              extract: true,
-              outputPath: '/svg/',
-              spriteFilename: 'sprites.svg',
-            }
+            loader: SvgChunkWebpackPlugin.loader,
           },
-          {
-            loader: 'svgo-loader',
-            options: {
-              plugins: [
-                {
-                  name: 'removeAttrs',
-                  params: {
-                    attrs: '(fill)',
-                  },
-                }
-              ]
-            }
-          }
         ],
       },
     ],
@@ -62,8 +47,13 @@ module.exports = {
       filename: 'css/[name].min.css',
       chunkFilename: 'css/[id].min.css'
     }),
-    new SpriteLoaderPlugin({
-      plainSprite: true
+    new SvgChunkWebpackPlugin({
+      filename: 'svg/sprites.svg',
+      svgstoreConfig: {
+        svgAttrs: {
+          'xmlns': 'http://www.w3.org/2000/svg',
+        }
+      }
     }),
     new CopyWebpackPlugin({
       patterns: [
@@ -103,21 +93,15 @@ module.exports = {
     }),
     {
       apply: (compiler) => {
-        compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
-          const ckeditorJsFile = compiler.options.output.path + '/js/ckeditor5.min.js';
-          const ckeditorComuniJsFile = compiler.options.output.path + '/js/ckeditor5-comuni.min.js';
-          const fontsJsFile = compiler.options.output.path + '/js/fonts.min.js';
-          if (fs.existsSync(ckeditorJsFile)) {
-            rimraf.sync(ckeditorJsFile);
-          }
-          if (fs.existsSync(ckeditorComuniJsFile)) {
-            rimraf.sync(ckeditorComuniJsFile);
-          }
-          if (fs.existsSync(fontsJsFile)) {
-            rimraf.sync(fontsJsFile);
+        compiler.hooks.afterEmit.tapPromise('AfterEmitPlugin', async (compilation) => {
+          const ckeditorJsFile = `${compiler.options.output.path}/js/ckeditor5.min.js`;
+          try {
+            await fs.rm(ckeditorJsFile, { force: true });
+          } catch (err) {
+            console.error('Error deleting ckeditor5.min.js:', err);
           }
         });
       },
-    }
+    },
   ],
 };