Use webpack instead of grunt

Also remove all precompiled files from VCS.

.nvmrc

@@ -1 +1 @@
-10.16
+12

Makefile

@@ -32,9 +32,6 @@ Compile frontend changes:
 
 Build, import from package, test, render the repo docs and open in browser:
    make install test-import docs
-
-See grunt help for more grunt commands:
-   grunt --help
 """)
 endef
 export PRINT_HELP_PYSCRIPT
@@ -74,8 +71,7 @@ clean-build: ##- Remove build artifacts
 
 .PHONY: clean-frontend
 clean-frontend: ## Clean frontend files
-	grunt clean
-
+	rm -rf sphinx_wagtail_theme/static/dist
 
 clean-pyc: ##- Remove Python file artifacts
 	find . -name '*.pyc' -exec rm -f {} +
@@ -116,7 +112,7 @@ docs: ## Regenerate Sphinx HTML documentation, including API docs
 
 .PHONY: frontend
 frontend: ## Compile frontend files
-	grunt frontend
+	yarn run frontend
 
 
 .PHONY: install

docs/development.rst

@@ -64,15 +64,6 @@ can be uploaded to PyPi run::
 
 .. _venv: https://docs.python.org/3/library/venv.html
 
-Grunt
-=====
-
-More commands are available by means of `grunt`. Run::
-
-   grunt --help
-
-and check the `gruntfile.js`.
-
 
 Theme stress test
 =================

js/theme.js

@@ -1,4 +1,7 @@
 // T3Docs
+import '../sass/theme.scss';
+import autocomplete from 'autocompleter'
+import $ from 'jquery';
 
 // Ensure our own namespace
 if (typeof window.T3Docs === 'undefined') {
@@ -91,7 +94,7 @@ $(document).ready(function () {
     versionOptions.innerHTML = '';
     versionOptions.appendChild(options);
   }
-  versionNode = document.getElementById("toc-version");
+  let versionNode = document.getElementById("toc-version");
   if (versionNode) {
     versionNode.addEventListener('click', function () {
       versionWrapper = document.getElementById("toc-version-wrapper");

js/vendor.js

@@ -0,0 +1 @@
+import '../node_modules/bootstrap/dist/js/bootstrap.bundle'

package.json

@@ -7,34 +7,29 @@
 		"@fortawesome/fontawesome-free": "^5.13.0",
 		"TYPO3CMS-Guide-HowToDocument": "github:TYPO3-Documentation/TYPO3CMS-Guide-HowToDocument",
 		"autocompleter": "^6.0.3",
+		"babel-loader": "^8.2.2",
 		"bootstrap": "^4.4.1",
-		"connect-livereload": "^0.6.1",
-		"grunt": "^1.1.0",
-		"grunt-cli": "^1.3.2",
-		"grunt-contrib-clean": "2.0.0",
-		"grunt-contrib-copy": "1.0.0",
-		"grunt-contrib-uglify": "^4.0.1",
-		"grunt-contrib-watch": "^1.1.0",
-		"grunt-exec": "^3.0.0",
-		"grunt-sass": "^3.1.0",
-		"grunt-stylelint": "^0.15.0",
+		"copy-webpack-plugin": "^8.0.0",
+		"css-loader": "^5.1.2",
+		"file-loader": "^6.2.0",
 		"http-server": "^0.12.3",
 		"jquery": "^3.5.1",
-		"modernizr": "^3.11.0",
-		"node-sass": "^4.14.0",
+		"mini-css-extract-plugin": "^1.3.9",
+		"node-sass": "^5.0.0",
 		"popper.js": "^1.16.1",
+		"sass-loader": "^11.0.1",
 		"stylelint": "^13.3.3",
-		"underscore": "^1.10.2"
+		"underscore": "^1.10.2",
+		"webpack": "^5.24.4",
+		"webpack-cli": "^4.5.0"
 	},
 	"scripts": {
-		"watch": "grunt watch",
-		"frontend": "grunt frontend",
-		"build": "grunt build",
-		"render": "grunt render",
-		"serve": "http-server ./build/Result/project/0.0.0/"
+		"watch": "webpack --config=webpack.config.js --watch",
+		"frontend": "webpack --config=webpack.config.js",
+		"build": "webpack --config=webpack.config.js --mode=production"
 	},
 	"engines": {
-		"node": ">=10.16",
+		"node": ">=12",
 		"yarn": ">= 1.0.0"
 	}
-}
+}

sass/fontawesome.scss

@@ -1,4 +1,4 @@
-$fa-font-path: "../fonts";
+$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 @import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
 @import '../node_modules/@fortawesome/fontawesome-free/scss/regular';
 @import '../node_modules/@fortawesome/fontawesome-free/scss/solid';