diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0c17d4e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +root = true + +[*] +quote_type = single +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = tab +indent_size = 1 + +[*.yml] +indent_style = space +indent_size = 2 diff --git a/README.md b/README.md index 791e416..678b6fa 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ # [![FuzzyMail](https://github.com/luangjokaj/fuzzymail/raw/master/src/assets/img/logo.svg?sanitize=true)](https://www.fuzzymail.co/) -![Version](https://img.shields.io/github/package-json/v/luangjokaj/fuzzymail) [![Dependencies](https://david-dm.org/luangjokaj/fuzzymail/status.svg)](https://david-dm.org/luangjokaj/fuzzymail) + +[![Version](https://img.shields.io/github/package-json/v/luangjokaj/fuzzymail)](https://www.fuzzymail.co/) [![Dependencies](https://img.shields.io/david/luangjokaj/fuzzymail)](https://www.fuzzymail.co/) | Information | Discord | Donate | |:------------|:---------|:-------| -| [FuzzyMail](https://www.fuzzymail.co/) is Email template generator. Making emails fun again ✌

**Problem:** Supporting old email clients it's a real pain. I wanted to create something that can be flexible in design and yet support legacy email clients like Outlook.

**Solution:** FuzzyMail - is a simple tool for generating email templates. Supporting old email clients while maintaining responsiveness. Fuzzymail is supported on over 60+ email clients.| [![Discord server](https://svgshare.com/i/Lqc.svg)](https://discord.gg/qE7e93) | [![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/guidelines/logo-mark-1.svg)](https://www.buymeacoffee.com/luangjokaj) | +| [FuzzyMail](https://www.fuzzymail.co/) is Email template generator. Making emails fun again ✌

**Problem:** Supporting old email clients it's a real pain. I wanted to create something that can be flexible in design and yet support legacy email clients like Outlook.

**Solution:** FuzzyMail - is a simple tool for generating email templates. Supporting old email clients while maintaining responsiveness. Fuzzymail is supported on over 60+ email clients.| [![Discord server](https://svgshare.com/i/Lqc.svg)](https://discord.gg/uQFdMddMZw) | [![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/guidelines/logo-mark-1.svg)](https://www.buymeacoffee.com/luangjokaj) | [![Preview](https://i.imgur.com/VuKitHE.png)](https://www.fuzzymail.co/) Demo Screenshots: [Modern Client](https://i.imgur.com/ETp8PaX.png) • [Gmail](https://i.imgur.com/kSH90xr.png) • [Outlook](https://i.imgur.com/Wi75S1q.png) • [Mobile](https://i.imgur.com/YJgdCJg.png) @@ -23,7 +24,7 @@ Demo Screenshots: [Modern Client](https://i.imgur.com/ETp8PaX.png) • [Gmail](h # Documentation ### Installation -FuzzyMail requires Node v7.5+. This is the only global dependency. You can download Node [**here**](https://nodejs.org/). +FuzzyMail requires **Node.js v12+**. This is the only global dependency. You can download Node.js [**here**](https://nodejs.org/). ## Setup project ### File Structure @@ -37,24 +38,19 @@ FuzzyMail requires Node v7.5+. This is the only global dependency. You can downl │ ├── includes/ # HTML template partials │ ├── index.html # Index page └── .gitignore # Git ignored files + └── .editorconfig # Editor code styles └── gulpfile.js # Gulp configuration └── LICENSE # License agreements - └── package.json # Node packages + └── package.json # Node.js packages └── README.md # You are reading this ``` ## Install FuzzyMail from NPM -To install FuzzyMail from NPM, run the command: -``` -sudo npm i fuzzymail -g -``` - -**START FUZZYMAIL** - - Create a directory for the new email template and from there run FuzzyMail to generate the file structure: ``` -fuzzymail +npx fuzzymail ``` +That's it 🍾 easy as that. Now start the development workflow: [Start Workflow](#start-workflow) ## Install FuzzyMail from Repository Clone repository: @@ -62,7 +58,7 @@ Clone repository: git clone https://github.com/luangjokaj/fuzzymail ``` -- This will clone the repository on your local machine. Navigate to the newly created folder. +- This will clone the repository on your local machine. Navigate to the newly created directory. - Replace the file: `./package.json` with `./installer/package.json` and continue with the dependency installation. @@ -72,12 +68,13 @@ git clone https://github.com/luangjokaj/fuzzymail npm install ``` -**START WORKFLOW** +## Start Workflow -- We are ready to start our development server with the command: +- To start the development server run the command: ``` npm run dev ``` +- You are ready to go! Happy coding! 🤓 ### Templating and HTML Partials To avoid repetitive HTML code, FuzzyMail uses [gulp-file-include](https://github.com/haoxins/gulp-file-include). It has a simple templating synthax and allows to re-use chunks of code written in separate files. These partials are located in the directory: @@ -87,7 +84,6 @@ src/includes/ For more information check out their documentation and examples: https://github.com/haoxins/gulp-file-include - ### Production To build the production templates: ``` diff --git a/gulpfile.js b/gulpfile.js index 15abae6..4c2a1da 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -101,7 +101,7 @@ function staticFilesDev() { prefix: '@@', basepath: '@file', }, - }), + }) ) .pipe(dest('./build')); } @@ -135,13 +135,13 @@ function staticFilesProd() { prefix: '@@', basepath: '@file', }, - }), + }) ) .pipe( htmlmin({ collapseWhitespace: true, ignoreCustomFragments: [/<%[\s\S]*?%>/, /<\?[=|php]?[\s\S]*?\?>/], - }), + }) ) .pipe(dest('./dist')); } @@ -153,7 +153,7 @@ function inlineStyles() { applyStyleTags: true, removeStyleTags: false, removeLinkTags: false, - }), + }) ) .pipe(dest('./dist')); } @@ -164,7 +164,7 @@ function processImages() { .pipe( imagemin([imagemin.svgo({ plugins: [{ removeViewBox: true }] })], { verbose: true, - }), + }) ) .pipe(dest('./dist/assets/img')) .on('end', () => { @@ -174,12 +174,18 @@ function processImages() { }); } -exports.prod = series(cleanProd, stylesProd, staticFilesProd, processImages, inlineStyles); +exports.prod = series( + cleanProd, + stylesProd, + staticFilesProd, + processImages, + inlineStyles +); /* ------------------------------------------------------------------------------------------------- Utility Tasks -------------------------------------------------------------------------------------------------- */ -const onError = err => { +const onError = (err) => { gutil.beep(); gutil.log(fuzzyMail + ' - ' + errorMsg + ' ' + err.toString()); this.emit('end'); @@ -189,7 +195,8 @@ const onError = err => { Messages -------------------------------------------------------------------------------------------------- */ const errorMsg = '\x1b[41mError\x1b[0m'; -const filesGenerated = 'Your production file are generated in: \x1b[1m' + __dirname + '/dist/ ✅'; +const filesGenerated = + 'Your production file are generated in: \x1b[1m' + __dirname + '/dist/ ✅'; const fuzzyMail = '\x1b[42m\x1b[1m📨 FuzzyMail\x1b[0m'; const fuzzyMailUrl = '\x1b[2m - https://www.fuzzymail.co/\x1b[0m'; diff --git a/installer/modules/printNextSteps.js b/installer/modules/printNextSteps.js index 9fe0183..589b0e6 100755 --- a/installer/modules/printNextSteps.js +++ b/installer/modules/printNextSteps.js @@ -29,22 +29,22 @@ module.exports = () => { console.log('\n✊ ', chalk.black.bgYellow(' Support FuzzyMail \n')); console.log('Like FuzzyMail? Check out our other free and open source repositories: \n'); console.log( - ` ${chalk.yellow('WordPressify →')} https://bit.ly/2KTqyQX`, + ` ${chalk.yellow('WordPressify → ')} https://bit.ly/2KTqyQX`, '\n', ` ${chalk.gray('Development workflow for WordPress themes.')}`, '\n', - ` ${chalk.yellow('GoPablo →')} https://bit.ly/2Hgkfpy`, + ` ${chalk.yellow('GoPablo → ')} https://bit.ly/2Hgkfpy`, '\n', ` ${chalk.gray('GoPablo is a static site generator.')}`, '\n', - ` ${chalk.yellow('ReactFondue →')} https://bit.ly/2OXgStR`, + ` ${chalk.yellow('ReactFondue → ')} https://bit.ly/2OXgStR`, '\n', ` ${chalk.gray('SEO optimized React applications with SSR.')}`, '\n', - ` ${chalk.green('Powered by Riangle →')} https://bit.ly/2P5i26I`, + ` ${chalk.green('Powered by Riangle → ')} https://bit.ly/2P5i26I`, '\n', '\n', - ` ${chalk.red('Thank you for using 📨 FuzzyMail →')} https://www.fuzzymail.co`, + ` ${chalk.red('Thank you for using 📨 FuzzyMail → ')} https://www.fuzzymail.co`, ); // Get started. diff --git a/installer/modules/run.js b/installer/modules/run.js index 45a05f5..d20c58b 100755 --- a/installer/modules/run.js +++ b/installer/modules/run.js @@ -13,48 +13,52 @@ const download = require('download'); const handleError = require('./handleError.js'); const clearConsole = require('./clearConsole.js'); const printNextSteps = require('./printNextSteps.js'); +const version = require('../package.json').version; module.exports = () => { // Init. clearConsole(); + let upstreamUrl = `https://raw.githubusercontent.com/luangjokaj/fuzzymail/v${version}`; + // Files. const filesToDownload = [ - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/.gitignore', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/LICENSE', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/README.md', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/gulpfile.js', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/installer/package.json', - - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/index.html', - - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/includes/footer.html', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/includes/header.html', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/includes/logo.html', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/includes/single-column.html', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/includes/socials.html', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/includes/title.html', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/includes/two-columns.html', - - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/css/email-framework.css', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/css/fuzzy.css', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/css/globals.css', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/css/styles.css', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/css/variables.css', - - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/socialmedia/email.png', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/socialmedia/facebook.png', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/socialmedia/instagram.png', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/socialmedia/linkedin.png', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/socialmedia/twitter.png', - - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/header.png', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/logo.png', - 'https://raw.githubusercontent.com/luangjokaj/fuzzymail/v0.0.8-11/src/assets/img/logo.svg', + `${upstreamUrl}/.gitignore`, + `${upstreamUrl}/.editorconfig`, + `${upstreamUrl}/LICENSE`, + `${upstreamUrl}/README.md`, + `${upstreamUrl}/gulpfile.js`, + `${upstreamUrl}/installer/package.json`, + + `${upstreamUrl}/src/index.html`, + + `${upstreamUrl}/src/includes/footer.html`, + `${upstreamUrl}/src/includes/header.html`, + `${upstreamUrl}/src/includes/logo.html`, + `${upstreamUrl}/src/includes/single-column.html`, + `${upstreamUrl}/src/includes/socials.html`, + `${upstreamUrl}/src/includes/title.html`, + `${upstreamUrl}/src/includes/two-columns.html`, + + `${upstreamUrl}/src/assets/css/email-framework.css`, + `${upstreamUrl}/src/assets/css/fuzzy.css`, + `${upstreamUrl}/src/assets/css/globals.css`, + `${upstreamUrl}/src/assets/css/styles.css`, + `${upstreamUrl}/src/assets/css/variables.css`, + + `${upstreamUrl}/src/assets/img/socialmedia/email.png`, + `${upstreamUrl}/src/assets/img/socialmedia/facebook.png`, + `${upstreamUrl}/src/assets/img/socialmedia/instagram.png`, + `${upstreamUrl}/src/assets/img/socialmedia/linkedin.png`, + `${upstreamUrl}/src/assets/img/socialmedia/twitter.png`, + + `${upstreamUrl}/src/assets/img/header.png`, + `${upstreamUrl}/src/assets/img/logo.png`, + `${upstreamUrl}/src/assets/img/logo.svg`, ]; // Organise file structure - const dotFiles = ['.gitignore']; + const dotFiles = ['.gitignore', '.editorconfig']; const srcFiles = ['index.html']; const includesFiles = [ 'footer.html', @@ -85,52 +89,74 @@ module.exports = () => { console.log('\n'); console.log( '📦 ', - chalk.black.bgYellow(` Downloading 📨 FuzzyMail files in: → ${chalk.bgGreen(` ${theDir} `)}\n`), + chalk.black.bgYellow( + ` Downloading 📨 FuzzyMail files in: → ${chalk.bgGreen(` ${theDir} `)}\n` + ), chalk.dim(`\n In the directory: ${theCWD}\n`), - chalk.dim('This might take a couple of minutes.\n'), + chalk.dim('This might take a couple of minutes.\n') ); const spinner = ora({ text: '' }); - spinner.start(`1. Creating 📨 FuzzyMail files inside → ${chalk.black.bgWhite(` ${theDir} `)}`); + spinner.start( + `1. Creating 📨 FuzzyMail files inside → ${chalk.black.bgWhite( + ` ${theDir} ` + )}` + ); // Download. - Promise.all(filesToDownload.map(x => download(x, `${theCWD}`))).then(async () => { - if (!fs.existsSync('src')) { - await execa('mkdir', [ - 'src', - 'src/includes', - 'src/assets', - 'src/assets/css', - 'src/assets/img', - 'src/assets/img/socialmedia', - ]); - } + Promise.all(filesToDownload.map((x) => download(x, `${theCWD}`))).then( + async () => { + if (!fs.existsSync('src')) { + await execa('mkdir', [ + 'src', + 'src/includes', + 'src/assets', + 'src/assets/css', + 'src/assets/img', + 'src/assets/img/socialmedia', + ]); + } + + dotFiles.map((x) => + fs.rename(`${theCWD}/${x.slice(1)}`, `${theCWD}/${x}`, (err) => + handleError(err) + ) + ); + srcFiles.map((x) => + fs.rename(`${theCWD}/${x}`, `${theCWD}/src/${x}`, (err) => handleError(err)) + ); + includesFiles.map((x) => + fs.rename(`${theCWD}/${x}`, `${theCWD}/src/includes/${x}`, (err) => + handleError(err) + ) + ); + cssFiles.map((x) => + fs.rename(`${theCWD}/${x}`, `${theCWD}/src/assets/css/${x}`, (err) => + handleError(err) + ) + ); + socialImgFiles.map((x) => + fs.rename( + `${theCWD}/${x}`, + `${theCWD}/src/assets/img/socialmedia/${x}`, + (err) => handleError(err) + ) + ); + imgFiles.map((x) => + fs.rename(`${theCWD}/${x}`, `${theCWD}/src/assets/img/${x}`, (err) => + handleError(err) + ) + ); + spinner.succeed(); - dotFiles.map(x => - fs.rename(`${theCWD}/${x.slice(1)}`, `${theCWD}/${x}`, err => handleError(err)), - ); - srcFiles.map(x => fs.rename(`${theCWD}/${x}`, `${theCWD}/src/${x}`, err => handleError(err))); - includesFiles.map(x => - fs.rename(`${theCWD}/${x}`, `${theCWD}/src/includes/${x}`, err => handleError(err)), - ); - cssFiles.map(x => - fs.rename(`${theCWD}/${x}`, `${theCWD}/src/assets/css/${x}`, err => handleError(err)), - ); - socialImgFiles.map(x => - fs.rename(`${theCWD}/${x}`, `${theCWD}/src/assets/img/socialmedia/${x}`, err => handleError(err)), - ); - imgFiles.map(x => - fs.rename(`${theCWD}/${x}`, `${theCWD}/src/assets/img/${x}`, err => handleError(err)), - ); - spinner.succeed(); - - // The npm install. - spinner.start('2. Installing npm packages...'); - // await execa('npm', ['install', '--silent']); - await execa('npm', ['install']); - spinner.succeed(); - - // Done. - printNextSteps(); - }); + // The npm install. + spinner.start('2. Installing npm packages...'); + // await execa('npm', ['install', '--silent']); + await execa('npm', ['install']); + spinner.succeed(); + + // Done. + printNextSteps(); + } + ); }; diff --git a/installer/package.json b/installer/package.json index 66a0306..762d4ab 100644 --- a/installer/package.json +++ b/installer/package.json @@ -1,6 +1,6 @@ { "name": "fuzzymail", - "version": "0.0.8-11", + "version": "0.0.8-12", "description": "Making emails fun again.", "keywords": [ "boilerplate", @@ -33,7 +33,6 @@ "license": "MIT", "dependencies": { "browser-sync": "^2.26.13", - "cherry-grid": "^0.1.30", "connect-modrewrite": "^0.10.2", "cssnano": "^4.1.10", "del": "^6.0.0", @@ -50,8 +49,8 @@ "gulp-util": "^3.0.8", "jquery": "^3.5.1", "normalize.css": "^8.0.1", - "postcss": "^8.1.7", - "postcss-flexbugs-fixes": "^5.0.1", + "postcss": "^8.2.1", + "postcss-flexbugs-fixes": "^5.0.2", "postcss-import": "^13.0.0", "postcss-preset-env": "^6.7.0" } diff --git a/package-lock.json b/package-lock.json index 8abbf1e..4333d57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fuzzymail", - "version": "0.0.8-11", + "version": "0.0.8-12", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -125,11 +125,6 @@ "supports-color": "^7.1.0" } }, - "cherry-grid": { - "version": "0.1.30", - "resolved": "https://registry.npmjs.org/cherry-grid/-/cherry-grid-0.1.30.tgz", - "integrity": "sha512-7TNaIAi8IiXPQmpLhG7KPa7JJfinM+FnU8M8a/KvbFphpURkZcHVSjxxc/iccGoKhxgB0X9OFCofDm/XNZUkiQ==" - }, "cli-cursor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", @@ -377,28 +372,25 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "execa": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz", - "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz", + "integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==", "requires": { - "cross-spawn": "^7.0.0", - "get-stream": "^5.0.0", - "human-signals": "^1.1.1", + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.0", + "human-signals": "^2.1.0", "is-stream": "^2.0.0", "merge-stream": "^2.0.0", - "npm-run-path": "^4.0.0", - "onetime": "^5.1.0", - "signal-exit": "^3.0.2", + "npm-run-path": "^4.0.1", + "onetime": "^5.1.2", + "signal-exit": "^3.0.3", "strip-final-newline": "^2.0.0" }, "dependencies": { "get-stream": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", - "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", - "requires": { - "pump": "^3.0.0" - } + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz", + "integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==" }, "is-stream": { "version": "2.0.0", @@ -544,9 +536,9 @@ "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==" }, "human-signals": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", - "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", + "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==" }, "ieee754": { "version": "1.1.13", diff --git a/package.json b/package.json index 98773ea..3939bc4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fuzzymail", - "version": "0.0.8-11", + "version": "0.0.8-12", "description": "Making emails fun again.", "keywords": [ "boilerplate", @@ -33,10 +33,9 @@ "license": "MIT", "dependencies": { "chalk": "^4.1.0", - "cherry-grid": "^0.1.30", "commander": "^6.2.0", "download": "^8.0.0", - "execa": "^4.1.0", + "execa": "^5.0.0", "ora": "^5.1.0", "prompts": "^2.4.0" }