initial commit

This commit is contained in:
Adam Piontek 2021-08-02 17:05:36 -04:00
commit 7d3c956806
38 changed files with 31353 additions and 0 deletions

5
.babelrc Normal file
View file

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

30
.eslintrc Normal file
View file

@ -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
}
}

76
.github/CODE_OF_CONDUCT.md vendored Normal file
View file

@ -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

12
.github/CONTRIBUTING.md vendored Normal file
View file

@ -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.

3
.github/FUNDING.yml vendored Normal file
View file

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

42
.github/ISSUE_TEMPLATE/bug.md vendored Normal file
View file

@ -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.

5
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View file

@ -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.

25
.github/ISSUE_TEMPLATE/feature.md vendored Normal file
View file

@ -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.

18
.github/ISSUE_TEMPLATE/support.md vendored Normal file
View file

@ -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.

23
.github/PULL_REQUEST_TEMPLATE.md vendored Normal file
View file

@ -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**:

67
.github/workflows/codeql-analysis.yml vendored Normal file
View file

@ -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

22
.gitignore vendored Normal file
View file

@ -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/

5
.prettierrc Normal file
View file

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

108
.sasslintrc Normal file
View file

@ -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

22
.travis.yml Normal file
View file

@ -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/*'

1058
CHANGELOG.md Normal file

File diff suppressed because it is too large Load diff

21
LICENSE Normal file
View file

@ -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.

230
README.md Normal file
View file

@ -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. Its 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.

19
SECURITY.md Normal file
View file

@ -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!

View file

@ -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,
},
};

View file

@ -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: [],
});

View file

@ -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: [],
});

29006
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

82
package.json Executable file
View file

@ -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"
}

7
postcss.config.js Executable file
View file

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

38
src/40x.html Normal file
View file

@ -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 thats 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>

38
src/50x.html Normal file
View file

@ -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 thats 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

BIN
src/images/favicon.ico Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

38
src/index.html Normal file
View file

@ -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 thats 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>

3
src/js/app.js Executable file
View file

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

66
src/scss/app.scss Executable file
View file

@ -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;
}
}

67
svgo.config.js Normal file
View file

@ -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',
]
}

14
tailwind.config.js Normal file
View file

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

110
webpack.config.js Executable file
View file

@ -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',
};