🧹 clean up build process

This commit is contained in:
Philipp Dormann 2020-08-29 16:25:32 +02:00
parent f6933649e2
commit 5008992835
11 changed files with 51 additions and 9422 deletions

View File

@ -1,5 +0,0 @@
{
"box-model": false,
"box-sizing": false,
"outline-none": false
}

View File

@ -1 +0,0 @@
/dist

View File

@ -1,23 +0,0 @@
{
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"
},
"plugins": ["prettier"],
"extends": ["plugin:prettier/recommended"],
"rules": {
"prettier/prettier": [
"error",
{
"semi": true,
"singleQuote": true,
"printWidth": 125,
"tabWidth": 4,
"useTabs": false,
"trailingComma": "none",
"bracketSpacing": true,
"parser": "flow"
}
]
}
}

10
.gitignore vendored
View File

@ -1,10 +1,4 @@
/node_modules
node_modules
.DS_Store
.eslintrc.json
.vscode
serve
compile
publish
*.lock
*-min.html
/dist/*
*.lock

View File

@ -1,35 +0,0 @@
## Introduction
mailymaily is a JavaScript library that enhances your mailto links with a convenient user interface. It gives your users the flexibility to compose a new message using a browser-based email client <strong><i>or</i></strong> their default local email app.
mailymaily is ideal for static sites or any other site where you don't want to spend time setting up a "Contact Us" form solution.
## Build
```
yarn && yarn build
```
## Quick Setup
### STEP 1
Add mailymaily to your body.
```html
<body>
...
...
<script src="assets/mailymaily-min.js"></script>
</body>
```
### STEP 2
Attach your mailto link to mailymaily by adding the class `mailymaily` to the `<a>` tag.
```html
<a class="mailymaily" href="mailto:tony.stark@example.com">Contact Tony</a>
```
That's it! Your mailto link is now using mailymaily. Refresh your page and try it out.

1
dist/mailymaily-min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,131 +1,54 @@
const { src, dest, parallel, series, watch } = require('gulp');
const csslint = require('gulp-csslint');
const autoprefixer = require('gulp-autoprefixer');
const minify = require('gulp-minify');
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const header = require('gulp-header');
const eslint = require('gulp-eslint');
const fs = require('fs-extra');
const htmlMin = require('gulp-htmlmin');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const sass = require('gulp-sass');
var packageJson = null;
var banner = [
'/**',
' * <%= pkg.name %> - <%= pkg.description %>',
' * @version v<%= pkg.version %>',
' * @link <%= pkg.homepage %>',
' * @author <%= pkg.author.name %> - <%= pkg.author.url %>',
' * @license <%= pkg.license %>',
' */',
''
].join('\n');
/**
* Process HTML files.
*/
function html() {
return src('./src/html/component.html')
.pipe(htmlMin({ collapseWhitespace: true }))
.pipe(rename('./src/html/component-min.html'))
.pipe(dest('./'));
return src('./src/html/component.html')
.pipe(htmlMin({ collapseWhitespace: true }))
.pipe(rename('./src/html/component-min.html'))
.pipe(dest('./'));
}
/**
* Process CSS file.
*/
function css() {
return src('./src/scss/component.scss')
.pipe(sass())
.pipe(csslint())
.pipe(csslint.formatter())
.pipe(
autoprefixer({
browsers: ['last 2 versions'],
cascade: false
})
)
.pipe(cleanCss())
.pipe(rename('./src/css/component-min.css'))
.pipe(dest('./'));
return src('./src/scss/component.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(cleanCss())
.pipe(rename('./src/css/component-min.css'))
.pipe(dest('./'));
}
/**
* Process the JavaScript library file.
*/
function js() {
packageJson = fs.readJsonSync('./package.json');
packageJson = fs.readJsonSync('./package.json');
return src('./src/js/mailymaily.js')
.pipe(eslint())
.pipe(eslint.format())
.pipe(minify({ noSource: true }))
.pipe(header(banner, { pkg: packageJson }))
.pipe(dest('dist'));
}
/**
* Lint JavaScript file used on demo page.
*/
function lintDemoJs() {
return src('./demo/demo.js')
.pipe(eslint())
.pipe(eslint.format());
}
/**
* Process JavaScript file used on demo page.
*/
function processDemoJs() {
return browserify('./demo/demo.js')
.bundle()
.pipe(source('./demo/demo.js'))
.pipe(buffer())
.pipe(minify({ noSource: true }))
.pipe(dest('./'));
}
/**
* Process CSS file used on demo page.
*/
function demoCss() {
return src('./demo/demo.scss')
.pipe(sass())
.pipe(csslint())
.pipe(csslint.formatter())
.pipe(
autoprefixer({
browsers: ['last 2 versions'],
cascade: false
})
)
.pipe(cleanCss())
.pipe(rename('./demo/demo-min.css'))
.pipe(dest('./'));
return src('./src/js/mailymaily.js').pipe(minify({ noSource: true })).pipe(dest('dist'));
}
/**
* The all seeing eye...
*/
function watchFiles() {
watch('./src/html/component.html', html);
watch('./src/scss/component.scss', css);
watch(['./src/js/mailymaily.js', './package.json']);
watch('./src/html/component.html', html);
watch('./src/scss/component.scss', css);
watch([ './src/js/mailymaily.js', './package.json' ]);
}
/**
* Define complex tasks.
*/
const build = series(parallel(html, css), js);
const watching = series(build, watchFiles);
/**
* Make tasks available to the outside world.
*/
//-----
exports.html = html;
exports.css = css;
exports.js = js;

9195
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,62 +1,31 @@
{
"name": "mailymaily",
"description": "A simple way to enhance your mailto links with a convenient user interface.",
"version": "1.0.3",
"homepage": "https://mailymaily.com",
"author": {
"name": "Mario Rodriguez",
"url": "https://twitter.com/mariordev"
},
"keywords": [
"mailymaily",
"mailto",
"ui",
"mail",
"email",
"interface",
"user interface"
],
"license": "MIT",
"repository": "https://github.com/mariordev/mailymaily.git",
"bugs": "https://github.com/mariordev/mailymaily/issues",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-transform-regenerator": "^7.4.5",
"@babel/preset-env": "^7.5.5",
"acorn": "^6.3.0",
"babelify": "^10.0.0",
"browserify": "^16.5.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^3.6.0",
"eslint-plugin-prettier": "^3.1.0",
"fs-extra": "^7.0.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.2.0",
"gulp-csslint": "^1.0.1",
"gulp-eslint": "^5.0.0",
"gulp-header": "^2.0.9",
"gulp-htmlmin": "^5.0.1",
"gulp-minify": "^3.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-util": "^3.0.8",
"gulp-watch": "^5.0.1",
"node-sass": "^4.12.0",
"prettier": "1.15.3",
"shell-quote": "^1.7.2",
"tar": "^4.4.10",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"vue": "^2.6.10"
},
"dependencies": {},
"files": [
"dist/*"
],
"jsdelivr": "dist/mailymaily-min.js",
"scripts": {
"lint": "eslint ./src/js/mailymaily.js",
"build": "gulp"
}
}
"name": "mailymaily",
"description": "A simple way to enhance your mailto links with a convenient user interface.",
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-transform-regenerator": "^7.4.5",
"@babel/preset-env": "^7.5.5",
"fs-extra": "^7.0.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.2.0",
"gulp-csslint": "^1.0.1",
"gulp-htmlmin": "^5.0.1",
"gulp-minify": "^3.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-util": "^3.0.8",
"gulp-watch": "^5.0.1",
"node-sass": "^4.12.0",
"prettier": "1.15.3",
"vue": "^2.6.10"
},
"scripts": {
"build": "gulp"
},
"browserslist": {
"browsers": [ "last 2 versions" ]
}
}

View File

@ -1 +1 @@
.mailymaily-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailymaily-modal-content{-webkit-animation:mailymaily-appear .4s;animation:mailymaily-appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:auto;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailymaily-modal-content:focus,.mailymaily-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailymaily-modal-content{right:auto}}.mailymaily-modal-head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailymaily-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailymaily-modal-close:focus,.mailymaily-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailymaily-modal-body{height:100%;padding:20px}.mailymaily-button{color:#333;text-decoration:none}.mailymaily-button:focus{outline:0}.mailymaily-button:focus .mailymaily-button-content{background-color:#555;color:#fff}.mailymaily-button-content{background-color:#fff;border:none;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailymaily-button-content:hover{background-color:#555;color:#fff}.mailymaily-button:last-child .mailymaily-button-content{margin-bottom:0}.mailymaily-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailymaily-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailymaily-button-copy:focus,.mailymaily-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailymaily-button-copy-clicked,.mailymaily-button-copy-clicked:focus,.mailymaily-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailymaily-button-copy-clicked .mailymaily-button-icon,.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,.mailymaily-button-copy-clicked:hover .mailymaily-button-icon{display:none;visibility:hidden}.mailymaily-button-copy-clicked .mailymaily-button-text,.mailymaily-button-copy-clicked:focus .mailymaily-button-text,.mailymaily-button-copy-clicked:hover .mailymaily-button-text{color:#fff;top:2px}.mailymaily-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailymaily-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailymaily-brand a{color:#888}.mailymaily-brand a:focus,.mailymaily-brand a:hover{font-weight:700;outline:0}.mailymaily-no-scroll{overflow:hidden;position:fixed;width:100%}.mailymaily-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailymaily-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailymaily-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}
.mailymaily-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailymaily-modal-content{-webkit-animation:mailymaily-appear .4s;animation:mailymaily-appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:auto;padding:0;position:fixed;right:-45%;top:50%;transform:translate(-50%,-50%)}.mailymaily-modal-content:focus,.mailymaily-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailymaily-modal-content{right:auto}}.mailymaily-modal-head{align-items:center;background-color:#fff;clear:both;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailymaily-modal-close{color:#aaa;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailymaily-modal-close:focus,.mailymaily-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailymaily-modal-body{height:100%;padding:20px}.mailymaily-button{color:#333;text-decoration:none}.mailymaily-button:focus{outline:0}.mailymaily-button:focus .mailymaily-button-content{background-color:#555;color:#fff}.mailymaily-button-content{background-color:#fff;border:none;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailymaily-button-content:hover{background-color:#555;color:#fff}.mailymaily-button:last-child .mailymaily-button-content{margin-bottom:0}.mailymaily-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailymaily-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailymaily-button-copy:focus,.mailymaily-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailymaily-button-copy-clicked,.mailymaily-button-copy-clicked:focus,.mailymaily-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailymaily-button-copy-clicked .mailymaily-button-icon,.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,.mailymaily-button-copy-clicked:hover .mailymaily-button-icon{display:none;visibility:hidden}.mailymaily-button-copy-clicked .mailymaily-button-text,.mailymaily-button-copy-clicked:focus .mailymaily-button-text,.mailymaily-button-copy-clicked:hover .mailymaily-button-text{color:#fff;top:2px}.mailymaily-email-address{background-color:#d8dcdf;border:none;border-radius:8px;box-shadow:unset;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailymaily-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailymaily-brand a{color:#888}.mailymaily-brand a:focus,.mailymaily-brand a:hover{font-weight:700;outline:0}.mailymaily-no-scroll{overflow:hidden;position:fixed;width:100%}.mailymaily-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailymaily-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailymaily-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}}

View File

@ -0,0 +1 @@
<div class="mailymaily-modal-content"><div class="mailymaily-modal-head"><div id="mailymaily-modal-title" class="mailymaily-modal-title">${options.title}</div><a id="mailymaily-modal-close" class="mailymaily-modal-close" href="#">&times</a></div><div class="mailymaily-modal-body"><div class="mailymaily-clients"><a id="mailymaily-button-1" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${options.buttonIcon1}</span> <span id="mailymaily-button-text-1" class="mailymaily-button-text">${options.buttonText1}</span></div></a><a id="mailymaily-button-2" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${options.buttonIcon2}</span> <span id="mailymaily-button-text-2" class="mailymaily-button-text">${options.buttonText2}</span></div></a><a id="mailymaily-button-3" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-3" class="mailymaily-button-icon">${options.buttonIcon3}</span> <span id="mailymaily-button-text-3" class="mailymaily-button-text">${options.buttonText3}</span></div></a><a id="mailymaily-button-4" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${options.buttonIcon4}</span> <span id="mailymaily-button-text-4" class="mailymaily-button-text">${options.buttonText4}</span></div></a></div><div id="mailymaily-copy" class="mailymaily-copy"><div id="mailymaily-email-address" class="mailymaily-email-address"></div><button id="mailymaily-button-copy" class="mailymaily-button-copy" data-copytargetid="mailymaily-email-address"><span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${options.buttonIconCopy}</span> <span id="mailymaily-button-text-copy" class="mailymaily-button-text">${options.buttonTextCopy}</span></button></div></div></div>