foundation / inky-rb Goto Github PK

View Code? Open in Web Editor NEW

173.0 173.0 36.0 151 KB

License: MIT License

Ruby 97.27% HTML 1.27% SCSS 0.05% Haml 0.75% Slim 0.67%

inky-rb's People

Contributors

Stargazers

Watchers

inky-rb's Issues

Rendering an Inky Partial Escapes the Content

When I try to render an Inky partial within an Inky template, the partial's content is escaped.

Here's my email template (test_mail.html.inky):

<div>
  <%= render 'inky_partial' %>
  Main content
</div>

And here's my partial template (_inky_partial.html.inky):

<div>partial content</div>

And here's a screenshot from ActionMailer::Preview:

For now, I've been calling .html_safe on the rendered partial. Would the fix be to just append that to the output of Inky::Core.re_inject_raws?

Nokogiri::XML problem?

I had to change Nokogiri::XML to Nokogiri::HTML as a quick fix in my fork to prevent links in my emails getting munged. Not sure if this is a known issue or the right fix, but wanted to open a conversation about it:

x = "<button class=\"radius\" href=\"https://www.google.com/test?a=1&b=2&c=3\">Foo</button>"

irb(main):018:0> puts Nokogiri::XML(x)
<?xml version="1.0"?>
<button class="radius" href="https://www.google.com/test?a=1=2=3">Foo</button>
=> nil

irb(main):019:0> puts Nokogiri::HTML(x)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><button class="radius" href="https://www.google.com/test?a=1&amp;b=2&amp;c=3">Foo</button></body></html>
=> nil

Templates render _only_ the style node

Am I doing something obviously wrong?

Site is open source, feel free to check it out. Branch is here. When I visit the email preview (or send the email from console), the resulting email has the email layout and the <style> node from the template but nothing else.

What gives? I even tried updating to use latest master from github. I also had an issue with compatibility of foundation-rails and foundation-emails.

Any plan to support other than rails?

It seems this gem run only rails env. Do you have any plan to support other than rails like Sinatra, etc.?

Multiple query parameters in rails link helpers will cause a RuntimeError: Illegal character '&'

Using rails link helpers with multiple params will put & characters in the generated urls. When inky-rb tries to parse this, it blows up.

generator not available

I've just added inky-rb 1.3.7.2 to my Rails 5.0.2 project and I am unable to run rails g inky:install. It appears the generator does not exist.

$ bin/rails g inky:install
Running via Spring preloader in process 26510
Expected string default value for '--serializer'; got true (boolean)
Expected string default value for '--helper'; got true (boolean)
Expected string default value for '--assets'; got true (boolean)
Could not find generator 'inky:install'. Maybe you meant 'chewy:install', 'pundit:install' or 'annotate:install'
Run `rails generate --help` for more options.

$ bin/rails g
Running via Spring preloader in process 26602
Expected string default value for '--serializer'; got true (boolean)
Usage: rails generate GENERATOR [args] [options]

General options:
  -h, [--help]     # Print generator's options and usage
  -p, [--pretend]  # Run but do not make any changes
  -f, [--force]    # Overwrite files that already exist
  -s, [--skip]     # Skip files that already exist
  -q, [--quiet]    # Suppress status output

Please choose a generator below.

Expected string default value for '--helper'; got true (boolean)
Expected string default value for '--assets'; got true (boolean)
Rails:
  assets
  channel
  controller
  generator
  helper
  integration_test
  job
  mailer
  migration
  model
  resource
  scaffold
  scaffold_controller
  serializer
  task

Annotate:
  annotate:install

Chewy:
  chewy:install

Doorkeeper:
  doorkeeper:application_owner
  doorkeeper:install
  doorkeeper:migration
  doorkeeper:previous_refresh_token
  doorkeeper:views

FactoryGirl:
  factory_girl:model

Js:
  js:assets

Kaminari:
  kaminari:config
  kaminari:views

Pundit:
  pundit:install
  pundit:policy

Rspec:
  rspec:policy

Sidekiq:
  sidekiq:worker

TestUnit:
  test_unit:generator
  test_unit:plugin
  test_unit:policy

REXML::ParseException when Partial Has More Than 1 Root

When I include a partial that includes more than one top level element, I get a REXML::ParseException.

My partial is:

<div>Partial content 1</div>
<div>Partial content 2</div>

And here's a partial stack trace:

#<RuntimeError: attempted adding second root element to document>
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/document.rb:95:in `add'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/element.rb:879:in `add'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/child.rb:21:in `initialize'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/parent.rb:13:in `initialize'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/element.rb:59:in `initialize'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/element.rb:877:in `new'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/element.rb:877:in `add'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/element.rb:297:in `add_element'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/document.rb:102:in `add_element'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/parsers/treeparser.rb:33:in `parse'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/document.rb:287:in `build'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/2.2.0/rexml/document.rb:44:in `initialize'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/inky-rb-1.3.6.1/lib/inky.rb:35:in `new'
/Users/keokilee/.rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/inky-rb-1.3.6.1/lib/inky.rb:35:in `release_the_kraken'
/Users/keokilee/Code/InkyTest/app/views/inky_mailer/_inky_partial.html.inky:1:in `_app_views_inky_mailer__inky_partial_html_inky__4142895012036450841_70155048147260'

As a workaround, we're just wrapping the content of the partial with an outer div.

Anybody attempted inky precompile?

Been trying out inky on a non-rails project which leverages ActionMailer, but the performance loss is too great at the moment. With the programmatic access for both inky and premailer, I'm curious if anybody has attempted to generate standard html.erb templates for runtime from inky templates used in development?

Deprecation warning for Rails 6.1

When running the specs for the mailers that use inky, I get the following warning message:

DEPRECATION WARNING: The asset "emails.css" is not present in the asset pipeline.
Falling back to an asset that may be in the public folder.
This behavior is deprecated and will be removed.
To bypass the asset pipeline and preserve this behavior,
use the `skip_pipeline: true` option.

If I set the option skip_pipeline:true then premailer doesn't work.

I have the latest version of inky-rb installed.

HTML encoding is being forced to US-ASCII, causing transfer encoding issues down the line

Hi there,

I am using inky-rb in combination with premailer in our Rails setup. One of the things premailer does it to automatically create a plain text version of an email from the HTML variant, resulting in a multipart email.

I am not sure if it is in premailer or ActionMailer but somewhere a decision is being made if the plain text is just US-ASCII, in which case a 7bit content transfer encoding is fine, or if it something else, requiring a quoted-printable transfer encoding.

When using inky-rb I found that even though the HTML template specifies a UTF-8 encoding, the encoding is being forced to be US-ASCII in https://github.com/zurb/inky-rb/blob/develop/lib/inky.rb#L40, causing premailer (or ActionMailer) to not encode the plain text as quoted-printable, even when it should be.

I guess my question is, what is the purpose of that hardcoded US-ASCII encoding? Is this really needed?

-Jonas

CSS error when trying to send an email

I'm getting the following error when trying to send out an email:

ActionView::Template::Error: Invalid CSS after "  tiny": expected ")", was ": 4px 8px 4px 8px,"
  (in .../app/assets/stylesheets/foundation_emails.scss:12)
    from .../.rvm/gems/ruby-2.2.3/gems/foundation_emails-2.2.0.0/vendor/assets/stylesheets/foundation-emails/components/_button.scss:12
    from .../.rvm/gems/ruby-2.2.3/gems/foundation_emails-2.2.0.0/vendor/assets/stylesheets/foundation-emails/foundation-emails.scss:14
    from .../.rvm/gems/ruby-2.2.3/gems/foundation_emails-2.2.0.0/vendor/assets/stylesheets/_foundation-emails.scss:1

I followed the installation directions and I'm using the inky confirmation template. Any suggestions?

Precompilation error

I did not see this as a step in the install insteps, wondering if I have done something wrong:

ActionView::Template::Error: Asset was not declared to be precompiled in production.
Add `Rails.application.config.assets.precompile += %w( foundation_emails.css )` to `config/initializers/assets.rb` and restart your server

Using <columns> as rails partials mess with column order classes.

Heys, i'm building a modular newsletter where each block is a <column> module. Since this module has a lot of variants for its data and appearance, i've abstracted it as partial.

Default and working as Expected

<row>
  <!--each block-->
   <column small="6" large="4" class="block">block data</column>
   <column small="6" large="4" class="block">block data</column>
   <column small="6" large="4" class="block">block data</column>
</row>

<!--produces the expected, and abbreviated for demo purposes  -->

<table class="row">
  <tbody><tr>
    <th class="block small-6 large-4 columns first">block data</th>
    <th class="block small-6 large-4 columns">block data</th>
    <th class="block small-6 large-4 columns last">block data</th>
 ...

Using columns as partials produces unexpected order classes

<!-- some_mailer/partials/block.htmk.inky -->
<columns small="<%= block_grid_size[0] %>" large="<%= block_grid_size[1] %>" class="block 
	<% if defined? block_size_mod %>block--<%= block_size_mod %><% end %> 
	<% if defined? block_look_mod %>block--<%= block_look_mod %><% end %>
	">
	<table class="block__inner">
		...block data
	</table>
</columns>

<!-- Section partial -->
<row>
   <%= render partial: 'some_mailer/partials/block', 
	  		locals: {
	  			block_grid_size: ["6","4"],
                                block_size_mod: "big",
                                block_look_mod: "primary",
	  			...
	  		}
	  	%>
  <%= render partial: 'some_mailer/partials/block', 
	  		locals: {
	  			block_grid_size: ["6","4"],
	  			...
	  		}
	  	%>
<%= render partial: 'some_mailer/partials/block', 
	  		locals: {
	  			block_grid_size: ["6","4"],
	  			...
	  		}
	  	%>
</row>

<!--produces unexpected first and last class for each column  -->
<table class="row">
  <tbody><tr>
    <th class="block block--big block--primary small-6 large-4 columns first last">block data</th>
    <th class="block small-6 large-4 columns first last">block data</th>
    <th class="block small-6 large-4 columns first last">block data</th>
 ...

setup:

macOS El Capitan 10.11.6 (15G1004)
ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-darwin15]
rails 4.2.5.1
inky-rb 1.3.7.2
premailer-rails 1.9.5

Any thoughts?

Webpacker support?

Hey there!

Just wondering if anyone has gotten this to work with webpacker. I was able to start my latest project without using the asset pipeline, but I can't seem to get this to play nice with webpacker no matter what I try.

Thank you!

Parsing issue :: Missing end tag for 'br' (got "p")

I'm using inky-rb gem in my Rails project and I get an error while previewing my mailer:
Missing end tag for 'br' (got "p").

My mail content is <p>Lorem ipsum <br> dolor sit amet</p>.
I discovered if I remove the <br> tag it works, if I add a slash before the end of the closing tag (<br />) it works as well.

So, my guess is that the parser is panicked when it find an html tag without slash.
How can I avoid getting this error (I'm not sure if this issue comes from this gem or from nokogiri) in my mailer ?

My stack:

Rails 4.2.7.1
Ruby 2.3.0
Inky-rb 1.3.6.1

Status of inky-rb?

Just wondering if this ruby gem has essentially be deprecated in favor of https://github.com/foundation/inky

I was thinking about using this for a project but I don't want to use it if it's no longer the blessed path and it would be significantly more difficult to use the npm package (given my constraints).

Rails 7 support?

I just updated to rails 7 and I can't seem to get this to load. It looks like it never registers the inky extension. Has anyone gotten this to work?

Plain text body

Hello,

I'm trying to render an email template and store the html - and text body in a model, in order to send the mail by using a job. However, calling:

mail = SalesLeadMailer.not_reached_1(lead)
puts mail.body

prints an html body. When I specify formats in my mailers as such:

a = mail(
      subject: default_i18n_subject(app_domain: Rails.application.config.x.app_domain_name)
    ) do |format|
      format.text
      format.html
    end

the returned mail object will have a text_part and html_part but the text part will contain html tags.
My template file not_reached_1.de.inky looks like this:

<row>
  <columns>
    <h5><%= t('communication.formal_hello') %> <%= customer_title(@customer) %> <%= @customer.full_name %>,</h5>
  </columns>
  <p>Lorem ipsum</p>
  <p>...</p>
</row>

<%= render partial: 'agent_signature', locals: { agent: @sales_agent } %>

How would I create a mail object that will contain plain text and html text?

Support other templates and/or chaining?

Do you think it would be possible to use other templating languages like Slim or Markdown and by the way support chaining (i.e. file.html.inky.slim)?

Currently we set a guard-shell to render our slim files to ERB, but I found with replacing :erb by :slim in the lib/inky/rails/template_handler.rb file would potentially enable inky files to parse slim templates, that would fit nicer in our workflow. Clearly template chaining would be a better option.

Center tag is problematic in safari and iphone

I have an image tag inside center tag, which is left aligned in safari and iphone. In chrome, inbox and gmail mail, it is perfectly okay! Can you check this issue and get back? Here's my code snippet.

<wrapper class="Mail-Header"> <container class="Border-Mail"> <spacer size="20"></spacer> <row> <columns small="12" align="center"> <center> <a href="http://allt.in/" target="_blank"> <img src="logo.png" alt="lorem Ipsum" width="122px" height="35px" class="Allt--Logo-Mailer" /> </a> </center> </columns> </row> <spacer size="20"></spacer> </container> </wrapper>

Partial render isn't working

My email consist of a footer which doesn't seem to render out properly.
The output is still Inky's templating language instead of complex tables.

< row>
<%= render partial: 'layouts/footer', locals: {country: @Country} %>
< /row>
How does one handle partial render? I have tried renaming the file to 'inky' and it doesn't seem to do anything.

I've tried renaming my partials to inky as well.

How do I access the inky parser

I making a app where user can edit mail, and i want to let them use in inky for convince.
In your doc you say "The Inky parser can be accessed directly for programmatic use." But how do i do that exactly???

Partial rendering is buggy

Partial rendering seems to be buggy. Rendering partials within a layout file does not compile the inky templating language in those partials. Is this a bug, or should partials be handled another way here?

Change `components` settings?

The README talks of Custom Elements and how the names of tags can be changed with the components settings, but there does not actually seem to be a way to change it. The options param in Inky::Core seems to be the way to go, but in Rails there's no way to pass in any value into that param as far as I can tell.

Missing support for <h-line>

Hello, I noticed that inky-rb is lacking support for <h-line> (unlike https://github.com/foundation/inky).

(Thank you for this great tool!)

Gem has no uninstall function

Would be great to have an uninstall function for this gem.

Installing gem over-writes other SCSS app-wide

Maybe I don't understand how this gem is to be used, but installing it changed the styles everywhere in my rails app views. Should I manually include the foundation-emails styles high up in my application.css file so that my own SCSS over-writes this gem's styles?

Inky 1.3.7.0 - Nokogiri - Heroku issue

After updating to 1.3.7.0 have problem on Heroku with Nokogiri.
html.elements return empty array and inky template is't processed.
When replace html.elements with html.children, work well.

In development on localhost everything ok.

Probably problem with libxml2 on heroku.

rails (5.0.0.1)
nokogiri (1.6.8.1)

@marcandre ?

Add wiki or section in README for syntax highlighting

Given the custom .inky-erb, .inky-haml, .inky-slim file extensions I think it would be helpful to have a section for enabling syntax highlighting for inky and the various extensions. I ended up having to write my own for emacs and wanted to save some other folks the trouble.

What do you guys think about that? I work with some folks using Atom and I'm sure they'd like a community section showing how to get ERB + HTML modes active.

<raw> tags not working, and neither is components config

after surrounding a section I need inky not to touch in <raw></raw> tags, the html is still being transformed. mixing .inky and .erb tags also does not work (rendering a plain html.erb partial inside an inky template is still transformed

also there is no "components" setting in config (even though it's specifically listed as a feature of this gem) which means I can't even just change the inky specific html to require an inky prefix (i.e. can't change <button> component to <inky-button> so i can still render a damn plain button when needed)

Fix character escaping (')

Seems like this inky-rb suffers from a bug that inky suffered from too: foundation/inky#57

It looks bad in Outlook.

Rendering partial is not working, must add html_safe

In my mailer.html.inky I am trying to render a partial header.html.inky.

The following code merely renders the escaped html:

<container>
  <%= render(partial: "my_mailer/header") %>
</container>

By adding html_safe to my render method it works fine:

<container>
  <%= render(partial: "my_mailer/header").html_safe %>
</container>

Is this expected behaviour?

Special Char Strip

Using mailtrap.io for testing.
Using <spacer> creates a <table> with a   char inside the <td> to guarantee the row height. When I receive this on mailtrap.io, the special char is not there and testing in Litmus the HTML all the spacer take no effect. What can be happening?

No LICENSE.txt

Hi,

I would like to find out what license you are using for this project. Could you provide a LICENSE.txt within the repository (Similar as is done in https://github.com/zurb/foundation-rails)? That would make it much easier for people to figure out your license.

Best regards
Stephan

Data Table

Any attempt to include an actual table for displaying data results in any css applied to said table being stripped

<table className="table table-bordered" style="whitespace: nowrap">
  <thead>
    <tr>
      <th style="whitespace: nowrap">
        &nbsp;
      </th>
      <% User.shirt_sizes_detailed.keys().each do |size| %>
        <th style="whitespace: nowrap">
          <%= size %>
        </th>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="whitespace: nowrap">
        Body Width&#58;
      </td>
      <% User.shirt_sizes_detailed.each do |size, details| %>
        <td style="whitespace: nowrap">
          <%= details[:width] %>&quot;
        </td>
      <% end %>
    </tr>
    <tr>
      <td style="whitespace: nowrap">
        Body Length&#58;
      </td>
      <% User.shirt_sizes_detailed.each do |size, details| %>
        <td style="whitespace: nowrap">
          <%= details[:length] %>&quot;
        </td>
      <% end %>
    </tr>
    <tr>
      <td style="whitespace: nowrap">
        Sleeve&#58;
      </td>
      <% User.shirt_sizes_detailed.each do |size, details| %>
        <td style="whitespace: nowrap">
          <%= details[:sleeve] %>&quot;
        </td>
      <% end %>
    </tr>
  </tbody>
</table>

Becomes

<table style="border-spacing:0;border-collapse:collapse;vertical-align:top;text-align:left;width:100%;padding:0">
  <thead>
    <tr style="vertical-align:top;padding:0" align="left">
      <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
        &nbsp;
      </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0;white-space: nowrap;" align="left">
          Youth XS
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Youth S
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Youth M
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Youth L
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Adult S
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Adult M
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Adult L
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Adult XL
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Adult 2XL
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Adult 3XL
        </th>
        <th style="color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left">
          Adult 4XL
        </th>
    </tr>
  </thead>
  <tbody>
    <tr style="vertical-align:top;padding:0" align="left">
      <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
        Body Width:
      </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          16"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          17"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          18"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          19"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          18"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          20"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          22"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          24"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          26"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          28"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          30"
        </td>
    </tr>
    <tr style="vertical-align:top;padding:0" align="left">
      <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
        Body Length:
      </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          21"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          22.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          24"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          25"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          27"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          28"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          29.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          30.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          31.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          32.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          34"
        </td>
    </tr>
    <tr style="vertical-align:top;padding:0" align="left">
      <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
        Sleeve:
      </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          6"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          6.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          7"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          7.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          7.75"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          8.25"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          9"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          9.5"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          10"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          10"
        </td>
        <td style="word-wrap:break-word;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-weight:normal;line-height:1.3;font-size:16px;margin:0;padding:0" align="left" valign="top">
          10.25"
        </td>
    </tr>
  </tbody>
</table>

Notice white space is nowhere to be found in the inlined CSS

custom padding added to column is incorrectly manipulated by foundation

How can we reproduce this bug?
HTML:

<span class="new-conversation">
  <row>
    <columns class="card">
      <row>
        <!-- <columns small="1"></columns> -->
        <columns class="message-content" style="padding-left: 20px;\">
          <span>
          <%= "Hi #{@recipient.first_name}," %>

          <br /><br />

          <%= @body %>

          <br /><br />

          <button href="<%= @link %>" class="radius">
            <%= @link_text %>
          </button>
        </span>
        </columns>
      </row>
    </columns>
  </row>
</span>

SCSS:

.new-conversation {
  .message-content {
    padding: 1em;
  }
}

What did you expect to happen?
For there to be padding: 1em on th class="message-content"

What happened instead?

    width: 100%;
    color: #0a0a0a;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 1.3;
    font-size: 16px;
    margin: 0 auto;
    padding: 1em 0;

It adds a 0 after, which is a problem. I've tried multiple different combinations of padding just for fun, and they are always messed with and never come out as they were written in the scss file.

What email clients does this happen in?
rails 5.1 email preview, chrome browser.

Why not generate .inky layouts?

Attempting to use inky components like container in the slim (in my case) layouts that were generated just rendered useless tags like <container> but renaming the file to .inky let me use those components. Why not just generate .inky files for layouts?

Columns align attributes does not seem to be rendered

As specified in the inky documentation, you can add valign to a column definition to change vertical alignement, but it's not rendered as expected in the html output.

<columns small="10" large="10" align="right" valign="middle">...</columns>

is rendered to

<th class="small-10 large-10 columns last" align="left">...</th>

Allow sass variables to be used alongside inky-rb

It would be super-awesome to be able to use the foundation for emails sass variables within inky-rb.

Speed Issue on Rails

I am experiencing a pretty serious speed issue when trying to render an inky template in Rails 3.2.

It seems to be related to the use of iteration within the template:

The following takes 8 seconds to render:

  <container>
    <% 20.times do |i| %>
      <wrapper>
        <row>
          <columns small="12">
            <p>Hello</p>
          </columns>
        </row>
        <row>
          <columns small="12">
            <h1>Hi</h1>
          </columns>
        </row>
      </wrapper>
      <wrapper>
        <row>
          <columns small="12">
            <p>Bonjour</p>
          </columns>
        </row>
      </wrapper>
    <% end %>
  </container>

Whereas this takes 67ms:

  <container>
    <wrapper>
      <row>
        <columns small="12">
          <p>Hello</p>
        </columns>
      </row>
      <row>
        <columns small="12">
          <h1>Hi</h1>
        </columns>
      </row>
    </wrapper>
    <wrapper>
      <row>
        <columns small="12">
          <p>Bonjour</p>
        </columns>
      </row>
    </wrapper>
  </container>

Undefined Method in Install Generator

Hey folks, thanks for making this! Very glad to see that the day I start using this is the day after a release that now works with Heroku! Very cool.

Here's the issue I'm hitting. I'm running the rails g inky:install command and getting this exception:

(erb):7:in 'template': undefined method 'stylesheet_link_tag' for #<Inky::Generators::InstallGenerator:0x007fb79c631b80> (NoMethodError)
Did you mean? stylesheets_base_dir

I can provide a full error stack if you'd like it, but here's the last few lines (with full paths shortened for clarity):

from ~/lib/ruby/2.3.0/erb.rb:864:in `eval'
from ~/lib/ruby/2.3.0/erb.rb:864:in `result'
from ~/gems/thor-0.19.1/lib/thor/actions/file_manipulation.rb:116:in `block in template'
from ~/gems/thor-0.19.1/lib/thor/actions/create_file.rb:53:in `render'
from ~/gems/thor-0.19.1/lib/thor/actions/create_file.rb:62:in `block (2 levels) in invoke!'
from ~/gems/thor-0.19.1/lib/thor/actions/create_file.rb:62:in `open'
from ~/gems/thor-0.19.1/lib/thor/actions/create_file.rb:62:in `block in invoke!'
from ~/gems/thor-0.19.1/lib/thor/actions/empty_directory.rb:116:in `invoke_with_conflict_check'
from ~/gems/thor-0.19.1/lib/thor/actions/create_file.rb:60:in `invoke!'
from ~/gems/thor-0.19.1/lib/thor/actions.rb:94:in `action'
from ~/gems/thor-0.19.1/lib/thor/actions/create_file.rb:25:in `create_file'
from ~/gems/thor-0.19.1/lib/thor/actions/file_manipulation.rb:115:in `template'
from ~/bundler/gems/inky-rb-f22a35fc220c/lib/generators/inky/install_generator.rb:24:in `create_mailer_layout'

Here's what's happening leading up to this:

Running via Spring preloader in process 15587
      create  app/assets/stylesheets/foundation_emails.scss
      create  app/views/layouts/mailer.html.erb

The mailer.html.erb file is being created, but no content added. I think I've worked around this fine by going into your generator files and just copying out the mailer_layout template, but am curious what's causing this issue. I initially installed this gem via RubyGems, had this error, tried again using this repo and updating, but still no dice.

Thanks in advance for any help!

foundation / inky-rb Goto Github PK

inky-rb's People

Contributors

Stargazers

Watchers

Forkers

inky-rb's Issues

Recommend Projects

Recommend Topics

Recommend Org