Webpack is back!

assets/css/main.css

@@ -257,3 +257,13 @@ hr {
   border: 1px solid var(--border-color);
   max-width: 800px;
 }
+
+blockquote.twitter-tweet {
+  background: hsl(206deg 62% 45% / 10%);
+  border: none;
+  padding: 30px;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: 8px;
+}

layouts/partials/footer.html

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

layouts/partials/head.html

@@ -9,11 +9,7 @@
 {{- partial "prepended_head.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 }}">
-
+<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
 <!-- Custom CSS to override theme properties (/static/style.css) -->
 <link rel="stylesheet" href="{{ "style.css" | absURL }}">
 

package.json

@@ -3,5 +3,57 @@
   "version": "2.0.0",
   "main": "index.js",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
-  "license": "MIT"
+  "license": "MIT",
+   "scripts": {
+     "dev": "webpack --mode=development --watch",
+     "build": "webpack --mode=production"
+   },
+   "browserslist": [
+     "last 2 versions",
+     ">1%",
+     "not dead"
+   ],
+   "devDependencies": {
+     "@babel/cli": "^7.2.3",
+     "@babel/core": "^7.2.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",
+     "babel-loader": "^8.0.5",
+     "browserslist": "^4.0.1",
+     "clean-webpack-plugin": "^0.1.19",
+     "clipboard": "^2.0.4",
+     "css-loader": "^1.0.1",
+     "cssnano": "^4.1.8",
+     "eslint-config-airbnb": "^17.1.0",
+     "eslint-config-prettier": "^2.10.0",
+     "eslint-plugin-jsx-a11y": "^6.2.1",
+     "extract-text-webpack-plugin": "^4.0.0-beta.0",
+     "file-loader": "^1.1.11",
+     "html-webpack-plugin": "^3.2.0",
+     "husky": "^4.2.5",
+     "postcss": "^7.0.0",
+     "postcss-browser-reporter": "^0.5.0",
+     "postcss-cli": "^6.1.1",
+     "postcss-import": "^11.1.0",
+     "postcss-loader": "^2.1.6",
+     "postcss-mixins": "^6.2.1",
+     "postcss-nested": "^3.0.0",
+     "postcss-preset-env": "^5.3.0",
+     "postcss-reporter": "^5.0.0",
+     "postcss-url": "^7.3.2",
+     "prettier-eslint-cli": "^4.7.1",
+     "ramda": "^0.25.0",
+     "style-loader": "^0.21.0",
+     "uglifyjs-webpack-plugin": "^1.3.0",
+     "url-loader": "^1.1.2",
+     "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(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),e.exports=n(2)},function(e,t){var n=document.querySelector(".container"),o=document.querySelector(".menu"),r=document.querySelector(".menu-trigger"),i=(document.querySelector(".menu__inner--desktop"),document.querySelector(".menu__sub-inner-more-trigger")),c=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),u=function(){return window.matchMedia(d).matches},l=function(){r&&r.classList.toggle("hidden",!u()),o&&o.classList.toggle("hidden",u()),c&&c.classList.toggle("hidden",!u())};o&&o.addEventListener("click",function(e){return e.stopPropagation()}),c&&c.addEventListener("click",function(e){return e.stopPropagation()}),l(),document.body.addEventListener("click",function(){u()||!c||c.classList.contains("hidden")?u()&&!o.classList.contains("hidden")&&o.classList.add("hidden"):c.classList.add("hidden")}),window.addEventListener("resize",l),r&&r.addEventListener("click",function(e){e.stopPropagation(),o&&o.classList.toggle("hidden")}),i&&i.addEventListener("click",function(e){e.stopPropagation(),c&&c.classList.toggle("hidden"),c&&c.getBoundingClientRect().right>n.getBoundingClientRect().right&&(c.style.left="auto",c.style.right=0)})},function(e,t){var n=window.localStorage&&window.localStorage.getItem("theme"),o=document.querySelector(".theme-toggle"),r="dark"===n;null!==n&&document.body.classList.toggle("dark-theme",r),o.addEventListener("click",function(){document.body.classList.toggle("dark-theme"),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")})}]);

webpack.config.js

@@ -0,0 +1,91 @@
+const Webpack = require("webpack");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const CleanPlugin = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+
+const path = require("path");
+
+const join = (...paths) => path.join(__dirname, ...paths);
+
+module.exports = {
+  resolve: {
+    extensions: [".js", ".css"],
+    modules: ["assets", "node_modules"],
+  },
+  entry: {
+    "main.js": [join("assets", "js", "menu.js"), join("assets", "js", "theme.js")],
+    "prism.js": join("assets", "js", "prism.js"),
+    "style.css": join("assets", "css", "style.css"),
+  },
+  output: {
+    filename: "[name]",
+    path: join("static/assets"),
+    publicPath: "",
+  },
+  performance: {
+    hints: false,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg|woff|woff2|ttf|eot|svg)$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: [
+            {
+              loader: "css-loader",
+              options: {
+                minimize: true,
+                modules: true,
+                importLoaders: 1,
+                localIdentName: "[local]",
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                config: {
+                  path: "postcss.config.js",
+                },
+              },
+            },
+          ],
+        }),
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendor",
+      minChunks: 2,
+    },
+    minimizer: [
+      new UglifyJsPlugin({
+        sourceMap: true,
+      }),
+    ],
+  },
+  plugins: [new CleanPlugin(join("static/assets")), new ExtractTextPlugin("[name]")],
+};