Set up Webpack Encore

.gitignore

@@ -6,6 +6,7 @@
 /content/
 
 # Dependencies
+/node_modules/
 /vendor/
 
 # Editors

composer.json

@@ -25,6 +25,9 @@
 		]
 	},
 	"config": {
-		"optimize-autoloader": true
+		"optimize-autoloader": true,
+		"allow-plugins": {
+			"getkirby/composer-installer": true
+		}
 	}
 }

package.json

@@ -0,0 +1,22 @@
+{
+	"browserslist": [
+		"defaults"
+	],
+	"devDependencies": {
+		"@symfony/webpack-encore": "^3.0.0",
+		"autoprefixer": "^10.4.7",
+		"circletype": "^2.3.0",
+		"core-js": "^3.23.4",
+		"plyr": "^3.7.2",
+		"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: {} // Check browserlist configuration in package.json
+	}
+}

public/assets/build/app.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!
+ * circletype 2.3.0
+ * A JavaScript library that lets you curve type on the web.
+ * Copyright © 2014-2018 Peter Hrynkow
+ * Licensed MIT
+ * https://github.com/peterhry/CircleType#readme
+ */

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,14 @@
+{
+  "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/Nunito-MediumItalic.ttf": "/assets/build/fonts/Nunito-MediumItalic.57991510.ttf",
+  "assets/build/fonts/Nunito-Italic.ttf": "/assets/build/fonts/Nunito-Italic.18662850.ttf",
+  "assets/build/fonts/Nunito-SemiBoldItalic.ttf": "/assets/build/fonts/Nunito-SemiBoldItalic.e0d50cda.ttf",
+  "assets/build/fonts/Nunito-BoldItalic.ttf": "/assets/build/fonts/Nunito-BoldItalic.bf268a33.ttf",
+  "assets/build/fonts/Nunito-Medium.ttf": "/assets/build/fonts/Nunito-Medium.6cf31fae.ttf",
+  "assets/build/fonts/Nunito-Regular.ttf": "/assets/build/fonts/Nunito-Regular.fd0c54f3.ttf",
+  "assets/build/fonts/Nunito-SemiBold.ttf": "/assets/build/fonts/Nunito-SemiBold.56124591.ttf",
+  "assets/build/fonts/Nunito-Bold.ttf": "/assets/build/fonts/Nunito-Bold.bb33ef1f.ttf",
+  "assets/build/fonts/GloriaHallelujah-Regular.ttf": "/assets/build/fonts/GloriaHallelujah-Regular.c9da976c.ttf"
+}

public/assets/build/panel.css

@@ -1 +1 @@
-.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 */
+.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),.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}

public/assets/css/main.scss

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

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: 'Nunito';
-	src: url(../fonts/nunito/Nunito-Regular.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-Regular.ttf) format('truetype');
 	font-weight: 400;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../fonts/nunito/Nunito-Italic.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-Italic.ttf) format('truetype');
 	font-weight: 400;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../fonts/nunito/Nunito-Medium.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-Medium.ttf) format('truetype');
 	font-weight: 500;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
 	font-weight: 500;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
 	font-weight: 600;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
 	font-weight: 600;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../fonts/nunito/Nunito-Bold.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-Bold.ttf) format('truetype');
 	font-weight: 700;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: 'Nunito';
-	src: url(../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
+	src: url(../../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
 	font-weight: 700;
 	font-style: italic;
 }
@@ -64,7 +64,7 @@
 
 @font-face {
 	font-family: 'Gloria Hallelujah';
-	src: url(../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
+	src: url(../../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
 	font-weight: 400;
 	font-style: normal;
 }

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":"CAIA,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,qBACA,+DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAIC,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,uFACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,yCACA,wBACA,wBACA,sBACA,cACA,8CAIA,0CACA,qCAQD,qCAEC,MAIC,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCCpFF,kCACC,KACC,iBAED,GACC,oBAIF,0BACC,KACC,iBAED,GACC,oBAIF,2BACC,GACC,MAED,IACC,YAED,KACC,OAIF,mBACC,GACC,MAED,IACC,YAED,KACC,OAIF,6BACC,GACC,SAED,IACC,eAED,KACC,UAIF,qBACC,GACC,SAED,IACC,eAED,KACC,UCvDF,KACC,oCACA,gCACA,kCACA,iBACA,8BAGD,SAGC,mBAGD,GACC,oCACA,8BACA,gCAGD,GACC,oCACA,8BACA,gCACA,kBAGD,GACC,oCACA,8BACA,gCACA,qBAGD,EACC,mBACA,oCAGD,OACC,oCAGD,GACC,kBAKD,EACC,iBACA,0BACA,kBACA,2CACA,sCACA,mCAEA,yBAGC,mBAGD,gBACC,gCACA,mBACA,gDACA,2CAMF,KACC,iBACA,kBACA,iBACA,aACA,KACC,+DAMF,yBACC,kBAGD,OACC,iBAGD,KACC,eAGD,OACC,iBASD,YACC,WACA,gCACA,YACA,iKACA,0CACA,iDACA,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACA,UACA,mBACC,yDAED,cACC,yDAED,WACC,yDAGD,mBACC,eACA,sCACA,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACC,kBACA,+CACA,0CACA,uCACA,8BACA,0BACA,sBAEA,yBACC,6BACA,yBACA,qBAIF,uBACC,qBAGD,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACA,mBACC,sDAED,cACC,sDAED,WACC,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGD,6DAEC,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACA,gCACA,4BAGD,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,8GACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,6BACC,eACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAEA,iEAEC,wBAGD,+BACC,qBAEA,gHAGC,mBAGD,6CACC,gCAMJ,oDACC,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,qCAEC,sBACC,gBAIF,qCAEC,sBACC,gBAUF,cACC,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGD,WACC,YACA,iBACA,aACA,KACC,iMAID,4BACA,wBACA,cAGD,iBACC,iBAEA,qBACC,gBACA,2BACA,iBACA,4CAMD,sCACC,mBACA,mBACA,kBACC,4DAED,cACC,4DAED,UACC,4DAIF,sCACC,oBACA,qBACA,kBACC,2DAED,cACC,2DAED,UACC,2DAOF,sCACC,mBACA,mBACA,kBACC,4DAED,cACC,4DAED,UACC,4DAIF,sCACC,oBACA,qBACA,kBACC,2DAED,cACC,2DAED,UACC,2DAIF,sCACC,iBACA,wBAMD,sCACC,mBACA,mBACA,kBACC,4DAED,cACC,4DAED,UACC,4DAIF,sCACC,oBACA,qBACA,kBACC,2DAED,cACC,2DAED,UACC,2DAIF,sCACC,sBACA,qBACA,kBACC,sEAED,cACC,sEAED,UACC,sEAIF,sCACC,uBACA,uBACA,kBACC,uEAED,cACC,uEAED,UACC,uEAKH,gBACC,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACC,UACA,6CACA,wCACA,qCAIF,yBACC,UAEA,6BACC,UAIF,2BACC,yCACA,oCAGD,6BACC,2CACA,sCAKD,oCAEC,mCACA,YACA,0FAGD,kCAEC,kBAGD,gDAEC,gCACA,YAEA,gFACC,kBAKA,kHAEC,kBAIF,sDACC,oCAEA,sHAEC,kBAGD,4DACC,kBACA,mBAGD,kEACC,kBAGD,0EACC,YACA,kBACA,MACA,OAKH,kBACC,cACA,2BACA,YAEA,oCACC,wBAGD,oEAEC,cACA,gBAKA,+CACC,mBAIF,6BACC,sBACA,oBACA,wBACA,mCACA,oCAIF,qCAIE,oCACC,yBAOH,eACC,mCACA,YACA,0FAGD,cACC,kBAGD,gBACC,gCACA,YACA,kBAGD,eACC,kBACA,kBAEA,iBACC,qBACA,cACA,mBACA,mBACA,4BACA,qBACA,yCACA,+CACA,0CACA,uCAEA,sEAGC,qBAWH,YACC,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGD,oBACC,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACC,uBACA,wBACA,kBACA,4BACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACA,+CACA,0CACA,uCAEA,wBACC,kBAGD,0BACC,kBAID,qFAGC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACC,oCACA,kBAGD,qCAEC,YACC,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGD,oBACC,QAGD,uBACC,QACA","file":"style.min.css"}

public/assets/js/app.js

@@ -1,4 +1,5 @@
-'use strict';
+import Plyr from 'plyr';
+import CircleType from 'circletype';
 
 // ----------------------------------------------------------------------------
 // DATA

site/config/config.php

@@ -6,7 +6,7 @@ return [
 	'error' => 'erreur',
 	'panel' => [
 		'language' => 'fr',
-		'css' => 'assets/css/panel.min.css'
+		'css' => 'assets/build/panel.css'
 	],
 	// Sitemapper plugin options
 	'kirbyzone.sitemapper' => [

site/templates/base.twig

@@ -7,7 +7,17 @@
 	{{ snippet('metadata') }}
 	{{ snippet('favicon') }}
 
-	<!-- Matomo -->
+	{# 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']);
@@ -22,11 +32,6 @@
 		})();
 	</script>
 
-	<!-- Stylesheets -->
-	{% block stylesheets %}
-		<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
-	{% endblock %}
-
 </head>
 
 <body>
@@ -142,11 +147,6 @@
 		</footer>
 	{% endblock %}
 
-	<!-- Scripts -->
-	{% block scripts %}
-		<script src="{{ asset('assets/js/app.js') }}"></script>
-	{% endblock %}
-
 </body>
 
 </html>

site/templates/gallery.twig

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

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>
 
@@ -28,8 +24,3 @@
 
 	</main>
 {% endblock %}
-
-{% block scripts %}
-	<script src="{{ asset('assets/libraries/circletype.min.js') }}"></script>
-	<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();