Email Inky Templates

Email Inky templating module

Install: @travetto/email-inky

npm install @travetto/email-inky

# or

yarn add @travetto/email-inky

This module provides inky support via JSX tags for integration with the Email Compilation Support engine.

Code: Sample Inky Template

/** @jsxImportSource @travetto/email-inky */

import { Title, Container, Summary, Row, Column, If, Button, Value, InkyTemplate } from '@travetto/email-inky';

export default <InkyTemplate>
  <Title>Test Email</Title>
  <Summary>Email Summary</Summary>
  <Container>
    <If attr='person'>
      <Row>
        <Column small={5}>
          <Button href='https://google.com/{{query}}'>Hello <Value attr='name' /></Button>
        </Column>
      </Row>
    </If>
  </Container>
</InkyTemplate>;

Please see the inky documentation for more information on the component specifications

Conditionals and Substitutions

The underlying Email module is built on mustache, which provides enough flexibility to enable sufficient power with minimal complexity and overhead.

This means this module, while showing inky components, will ultimately produce HTML/markdown that is mustache compatible. The syntax used by mustache and the syntax used by JSX are in conflict due to both of the tools relying on the uniqueness of {} brackets.

To that end, the module introduces additional components (If Component, Unless Component, and For Component) to assist with control flow logic. When it comes to variable substitution, and a desire to intermingle seamlessly with component properties, {{value}} can be used within a string value. To leverage substitutions outside of string contexts, a more formal version can be found in the Value Component component, but this cannot be integrated into properties (e.g. an href).

Template Extension Points

The template extension points are defined at:

1. email/main.scss - The entry point for adding, and overriding any sass
2. email/inky.variables.scss - Allows for specifying any variables that should be defined before inky's styles are loaded.
3. email/inky.wrapper.html - Provides direct access to override the entire base HTML document for all HTML emails. In addition to the overrides, you can find the list of available settings at Github