Code Monkey home page Code Monkey logo

alter.email's Introduction

alter.email

A tool for transforming HTML emails.

Note: This repository has been archived and is no longer maintained. The tool is still available at https://alteremail.netlify.app, but it will no longer receive any updates.

Getting Started

Clone this repository:

git clone https://github.com/cossssmin/alter.email.git

Install dependencies:

# Navigate to project directory
cd alter.email

# Install dependencies with NPM
npm install

Build Lambda function

npm run build:lambda

Start developing

npm run serve

Features

Alter.Email comes with most transformers that power the Maizzle Email Framework.

CSS Inliner

Uses the Juice library to inline your embedded CSS.

Code Cleanup

  • Remove unused CSS

    Uses email-comb to remove unused CSS.

  • Replace strings

    Batch replace strings in your HTML email. Regex supported.

  • Six-digit HEX colors

    Ensures that all your HEX colors are defined with six digits.

Extra Attributes

Add any number of attributes to any elements in your HTML. Tag names can also be cheerio selectors.

URLs

  • Base Image URL

    Prepend a base URL to all image sources in your email. Applies to both inline and background images.

  • URL Parameters

    Add any number of query string parameters to your anchor URLs. You can choose which ones should be encoded, too!

Formatting

  • Prettify

    Uses pretty to pretty-print your HTML code.

  • Minify

    Uses html-crush to minify your HTML code.

  • Plaintext

    Uses string-strip-html to generate a plaintext version of your HTML email.

  • Prevent Widow Words

    Uses prevent-widows to replace spaces and hyphens at the end of a string with non-breaking equivalents.

UI Features

๐Ÿ“ฑ Responsive Preview

Preview your HTML live, in a resizable iframe:

  • drag the handle to horizontally-resize the preview
  • while dragging, the iframe shows a viewport pixel width indicator
  • double-clicking the handle resets the panes to their original widths

โš  HTML Size Indicator

Shows your approximate HTML input and output file sizes, updated as-you-type.

When you're close to Gmail's clipping limit, it'll show a warning icon linked to a GitHub issue that discusses this in detail.

Contributing

Have ideas for new features? Found a bug and want to squash it?

Pull requests are welcome!

However, nobody likes working hard just to see their PR rejected. So, before starting any significant amount of work, please open an issue and describe your idea.

Build previews

When you open a PR, Netlify CI will automatically deploy a public build preview of your branch.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.