Override WEBPACKEXT_PROJECT

* allows us to install a custom webpack.config.js
* copy the assets files from invenio-assets as a base
* AVIF is a newer image format than WebP with smaller file sizes -however, it is not as widely supported by browsers yet
* convert images to webp

.gitignore

@@ -70,3 +70,6 @@ pyproject.toml
 # pipenv
 Pipfile
 Pipfile.lock
+
+# still track the custom build config
+!invenio_theme_tuw/assets/build/

MANIFEST.in

@@ -36,12 +36,14 @@ recursive-include docs *.py
 recursive-include docs *.rst
 recursive-include docs *.txt
 recursive-include docs Makefile
+recursive-include tests *.py
 recursive-include invenio_theme_tuw *.js
 recursive-include invenio_theme_tuw *.html
 recursive-include invenio_theme_tuw *.less
 recursive-include invenio_theme_tuw *.pdf
 recursive-include invenio_theme_tuw *.png
-recursive-include tests *.py
+recursive-include invenio_theme_tuw *.webp
+recursive-include invenio_theme_tuw *.avif
 recursive-include invenio_theme_tuw *.jpg
 recursive-include invenio_theme_tuw *.ttf
 recursive-include invenio_theme_tuw *.overrides

invenio_theme_tuw/assets/.babelrc

+{
+  "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+  ]
+}

invenio_theme_tuw/assets/.eslintignore

+build/*.js

invenio_theme_tuw/assets/.eslintrc.js

+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2017-2018 CERN.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'react-app',
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

invenio_theme_tuw/assets/build/webpack.config.js

+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2017-2018 CERN.
+ * Copyright (C) 2021      TU Wien.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const config = require("./config");
+const BundleTracker = require("webpack-bundle-tracker");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const safePostCssParser = require("postcss-safe-parser");
+const TerserPlugin = require("terser-webpack-plugin");
+const webpack = require("webpack");
+
+// Load aliases from config and resolve their full path
+let aliases = {};
+if (config.aliases) {
+  aliases = Object.fromEntries(
+    Object.entries(config.aliases).map(([alias, alias_path]) => [
+      alias,
+      path.resolve(config.build.context, alias_path),
+    ])
+  );
+}
+
+var webpackConfig = {
+  mode: process.env.NODE_ENV,
+  entry: config.entry,
+  context: config.build.context,
+  resolve: {
+    extensions: ["*", ".js", ".jsx"],
+    symlinks: false,
+    alias: aliases,
+  },
+  output: {
+    path: config.build.assetsPath,
+    filename: "js/[name].[chunkhash].js",
+    chunkFilename: "js/[id].[chunkhash].js",
+    publicPath: config.build.assetsURL,
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          parse: {
+            // we want terser to parse ecma 8 code. However, we don't want it
+            // to apply any minfication steps that turns valid ecma 5 code
+            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+            // sections only apply transformations that are ecma 5 safe
+            // https://github.com/facebook/create-react-app/pull/4234
+            ecma: 8,
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            // Disabled because of an issue with Uglify breaking seemingly valid code:
+            // https://github.com/facebook/create-react-app/issues/2376
+            // Pending further investigation:
+            // https://github.com/mishoo/UglifyJS2/issues/2011
+            comparisons: false,
+            // Disabled because of an issue with Terser breaking valid code:
+            // https://github.com/facebook/create-react-app/issues/5250
+            // Pending further investigation:
+            // https://github.com/terser-js/terser/issues/120
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          output: {
+            ecma: 5,
+            comments: false,
+            // Turned on because emoji and regex is not minified properly using default
+            // https://github.com/facebook/create-react-app/issues/2488
+            ascii_only: true,
+          },
+        },
+        // Use multi-process parallel running to improve the build speed
+        // Default number of concurrent runs: os.cpus().length - 1
+        parallel: true,
+        cache: true,
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorOptions: {
+          parser: safePostCssParser,
+          map: false,
+        },
+      }),
+    ],
+    splitChunks: {
+      chunks: "all",
+    },
+    // Extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated.
+    runtimeChunk: {
+      name: "manifest",
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: require.resolve("jquery"),
+        use: [
+          {
+            loader: "expose-loader",
+            options: {
+              exposes: ["$", "jQuery"],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: [/node_modules/, /@babel(?:\/|\\{1,2})runtime/],
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-env", "@babel/preset-react"],
+              plugins: [
+                "@babel/plugin-proposal-class-properties",
+                "@babel/plugin-transform-runtime",
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        enforce: "pre",
+        exclude: /node_modules/,
+        use: [
+          {
+            options: {
+              emitWarning: true,
+              quiet: true,
+              formatter: require("eslint-friendly-formatter"),
+              eslintPath: require.resolve("eslint"),
+            },
+            loader: require.resolve("eslint-loader"),
+          },
+        ],
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.(less)$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
+      },
+      // Inline images smaller than 10k
+      {
+        test: /\.(avif|webp|png|cur|jpe?g|gif|svg)(\?.*)?$/,
+        use: [
+          {
+            loader: require.resolve("url-loader"),
+            options: {
+              limit: 10000,
+              name: "img/[name].[hash:7].[ext]",
+            },
+          },
+        ],
+      },
+      // Inline webfonts smaller than 10k
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: [
+          {
+            loader: require.resolve("file-loader"),
+            options: {
+              limit: 10000,
+              name: "fonts/[name].[hash:7].[ext]",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  devtool:
+    process.env.NODE_ENV === "production" ? "source-map" : "inline-source-map",
+  plugins: [
+    // Pragmas
+    new webpack.DefinePlugin({
+      "process.env": process.env.NODE_ENV,
+    }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: "css/[name].[contenthash].css",
+      chunkFilename: "css/[name].[contenthash].css",
+    }),
+    // Removes the dist folder before each run.
+    new CleanWebpackPlugin({
+      dangerouslyAllowCleanPatternsOutsideProject: true,
+    }),
+    // Automatically inject jquery
+    new webpack.ProvidePlugin({
+      jQuery: "jquery",
+      $: "jquery",
+      jquery: "jquery",
+      "window.jQuery": "jquery",
+    }),
+    // Write manifest file which Python will read.
+    new BundleTracker({
+      path: config.build.assetsPath,
+      filename: path.join(config.build.assetsPath, "manifest.json") ,
+      publicPath: config.build.assetsURL,
+    }),
+  ],
+  performance: { hints: false },
+};
+
+if (process.env.npm_config_report) {
+  var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+    .BundleAnalyzerPlugin;
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+}
+
+if (process.env.NODE_ENV === "development") {
+  const LiveReloadPlugin = require("webpack-livereload-plugin");
+  webpackConfig.plugins.push(new LiveReloadPlugin());
+}
+
+module.exports = webpackConfig;

invenio_theme_tuw/assets/package.json

+{
+  "name": "invenio-assets",
+  "version": "1.0.0",
+  "description": "Invenio assets",
+  "author": "CERN <info@inveniosoftware.org>",
+  "private": true,
+  "scripts": {
+    "start": "NODE_PRESERVE_SYMLINKS=1 NODE_ENV=development webpack --watch --progress --config ./build/webpack.config.js",
+    "build": "NODE_PRESERVE_SYMLINKS=1 NODE_ENV=production webpack --config ./build/webpack.config.js",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "@babel/runtime": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "autoprefixer": "^9.8.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.4",
+    "babel-register": "^6.26.0",
+    "chalk": "^4.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^4.2.1",
+    "eslint": "^7.7.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "2.22.0",
+    "eslint-plugin-jsx-a11y": "6.3.1",
+    "eslint-plugin-node": ">=7.0.0",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-react": "7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eventsource-polyfill": "^0.9.6",
+    "expose-loader": "^1.0.0",
+    "file-loader": "^6.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "function-bind": "^1.1.1",
+    "less": "^3.12.2",
+    "less-loader": "6.2.0",
+    "mini-css-extract-plugin": "0.10.0",
+    "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "ora": "^5.0.0",
+    "patch-package": "^6.2.2",
+    "postcss-flexbugs-fixes": "^4.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.4.0",
+    "postcss-safe-parser": "^4.0.1",
+    "prettier": "2.0.5",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^9.0.3",
+    "semver": "^7.3.2",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^4.1.0",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.27.1",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-middleware": "^3.4.0",
+    "webpack-hot-middleware": "^2.24.3",
+    "webpack-livereload-plugin": "^2.2.0",
+    "webpack-bundle-tracker": "~1.0.0",
+    "webpack-merge": "^5.1.2",
+    "webpack-yam-plugin": "^1.0.1"
+  },
+  "engines": {
+    "node": ">= 12",
+    "npm": ">= 6"
+  }
+}

invenio_theme_tuw/assets/patches/watchpack+1.7.4.patch

+diff --git a/node_modules/watchpack/lib/DirectoryWatcher.js b/node_modules/watchpack/lib/DirectoryWatcher.js
+index 78888f6..30dcfc8 100644
+--- a/node_modules/watchpack/lib/DirectoryWatcher.js
++++ b/node_modules/watchpack/lib/DirectoryWatcher.js
+@@ -53,8 +53,8 @@ function DirectoryWatcher(directoryPath, options) {
+ 	this.watcher = chokidar.watch(directoryPath, {
+ 		ignoreInitial: true,
+ 		persistent: true,
+-		followSymlinks: false,
+-		depth: 0,
++		followSymlinks: true,
++		depth: 1,
+ 		atomic: false,
+ 		alwaysStat: true,
+ 		ignorePermissionErrors: true,

invenio_theme_tuw/assets/semantic-ui/less/invenio_theme_tuw/theme/globals/site.overrides

@@ -33,15 +33,15 @@ h3
 }
 
 #hero.frontpage {
-    background-image: url('../assets/images/hero-background.png');
+    background-image: url('../assets/images/hero-background.webp');
 }
 
 #hero.contact {
-    background-image: url('../assets/images/hero-contact.png');
+    background-image: url('../assets/images/hero-contact.webp');
 }
 
 #hero.policies {
-    background-image: url('../assets/images/hero-policies.png');
+    background-image: url('../assets/images/hero-policies.webp');
 }
 
 #searchbar {

invenio_theme_tuw/config.py

@@ -48,3 +48,10 @@ ACCOUNTS_COVER_TEMPLATE = "invenio_theme_tuw/login/page_cover.html"
 
 # User profile page
 USERPROFILES_PROFILE_TEMPLATE = "invenio_theme_tuw/settings/profile.html"
+
+
+# Flask-WebpackExt
+# ================
+# See https://flask-webpackext.readthedocs.io/en/latest/configuration.html
+
+WEBPACKEXT_PROJECT = "invenio_theme_tuw.webpack:project"