inkcite 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e3066d2404f84bcdf743a160b8c85cc838cd19c0
+  data.tar.gz: 73adb02dd0f48a81a2b9223a5f03d221c18fa908
+SHA512:
+  metadata.gz: 39ff00165434c67e13ae7b72fa5cb90c4991530ab5005059d0c7f64c118c62a55b7be3cc60d147f44536bbf710934a4c7c455c248f205e75c7ca87730451fe41
+  data.tar.gz: aa990339b0f3ef6b949231ad2d5efd27eb5218f2e6ccd525a4413a8e421a84d480c3579a11a2bb5e89be862f6483e45130b396f3d66cdb71c1c99f075d695146

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Inkceptional
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,110 @@
+# Inkcite
+
+Inkcite is an opinionated workflow for building modern, responsive email.
+Like [Middleman] is to static web sites, Inkcite makes it easy for email
+developers to keep their code DRY (don’t repeat yourself) and integrate
+versioning, testing and minification into their workflow.
+
+* Easy, flexible templates, variables and helpers
+* ERB for easy A/B testing and versioning
+* Automatic link tagging and tracking
+* [Litmus] integration for compatibility
+* Preview distribution lists
+* Content inclusion/exclusion rules
+
+## Installation
+
+Inkcite is a Ruby gem.  Ruby comes pre-installed on Mac OS X and Linux. If
+you’re using Windows, try [RubyInstaller].
+
+```
+gem install inkcite
+```
+
+## Getting Started
+
+After Inkcite is installed, you will have access to the `inkcite` command.
+Create a new Inkcite email at your terminal or command prompt:
+
+```
+inkcite init MY_EMAIL
+```
+
+This will create a new directory called `MY_EMAIL` and fill it with the source
+files for your new email project.  It includes a subdirectory called `images`
+where you store all images for your email.
+
+Change directories into your new project and start the preview server:
+
+```
+cd MY_EMAIL
+inkcite server
+```
+
+Inkcite’s preview server gives you a live view of your email as you build it
+by modifying the `source.html`, `helpers.tsv`, `source.txt` and `config.yml`
+files.  Open your browser to `http://localhost:4567` to see your email as you
+build it.  As you make changes, simply refresh your browser to see up-to-date
+results.
+
+The `config.yml` file has an extensive set of properties that influence the
+HTML code that Inkcite produces plus how it sends preview emails.
+
+During development, you can refer to your command prompt or terminal window to
+see important warnings (such as missing images or links).
+
+## Email Previews
+
+When you’re ready to see what your email looks like in an email client,
+Inkcite will send previews on demand.  Make sure you have configured the
+`smtp` settings in the `config.yml` file so that Inkcite can send email via
+your SMTP server.  When you’re ready to send:
+
+``` inkcite preview ```
+
+With no other parameters, this will send a preview version of your email to
+the `from` email address you configured.  You can also use the preview command
+to send to your email to internal or client distribution lists for review.
+
+## Compatibility Testing
+
+Testing your Inkcite-built emails with [Litmus] is easy.  Make sure you have
+configured the `litmus` section of the `config.yml` file.
+
+``` inkcite test ```
+
+The will create a new email test using your default set of email clients and
+send a preview version of the email to Litmus for testing.  Subsequent runs of
+the test command will update the same test.  Log into your Litmus account to
+review the results of the test.
+
+## Production Builds
+
+After you’ve previewed and tested your email, you’re ready to create the
+production-ready email files.  From the project directory:
+
+``` inkcite build ```
+
+By default, this will create the production version of your email.  This
+includes fully-qualified URLs for images, link tracking and tagging and a host
+of other preflight features.
+
+## Bug Reports
+
+Github Issues is used for managing bug reports and feature requests. If you
+run into issues, please search the issues and submit new problems:
+https://github.com/inkceptional/inkcite/issues
+
+The best way to get quick responses to your issues and swift fixes to your
+bugs is to submit detailed bug reports, include test cases and respond to
+developer questions in a timely manner.
+
+## License
+
+Copyright (c) 2014 Jeffrey D. Hoffman. MIT Licensed, see [LICENSE] for
+details.
+
+[Middleman]: http://middlemanapp.com
+[Litmus]: http://litmus.com
+[rubyinstaller]: http://rubyinstaller.org/
+[LICENSE]: https://github.com/inkceptional/inkcite/blob/master/LICENSE

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/gem_tasks"
+require 'rake/testtask'
+
+Rake::TestTask.new do |t|
+  t.libs.push "lib"
+  t.test_files = FileList['test/*_spec.rb', 'test/renderer/*_spec.rb']
+  t.verbose = true
+end

data/assets/facebook-like.css

@@ -0,0 +1,62 @@
+#dialog-wrap {
+  display: none;
+  position: absolute;
+  background-color: rgba(82, 82, 82, 0.7);
+  border-radius: 8px;
+  padding: 10px;
+  z-index: 10;
+}
+
+#dialog {
+  background-color: #fff;
+  border: 1px solid #555;
+  color: #333333;
+  font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
+  font-size: 11px;
+  line-height: 1.28;
+  text-align: left;
+}
+
+#dialog h2 {
+  background-color: #6D84B4;
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0;
+  padding: 5px 10px;
+}
+
+#dialog-content {
+  padding: 15px;
+  width: 450px;
+  height: 100px;
+}
+
+#dialog-buttons {
+  background-color: #f2f2f2;
+  border-top: 1px solid #ccc;
+  padding: 8px 10px;
+  text-align: right;
+}
+
+#dialog-buttons a {
+  display: inline-block;
+  border: 1px solid #29447E;
+  border-bottom-color: #1A356E;
+  background-color: #5B74A8;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  color: #fff;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+#dialog-buttons a span {
+  display: inline-block;
+  border-top: 1px solid #8A9CC2;
+  padding: 2px 6px 3px;
+}
+
+.loading {
+  background: url(spinner.gif) no-repeat center;
+}

data/assets/facebook-like.js

@@ -0,0 +1,59 @@
+var loaded = false;
+
+function closeLike() {
+  $('#dialog-wrap').fadeOut('slow');
+  return false;
+}
+
+function openLike() {
+
+  if (!loaded) {
+    loaded = true;
+
+    (function(d, s, id) {
+      var js, fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) return;
+      js = d.createElement(s); js.id = id;
+      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
+      fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+
+    var waitForFB;
+    waitForFB = function() {
+      var $dialog = $('#dialog-wrap');
+      var $iframe = $dialog.find('iframe');
+      if ($iframe.contents().length != 1) {
+        setTimeout(waitForFB, 100);
+      } else {
+        $dialog.find('#dialog-content').removeClass('loading');
+      }
+    }
+
+    waitForFB();
+  }
+
+  var $window = $(window);
+  var $dialog = $('#dialog-wrap');
+
+  var top = Math.round(($window.height() - $dialog.outerHeight()) / 2) + $window.scrollTop();
+  if (top < 0) {
+    top = 0;
+  }
+
+  var left = Math.round(($window.width() - $dialog.outerWidth()) / 2) + $window.scrollLeft();
+  if (left < 0) {
+    left = 0;
+  }
+
+  $dialog.css({ top: top, left: left });
+
+  $dialog.fadeIn('slow');
+
+  return false;
+}
+
+$(function() {
+  if (window.location.hash === '#like') {
+    openLike();
+  }
+});

data/assets/init/config.yml

@@ -0,0 +1,97 @@
+# When true (recommended), appends a cache-busting timestamp to the
+# images referenced in the email.  This ensures the client always
+# retrieves the latest version of the image and helpful during client
+# previews.  Generally this should be disabled in production.
+cache-bust: true
+
+# When true copies image alt-text to the title property.  Populating both
+# presents a more consistent image tooltip experience.
+copy-alt-to-title: false
+
+# When true (recommended), minifies the HTML and CSS of the email.  Should
+# usually be disabled in development to make debugging easier.
+minify: true
+
+# When true (recommended), enables image optimization using ImageOptim.
+# http://imageoptim.com
+optimize-images: true
+
+# When empty links are found in content, this is the URL that will be
+# included instead - so that clients understand this link is missing
+# and needs to be provided.
+missing-link-url: 'https://github.com/404'
+
+# Inkcite can generate multiple versions of an email from a single source
+# file which is useful for targeted mailings and a/b testing.  Specify a
+# unique, single-word identifier for each version.
+#versions:
+#  - past_customer
+#  - prospect
+
+# SMTP settings for sending previews to the small list of internal and client
+# addresses specified below.  Most importantly, specify the address your test
+# emails will be sent 'from:'
+smtp:
+  host: 'smtp.gmail.com'
+  port: 587
+  domain: 'yourdomain.com'
+  username: ''
+  password: ''
+  from: 'Your Name <email@domain.com>'
+
+# Specify the distribution lists for preview versions of your email.
+recipients:
+  client:
+    - 'Awesome Client <awesome.client@domain.com>'
+  internal:
+    - 'Creative Director <creative.director@domain.com>'
+    - 'Proofreader <proof.reader@domain.com>'
+
+# Easy Litmus integration for compatibility testing.
+# http://litmusapp.com
+litmus:
+  subdomain: ''
+  username: ''
+  password: ''
+
+# Easy deployment of static assets to a CDN or publicly-accessible
+# server - required when your email has images.
+sftp:
+  host: ''
+  path: ''
+  username: ''
+  password: ''
+
+# Link tagging ensures that every link in the email includes a
+# name-value pair.  This is useful if you harvest data from your
+# website analytics.  {id} will be replaced with the unique ID
+# from the link if you're concerned about which link the
+# recipient clicked to get to your website.
+tag-links: "from_email=myemail|{id}"
+
+# Optionally, if your email newsletter links to multiple websites
+# and you only want to tag links to a specific domain, include
+# that domain in this setting.
+#tag-links-domain: 'clientdomain.com'
+
+
+# Environment-specific overrides allow you to change any setting
+# for each environment (e.g local development vs. client preview).
+
+# These overrides apply to your local development environment when
+# you are viewing the email in your browser via Inkcite's server.
+development:
+  minify: false
+
+# These overrides apply to previews both internally and to external
+# clients and sent with Inkcite's preview function.
+preview:
+  view-in-browser-url: 'http://preview.contenthost.com/path/{filename}'
+  image-host: 'http://preview.imagehost.com/emails/'
+
+# These overrides apply to the final, ready-to-send files.
+production:
+  cache-bust: false
+  image-host: "http://production.imagehost.com/emails/myemail"
+  view-in-browser-url: 'http://production.contenthost.com/path/{filename}'
+

data/assets/init/helpers.tsv

@@ -0,0 +1,31 @@
+// This file helps you keep your email code DRY (don't repeat yourself)
+// by allowing you to easily define constants and custom tags.
+//
+// The keys and values in this file are tab-delimited.
+
+// Palette
+#background	#ffffff
+#text	#000000
+#link	#0099cc
+
+// Default font styles
+font-family	sans-serif
+font-size	15
+line-height	19
+
+// This is an example of a custom tag.  Tabs delimit the tag name, its open and
+// close values.  Inkcite will replace instances of {big} and {/big} with these
+// values, respectively.  Notice that it allows its color, which defaults to
+// #444444, to be configured in your HTML as in {big color=#ff0000}.
+big	<div style="font-size: 18px; font-weight: bold; color: $color=#444444$">	</div>
+
+// Bullet-proof buttons
+button-border-radius	5
+button-float	center
+button-padding	8
+button-width	175
+
+// Dimensions
+width	500
+
+wrap	{table width=100% bgcolor={#background}}{td font-family="{font-family}" align=center}	{/td}{/table}

data/assets/init/source.html

@@ -0,0 +1,60 @@
+{wrap}
+
+  {preheader}This preheader will only be visible in supporting clients.{/preheader}
+
+  {table padding=10 width={width} mobile="fill"}
+    {td font=default align=left}
+
+      {img src=logo.gif height=50 width=200 alt="Company Logo"}<br>
+
+      The &#123;img&#125; helper automatically uses placehold.it when the specified image is missing from the images/ folder.  It also sets the <code>display</code>-style to block and will warn you when you've forgotten to set dimensions.  &#123;img&#124; are responsive-ready - you can set this image to <code>hide</code>, <code>fill</code> or show a different image using the <code>mobile-src</code> property.
+
+      {img src=billboard.jpg height=180 width={width} mobile="fill"}<br>
+
+      {lorem sentences=10}<br><br>
+
+      {button id="call-to-action" href="http://inkceptional.com"}I'm a Responsive Button{/button}<br>
+
+    {/td}
+  {/table}
+
+  {table width={width} padding=10 float=center valign=top mobile="drop"}
+    {td width=50%}
+
+      {img src=kittens.jpg width=250 height=150 mobile="fill"}<br>
+
+      {big}{lorem type=headline}{/big}
+
+      {lorem sentences=8}<br><br>
+
+      {button id="call-to-action2" href="http://inkceptional.com"}Create &amp; Send{/button}
+
+    {/td}
+    {td width=50% bgcolor=#eeeeee font=default}
+
+      {big}{lorem type=headline}{/big}
+      {lorem sentences=3}<br><br>
+
+      {big}{lorem type=headline}{/big}
+      {lorem sentences=3}<br><br>
+
+      {big color=#990000}{lorem type=headline}{/big}
+      {lorem sentences=3}
+
+    {/td}
+  {/table}
+
+  {table padding=10 width={width} float=center mobile="fill"}
+    {td align=left font=small}
+
+      {img src=footer.jpg height=100 width={width} mobile="hide"}<br>
+
+      <% if email? %>
+        This email was sent to [email].  {a id="unsubscribe" href=#}Click here to unsubscribe{/a}.
+        Using ERB, this unsubscribe notice will only appear in the 'email' format of this project.
+      <% end %>
+
+    {/td}
+  {/table}
+
+{/wrap}