Release 5.3.0

- Packages major versions update.
- Demo page update.

Author: pnikolov

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change log
 
+## [5.3.0](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v5.3.0)
+### 16/02/2021
+
+### Documentation Updates
+
+* _README_ documentacion available as HTML version in the demo page [index.html](src/templates/index.html)
+  * Built demo page is available on https://weareathlon.github.io/frontend-webpack-boilerplate/ 
+
+### Packages Major Version Updates
+
++ `html-webpack-plugin@5.0.1` from `4.x` new features can be found on the official [release notes](https://github.com/jantimon/html-webpack-plugin/blob/master/CHANGELOG.md#500-2021-02-03).
++ `postcss-loader@5.0.0` from `4.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v5.0.0).
++ `sass-loader@11.0.1` from `10.x` new features can be found on the official [release notes](https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0). 
+
+### Package Versions Update
+
++ `ajv@7.1.0`
++ `autoprefixer@10.2.4` change log can be found on the official [release notes](https://github.com/postcss/autoprefixer/releases/tag/10.2.4).
++ `@babel/preset-env@7.12.16` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.16).
++ `@babel/core@7.12.16` change log can be found on the official [release notes](https://github.com/babel/babel/releases/tag/v7.12.16).
++ `eslint@7.20.0` change log can be found on the official [release notes](https://github.com/eslint/eslint/releases/tag/v7.20.0).
++ `css-loader@5.0.2` change log can be found on the official [release notes](https://github.com/webpack-contrib/postcss-loader/releases/tag/v5.0.2).
++ `mini-css-extract-plugin@1.3.7` change log can be found on the official [release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.3.7).
++ `postcss@8.2.6` change log can be found on the official [release notes](https://github.com/postcss/postcss/releases/tag/8.2.6).
++ `sass@1.32.7` change log can be found on the official [release notes](https://github.com/sass/dart-sass/releases/tag/1.32.7).
++ `webpack@5.22.0` change log can be found on the official [release notes](https://github.com/webpack/webpack/releases/tag/v5.22.0).
++ `webpack-bundle-analyzer@4.4.0` change log can be found on the official [release notes](https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/CHANGELOG.md#440).
++ `webpack-cli@4.5.0` change log can be found on the official [release notes](https://github.com/webpack/webpack-cli/releases/tag/v4.5.0).
+
 ## [5.2.2](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases/tag/v5.2.2)
 ### 15/01/2021
 

README.md

@@ -1,7 +1,7 @@
 # Webpack 5 Boilerplate Template
 
 ![Maintenance](https://img.shields.io/maintenance/yes/2021?logo=github)
-![webpack-current](https://img.shields.io/badge/webpack-v5.15.0-green?logo=webpack)
+![webpack-current](https://img.shields.io/badge/webpack-v5.22.0-green?logo=webpack)
 ![node-current (scoped)](https://img.shields.io/node/v/@weareathlon/frontend-webpack-boilerplate)
 [![Build Status](https://api.travis-ci.org/weareathlon/frontend-webpack-boilerplate.svg?branch=master)](https://travis-ci.org/weareathlon/frontend-webpack-boilerplate)
 [![GitHub Issues](https://img.shields.io/github/issues-raw/WeAreAthlon/frontend-webpack-boilerplate)](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/issues)
@@ -162,7 +162,7 @@ $ npm run watch
 
 This command is suitable if you develop with external web server.
 
-**Note:** File watching does not work with *NFS* (*Windows*) and virtual machines under *VirtualBox*. Extend the configuration in such cases by:
+> **Note:** File watching does not work with *NFS* (*Windows*) and virtual machines under *VirtualBox*. Extend the configuration in such cases by:
 
 ```js
 module.exports = {

package-lock.json

@@ -1,7 +1,7 @@
 {
   "author": "WeAreAthlon <hello@weareathlon.com> (https://www.weareathlon.com)",
   "name": "@weareathlon/frontend-webpack-boilerplate",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "description": "Starter project template boilerplate based on Webpack with SASS/PostCSS and babel ES6/7 support.",
   "homepage": "https://github.com/WeAreAthlon/frontend-webpack-boilerplate#readme",
   "browserslist": [
@@ -21,39 +21,39 @@
   ],
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "ajv": "^7.0.3",
-    "autoprefixer": "^10.2.3",
+    "@babel/core": "^7.12.16",
+    "@babel/preset-env": "^7.12.16",
+    "ajv": "^7.1.0",
+    "autoprefixer": "^10.2.4",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "^5.0.1",
+    "css-loader": "^5.0.2",
     "css-minimizer-webpack-plugin": "^1.2.0",
-    "eslint": "^7.18.0",
+    "eslint": "^7.20.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^4.5.1",
+    "html-webpack-plugin": "^5.0.1",
     "image-minimizer-webpack-plugin": "^2.2.0",
     "imagemin-gifsicle": "^7.0.0",
     "imagemin-jpegtran": "^7.0.0",
     "imagemin-optipng": "^8.0.0",
     "imagemin-svgo": "^8.0.0",
-    "mini-css-extract-plugin": "^1.3.4",
-    "postcss": "^8.2.4",
-    "postcss-loader": "^4.1.0",
-    "sass": "^1.32.5",
+    "mini-css-extract-plugin": "^1.3.7",
+    "postcss": "^8.2.6",
+    "postcss-loader": "^5.0.0",
+    "sass": "^1.32.7",
     "sass-lint": "^1.13.1",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^11.0.0",
     "terser-webpack-plugin": "^5.1.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.16.0",
+    "webpack": "^5.22.0",
     "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.4.0",
+    "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.7.3"
   },

package.json

@@ -1,4 +1,4 @@
-const demo = () => 'Webpack Boilerplate v5.0.1 - SASS/PostCSS, ES6/7, browser sync, source code listing and more.';
+const demo = () => 'Webpack Boilerplate v5.3.0 - SASS/PostCSS, ES6/7, browser sync, source code listing and more.';
 
 // eslint-disable-next-line no-console
 console.log(demo());

src/images/content/github.png

@@ -9,6 +9,7 @@
 /* Colour palette */
 $black: #000;
 $white: #fff;
+$light-gray: #f1f1f1;
 
 $body-background-color: #333;
 $foreground-color: #fff;

src/images/content/header.png

@@ -2,39 +2,209 @@ body {
   background: $body-background-color;
   color: $foreground-color;
   font-family: 'DINP-R', arial, serif;
+  font-size: 1.2em;
 }
 
 header {
   font-size: 2em;
-  margin: 20px;
   color: $caption-color;
   text-align: center;
   background: $foreground-color url('../images/design/heading.png') center 20px no-repeat;
   padding: 60px 30px 30px;
   background-size: 160px;
+  width: 90%;
+  margin: 20px auto;
+  position: relative;
+
+  small {
+    font-size: .5em;
+
+    img {
+      display: inline;
+      width: 20px;
+    }
+  }
 }
 
 main {
-  color: $foreground-color;
-  text-align: center;
-  padding: 10px;
+  background: $foreground-color;
+  color: $black;
+  margin: 20px auto;
+  padding: 40px;
+  width: 90%;
+
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+    padding: 20px;
+    text-align: center;
+  }
+
+  h2 {
+    font-weight: bold;
+    font-size: 1.5em;
+    text-align: center;
+    padding: 20px;
+  }
+
+  h3 {
+    font-weight: bold;
+    text-align: center;
+    padding: 10px;
+  }
 }
 
 .badges {
   img {
     display: inline;
   }
+
+  h6 {
+    font-size: .5em;
+  }
 }
 
 a {
   color: $link-color;
+
+  &:hover {
+    color: $black;
+  }
 }
 
 address {
   color: $accent-color;
 }
 
+pre {
+  margin: 10px;
+  padding: 20px;
+
+  code {
+    display: block;
+    background: $body-background-color;
+    color: $white;
+    padding: 10px;
+    border-left: 6px solid $link-color;
+  }
+}
+
 .logo {
   margin: 0 auto;
   display: block;
 }
+
+ul {
+  list-style-type: square;
+  list-style-position: inside;
+}
+
+ol {
+  list-style-type: decimal;
+  list-style-position: inside;
+}
+
+ul ul,
+ol ul {
+  list-style-type: circle;
+  list-style-position: inside;
+  margin-left: 15px;
+}
+
+ol ol,
+ul ol {
+  list-style-type: lower-latin;
+  list-style-position: inside;
+  margin-left: 15px;
+}
+
+blockquote {
+  background: $light-gray;
+  border-left: 4px solid $link-color;
+  border-radius: 3px;
+  margin: 10px 0;
+  padding: 10px 10px 10px 20px;
+}
+
+code {
+  font-family: Consolas, 'courier new';
+  color: $link-color;
+  background-color: $light-gray;
+  padding: 2px;
+  font-size: 1em;
+  border-radius: 3px;
+}
+
+footer {
+  text-align: center;
+  padding-bottom: 20px;
+
+  a:hover {
+    color: $white;
+  }
+}
+
+.github-corner:hover {
+  .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+
+@keyframes octocat-wave {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  20% {
+    transform: rotate(-25deg);
+  }
+
+  40% {
+    transform: rotate(10deg);
+  }
+
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  80% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .github-corner {
+    &:hover {
+      .octo-arm {
+        animation: none;
+      }
+    }
+
+    .octo-arm {
+      animation: octocat-wave 560ms ease-in-out;
+    }
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  header,
+  main {
+    width: 60%;
+  }
+}
+
+@media only screen and (max-width: 1023px) {
+  main {
+    h1 {
+      font-size: 1.3em;
+    }
+
+    h2 {
+      font-size: 1.1em;
+    }
+  }
+}