Webpack is back!

README.md

@@ -92,14 +92,6 @@ $ git submodule add https://github.com/panr/hugo-theme-terminal.git themes/termi
 
 ⚠️ **The theme needs at least Hugo version 0.74.x**.
 
-The theme is using [Hugo Pipes](https://gohugo.io/hugo-pipes/) to handle Javascript and PostCSS files. This setup **requires** following npm packages. Before you start, you have to install them (globally or locally):
-
-🚨 **THIS STEP IS VERY IMPORTANT** 🚨
-
-```
-yarn add -D @babel/cli @babel/core @babel/preset-env browserslist clipboard cssnano postcss-cli postcss-import postcss-mixins postcss-nested postcss-preset-env postcss-url
-```
-
 ## How to run your site
 
 If you installed all needed `npm` dependencies, then you can run:
@@ -205,7 +197,37 @@ See the basic `post` file params supported by the theme — https://github.com/p
 
 ## How to (safely) edit the theme <a id="how-to-edit" />
 
-To change something in the theme, you have to go to `themes/terminal` and modify the files. You can also copy them (like `assets` folder) from the theme to your root directory and modify the files there (thanks to Hugo's lookup https://gohugo.io/templates/lookup-order). This will protect your changes from overriding when you update the theme.
+If you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.
+
+To change something directly in the theme, you have to go to `themes/terminal` and modify the files.
+
+First, you need to install Node dependencies. To do so, go to the theme directory (from your Hugo root directory):
+
+```bash
+ $ cd themes/terminal
+```
+
+ then run:
+
+ ```bash
+ $ npm install
+ $ npm i yarn
+ $ yarn
+ ```
+
+After you modified the files you can run webpack in watch mode:
+
+```bash
+$ yarn dev
+```
+
+or rebuild theme
+
+```bash
+$ yarn build
+```
+
+To see the changes (remember to restart `hugo server`).
 
 ## Found a bug? <a id="bug" />
 

assets/css/font.css

@@ -1,4 +1,5 @@
 @font-face {
+  font-display: swap;
   font-family: 'Fira Code';
   font-style:  normal;
   font-weight: 400;
@@ -6,6 +7,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'Fira Code';
   font-style:  normal;
   font-weight: 800;

assets/js/main.js

@@ -1 +0,0 @@
-// Add your script here

layouts/partials/footer.html

@@ -12,13 +12,8 @@
   </div>
 </footer>
 
-{{ $js := resources.Get "js/main.js" | js.Build }}
-{{ $js := resources.Get "js/prism.js" | js.Build }}
-{{ $opts := dict "noComments" true "minified" true "compact" true }}
-{{ $menu := resources.Get "js/menu.js" | js.Build | babel $opts }}
-{{ $prism := resources.Get "js/prism.js" | js.Build | babel $opts }}
-<script src="{{ $menu.Permalink }}"></script>
-<script src="{{ $prism.Permalink }}"></script>
+<script src="{{ "assets/main.js" | absURL }}"></script>
+<script src="{{ "assets/prism.js" | absURL }}"></script>
 
 <!-- Extended footer section-->
 {{ partial "extended_footer.html" . }}

layouts/partials/head.html

@@ -8,15 +8,11 @@
 {{ template "_internal/google_analytics.html" . }}
 
 <!-- Theme CSS -->
-{{ $css := resources.Get "css/style.css" }}
-{{ $opts := dict "inlineImports" true }}
-{{ $style := $css | resources.PostCSS $opts | minify }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">
-
-{{ if (or (isset .Params "color") (ne $.Site.Params.ThemeColor "orange")) }}
-  {{ $colorCss := resources.Get (printf "css/color/%s.css" (or .Params.color $.Site.Params.ThemeColor)) }}
-  {{ $color := $colorCss | resources.PostCSS $opts | minify }}
-  <link rel="stylesheet" href="{{ $color.Permalink }}">
+<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
+{{ if (isset .Params "color") }}
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | absURL }}">
+{{ else if (ne $.Site.Params.ThemeColor "orange") }}
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" $.Site.Params.ThemeColor) | absURL }}">
 {{ end }}
 
 <!-- Custom CSS to override theme properties (/static/style.css) -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminal",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
   "license": "MIT",
@@ -9,29 +9,55 @@
     ">1%",
     "not dead"
   ],
+  "scripts": {
+    "dev": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.10.5",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
     "@babel/parser": "^7.4.2",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-stage-2": "^7.0.0",
-    "babel-eslint": "^8.2.1",
+    "angular-html-parser": "^1.2.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.5",
     "browserslist": "^4.0.1",
+    "clean-webpack-plugin": "^3.0.0",
     "clipboard": "^2.0.4",
+    "css-loader": "^4.2.2",
     "cssnano": "^4.1.8",
-    "eslint-config-prettier": "^2.10.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "file-loader": "^6.1.0",
+    "html-webpack-plugin": "^4.4.1",
+    "husky": "^4.2.5",
+    "mini-css-extract-plugin": "^0.11.0",
     "postcss": "^7.0.0",
-    "postcss-browser-reporter": "^0.5.0",
-    "postcss-cli": "^7.1.1",
+    "postcss-browser-reporter": "^0.6.0",
+    "postcss-cli": "^7.1.2",
+    "postcss-color-function": "^4.0.1",
     "postcss-color-mod-function": "^3.0.3",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-mixins": "^6.2.3",
+    "postcss-mixins": "^6.2.1",
     "postcss-nested": "^4.2.3",
     "postcss-preset-env": "^6.7.0",
     "postcss-reporter": "^6.0.1",
     "postcss-url": "^8.0.0",
-    "prettier-eslint-cli": "^4.7.1"
+    "prettier-eslint-cli": "^5.0.0",
+    "ramda": "^0.27.1",
+    "style-loader": "^1.2.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "yarn build && git add . && git commit --amend --no-edit"
+    }
   }
 }

static/assets/main.js

@@ -0,0 +1 @@
+!function(n){var o={};function r(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}r.m=n,r.c=o,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,n){n(1),e.exports=n(2)},function(e,t){function n(){return window.matchMedia(d).matches}function o(){c&&c.classList.toggle("hidden",!n()),i&&i.classList.toggle("hidden",n()),a&&a.classList.toggle("hidden",!n())}var r=document.querySelector(".container"),i=document.querySelector(".menu"),c=document.querySelector(".menu-trigger"),u=(document.querySelector(".menu__inner--desktop"),document.querySelector(".menu__sub-inner-more-trigger")),a=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth");i&&i.addEventListener("click",function(e){return e.stopPropagation()}),a&&a.addEventListener("click",function(e){return e.stopPropagation()}),o(),document.body.addEventListener("click",function(){n()||!a||a.classList.contains("hidden")?n()&&!i.classList.contains("hidden")&&i.classList.add("hidden"):a.classList.add("hidden")}),window.addEventListener("resize",o),c&&c.addEventListener("click",function(e){e.stopPropagation(),i&&i.classList.toggle("hidden")}),u&&u.addEventListener("click",function(e){e.stopPropagation(),a&&a.classList.toggle("hidden"),a.getBoundingClientRect().right>r.getBoundingClientRect().right&&(a.style.left="auto",a.style.right=0)})},function(e,t){var n=getComputedStyle(document.body).getPropertyValue("--phoneWidth");window.matchMedia(n).matches||(languageSelector=document.querySelector(".language-selector-current"),moreLanguagesContainer=document.querySelector(".language-selector__more"),document.body.addEventListener("click",function(){moreLanguagesContainer&&!moreLanguagesContainer.classList.contains("hidden")&&moreLanguagesContainer.classList.add("hidden")}),languageSelector&&languageSelector.addEventListener("click",function(e){e.stopPropagation(),moreLanguagesContainer.classList.toggle("hidden")}))}]);

webpack.config.js

@@ -1,6 +1,6 @@
 const Webpack = require("webpack");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const CleanPlugin = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
@@ -8,26 +8,22 @@ const path = require("path");
 
 const join = (...paths) => path.join(__dirname, ...paths);
 
-module.exports = {
+module.exports = (env, { mode }) => ({
   resolve: {
     extensions: [".js", ".css"],
-    modules: ["source", "node_modules"],
+    modules: ["assets", "node_modules"],
   },
   entry: {
-    "main.js": [
-      join("source", "js", "main.js"),
-      join("source", "js", "menu.js"),
-      join("source", "js", "languageSelector.js")
-    ],
-    "prism.js": join("source", "js", "prism.js"),
-    "style.css": join("source", "css", "style.css"),
-    "red.css": join("source", "css", "color", "red.css"),
-    "blue.css": join("source", "css", "color", "blue.css"),
-    "green.css": join("source", "css", "color", "green.css"),
-    "pink.css": join("source", "css", "color", "pink.css"),
+    main: [join("assets", "js", "menu.js"), join("assets", "js", "languageSelector.js")],
+    prism: join("assets", "js", "prism.js"),
+    style: join("assets", "css", "style.css"),
+    red: join("assets", "css", "color", "red.css"),
+    blue: join("assets", "css", "color", "blue.css"),
+    green: join("assets", "css", "color", "green.css"),
+    pink: join("assets", "css", "color", "pink.css"),
   },
   output: {
-    filename: "[name]",
+    filename: "[name].js",
     path: join("static/assets"),
     publicPath: "",
   },
@@ -59,28 +55,27 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: "style-loader",
-          use: [
-            {
-              loader: "css-loader",
-              options: {
-                minimize: true,
-                modules: true,
-                importLoaders: 1,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
                 localIdentName: "[local]",
               },
+              import: true,
+              importLoaders: 1,
             },
-            {
-              loader: "postcss-loader",
-              options: {
-                config: {
-                  path: "postcss.config.js",
-                },
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              config: {
+                path: "postcss.config.js",
               },
             },
-          ],
-        }),
+          },
+        ],
       },
     ],
   },
@@ -95,5 +90,21 @@ module.exports = {
       }),
     ],
   },
-  plugins: [new CleanPlugin(join("static/assets")), new ExtractTextPlugin("[name]")],
-};
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [join("static/assets")],
+      cleanAfterEveryBuildPatterns: [
+        join("static/assets/style.js"),
+        join("static/assets/blue.js"),
+        join("static/assets/green.js"),
+        join("static/assets/red.js"),
+        join("static/assets/pink.js"),
+      ],
+      verbose: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+      chunkFilename: "[id].css",
+    }),
+  ],
+});