Skip to content

Commit 590c41c

Browse files
author
Manuel Burghammer
committed
update all packages, full integration of tailwind, major update
1 parent f3b244a commit 590c41c

22 files changed

+1778
-190
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ yarn.lock
1919
composer.lock
2020
composer.phar
2121
/vendor/
22+
/config/
23+
theme.yaml*
2224

2325
# Commit your application's lock file https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control
2426
# You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file

‎README.md

+21-6
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,37 @@
1-
# Webpack ES6+ Sass Boilerplate [![devDependency Status](https://david-dm.org/xitara/webpack-boilerplate/dev-status.svg)](https://david-dm.org/xitara/webpack-boilerplate/?type=dev) [![Known Vulnerabilities](https://snyk.io/test/github/xitara/webpack-boilerplate/badge.svg)](https://snyk.io//test/github/xitara/webpack-boilerplate)
1+
# OctoberCMS Webpack ES6+ Sass Boilerplate [![devDependency Status](https://david-dm.org/xitara/webpack-boilerplate/dev-status.svg)](https://david-dm.org/xitara/webpack-boilerplate/?type=dev) [![Known Vulnerabilities](https://snyk.io/test/github/xitara/webpack-boilerplate/badge.svg)](https://snyk.io//test/github/xitara/webpack-boilerplate)
22

3-
A webpack 4 based boilerplate for web apps.
4-
Forked from [https://github.com/vadimmarkov/webpack-es6-sass-boilerplate](https://github.com/vadimmarkov/webpack-es6-sass-boilerplate)
3+
A webpack 4 based boilerplate for OctoberCMS or other web projects.
4+
In OctoberCMS clone the repo in the plugin or theme you want.
5+
Otherwise clone the repo in a folder, you want and change `STORAGE` in `bash/config.sh`
56

6-
## Getting started
7+
## Dependencies
8+
9+
- `yarn`
10+
- `bash` to run `zip`, `fly`, `deploy` and `ftp`. I testet on debian/buster
11+
- `lftp` to upload with ftp by `yarn ftp`
12+
13+
## Quick start
714

815
- clone the repo via `git clone https://github.com/xitara/webpack-boilerplate.git`
916
- `cd webpack-es6-sass-boilerplate`
10-
- run `yarn install` to fetch all the dependencies
17+
- run `yarn` or `yarn fly` to fetch all the dependencies
18+
- change settings in `package.json` and `bash/config.sh` if possible
1119
- run `yarn start` to start the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) (`localhost:8080` will be opened automatically)
1220
- start developing
1321
- when you are done, run `yarn run build` to get the production version of your app
1422

1523
## Commands
1624

25+
- `cleanup` - reset boilerplate but keeps all files in src
1726
- `start` - start the dev server
1827
- `watch` - start webpack --watch
19-
- `build` - create build in `build` folder
28+
- `dwatch` - start webpack --watch
29+
- `build` - create build
30+
- `dbuild` - create development-build
31+
- `zip` - creates a zip-file with all relevant files/folders
32+
- `deploy` - creates runnable folder one level down
33+
- `ftp` - runs `yarn deploy` and upload files/folders with lftp
34+
- `fly` - runs `composer install` if possible after `yarn install`
2035
- `analyze` - analyze your production bundle
2136
- `lint-code` - run an ESLint check
2237
- `lint-style` - run a Stylelint check

‎bash/config.sh

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
#!/bin/bash
1+
#!bash
22

33
# list of files and folder to pack/deploy
4+
# STORAGE=(*.php assets classes controllers lang partials updates vendor config content layouts meta pages partials theme.yaml plugin.yaml version.yaml)
45
STORAGE=(*.php assets classes controllers tests lang partials updates vendor config content layouts meta pages partials backend theme.yaml plugin.yaml version.yaml phpunit.xml)
56

6-
# filename. default name from package.json
7-
# FILE="core-deploy"
7+
# filename. default name from package.json example with jq (linux)
88
FILE=$(cat package.json | jq -r .name)
99

1010
# target path
11-
# TARGET="$(pwd)/.."
12-
TARGET="/tmp"
11+
TARGET="$(pwd)/.."
1312

1413
# ftp for deploy
1514
FTP_HOST=""

‎bash/deploy.sh

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
#!/bin/bash
1+
#!bash
22

33
. $(pwd)"/bash/config.sh"
44

55
yarn build
66

7-
# STORAGE=(*.php assets classes controllers lang partials updates vendor config content layouts meta pages partials theme.yaml plugin.yaml version.yaml)
8-
# FILE=$(cat package.json | jq -r .name)
9-
# TARGET="$(pwd)/.."
107
MYDATE=$(date +"%Y-%m-%d_%H%M%S")
118

129
if [ -d "$TARGET/$FILE" ]; then

‎bash/fly.sh

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#!/bin/bash
1+
#!bash
22

33
yarn install
44

‎bash/ftp.sh

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#!/bin/bash
1+
#!bash
22

33
. $(pwd)"/bash/config.sh"
44
. $(pwd)"/bash/deploy.sh"

‎bash/test.sh

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
#!bash
22

3-
echo test
3+
. $(pwd)"/bash/config.sh"
4+
5+
echo "test"
6+
echo $FILE

‎bash/zip.sh

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#!/bin/bash
1+
#!bash
22

33
. $(pwd)"/bash/config.sh"
44

‎package.json

+62-58
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,88 @@
11
{
2-
"name": "la-theme",
3-
"version": "0.5.3",
4-
"description": "Lady-Anja theme clone for toolbox4",
2+
"name": "webpack-boilerplate",
3+
"version": "0.7.2",
4+
"description": "Webpack based boilerplate including ES6, Babel, Sass and much more",
55
"author": "Manuel Burghammer",
66
"license": "MIT",
77
"repository": {
88
"type": "git",
99
"url": "https://github.com/xitara/webpack-boilerplate.git"
1010
},
1111
"scripts": {
12-
"install": "chmod 755 ./bash -R -c && yarn build",
13-
"cleanup": "rimraf ./stats.json && rimraf ./manifest.json && rimraf ./node_modules && rimraf ./vendor && rimraf yarn*.lo* && rimraf composer.lock && rimraf ./favicon.ico* && rimraf ./assets && rimraf theme.yaml* && rimraf version.yaml* && rimraf robots.txt",
14-
"start": "webpack-dev-server --open --mode development --progress --display-error-details",
12+
"install": "chmod 0755 ./bash/* && yarn build && bash ./bash/composer.sh",
1513
"dwatch": "webpack --watch --mode development --progress --display-error-details",
1614
"watch": "webpack --watch --mode production --progress --display-error-details",
1715
"dbuild": "webpack --mode development --progress --display-error-details",
1816
"build": "webpack --mode production --progress --display-error-details",
19-
"test": "bash ./bash/test.sh",
20-
"zip": "./bash/zip.sh",
21-
"deploy": "./bash/deploy.sh",
22-
"ftp": "./bash/ftp.sh",
23-
"fly": "./bash/fly.sh",
24-
"check-eslint-config": "eslint --print-config .eslintrc | eslint-config-prettier-check",
25-
"check-stylelint-config": "stylelint-config-prettier-check",
17+
"zip": "bash ./bash/zip.sh",
18+
"deploy": "bash ./bash/deploy.sh",
19+
"ftp": "bash ./bash/ftp.sh",
20+
"fly": "yarn install && bash ./bash/composer.sh",
21+
"analyze": "webpack-bundle-analyzer ./stats.json",
2622
"lint-code": "eslint 'src/js/**/*.js'",
2723
"lint-style": "stylelint 'src/scss/**/*.{css,scss}'",
28-
"analyze": "webpack-bundle-analyzer ./stats.json"
24+
"check-eslint-config": "eslint --print-config .eslintrc | eslint-config-prettier-check",
25+
"check-stylelint-config": "stylelint-config-prettier-check",
26+
"cleanup": "rimraf stats.json && rimraf manifest.json && rimraf vendor && rimraf yarn*.lo* && rimraf composer.lock && rimraf favicon.ico* && rimraf assets && rimraf theme.yaml* && rimraf version.yaml* && rimraf config && rimraf index.html && rimraf robots.txt && rimraf node_modules", "start": "webpack-dev-server --open --mode development --progress --display-error-details",
27+
"oc-init-theme": "mkdir content && mkdir layouts && mkdir pages && mkdir partials",
28+
"oc-kill-theme": "rimraf content && rimraf layouts && rimraf pages && rimraf partials"
2929
},
3030
"devDependencies": {
31-
"@babel/core": "^7.8.7",
32-
"@babel/plugin-proposal-class-properties": "^7.8.3",
33-
"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
34-
"@babel/plugin-transform-async-to-generator": "^7.8.3",
35-
"@babel/plugin-transform-runtime": "^7.8.3",
36-
"@babel/preset-env": "^7.8.7",
37-
"@babel/runtime": "^7.8.7",
38-
"autoprefixer": "^9.7.4",
39-
"babel-loader": "^8.0.6",
31+
"@babel/core": "^7.11.6",
32+
"@babel/plugin-proposal-class-properties": "^7.10.4",
33+
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
34+
"@babel/plugin-transform-async-to-generator": "^7.10.4",
35+
"@babel/plugin-transform-runtime": "^7.11.5",
36+
"@babel/preset-env": "^7.11.5",
37+
"@babel/runtime": "^7.11.2",
38+
"@tailwindcss/ui": "^0.6.2",
39+
"alpinejs": "^2.7.0",
40+
"autoprefixer": "^10.0.0",
41+
"babel-loader": "^8.1.0",
4042
"brotli-webpack-plugin": "^1.1.0",
41-
"compression-webpack-plugin": "^3.1.0",
42-
"copy-webpack-plugin": "^5.1.1",
43-
"css-loader": "^3.4.2",
43+
"compression-webpack-plugin": "^6.0.2",
44+
"copy-webpack-plugin": "^6.1.1",
45+
"css-loader": "^4.3.0",
4446
"csso-webpack-plugin": "^2.0.0-beta.1",
45-
"eslint": "^6.8.0",
46-
"eslint-config-prettier": "^6.10.0",
47-
"eslint-plugin-import": "^2.20.1",
48-
"eslint-plugin-prettier": "^3.1.2",
49-
"extract-css-chunks-webpack-plugin": "^4.7.4",
50-
"file-loader": "^5.1.0",
47+
"eslint": "^7.9.0",
48+
"eslint-config-prettier": "^6.11.0",
49+
"eslint-plugin-import": "^2.22.0",
50+
"eslint-plugin-prettier": "^3.1.4",
51+
"extract-css-chunks-webpack-plugin": "^4.7.5",
52+
"file-loader": "^6.1.0",
5153
"glob": "^7.1.6",
52-
"html-loader": "^0.5.5",
53-
"html-webpack-plugin": "^3.2.0",
54-
"husky": "^4.2.3",
55-
"lint-staged": "^10.0.8",
56-
"mini-css-extract-plugin": "^0.9.0",
57-
"node-sass": "^4.13.1",
54+
"html-loader": "^1.3.1",
55+
"html-webpack-plugin": "^4.5.0",
56+
"husky": "^4.3.0",
57+
"lint-staged": "^10.4.0",
58+
"mini-css-extract-plugin": "^0.11.2",
59+
"node-sass": "^4.14.1",
5860
"normalize.css": "^8.0.1",
59-
"postcss": "^7.0.27",
60-
"postcss-flexbugs-fixes": "^4.2.0",
61-
"postcss-loader": "^3.0.0",
62-
"prettier": "^1.19.1",
63-
"purgecss-webpack-plugin": "^2.1.0",
61+
"postcss": "^8.0.9",
62+
"postcss-flexbugs-fixes": "^4.2.1",
63+
"postcss-loader": "^4.0.2",
64+
"prettier": "^2.1.2",
65+
"purgecss-webpack-plugin": "^3.0.0",
6466
"rimraf": "^3.0.2",
65-
"sass-loader": "^8.0.2",
66-
"style-loader": "^1.1.3",
67-
"stylelint": "^13.2.1",
67+
"sass-loader": "^10.0.2",
68+
"style-loader": "^1.2.1",
69+
"stylelint": "^13.7.1",
6870
"stylelint-cli": "^1.3.0",
69-
"stylelint-config-prettier": "^8.0.1",
71+
"stylelint-config-prettier": "^8.0.2",
7072
"stylelint-config-recommended": "^3.0.0",
71-
"stylelint-config-sass-guidelines": "^7.0.0",
73+
"stylelint-config-sass-guidelines": "^7.1.0",
7274
"stylelint-prettier": "^1.1.2",
73-
"stylelint-scss": "^3.14.2",
74-
"webpack": "^4.42.0",
75+
"stylelint-scss": "^3.18.0",
76+
"tailwindcss": "^1.8.10",
77+
"tailwindcss-plugins": "^0.3.0",
78+
"tailwindcss-typography": "^3.1.0",
79+
"webpack": "^4.44.2",
7580
"webpack-assets-manifest": "^3.1.1",
76-
"webpack-bundle-analyzer": "^3.6.1",
77-
"webpack-cli": "^3.3.11",
78-
"webpack-dev-server": "^3.10.3",
79-
"webpack-livereload-plugin": "^2.3.0",
80-
"webpack-merge": "^4.2.2",
81-
"webpack-stats-plugin": "0.3.1"
81+
"webpack-bundle-analyzer": "^3.9.0",
82+
"webpack-cli": "^3.3.12",
83+
"webpack-dev-server": "^3.11.0",
84+
"webpack-merge": "^5.1.4",
85+
"webpack-stats-plugin": "0.3.2"
8286
},
8387
"browserslist": {
8488
"production": [
@@ -109,7 +113,7 @@
109113
]
110114
},
111115
"dependencies": {
112-
"glightbox": "^3.0.0",
113-
"micromodal": "^0.4.6"
116+
"@glidejs/glide": "^3.4.1",
117+
"glightbox": "^3.0.5"
114118
}
115119
}

‎src/js/utils.js

+62-9
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1+
let _listeners = [];
2+
13
/**
24
* querySelector wrapper
35
*
46
* @param {string} selector Selector to query
57
* @param {Element} [scope] Optional scope element for the selector
68
*/
7-
export function qs(selector, scope) {
9+
export const qs = (selector, scope) => {
810
return (scope || document).querySelector(selector);
9-
}
11+
};
1012

1113
/**
1214
* querySelectorAll wrapper
1315
*
1416
* @param {string} selector Selector to query
1517
* @param {Element} [scope] Optional scope element for the selector
1618
*/
17-
export function qsa(selector, scope) {
19+
export const qsa = (selector, scope) => {
1820
return [...(scope || document).querySelectorAll(selector)];
19-
}
21+
};
2022

2123
/**
2224
* addEventListener wrapper
@@ -26,9 +28,46 @@ export function qsa(selector, scope) {
2628
* @param {Function} callback Event callback
2729
* @param {boolean} [capture] Capture the event
2830
*/
29-
export function $on(target, type, callback, capture) {
31+
export const $on = (target, type, callback, capture) => {
32+
_listeners.push({ target: target, type: type, callback: callback, capture: !!capture });
3033
target.addEventListener(type, callback, !!capture);
31-
}
34+
};
35+
36+
/**
37+
* removeEventListener
38+
*
39+
* @param {Element|Window} target Target Element
40+
* @param {string} type Event name to bind to
41+
* @param {Function} callback Event callback
42+
* @param {boolean} [capture] Capture the event
43+
*/
44+
export const $off = (target, type) => {
45+
for (let index in _listeners) {
46+
let item = _listeners[index];
47+
48+
// let target = item.target;
49+
// let type = item.type;
50+
// let listener = item.listener;
51+
52+
if (target == item.target && type == item.type) {
53+
target.removeEventListener(type, item.callback);
54+
}
55+
}
56+
};
57+
58+
export const $trigger = (target, type) => {
59+
if (target) {
60+
target.dispatchEvent(new Event(type));
61+
}
62+
};
63+
64+
export const $scroll = (position) => {
65+
window.scrollTo({
66+
top: position,
67+
left: 0,
68+
behavior: 'smooth',
69+
});
70+
};
3271

3372
/**
3473
* Attach a handler to an event for all elements matching a selector.
@@ -40,8 +79,8 @@ export function $on(target, type, callback, capture) {
4079
* from an element matching selector
4180
* @param {boolean} [capture] Capture the event
4281
*/
43-
export function $delegate(target, selector, type, handler, capture) {
44-
const dispatchEvent = event => {
82+
export const $delegate = (target, selector, type, handler, capture) => {
83+
const dispatchEvent = (event) => {
4584
const targetElement = event.target;
4685
const potentialElements = target.querySelectorAll(selector);
4786

@@ -54,4 +93,18 @@ export function $delegate(target, selector, type, handler, capture) {
5493
};
5594

5695
$on(target, type, dispatchEvent, !!capture);
57-
}
96+
};
97+
98+
export const triggerEvent = (el, type) => {
99+
if ('createEvent' in document) {
100+
// modern browsers, IE9+
101+
let e = document.createEvent('HTMLEvents');
102+
e.initEvent(type, false, true);
103+
el.dispatchEvent(e);
104+
} else {
105+
// IE 8
106+
let e = document.createEventObject();
107+
e.eventType = type;
108+
el.fireEvent('on' + e.eventType, e);
109+
}
110+
};

‎src/scss/base/_fonts.scss

+5-7
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@
44
font-style: normal;
55
font-weight: 400;
66
src: url('../fonts/roboto-v20-latin-regular.eot');
7-
/* IE9 Compat Modes */
87
src: local('Roboto'), local('Roboto-Regular'),
9-
/* IE6-IE8 */ url('../fonts/roboto-v20-latin-regular.eot?#iefix')
10-
format('embedded-opentype'),
11-
/* Super Modern Browsers */ url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'),
12-
/* Modern Browsers */ url('../fonts/roboto-v20-latin-regular.woff') format('woff'),
13-
/* Safari, Android, iOS */ url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'),
14-
/* Legacy iOS */ url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
8+
url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
9+
url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'),
10+
url('../fonts/roboto-v20-latin-regular.woff') format('woff'),
11+
url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'),
12+
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
1513
}

0 commit comments

Comments
 (0)