Set up Webpack Encore

.gitignore

@@ -6,6 +6,7 @@
 /content/
 
 # Dependencies
+/node_modules/
 /vendor/
 
 # Editors
@@ -38,8 +39,8 @@ Icon
 !/storage/cache/index.html
 
 # Configuration files
-/site/config/config.julienmonnerie.com.php
-/site/config/config.julienmonnerie.test.php
+/site/config/config.xiaowang.fr.php
+/site/config/config.xiaowang.test.php
 
 # License
 /site/config/.license

package.json

@@ -0,0 +1,20 @@
+{
+	"browserslist": [
+		"defaults"
+	],
+	"devDependencies": {
+		"@symfony/webpack-encore": "^3.0.0",
+		"autoprefixer": "^10.4.7",
+		"core-js": "^3.23.4",
+		"postcss-loader": "^7.0.1",
+		"sass": "^1.53.0",
+		"sass-loader": "^13.0.2",
+		"webpack-notifier": "^1.15.0"
+	},
+	"scripts": {
+		"build": "encore production",
+		"dev": "encore dev",
+		"dev-server": "encore dev-server",
+		"watch": "encore dev --watch"
+	}
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	plugins: {
+		autoprefixer: {} // Browserlist configuration is defined in package.json
+	}
+}

public/assets/build/app.js

@@ -0,0 +1,28 @@
+/******/ (function() { // webpackBootstrap
+var __webpack_exports__ = {};
+/*!*********************************!*\
+  !*** ./public/assets/js/app.js ***!
+  \*********************************/
+// ----------------------------------------------------------------------------
+// DATA
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+// UTILS
+// ----------------------------------------------------------------------------
+// Convert rem to pixels by getting font-size CSS property
+function convertRemToPixels(rem) {
+  let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
+  return rem * fontSize;
+} // ----------------------------------------------------------------------------
+// LOGIC
+// ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+// PROGRAM
+// ----------------------------------------------------------------------------
+// Enable CSS :active pseudo-class in Safari Mobile
+
+
+document.addEventListener("touchstart", function () {}, false);
+/******/ })()
+;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpzIiwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQUNBO0FBRUE7QUFDQSxTQUFTQSxrQkFBVCxDQUE0QkMsR0FBNUIsRUFBaUM7RUFDaEMsSUFBSUMsUUFBUSxHQUFHQyxVQUFVLENBQUNDLE1BQU0sQ0FBQ0MsZ0JBQVAsQ0FBd0JDLFFBQVEsQ0FBQ0MsSUFBakMsRUFBdUNDLGdCQUF2QyxDQUF3RCxXQUF4RCxDQUFELENBQXpCO0VBQ0EsT0FBT1AsR0FBRyxHQUFHQyxRQUFiO0FBQ0EsRUFFRDtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFFQTs7O0FBQ0FJLFFBQVEsQ0FBQ0csZ0JBQVQsQ0FBMEIsWUFBMUIsRUFBd0MsWUFBVyxDQUFFLENBQXJELEVBQXNELEtBQXRELEUiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvYXNzZXRzL2pzL2FwcC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBEQVRBXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIFVUSUxTXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIENvbnZlcnQgcmVtIHRvIHBpeGVscyBieSBnZXR0aW5nIGZvbnQtc2l6ZSBDU1MgcHJvcGVydHlcbmZ1bmN0aW9uIGNvbnZlcnRSZW1Ub1BpeGVscyhyZW0pIHtcblx0bGV0IGZvbnRTaXplID0gcGFyc2VGbG9hdCh3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5ib2R5KS5nZXRQcm9wZXJ0eVZhbHVlKCdmb250LXNpemUnKSk7XG5cdHJldHVybiByZW0gKiBmb250U2l6ZTtcbn1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gTE9HSUNcbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gUFJPR1JBTVxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBFbmFibGUgQ1NTIDphY3RpdmUgcHNldWRvLWNsYXNzIGluIFNhZmFyaSBNb2JpbGVcbmRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJ0b3VjaHN0YXJ0XCIsIGZ1bmN0aW9uKCkge30sZmFsc2UpO1xuIl0sIm5hbWVzIjpbImNvbnZlcnRSZW1Ub1BpeGVscyIsInJlbSIsImZvbnRTaXplIiwicGFyc2VGbG9hdCIsIndpbmRvdyIsImdldENvbXB1dGVkU3R5bGUiLCJkb2N1bWVudCIsImJvZHkiLCJnZXRQcm9wZXJ0eVZhbHVlIiwiYWRkRXZlbnRMaXN0ZW5lciJdLCJzb3VyY2VSb290IjoiIn0=

public/assets/build/entrypoints.json

@@ -0,0 +1,19 @@
+{
+  "entrypoints": {
+    "app": {
+      "js": [
+        "/assets/build/app.js"
+      ]
+    },
+    "main": {
+      "css": [
+        "/assets/build/main.css"
+      ]
+    },
+    "panel": {
+      "css": [
+        "/assets/build/panel.css"
+      ]
+    }
+  }
+}

public/assets/build/manifest.json

@@ -0,0 +1,13 @@
+{
+  "assets/build/app.js": "/assets/build/app.js",
+  "assets/build/main.css": "/assets/build/main.css",
+  "assets/build/panel.css": "/assets/build/panel.css",
+  "assets/build/fonts/OpenSans-MediumItalic.ttf": "/assets/build/fonts/OpenSans-MediumItalic.00b0286e.ttf",
+  "assets/build/fonts/OpenSans-SemiBoldItalic.ttf": "/assets/build/fonts/OpenSans-SemiBoldItalic.cd71012b.ttf",
+  "assets/build/fonts/OpenSans-Italic.ttf": "/assets/build/fonts/OpenSans-Italic.dfdc57f0.ttf",
+  "assets/build/fonts/OpenSans-BoldItalic.ttf": "/assets/build/fonts/OpenSans-BoldItalic.de2cc755.ttf",
+  "assets/build/fonts/OpenSans-Medium.ttf": "/assets/build/fonts/OpenSans-Medium.65529e6c.ttf",
+  "assets/build/fonts/OpenSans-Regular.ttf": "/assets/build/fonts/OpenSans-Regular.57cd57a6.ttf",
+  "assets/build/fonts/OpenSans-Bold.ttf": "/assets/build/fonts/OpenSans-Bold.a0fe34be.ttf",
+  "assets/build/fonts/OpenSans-SemiBold.ttf": "/assets/build/fonts/OpenSans-SemiBold.2b370b19.ttf"
+}

public/assets/build/panel.css

@@ -0,0 +1,13 @@
+/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!./public/assets/css/panel.scss ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),
+.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3) {
+  display: none;
+}
+
+.kirby-imagecrop-field .k-column:nth-of-type(2) {
+  display: none;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY3NzIiwibWFwcGluZ3MiOiI7OztBQVlHOztFQUVDO0FDWEo7O0FEcUJDO0VBQ0M7QUNsQkYsQyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3B1YmxpYy9hc3NldHMvY3NzL3BhbmVsLnNjc3MiLCJ3ZWJwYWNrOi8vLy4uLy4uLy4uLy4uL0Rvbm4lQzMlQTllcy9Qcm9ncmFtbWF0aW9uL1Byb2pldHMvanVsaWVubW9ubmVyaWUvcHVibGljL2Fzc2V0cy9jc3MvcGFuZWwuc2NzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBLSVJCWSBQQU5FTCBDVVNUT01JWkFUSU9OXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIFRleHRhcmVhIGhlYWRsaW5lIGJ1dHRvbnNcblxuLmstdGV4dGFyZWEtZmllbGQge1xuXG5cdC5rLXRvb2xiYXIge1xuXG5cdFx0LmstZHJvcGRvd24ge1xuXG5cdFx0XHQuay1idXR0b246bnRoLW9mLXR5cGUoMiksXG5cdFx0XHQuay1idXR0b246bnRoLW9mLXR5cGUoMykge1xuXHRcdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdFx0fVxuXHRcdH1cblx0fVxufVxuXG4vLyBWaXN1YWwgaW1hZ2UgY3JvcCBmaWVsZCBwcm9wZXJ0aWVzXG5cbi5raXJieS1pbWFnZWNyb3AtZmllbGQge1xuXG5cdC5rLWNvbHVtbjpudGgtb2YtdHlwZSgyKSB7XG5cdFx0ZGlzcGxheTogbm9uZTtcblx0fVxufVxuIiwiLmstdGV4dGFyZWEtZmllbGQgLmstdG9vbGJhciAuay1kcm9wZG93biAuay1idXR0b246bnRoLW9mLXR5cGUoMiksXG4uay10ZXh0YXJlYS1maWVsZCAuay10b29sYmFyIC5rLWRyb3Bkb3duIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5raXJieS1pbWFnZWNyb3AtZmllbGQgLmstY29sdW1uOm50aC1vZi10eXBlKDIpIHtcbiAgZGlzcGxheTogbm9uZTtcbn0iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=*/

public/assets/css/main.scss

@@ -1,4 +1,4 @@
-@use 'partials/minireset';
+@use 'utils/minireset';
 @use 'partials/fonts';
 @use 'partials/variables' as *;
 @use 'partials/animations';

public/assets/css/panel.min.css

@@ -1 +0,0 @@
-.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3){display:none}.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}/*# sourceMappingURL=panel.min.css.map */

public/assets/css/panel.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["panel.scss"],"names":[],"mappings":"AAYG,oIAEC,aAUH,gDACC","file":"panel.min.css"}

public/assets/css/partials/fonts.scss

@@ -6,56 +6,56 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-Regular.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-Regular.ttf) format('truetype');
 	font-weight: 400;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-Italic.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-Italic.ttf) format('truetype');
 	font-weight: 400;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-Medium.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-Medium.ttf) format('truetype');
 	font-weight: 500;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-MediumItalic.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-MediumItalic.ttf) format('truetype');
 	font-weight: 500;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-SemiBold.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-SemiBold.ttf) format('truetype');
 	font-weight: 600;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-SemiBoldItalic.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-SemiBoldItalic.ttf) format('truetype');
 	font-weight: 600;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-Bold.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-Bold.ttf) format('truetype');
 	font-weight: 700;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../fonts/open-sans/OpenSans-BoldItalic.ttf) format('truetype');
+	src: url(../../fonts/open-sans/OpenSans-BoldItalic.ttf) format('truetype');
 	font-weight: 700;
 	font-style: italic;
 }

public/assets/css/style.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"AAIA,yGAuBC,SACA,UAGD,kBAMC,eACA,mBAGD,GACC,gBAGD,oBAGC,SAGD,KACC,sBAGD,qBACC,mBAGD,UAEC,YACA,eAGD,OACC,SAGD,MACC,yBACA,iBAGD,MAEC,UCtED,WACC,wBACA,oEACA,gBACA,kBAGD,WACC,wBACA,mEACA,gBACA,kBAGD,WACC,wBACA,mEACA,gBACA,kBAGD,WACC,wBACA,yEACA,gBACA,kBAGD,WACC,wBACA,qEACA,gBACA,kBAGD,WACC,wBACA,2EACA,gBACA,kBAGD,WACC,wBACA,iEACA,gBACA,kBAGD,WACC,wBACA,uEACA,gBACA,kBCvDD,MAIC,qDACA,sDACA,2BACA,0BACA,6BACA,wBACA,yBACA,6BACA,uBACA,uBACA,qBAIA,kBACA,oCACA,sCAIA,cACA,wCACA,cACA,8CACA,oBAQD,qCAEC,MAIC,uBACA,6BACA,uBACA,uBACA,uBAIA,oBACA,oCACA,uCCpDF,kCACC,KACC,iBAED,GACC,oBAIF,0BACC,KACC,iBAED,GACC,oBCPF,KACC,oCACA,gCACA,mBACA,mBACA,8BAGD,GACC,qCACA,8BAGD,GACC,oCACA,8BACA,kBAGD,GACC,oCACA,8BACA,qBAGD,EACC,mBAGD,OACC,oCAGD,GACC,kBAKD,EACC,mBACA,qBACA,qDACA,gDACA,6CAEA,yBAGC,0BAGD,gBACC,gCACA,mBACA,gDACA,2CAMF,KACC,iBACA,gBASD,YACC,eACA,MACA,SACA,OACA,8DACA,gFACA,gBACA,+BACA,mBACC,+DAED,cACC,+DAED,WACC,+DAOC,yEACC,iBAIF,+BACC,qBACA,WACA,kBACA,+BACA,mBACA,uBACA,mBACC,gDAED,cACC,gDAED,WACC,gDAKH,gCACC,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,gBAEA,kCACC,uBACA,wBACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAEA,oCACC,kBAGD,sCACC,WACA,YACA,8BACA,0CACA,qCACA,kCAKH,kBACC,0CACA,gBAIC,qCAEC,mBAMD,0CACC,kBAYJ,cACC,YACA,aAGD,sBACC,WACA","file":"style.min.css"}

public/assets/js/app.js

@@ -1,5 +1,3 @@
-'use strict';
-
 // ----------------------------------------------------------------------------
 // DATA
 // ----------------------------------------------------------------------------

site/config/config.julienmonnerie.com.php

@@ -0,0 +1,10 @@
+<?php
+
+return [
+	// Kirby configuration settings (production environment)
+	'debug' => false,
+	// Matomo plugin options (critical keys)
+	'sylvainjule.matomo' => [
+		// 'token' => 'a3d53082e369334813c0ed93d5a80db6'
+	]
+];

site/config/config.julienmonnerie.test.php

@@ -0,0 +1,10 @@
+<?php
+
+return [
+	// Kirby configuration settings (development environment)
+	'debug' => true,
+	// Matomo plugin options (critical keys)
+	'sylvainjule.matomo' => [
+		// 'token' => 'a3d53082e369334813c0ed93d5a80db6'
+	]
+];

site/config/config.php

@@ -4,7 +4,7 @@ return [
 	// Kirby configuration settings
 	'panel' => [
 		'language' => 'fr',
-		'css' => 'assets/css/panel.min.css'
+		'css' => 'assets/build/panel.css'
 	],
 	// Sitemapper plugin options
 	'kirbyzone.sitemapper' => [

site/templates/base.twig

@@ -4,9 +4,20 @@
 
 <head>
 
-	{# {{ snippet('metadata') }}
-	{{ snippet('favicon') }} #}
+	{{ snippet('metadata') }}
+	{{ snippet('favicon') }}
 
+	{# CSS #}
+	{% block stylesheets %}
+		<link rel="stylesheet" href="{{ asset('assets/build/main.css') }}">
+	{% endblock %}
+
+	{# JavaScript #}
+	{% block scripts %}
+		<script src="{{ asset('assets/build/app.js') }}" defer></script>
+	{% endblock %}
+
+	{# Matomo #}
 	{# <script>
 		var _paq = window._paq = window._paq || [];
 		_paq.push(['disableCookies']);
@@ -21,10 +32,6 @@
 		})();
 	</script> #}
 
-	{% block stylesheets %}
-		<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
-	{% endblock %}
-
 </head>
 
 <body>
@@ -79,10 +86,6 @@
 		</footer>
 	{% endblock %}
 
-	{% block scripts %}
-		<script src="{{ asset('assets/js/app.js') }}"></script>
-	{% endblock %}
-
 </body>
 
 </html>

site/templates/home.twig

@@ -1,9 +1,5 @@
 {% extends "base.twig" %}
 
-{% block stylesheets %}
-	<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
-{% endblock %}
-
 {% block main %}
 	<main>
 
@@ -13,7 +9,3 @@
 
 	</main>
 {% endblock %}
-
-{% block scripts %}
-	<script src="{{ asset('assets/js/app.js') }}"></script>
-{% endblock %}

webpack.config.js

@@ -0,0 +1,43 @@
+const Encore = require('@symfony/webpack-encore');
+
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+	Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+}
+
+Encore
+
+	// ----------------------------------------------------------------------------
+	// PATHS
+	// ----------------------------------------------------------------------------
+
+	.setOutputPath('public/assets/build/')
+	.setPublicPath('/assets/build')
+
+	// ----------------------------------------------------------------------------
+	// ENTRIES
+	// ----------------------------------------------------------------------------
+
+	.addEntry('app', './public/assets/js/app.js')
+	.addStyleEntry('main', './public/assets/css/main.scss')
+	.addStyleEntry('panel', './public/assets/css/panel.scss')
+
+	// ----------------------------------------------------------------------------
+	// FEATURES
+	// ----------------------------------------------------------------------------
+
+	.disableSingleRuntimeChunk()
+	.cleanupOutputBeforeBuild()
+	.enableBuildNotifications()
+	.enableSourceMaps(!Encore.isProduction())
+	.configureBabel((config) => {
+		config.plugins.push('@babel/plugin-proposal-class-properties');
+	})
+	.configureBabelPresetEnv((config) => {
+		config.useBuiltIns = 'usage';
+		config.corejs = 3;
+	})
+	.enableSassLoader()
+	.enablePostCssLoader()
+;
+
+module.exports = Encore.getWebpackConfig();