initial commit
This commit is contained in:
commit
7d3c956806
38 changed files with 31353 additions and 0 deletions
5
.babelrc
Normal file
5
.babelrc
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
["@babel/preset-env"]
|
||||||
|
]
|
||||||
|
}
|
||||||
30
.eslintrc
Normal file
30
.eslintrc
Normal 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
76
.github/CODE_OF_CONDUCT.md
vendored
Normal 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
12
.github/CONTRIBUTING.md
vendored
Normal 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
3
.github/FUNDING.yml
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# These are supported funding model platforms
|
||||||
|
|
||||||
|
github: [pnikolov]
|
||||||
42
.github/ISSUE_TEMPLATE/bug.md
vendored
Normal file
42
.github/ISSUE_TEMPLATE/bug.md
vendored
Normal 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
5
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal 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
25
.github/ISSUE_TEMPLATE/feature.md
vendored
Normal 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
18
.github/ISSUE_TEMPLATE/support.md
vendored
Normal 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
23
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal 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
67
.github/workflows/codeql-analysis.yml
vendored
Normal 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
22
.gitignore
vendored
Normal 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
5
.prettierrc
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"singleQuote": true,
|
||||||
|
"semi": false,
|
||||||
|
"endOfLine": "auto"
|
||||||
|
}
|
||||||
108
.sasslintrc
Normal file
108
.sasslintrc
Normal 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
22
.travis.yml
Normal 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
1058
CHANGELOG.md
Normal file
File diff suppressed because it is too large
Load diff
21
LICENSE
Normal file
21
LICENSE
Normal 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
230
README.md
Normal file
|
|
@ -0,0 +1,230 @@
|
||||||
|
# Webpack 5 Boilerplate Template
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
[](https://travis-ci.com/WeAreAthlon/frontend-webpack-boilerplate)
|
||||||
|
[](https://snyk.io/advisor/npm-package/@weareathlon/frontend-webpack-boilerplate)
|
||||||
|
[](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/issues)
|
||||||
|
[](https://snyk.io/test/github/WeAreAthlon/frontend-webpack-boilerplate?targetFile=package.json)
|
||||||
|
[](https://david-dm.org/WeAreAthlon/frontend-webpack-boilerplate?type=dev)
|
||||||
|
[](https://www.npmjs.com/package/@weareathlon/frontend-webpack-boilerplate)
|
||||||
|
[](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/blob/master/LICENSE)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 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.
|
||||||
19
SECURITY.md
Normal file
19
SECURITY.md
Normal 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!
|
||||||
22
configuration/environment.js
Normal file
22
configuration/environment.js
Normal 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,
|
||||||
|
},
|
||||||
|
};
|
||||||
38
configuration/webpack.dev.config.js
Normal file
38
configuration/webpack.dev.config.js
Normal 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: [],
|
||||||
|
});
|
||||||
33
configuration/webpack.prod.config.js
Normal file
33
configuration/webpack.prod.config.js
Normal 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
29006
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
82
package.json
Executable file
82
package.json
Executable 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
7
postcss.config.js
Executable file
|
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = {
|
||||||
|
parser: 'postcss-scss',
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
38
src/40x.html
Normal file
38
src/40x.html
Normal 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 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>
|
||||||
38
src/50x.html
Normal file
38
src/50x.html
Normal 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 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…</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>
|
||||||
BIN
src/images/content/404_rainbow.jpg
Normal file
BIN
src/images/content/404_rainbow.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
src/images/content/404_unicorn.png
Normal file
BIN
src/images/content/404_unicorn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
BIN
src/images/content/50x_rainbow.jpg
Normal file
BIN
src/images/content/50x_rainbow.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
src/images/content/50x_unicorn.png
Normal file
BIN
src/images/content/50x_unicorn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
BIN
src/images/favicon.ico
Executable file
BIN
src/images/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
38
src/index.html
Normal file
38
src/index.html
Normal 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 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>
|
||||||
3
src/js/app.js
Executable file
3
src/js/app.js
Executable file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import '../scss/app.scss';
|
||||||
|
|
||||||
|
/* Your JS Code goes here */
|
||||||
66
src/scss/app.scss
Executable file
66
src/scss/app.scss
Executable 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
67
svgo.config.js
Normal 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
14
tailwind.config.js
Normal 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
110
webpack.config.js
Executable 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',
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue