stencil-ruby 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: db67f26986ba2c450086e9fec38d926df4d038fe
-  data.tar.gz: eae3748f96210ff2bf87eaadfbd93bd482f534fe
+  metadata.gz: 99b4058ec0b3dc57daa39a9d5a992733734fb0a5
+  data.tar.gz: 279fa3cdf8b464a3d530501bf8ee651bb6f840ef
 SHA512:
-  metadata.gz: 2f87b8ad8d76cb8c3cb7164cdf3af42c92b110f4e4415b1d87c9838297c462fba9e40a8a77d7365076287e31c97696523bb7ef0d301dd5ecb48532ca7b40df04
-  data.tar.gz: 294cb0e80339d9b03fd098951646fbae5fee4c9c8e30444e3cb6d9eeb334a5037e78c716399ac325ebbd85406a7f6d4aa75daf3fe4147062fdfff0d1a700bfec
+  metadata.gz: c672947fbaf1af0895440dd1918137540beeb2e3a0ceb9c88ac5fd73b9c71bc9e93f8bccb00d44a2f7cd2db4c4ab31cdb13289898d80f208d7c530c8e5ab3651
+  data.tar.gz: 1ad60f8c860145cb3393ace2f0eb324993c95ed81ec77de5b17ced33f04c6e99724a3ec4f1c0128bcf6fa661ea4e85df75c0ba19b67d2e8ea52d7a30379cd201

data/README.md

@@ -5,20 +5,121 @@ Compiler to help you get started building a new web site, web application or HTM
 ## Installation
 
 ```
-gem install stencil
+gem install stencil-ruby
 ```
 
-### Usage
+## Commands
 
-1. Download the latest version of [Stencil](https://github.com/micdijkstra/stencil)
-2. cd into the directory
-3. Run `stencil bootstrap`
-4. Run `stencil watch`
-5. …
-6. Count cash!
+### Build
 
+Renders HTML and CSS into the build directory
+ 
+Command: `stencil build`
+
+### Watch
+
+Watches for changes to files and compiles them. Serves the build folder at
+`http://localhost:3000/`
+ 
+Command: `stencil watch`
+
+### New
+
+Creates a new folder with the latest version of stencil
+ 
+Command: `stencil new project-name`
+
+### Inline
+
+Inlines the CSS in all email files in the build directory (prefixed by `email-`)
+ 
+Command: `stencil inline`
+ 
 Run `stencil help` for a full list of commands.
 
+## Getting Started
+
+#### New Project
+
+1. Run `stencil new your-project-name`
+2. Cd into your-project-name
+3. Run `stencil watch`
+4. …
+5. Count cash!
+
+#### Existing Project
+
+1. Ensure you have the correct folder structure (see below)
+2. Run `stencil watch`
+3. …
+4. Count cash!
+
+## How it works
+
+Stencil is created for a very specific workflow. Everything is compiled flat
+into the `build` folder to allow easy transportation or deployment to almost
+any environment.
+
+### Folder Structure
+
+```text
+project
+├── assets
+│   ├── stylesheets
+│   │ └── application.scss
+│   └── javascripts
+│     └── lib
+│
+├── build
+│
+├── templates
+│
+└── emails
+```
+
+### Assets
+
+#### Stylesheets
+
+Stencil looks for an `application.scss` file inside `assets/stylesheets` and
+compiles this to `build/application.css`.
+
+#### JavaScript
+
+Stencil will combine and minify everything inside the `assets/javascripts` folder into `build/application.js`.
+ 
+Sub folders will be compiled first and everything is sorted in alphabetical
+order.
+
+### Build
+
+The build directory is where all compiled files are saved.
+
+### Templates
+
+Templates should include liquid files which are compiled into the `build/`
+folder.
+ 
+Stencil will look for a layout file at `templats/_layout.liquid` and compile
+every template inside this file.
+ 
+You can include liquid partials saved in the `templates` folder using the standard liquid `{% include 'file' %}` tags.
+
+### Emails
+
+Emails should include liquid files which are compiled into the `build/` folder.
+Emails will automatically be appended with `email-` when they are compiled.
+ 
+Any file in the `build` directory prefixed with `email-` will be inlined when
+using the `stencil inline` command.
+
+## Help
+
+### Server stuck?
+
+1. Run `lsof -wni tcp:3000`
+2. Run `kill -9 PID` (where the PID is from the output above)
+
 ## Building Locally
 
 1. Clone it
@@ -32,8 +133,3 @@ Run `stencil help` for a full list of commands.
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create a new Pull Request
-
-## Server stuck?
-
-1. Run `lsof -wni tcp:3000`
-2. Run `kill -9 PID` (where the PID is from the output above)

data/bin/stencil

@@ -23,6 +23,7 @@ def help
   Commands:
     bootstrap           Create the required folders in the current directory
     build               Renders HTML and CSS into the build directory
+    new                 Creates a new folder with the latest version of stencil
     watch               Watches for changes to SCSS and Liquid files and builds them
     inline              Inlines the CSS in all HTML files in the build directory
     help                Prints this help document
@@ -49,7 +50,8 @@ def render_javascript
 end
 
 def render_liquid
-  puts Stencil.liquid('templates/')
+  puts Stencil.templates('templates/')
+  puts Stencil.emails('emails/')
 end
 
 def render_sass
@@ -100,6 +102,15 @@ when 'inline'
 when 'build'
   puts "Starting compiler!"
   build
+when 'new'
+  if ARGV[1]
+    system "git clone --depth=1 --branch=master git@github.com:micdijkstra/stencil.git #{ARGV[1]}"
+    puts "Setting up your new Stencil project…"
+    system "rm -rf #{ARGV[1]}/.git"
+    puts "… complete!"
+  else
+    puts "Please enter a directory name for your new Stencil project"
+  end
 else
   puts "`#{ARGV[0]}` command not found.\n"
   puts help

data/lib/stencil/version.rb

@@ -1,3 +1,3 @@
 module Stencil
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/lib/stencil.rb

@@ -55,16 +55,26 @@ module Stencil
     end
   end
 
-  def self.liquid folder
+  def self.emails folder
+    self.liquid folder, 'emails/', 'build/email-'
+  end
+
+  def self.templates folder
+    self.liquid folder, 'templates', 'build'
+  end
+
+  def self.liquid folder, source, destination
     begin
       Liquid::Template.file_system = Liquid::LocalFileSystem.new(folder)
       Dir.glob(folder + '*.liquid') do |path|
         next if path =~ /\_/ # do not render partials
         begin
+          layout_file = File.open(folder + '_layout.liquid').read
+          layout = Liquid::Template.parse(layout_file)
           file = File.open(path).read
           liquid = Liquid::Template.parse(file)
-          output_filename = path.gsub('liquid', 'html').gsub('templates', 'build')
-          File.open(output_filename, 'w') { |file| file.write(liquid.render) }
+          output_filename = path.gsub('liquid', 'html').gsub(source, destination)
+          File.open(output_filename, 'w') { |file| file.write(layout.render('content_for_layout' => liquid.render)) }
         rescue => e
           puts "Liquid error: #{e}"
         end
@@ -79,11 +89,10 @@ module Stencil
     begin
       Liquid::Template.file_system = Liquid::LocalFileSystem.new(folder)
       Dir.glob(folder + '*.html') do |path|
-        next if path.include? '-inline.html'
         begin
+          next unless path.include?('email-').inspect
           premailer = Premailer.new(path, warn_level: Premailer::Warnings::SAFE)
-          output_filename = path.gsub('.html', '-inline.html')
-          File.open(output_filename, 'w') { |file| file.write(premailer.to_inline_css) }
+          File.open(path, 'w') { |file| file.write(premailer.to_inline_css) }
 
           # Output any CSS warnings
           premailer.warnings.each do |w|

data/spec/build/email-welcome.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    
+  </head>
+  <body style="color: red; display: flex"><style type="text/css">
+body {
+color: red; display: flex;
+}
+</style>
+    <div class="preheader">The first bit of text a user will see in their email client</div>
+
+<table class="body">
+  <tbody>
+    <tr>
+      <td class="center" align="center" valign="top">
+
+        <h1 style="color: black; font-weight: bold">Hello!</h1>
+
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  </body>
+</html>

data/spec/build/index.html

@@ -9,23 +9,30 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+
+
 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-<script src="assets/modernizr.js"></script>
 
-<link rel="stylesheet" href="./application.css" />
 
 <!--[if lt IE 9]>
   <script type="text/javascript" src="assets/respond.js"></script>
 <![endif]-->
 
   </head>
-  <body>
+  <body style="color: red; display: flex">
+<style type="text/css">
+body {
+color: red; display: flex;
+}
+</style>
+
+
     <div class="loader" data-loader></div>
     <div class="wrapper">
       <div class="main">
-        <h1>Hello</h1>
+        <h1 style="color: black; font-weight: bold">Hello</h1>
       </div>
     </div>
   </body>

data/spec/emails/_body.liquid

@@ -0,0 +1 @@
+<h1>Hello!</h1>

data/spec/emails/_layout.liquid

@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width"/>
+    <link href="application.css" rel="stylesheet" />
+  </head>
+  <body>
+    {{content_for_layout}}
+  </body>
+</html>

data/spec/emails/welcome.liquid

@@ -0,0 +1,13 @@
+<div class="preheader">The first bit of text a user will see in their email client</div>
+
+<table class="body">
+  <tbody>
+    <tr>
+      <td class="center" align="center" valign="top">
+
+        {% include 'body' %}
+
+      </td>
+    </tr>
+  </tbody>
+</table>

data/spec/stencil_spec.rb

@@ -3,20 +3,31 @@ describe Stencil do
   it 'renders the css from a scss file' do
     path = 'spec/assets/stylesheets/'
     expect(Stencil.sass(path)).to eq "Sass rendered #{path}"
+    expect(File.open('spec/build/application.css').read).to include 'display:-webkit-flex;'
   end
 
   it 'renders the javascript' do
     path = 'spec/assets/javascripts/'
     expect(Stencil.javascript(path)).to eq "JavaScript rendered #{path}"
+    expect(File.open('spec/build/application.js').read).to include 'console.log'
   end
 
   it 'renders html from a liquid file' do
     path = 'spec/templates/'
-    expect(Stencil.liquid(path)).to eq "Liquid rendered #{path}"
+    expect(Stencil.templates(path)).to eq "Liquid rendered #{path}"
+    expect(File.open('spec/build/index.html').read).to include 'html'
   end
 
-  it 'inlines css for an index file' do
+  it 'renders html from a liquid file' do
+    path = 'spec/emails/'
+    expect(Stencil.emails(path)).to eq "Liquid rendered #{path}"
+    expect(File.open('spec/build/email-welcome.html').read).to include 'html'
+    expect(File.open('spec/build/email-welcome.html').read).to include '<h1>Hello!</h1>'
+  end
+
+  it 'inlines css for an email file' do
     path = 'spec/build/'
     expect(Stencil.inline(path)).to eq "Inline rendered #{path}"
+    expect(File.open('spec/build/email-welcome.html').read).to include '<h1 style="color: black; font-weight: bold">Hello!</h1>'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: stencil-ruby
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Michael Dijkstra
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-25 00:00:00.000000000 Z
+date: 2015-09-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -193,7 +193,6 @@ files:
 - README.md
 - Rakefile
 - bin/stencil
-- index.html
 - lib/stencil.rb
 - lib/stencil/version.rb
 - spec/assets/javascripts/lib/library.js
@@ -201,12 +200,16 @@ files:
 - spec/assets/stylesheets/application.scss
 - spec/build/application.css
 - spec/build/application.js
-- spec/build/index-inline.html
+- spec/build/email-welcome.html
 - spec/build/index.html
+- spec/emails/_body.liquid
+- spec/emails/_layout.liquid
+- spec/emails/welcome.liquid
 - spec/spec_helper.rb
 - spec/stencil_spec.rb
 - spec/templates/_head.liquid
 - spec/templates/index.liquid
+- stencil-ruby-0.0.1.gem
 - stencil.gemspec
 homepage: https://github.com/xxix/stencil-ruby
 licenses:
@@ -238,8 +241,11 @@ test_files:
 - spec/assets/stylesheets/application.scss
 - spec/build/application.css
 - spec/build/application.js
-- spec/build/index-inline.html
+- spec/build/email-welcome.html
 - spec/build/index.html
+- spec/emails/_body.liquid
+- spec/emails/_layout.liquid
+- spec/emails/welcome.liquid
 - spec/spec_helper.rb
 - spec/stencil_spec.rb
 - spec/templates/_head.liquid

data/index.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
-  <head>
-    <title></title>
-
-<meta name="author" content="">
-<meta name="description" content="">
-
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-<script src="assets/modernizr.js"></script>
-
-<link rel="stylesheet" href="assets/application.css" />
-
-<!--[if lt IE 9]>
-  <script type="text/javascript" src="assets/respond.js"></script>
-<![endif]-->
-
-  </head>
-  <body>
-    <div class="loader" data-loader></div>
-    <div class="wrapper">
-      <div class="main">
-        <h1>Hello</h1>
-      </div>
-    </div>
-  </body>
-</html>

data/spec/build/index-inline.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
-  <head>
-    <title></title>
-
-<meta name="author" content="">
-<meta name="description" content="">
-
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
-
-
-
-
-
-<!--[if lt IE 9]>
-  <script type="text/javascript" src="assets/respond.js"></script>
-<![endif]-->
-
-  </head>
-  <body style="color: red; display: flex">
-<style type="text/css">
-body {
-color: red; display: flex;
-}
-</style>
-    <div class="loader" data-loader></div>
-    <div class="wrapper">
-      <div class="main">
-        <h1 style="color: black; font-weight: bold">Hello</h1>
-      </div>
-    </div>
-  </body>
-</html>