initial commit

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["@babel/preset-env"]
+  ]
+}

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "extends": ["airbnb", "prettier"],
+  "env": {
+    "node": true,
+    "jasmine": true,
+    "jquery": true
+  },
+  "rules": {
+    "no-use-before-define": 0,
+    "func-names": 0,
+    "prefer-arrow-callback": 0,
+    "no-var": 0,
+    "max-len": 0,
+    "guard-for-in": 0,
+    "object-shorthand": 0,
+    "no-restricted-syntax": 0,
+    "prefer-template": 0,
+    "import/no-amd": 0,
+    "space-before-function-paren": 0,
+    "jsx-a11y/href-no-hash": "off",
+    "jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["invalidHref"] }],
+    "import/no-unresolved": 0,
+    "import/extensions": 0
+  },
+  "globals": {
+    "browser": false,
+    "window": true,
+    "document": true
+  }
+}

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at we@athlonproduction.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

.github/CONTRIBUTING.md

@@ -0,0 +1,12 @@
+## How to contribute to Athlon Frontend Webpack Boilerplate
+
+Thank you for contributing to this template!
+=========================================
+
+## Language
+
+English is the best language to communicate.
+
+## Templates
+
+Please use issue/PR templates which are inserted automatically.

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [pnikolov]

.github/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,42 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: GitHub Security Bug Bounty
+    url: https://weareathlon.com/
+    about: Please report security vulnerabilities here.

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,25 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+***What is the motivation / use case for changing the behavior?**
+
+Describe an example use case of this feature.
+
+**Describe the solution you'd like**
+
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/support.md

@@ -0,0 +1,18 @@
+---
+name: Support Request
+about: Describe an issue using this repository code
+
+---
+
+**Is your support request related to a problem? Please describe.**
+
+A clear and concise description of what the problem is.
+
+
+**Describe alternatives you've considered**
+
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+
+Add any other context or screenshots about the support request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,23 @@
+* **Please check if the PR fulfills these requirements**
+
+- [ ] The commit message follows our guidelines
+- [ ] Tests for the changes have been added (for bug fixes / features)
+- [ ] Docs have been added / updated (for bug fixes / features)
+
+* **What kind of change does this PR introduce?** 
+
+(_Bug fix, feature, docs update, ..._)
+
+* **What is the current behavior?** 
+
+(_You can also link to an open issue here_)
+
+* **What is the new behavior (_if this is a feature change_)?**
+
+(_Add description here_)
+
+* **Does this PR introduce a breaking change?** 
+
+(_What changes might users need to make in their existing projects due to this PR?_)
+
+* **Other information**:

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,67 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    - cron: '34 6 * * 5'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.gitignore

@@ -0,0 +1,22 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Mac OS X
+.DS_Store
+._.*
+._*
+
+# Ignore local editor
+.project
+.settings
+.idea
+*.swp
+tags
+nbproject/*
+
+# Windows
+Thumbs.db
+
+npm-debug.log
+
+node_modules/
+dist/

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "endOfLine": "auto"
+}

.sasslintrc

@@ -0,0 +1,108 @@
+files:
+  # formatter: stylish
+  include: 'src/scss/*'
+  ignore:
+    - 'src/scss/vendor/**/*.scss'
+    - 'src/scss/base/_reset.scss'
+    - 'src/scss/base/_print.scss'
+    - 'src/scss/base/_fonts.scss'
+    - 'src/scss/base/mixins.scss'
+    - 'src/scss/dirty/_hacks.scss'
+
+rules:
+  # Extends
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+
+  # Mixins
+  mixins-before-declarations:
+    - 2
+    -
+      exclude: ['bp']
+
+  # Line Spacing
+  one-declaration-per-line: 2
+  empty-line-between-blocks: 2
+  single-line-per-selector: 2
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-keywords: 2
+  no-color-literals: 2
+  no-combinators: 0
+  no-css-comments: 0
+  no-debug: 2
+  no-disallowed-properties: 0
+  no-duplicate-properties: 2
+  no-empty-rulesets: 2
+  no-extends: 1
+  no-ids: 2
+  no-important: 0
+  no-invalid-hex: 2
+  no-mergeable-selectors: 2
+  no-misspelled-properties: 2
+  no-qualifying-elements:
+    - 2
+    -
+      allow-element-with-attribute: true
+
+  no-trailing-whitespace: 2
+  no-trailing-zero: 2
+  no-transition-all: 0
+  no-universal-selectors: 2
+  no-url-protocols: 1
+  no-vendor-prefixes: 2
+  no-warn: 2
+  property-units: 0
+
+  # Nesting
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+
+  # Name Formats
+  class-name-format: 2
+  function-name-format: 2
+  id-name-format: 2
+  mixin-name-format: 2
+  placeholder-name-format: 2
+  variable-name-format: 2
+
+  # Style Guide
+  attribute-quotes: 2
+  bem-depth: 0
+  border-zero:
+    - 2
+    -
+      convention: 'none'
+
+  brace-style: 2
+  clean-import-paths: 2
+  empty-args: 0
+  hex-length: 2
+  hex-notation: 2
+  indentation: 2
+  leading-zero: 2
+  nesting-depth: 0
+  property-sort-order: 0
+  pseudo-element: 2
+  quotes: 2
+  shorthand-values: 2
+  url-quotes: 2
+  variable-for-property: 0
+  zero-unit: 2
+
+  # Inner Spacing
+  space-after-comma: 2
+  space-before-colon: 2
+  space-after-colon: 2
+  space-before-brace: 2
+  space-before-bang: 2
+  space-after-bang: 2
+  space-between-parens: 2
+  space-around-operator: 2
+
+  # Final Items
+  trailing-semicolon: 2
+  final-newline: 2

.travis.yml

@@ -0,0 +1,22 @@
+language: node_js
+dist: xenial
+os: linux
+node_js:
+  - node
+  - lts/*
+install:
+  - npm ci
+script:
+  - npm run lint:sass
+  - npm run lint:js
+  - npm run production
+deploy:
+  strategy: git
+  provider: pages
+  skip_cleanup: true
+  token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
+  keep_history: true
+  local_dir: dist
+  on:
+    branch: master
+    node_js: 'lts/*'

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Athlon DPS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,230 @@
+# Webpack 5 Boilerplate Template
+
+![Maintenance](https://img.shields.io/maintenance/yes/2021?logo=github)
+![webpack-current](https://img.shields.io/badge/webpack-v5.44.0-green?logo=webpack)
+![node-current (scoped)](https://img.shields.io/node/v/@weareathlon/frontend-webpack-boilerplate)
+[![Build Status](https://travis-ci.com/WeAreAthlon/frontend-webpack-boilerplate.svg?branch=master)](https://travis-ci.com/WeAreAthlon/frontend-webpack-boilerplate)
+[![@weareathlon/frontend-webpack-boilerplate](https://snyk.io/advisor/npm-package/@weareathlon/frontend-webpack-boilerplate/badge.svg)](https://snyk.io/advisor/npm-package/@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)
+[![Known Vulnerabilities](https://snyk.io/test/github/WeAreAthlon/frontend-webpack-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/WeAreAthlon/frontend-webpack-boilerplate?targetFile=package.json)
+[![devDependency Status](https://david-dm.org/WeAreAthlon/frontend-webpack-boilerplate/dev-status.svg)](https://david-dm.org/WeAreAthlon/frontend-webpack-boilerplate?type=dev)
+[![npm](https://img.shields.io/npm/dm/@weareathlon/frontend-webpack-boilerplate)](https://www.npmjs.com/package/@weareathlon/frontend-webpack-boilerplate)
+[![GitHub License](https://img.shields.io/github/license/WeAreAthlon/frontend-webpack-boilerplate)](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/blob/master/LICENSE)
+
+![Front-end Webpack Boilerplate](https://repository-images.githubusercontent.com/96102257/4be7b600-61f1-11e9-9ebf-67b17d5ba125)
+
+## Demo
+
+* [Demo page demonstrating building - SASS, JavaScript, Images, Fonts, HTML](https://weareathlon.github.io/frontend-webpack-boilerplate/)
+
+Table of Contents
+=================
+
+   * [Webpack 5 Boilerplate Template](#webpack-5-boilerplate-template)
+      * [Demo](#demo)
+      * [Features](#features)
+      * [Requirements](#requirements)
+   * [Setup](#setup)
+      * [Installation](#installation)
+      * [Define Package Metadata](#define-package-metadata)
+   * [Configuration](#configuration)
+      * [Environment Configuration](#environment-configuration)
+      * [Additional webpack configuration](#additional-webpack-configuration)
+   * [Development](#development)
+      * [Assets Source](#assets-source)
+      * [Build Assets](#build-assets)
+         * [One time build assets for development](#one-time-build-assets-for-development)
+         * [Build assets and enable source files watcher](#build-assets-and-enable-source-files-watcher)
+         * [Start a development server - reloading automatically after each file change.](#start-a-development-server---reloading-automatically-after-each-file-change)
+   * [Production](#production)
+      * [Build Assets](#build-assets-1)
+      * [Get Built Assets](#get-built-assets)
+   * [Run Code Style Linters](#run-code-style-linters)
+      * [SASS](#sass)
+      * [JavaScript](#javascript)
+   * [Additional Tools](#additional-tools)
+      * [Run Assets Bundle Analyzer](#run-assets-bundle-analyzer)
+      * [Continuous Integration](#continuous-integration)
+
+## Features
+
+* **Simple setup** instructions
+  * Start development of a project right away with **simple**, **configured**, **linter enabled**, **browser synced** asset files.
+* Configuration per **environment**
+  * `development` - [`sourcemaps`](https://webpack.js.org/configuration/devtool/), [`browser synced developmentment server`](https://webpack.js.org/configuration/dev-server/)
+  * `production` - [`minification`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`sourcemaps`](https://webpack.js.org/configuration/devtool/)
+* Configurable **browsers versions support**. It uses [`browserslist`](https://github.com/browserslist/browserslist#full-list) - just specify the browsers you want to support in the `package.json` file for `browserslist`:
+
+```js
+"browserslist": [
+    "last 2 versions",
+    "> 5%"
+]
+```
+* The built CSS / JavaScript files will respect the **configured supported browser versions** using the following tools:
+  * [`autoprefixer`](https://github.com/postcss/autoprefixer) - automatically adds vendor prefixes to CSS rules
+  * [`babel-preset-env`](https://babeljs.io/docs/en/babel-preset-env) - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (*and optionally, browser polyfills*) are needed by your target environment(s).
+* Demo project files to be used as a reference and **example demo** building of:
+  * *JavaScript*
+  * *SASS / PostCSS*
+  * *HTML* templates
+  * *Images* (*CSS backgrounds and image tags*)
+  * *Fonts*
+* Support for **assets optimization** for production environment with ability to configure:
+  * **Code Minification** of *JavaScript* and *CSS* processed files.
+  * **Optimize Assets Loading** - inline and embed **images** / **fonts** files having file size below a *configurable* threshold value.
+  * **Images Optimisation** - optimize `jpeg`, `jpg`, `png`, `gif`, `svg` filesize and loading type via [`imagemin`](https://github.com/imagemin/imagemin). Plugin and Loader for webpack to optimize (*compress*) all images using `imagemin`. Do not worry about size of images, now they are always optimized/compressed.
+* Support for **source code syntax style and formatting linters** that analyze source code to flag any programming errors, bugs, stylistic errors or suspicious constructs:
+  * **SASS/PostCSS syntax cheker** - you can change or add additional rules in `.sasslintrc` file. Configuration options can be found on [`sass-lint`](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) documentation.
+  * **JavaScript syntax checker** - following the `airbnb` style, you can review and configure the rules in `.eslintrc` file. Configuration options can be found on [`eslint`](https://eslint.org/docs/user-guide/configuring) documentation.
+* Latest [Webpack 5](https://github.com/webpack/webpack) - *JavaScript* module bundler.
+* Latest [SASS/PostCSS](https://github.com/sass/sass) compiler based on Dart `sass`.
+* Latest [Babel 7](https://github.com/babel/babel) (`@babel/core`) - JavaScript compiler - _Use next generation JavaScript, today._
+* Integration with [Travis CI](https://travis-ci.com/)
+  * [Demo deployment available to GitHub pages](https://weareathlon.github.io/frontend-webpack-boilerplate/)
+* Configured and ready to use **Webpack Dev Server** plugin for faster local development - [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/)
+* Integration with [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) - _Visualize size of webpack output files with an interactive zoomable treemap._
+
+## Requirements
+
+* `node` : `^12 || >=14`
+* `npm`
+
+# Setup
+
+## Installation
+
+1. Choose and download the latest template release from [List of Releases](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases).
+2. Extract the release archive to a new directory, rename it to your project name and browse the directory.
+3. Install all dependencies using `npm` *clean install* command. 
+
+```sh 
+$ npm ci
+```
+
+> More on the clean install npm command can be read here [`npm ci`](https://docs.npmjs.com/cli/ci.html)
+
+> You can still use `npm install` in cases the `npm ci` raises system error due to specific platform incompatibilities.
+
+## Define Package Metadata
+
+* Amend `package.json` file and optionally specify:
+  * `name` - Name of your project. A name can be optionally prefixed by a scope, e.g. `@myorg/mypackage`.
+  * `version` - Specify and maintain a version number indicator for your project code.
+  * `author` - Your organisation or just yourself. You can also specify [`contributors`](https://docs.npmjs.com/files/package.json#people-fields-author-contributors).
+  * `description` - Short description of your project.
+  * `keywords` - Put keywords in it. It’s an array of strings.
+  * `repository` - Specify the place where your code lives.
+  * `license` - Announce your code license, figure out the license from [Choose an Open Source License](https://choosealicense.com) .
+  * `browserslist` - Specify the supported browsers versions - you can refer to [full list](https://github.com/browserslist/browserslist#full-list) of availalbe options.
+
+# Configuration
+
+## Environment Configuration
+
+* Edit the [`configuration/environment.js`](configuration/environment.js) if you want to specify:
+  * **`server`**: configure development server, specify `host`, `port`. Refer to the full development server configuration options for [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/).
+  * **`limits`**: configure file size thresholds for assets optimizations.
+    * Image/Font files size in bytes. Below this value the image file will be served as Data URL (_inline base64_).
+  * **`paths`**: `src` or `dist` directories names and file system location.
+
+## Additional `webpack` configuration
+
+You can additionally configure `webpack` for specific environment:
+* `development` - [`configuration/webpack.dev.config.js`](configuration/webpack.dev.config.js)
+* `production` - [`configuration/webpack.prod.config.js`](configuration/webpack.prod.config.js)
+  * Note that if you prefer to build and deploy [`sourcemap`](https://webpack.js.org/configuration/devtool/#production) files:
+> You should configure your server to disallow access to the Source Map file for normal users!
+
+# Development
+
+## Assets Source
+
+* **SASS/PostCSS** files are located under `src/scss/`
+* **JavaScript** files with support of latest ECMAScript _ES6 / ECMAScript 2016(ES7)/ etc_ files are located under `src/js/`
+* **Image** files are located under `src/images/`
+* **Font** files are located under `src/fonts/`
+* **HTML** files are located under `src/`
+  * It will **automatically** build **all HTML files** placed under `src/` directory, no need to manually configure each template anymore!
+
+## Build Assets
+
+### One time build assets for development
+
+```sh
+$ npm run build
+```
+
+### Build assets and enable source files watcher
+
+```sh
+$ 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:
+
+```js
+module.exports = {
+  //...
+  watchOptions: {
+    poll: 1000 // Check for changes every second
+  }
+};
+```
+
+### Start a development server - reloading automatically after each file change.
+
+```sh
+$ npm run dev
+```
+
+# Production 
+
+## Build Assets
+
+Optimize assets for production by:
+
+```sh
+$ npm run production
+```
+
+## Get Built Assets
+
+* _CSS_ files are located under `/dist/css/`
+* _JavaScript_ files with support of _ES6 / ECMAScript 2016(ES7)_ files are located under `/dist/js/`
+* _Images_ are located under `/dist/images/`
+  * Images part of the _design_ (_usually referenced in the CSS_) are located under `/dist/images/design/`
+  * Images part of the _content_ (_usually referenced via `<img>` tags_) are located under `/dist/images/content/`
+* _Fonts_ are located under `/dist/fonts/`
+* _HTML_ files are located under `/dist/`
+
+# Run Code Style Linters
+
+## SASS
+
+```sh
+$ npm run lint:sass
+```
+## JavaScript
+
+```sh
+$ npm run lint:js
+```
+
+# Additional Tools
+
+## Run Assets Bundle Analyzer
+
+```sh
+$ npm run stats
+```
+
+> This will open the visualisaion on the default configuraiton URL `localhost:8888`, you can change this URL or port following the [package](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-cli) documentation.
+
+## Continuous Integration
+
+This boilerplate template contains integration with [Travis CI](https://travis-ci.org/). The build system runs all linting scripts and deploys production optimized pages to _GitHub_ pages upon push to the `master` branch. However, note that this deployment flow only works for _Project Pages_, as User and Organization pages [only support the master branch flow](https://help.github.com/articles/user-organization-and-project-pages/).
+
+For more information on how to set up alternative deployment processes, check out the [Travis CI documentation on deployment](https://docs.travis-ci.com/user/deployment). The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.

SECURITY.md

@@ -0,0 +1,19 @@
+# Security Policy
+
+## Supported Versions
+
+The following release versions of the template are
+currently being supported with security updates.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 5.x   | :white_check_mark: |
+| < 4.x | :x:                |
+
+## Reporting a Vulnerability
+
+If you discover a security issue in this webpack boilerplate, please report it by sending an email to plamen@athlonsofia.com.
+
+This will allow us to assess the risk, and make a fix available before we add a bug report to the GitHub repository.
+
+Thanks for helping make this boilerplate safe for everyone!

configuration/environment.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  paths: {
+    /* Path to source files directory */
+    source: path.resolve(__dirname, '../src/'),
+
+    /* Path to built files directory */
+    output: path.resolve(__dirname, '../dist/'),
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 4000,
+  },
+  limits: {
+    /* Image files size in bytes. Below this value the image file will be served as DataURL (inline base64). */
+    images: 8192,
+
+    /* Font files size in bytes. Below this value the font file will be served as DataURL (inline base64). */
+    fonts: 8192,
+  },
+};

configuration/webpack.dev.config.js

@@ -0,0 +1,38 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { merge } = require('webpack-merge');
+
+const webpackConfiguration = require('../webpack.config');
+const environment = require('./environment');
+
+module.exports = merge(webpackConfiguration, {
+  mode: 'development',
+
+  /* Manage source maps generation process */
+  devtool: 'eval-source-map',
+
+  /* Development Server Configuration */
+  devServer: {
+    contentBase: environment.paths.output,
+    watchContentBase: true,
+    publicPath: '/',
+    open: true,
+    historyApiFallback: true,
+    compress: true,
+    overlay: true,
+    hot: false,
+    watchOptions: {
+      poll: 300,
+    },
+    ...environment.server,
+  },
+
+  /* File watcher options */
+  watchOptions: {
+    aggregateTimeout: 300,
+    poll: 300,
+    ignored: /node_modules/,
+  },
+
+  /* Additional plugins configuration */
+  plugins: [],
+});

configuration/webpack.prod.config.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { merge } = require('webpack-merge');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const webpackConfiguration = require('../webpack.config');
+
+module.exports = merge(webpackConfiguration, {
+  mode: 'production',
+
+  /* Manage source maps generation process. Refer to https://webpack.js.org/configuration/devtool/#production */
+  devtool: false,
+
+  /* Optimization configuration */
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+
+  /* Performance treshold configuration values */
+  performance: {
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+
+  /* Additional plugins configuration */
+  plugins: [],
+});

package.json

@@ -0,0 +1,82 @@
+{
+  "author": "Adam Piontek <adam@73k.us> (https://73k.us)",
+  "name": "@73kus/err",
+  "version": "0.0.1",
+  "description": "Simple but pretty error pages for statis serving, e.g. with nginx",
+  "homepage": "https://git.73k.us",
+  "browserslist": [
+    "last 2 versions",
+    "> 5%"
+  ],
+  "contributors": [
+    {
+      "name": "Adam Piontek",
+      "email": "adam@73k.us",
+      "url": "https://73k.us"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "eslint": "^7.30.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.2",
+    "image-minimizer-webpack-plugin": "^2.2.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^9.0.0",
+    "mini-css-extract-plugin": "^2.1.0",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "postcss-scss": "^4.0.0",
+    "prettier": "^2.3.2",
+    "sass": "^1.35.2",
+    "sass-lint": "^1.13.1",
+    "sass-loader": "^12.1.0",
+    "tailwindcss": "^2.2.7",
+    "terser-webpack-plugin": "^5.1.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.44.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.8.0"
+  },
+  "engines": {
+    "node": "^12 || >=14"
+  },
+  "keywords": [
+    "webpack",
+    "error",
+    "404",
+    "50x"
+  ],
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git@git.73k.us:73kus-err.git"
+  },
+  "scripts": {
+    "build": "webpack --config configuration/webpack.dev.config.js --mode=development",
+    "watch": "webpack --config configuration/webpack.dev.config.js --mode=development --watch",
+    "bundle": "npm install && npm run watch",
+    "dev": "webpack serve --config configuration/webpack.dev.config.js --mode=development",
+    "production": "webpack --config configuration/webpack.prod.config.js --mode=production",
+    "lint:sass": "sass-lint -v -q",
+    "lint:js": "eslint --ext .js src/js/",
+    "stats": "webpack --config configuration/webpack.prod.config.js --mode=production --json > dist/stats.json && webpack-bundle-analyzer dist/stats.json"
+  },
+  "target": "web"
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  parser: 'postcss-scss',
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/40x.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>40x Error!</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="description" content="You tried to get something that’s not there!">
+    <meta name="author" content="Oh no! 404!">
+  </head>
+  <body class="h-screen w-screen bg-cover bg-center   grid grid-cols-1 place-content-center" style="background-image: url(images/content/404_rainbow.jpg);">
+
+    <div class="grid justify-items-center text-gray-900">
+
+      <img src="images/content/404_unicorn.png" class="unicorn" alt="UNICORN">
+
+      <h1 class="text-5xl leading-normal">Oh no! 403/404!</h1>
+
+      <p class="text-info font-serif leading-loose">You tried to get something you can't get!</p>
+
+      <p class="icon-link mt-0 sm:mt-2 md:mt-6">
+        <a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank">
+          <svg class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+          </svg>
+        </a>
+      </p>
+
+      <p class="text-copy text-gray-200 mt-3 sm:mt-6 md:mt-8">
+        (Unicorn image
+        <a href="https://creativecommons.org/licenses/by-nc/4.0/" class="text-gray-100 underline">Creative Commons 4.0 BY-NC</a>
+        via <a href="http://pngimg.com/download/24891" class="text-gray-100 underline">pngimg.com</a>)
+      </p>
+
+    </div>
+
+  </body>
+</html>

src/50x.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>40x Error!</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="description" content="You tried to get something that’s not there!">
+    <meta name="author" content="Oh no! 404!">
+  </head>
+  <body class="h-screen w-screen bg-cover bg-center   grid grid-cols-1 place-content-center" style="background-image: url(images/content/50x_rainbow.jpg);">
+
+    <div class="grid justify-items-center text-gray-900">
+
+      <img src="images/content/50x_unicorn.png" class="unicorn" alt="UNICORN">
+
+      <h1 class="text-5xl leading-normal">K̷z̴z̶t̸.̶ ̷5̷0̵x̷ ̷E̷r̷r̶o̸r̸!̶</h1>
+
+      <p class="text-info font-serif leading-loose">Something went wrong. Try going home&hellip;</p>
+
+      <p class="icon-link mt-0 sm:mt-2 md:mt-6">
+        <a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank">
+          <svg class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+          </svg>
+        </a>
+      </p>
+
+      <p class="text-copy text-gray-200 mt-3 sm:mt-6 md:mt-8">
+        (Unicorn image
+        <a href="https://creativecommons.org/licenses/by-nc/4.0/" class="text-gray-100 underline">Creative Commons 4.0 BY-NC</a>
+        via <a href="http://pngimg.com/download/24891" class="text-gray-100 underline">pngimg.com</a>)
+      </p>
+
+    </div>
+
+  </body>
+</html>

src/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>40x Error!</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="description" content="You tried to get something that’s not there!">
+    <meta name="author" content="Oh no! 404!">
+  </head>
+  <body class="h-screen w-screen bg-cover bg-center   grid grid-cols-1 place-content-center" style="background-image: url(images/content/404_rainbow.jpg);">
+
+    <div class="grid justify-items-center text-gray-900">
+
+      <img src="images/content/404_unicorn.png" class="unicorn" alt="UNICORN">
+
+      <h1 class="text-5xl leading-normal">Oh no! 403/404!</h1>
+
+      <p class="text-info font-serif leading-loose">You tried to get something you can't get!</p>
+
+      <p class="icon-link mt-0 sm:mt-2 md:mt-6">
+        <a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank">
+          <svg class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
+          </svg>
+        </a>
+      </p>
+
+      <p class="text-copy text-gray-200 mt-3 sm:mt-6 md:mt-8">
+        (Unicorn image
+        <a href="https://creativecommons.org/licenses/by-nc/4.0/" class="text-gray-100 underline">Creative Commons 4.0 BY-NC</a>
+        via <a href="http://pngimg.com/download/24891" class="text-gray-100 underline">pngimg.com</a>)
+      </p>
+
+    </div>
+
+  </body>
+</html>

src/js/app.js

@@ -0,0 +1,3 @@
+import '../scss/app.scss';
+
+/* Your JS Code goes here */

src/scss/app.scss

@@ -0,0 +1,66 @@
+// /* By Athlon Front-End Team */
+
+// /* Core variables */
+// @import 'base/vars';
+
+// /* CSS Reset */
+// @import 'base/reset';
+
+// /* CSS print */
+// @import 'base/print';
+
+// /* Fonts */
+// @import 'base/fonts';
+
+// /* Mixins, helpers and functions */
+// @import 'base/mixins';
+
+// /* Vendor */
+
+// /* Components */
+
+// /* Browser specific styles */
+// @import 'dirty/hacks';
+
+// /* Demo Page styles */
+// @import 'demo';
+
+/* Tailwind imports */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+
+/* unicorn images */
+img {
+  &.unicorn {
+    max-width: 95% !important;
+    @media (min-width: 512px) {
+      max-width: 85% !important;
+    }
+    @media (min-width: 640px) {
+      max-width: 50% !important;
+    }
+    @media (min-width: 768px) {
+      max-width: 40% !important;
+    }
+    @media (min-width: 1024px) {
+      max-width: 35% !important;
+    }
+    @media (min-width: 1280px) {
+      max-width: 30% !important;
+    }
+    @media (min-width: 1536px) {
+      max-width: 25% !important;
+    }
+  }
+}
+
+p {
+  &.text-info {
+    text-shadow: 0 2px 2px rgba(243,244,246,0.3);
+  }
+  &.text-copy {
+    font-size: 0.6rem;
+  }
+}

svgo.config.js

@@ -0,0 +1,67 @@
+module.exports = {
+  multipass: false, // boolean. false by default
+  plugins: [
+    'cleanupAttrs',
+    'mergeStyles',
+    'inlineStyles',
+    'removeDoctype',
+    'removeXMLProcInst',
+    'removeComments',
+    'removeMetadata',
+    'removeTitle',
+    'removeDesc',
+    'removeUselessDefs',
+    'removeXMLNS',
+    'removeEditorsNSData',
+    'removeEmptyAttrs',
+    'removeHiddenElems',
+    'removeEmptyText',
+    'removeEmptyContainers',
+    // 'removeViewBox',
+    'cleanupEnableBackground',
+    'minifyStyles',
+    // 'convertStyleToAttrs',
+    'convertColors',
+    'convertPathData',
+    'convertTransform',
+    'removeUnknownsAndDefaults',
+    'removeNonInheritableGroupAttrs',
+    'removeUselessStrokeAndFill',
+    'removeUnusedNS',
+    // 'prefixIds',
+    'cleanupIDs',
+    'cleanupNumericValues',
+    // 'cleanupListOfValues',
+    'moveElemsAttrsToGroup',
+    'moveGroupAttrsToElems',
+    'collapseGroups',
+    // 'removeRasterImages',
+    'mergePaths',
+    'convertShapeToPath',
+    'convertEllipseToCircle',
+    'sortAttrs',
+    'sortDefsChildren',
+    'removeDimensions',
+    // 'removeAttrs',
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: 'svg:id'
+      }
+    },
+    // 'removeAttributesBySelector',
+    // 'removeElementsByAttr',
+    // 'addClassesToSVGElement',
+    {
+      name: 'addClassesToSVGElement',
+      params: {
+        className: '{{class-placeholder}}'
+      }
+    },
+    // 'addAttributesToSVGElement',
+    // 'removeOffCanvasPaths',
+    'removeStyleElement',
+    // 'removeScriptElement',
+    // 'reusePaths',
+  ]
+}

tailwind.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  purge: [
+    './src/**/*.html',
+    './src/**/*.js',
+  ],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

webpack.config.js

@@ -0,0 +1,110 @@
+/**
+ * Webpack main configuration file
+ */
+
+const path = require('path');
+const fs = require('fs');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HTMLWebpackPlugin = require('html-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { extendDefaultPlugins } = require('svgo');
+
+const environment = require('./configuration/environment');
+
+const templateFiles = fs.readdirSync(environment.paths.source)
+  .filter((file) => path.extname(file).toLowerCase() === '.html');
+
+const htmlPluginEntries = templateFiles.map((template) => new HTMLWebpackPlugin({
+  inject: true,
+  hash: false,
+  filename: template,
+  template: path.resolve(environment.paths.source, template),
+  favicon: path.resolve(environment.paths.source, 'images', 'favicon.ico'),
+}));
+
+module.exports = {
+  entry: {
+    app: path.resolve(environment.paths.source, 'js', 'app.js'),
+  },
+  output: {
+    filename: 'js/[name].js',
+    path: environment.paths.output,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.((c|sa|sc)ss)$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader'],
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.(png|gif|jpe?g|svg)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              name: 'images/design/[name].[hash:6].[ext]',
+              publicPath: '../',
+              limit: environment.limits.images,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              name: 'fonts/[name].[hash:6].[ext]',
+              publicPath: '../',
+              limit: environment.limits.fonts,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+    }),
+    new ImageMinimizerPlugin({
+      test: /\.(jpe?g|png|gif|svg)$/i,
+      minimizerOptions: {
+        // Lossless optimization with custom option
+        // Feel free to experiment with options for better result for you
+        plugins: [
+          ['gifsicle', { interlaced: true }],
+          ['jpegtran', { progressive: true }],
+          ['optipng', { optimizationLevel: 5 }],
+          ['svgo', { configFile: path.resolve('svgo.config.js'), },
+          ],
+        ],
+      },
+    }),
+    new CleanWebpackPlugin({
+      verbose: true,
+      cleanOnceBeforeBuildPatterns: ['**/*', '!stats.json'],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.resolve(environment.paths.source, 'images', 'content'),
+          to: path.resolve(environment.paths.output, 'images', 'content'),
+          toType: 'dir',
+          globOptions: {
+            ignore: ['*.DS_Store', 'Thumbs.db'],
+          },
+        },
+      ],
+    }),
+  ].concat(htmlPluginEntries),
+  target: 'web',
+};