stencil-ruby 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +109 -13
- data/bin/stencil +12 -1
- data/lib/stencil/version.rb +1 -1
- data/lib/stencil.rb +15 -6
- data/spec/build/email-welcome.html +29 -0
- data/spec/build/index.html +13 -6
- data/spec/emails/_body.liquid +1 -0
- data/spec/emails/_layout.liquid +11 -0
- data/spec/emails/welcome.liquid +13 -0
- data/spec/stencil_spec.rb +13 -2
- data/stencil-ruby-0.0.1.gem +0 -0
- metadata +11 -5
- data/index.html +0 -32
- data/spec/build/index-inline.html +0 -37
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 99b4058ec0b3dc57daa39a9d5a992733734fb0a5
|
4
|
+
data.tar.gz: 279fa3cdf8b464a3d530501bf8ee651bb6f840ef
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c672947fbaf1af0895440dd1918137540beeb2e3a0ceb9c88ac5fd73b9c71bc9e93f8bccb00d44a2f7cd2db4c4ab31cdb13289898d80f208d7c530c8e5ab3651
|
7
|
+
data.tar.gz: 1ad60f8c860145cb3393ace2f0eb324993c95ed81ec77de5b17ced33f04c6e99724a3ec4f1c0128bcf6fa661ea4e85df75c0ba19b67d2e8ea52d7a30379cd201
|
data/README.md
CHANGED
@@ -5,20 +5,121 @@ Compiler to help you get started building a new web site, web application or HTM
|
|
5
5
|
## Installation
|
6
6
|
|
7
7
|
```
|
8
|
-
gem install stencil
|
8
|
+
gem install stencil-ruby
|
9
9
|
```
|
10
10
|
|
11
|
-
|
11
|
+
## Commands
|
12
12
|
|
13
|
-
|
14
|
-
2. cd into the directory
|
15
|
-
3. Run `stencil bootstrap`
|
16
|
-
4. Run `stencil watch`
|
17
|
-
5. …
|
18
|
-
6. Count cash!
|
13
|
+
### Build
|
19
14
|
|
15
|
+
Renders HTML and CSS into the build directory
|
16
|
+
|
17
|
+
Command: `stencil build`
|
18
|
+
|
19
|
+
### Watch
|
20
|
+
|
21
|
+
Watches for changes to files and compiles them. Serves the build folder at
|
22
|
+
`http://localhost:3000/`
|
23
|
+
|
24
|
+
Command: `stencil watch`
|
25
|
+
|
26
|
+
### New
|
27
|
+
|
28
|
+
Creates a new folder with the latest version of stencil
|
29
|
+
|
30
|
+
Command: `stencil new project-name`
|
31
|
+
|
32
|
+
### Inline
|
33
|
+
|
34
|
+
Inlines the CSS in all email files in the build directory (prefixed by `email-`)
|
35
|
+
|
36
|
+
Command: `stencil inline`
|
37
|
+
|
20
38
|
Run `stencil help` for a full list of commands.
|
21
39
|
|
40
|
+
## Getting Started
|
41
|
+
|
42
|
+
#### New Project
|
43
|
+
|
44
|
+
1. Run `stencil new your-project-name`
|
45
|
+
2. Cd into your-project-name
|
46
|
+
3. Run `stencil watch`
|
47
|
+
4. …
|
48
|
+
5. Count cash!
|
49
|
+
|
50
|
+
#### Existing Project
|
51
|
+
|
52
|
+
1. Ensure you have the correct folder structure (see below)
|
53
|
+
2. Run `stencil watch`
|
54
|
+
3. …
|
55
|
+
4. Count cash!
|
56
|
+
|
57
|
+
## How it works
|
58
|
+
|
59
|
+
Stencil is created for a very specific workflow. Everything is compiled flat
|
60
|
+
into the `build` folder to allow easy transportation or deployment to almost
|
61
|
+
any environment.
|
62
|
+
|
63
|
+
### Folder Structure
|
64
|
+
|
65
|
+
```text
|
66
|
+
project
|
67
|
+
├── assets
|
68
|
+
│ ├── stylesheets
|
69
|
+
│ │ └── application.scss
|
70
|
+
│ └── javascripts
|
71
|
+
│ └── lib
|
72
|
+
│
|
73
|
+
├── build
|
74
|
+
│
|
75
|
+
├── templates
|
76
|
+
│
|
77
|
+
└── emails
|
78
|
+
```
|
79
|
+
|
80
|
+
### Assets
|
81
|
+
|
82
|
+
#### Stylesheets
|
83
|
+
|
84
|
+
Stencil looks for an `application.scss` file inside `assets/stylesheets` and
|
85
|
+
compiles this to `build/application.css`.
|
86
|
+
|
87
|
+
#### JavaScript
|
88
|
+
|
89
|
+
Stencil will combine and minify everything inside the `assets/javascripts` folder into `build/application.js`.
|
90
|
+
|
91
|
+
Sub folders will be compiled first and everything is sorted in alphabetical
|
92
|
+
order.
|
93
|
+
|
94
|
+
### Build
|
95
|
+
|
96
|
+
The build directory is where all compiled files are saved.
|
97
|
+
|
98
|
+
### Templates
|
99
|
+
|
100
|
+
Templates should include liquid files which are compiled into the `build/`
|
101
|
+
folder.
|
102
|
+
|
103
|
+
Stencil will look for a layout file at `templats/_layout.liquid` and compile
|
104
|
+
every template inside this file.
|
105
|
+
|
106
|
+
You can include liquid partials saved in the `templates` folder using the standard liquid `{% include 'file' %}` tags.
|
107
|
+
|
108
|
+
### Emails
|
109
|
+
|
110
|
+
Emails should include liquid files which are compiled into the `build/` folder.
|
111
|
+
Emails will automatically be appended with `email-` when they are compiled.
|
112
|
+
|
113
|
+
Any file in the `build` directory prefixed with `email-` will be inlined when
|
114
|
+
using the `stencil inline` command.
|
115
|
+
|
116
|
+
## Help
|
117
|
+
|
118
|
+
### Server stuck?
|
119
|
+
|
120
|
+
1. Run `lsof -wni tcp:3000`
|
121
|
+
2. Run `kill -9 PID` (where the PID is from the output above)
|
122
|
+
|
22
123
|
## Building Locally
|
23
124
|
|
24
125
|
1. Clone it
|
@@ -32,8 +133,3 @@ Run `stencil help` for a full list of commands.
|
|
32
133
|
3. Commit your changes (`git commit -am 'Add some feature'`)
|
33
134
|
4. Push to the branch (`git push origin my-new-feature`)
|
34
135
|
5. Create a new Pull Request
|
35
|
-
|
36
|
-
## Server stuck?
|
37
|
-
|
38
|
-
1. Run `lsof -wni tcp:3000`
|
39
|
-
2. Run `kill -9 PID` (where the PID is from the output above)
|
data/bin/stencil
CHANGED
@@ -23,6 +23,7 @@ def help
|
|
23
23
|
Commands:
|
24
24
|
bootstrap Create the required folders in the current directory
|
25
25
|
build Renders HTML and CSS into the build directory
|
26
|
+
new Creates a new folder with the latest version of stencil
|
26
27
|
watch Watches for changes to SCSS and Liquid files and builds them
|
27
28
|
inline Inlines the CSS in all HTML files in the build directory
|
28
29
|
help Prints this help document
|
@@ -49,7 +50,8 @@ def render_javascript
|
|
49
50
|
end
|
50
51
|
|
51
52
|
def render_liquid
|
52
|
-
puts Stencil.
|
53
|
+
puts Stencil.templates('templates/')
|
54
|
+
puts Stencil.emails('emails/')
|
53
55
|
end
|
54
56
|
|
55
57
|
def render_sass
|
@@ -100,6 +102,15 @@ when 'inline'
|
|
100
102
|
when 'build'
|
101
103
|
puts "Starting compiler!"
|
102
104
|
build
|
105
|
+
when 'new'
|
106
|
+
if ARGV[1]
|
107
|
+
system "git clone --depth=1 --branch=master git@github.com:micdijkstra/stencil.git #{ARGV[1]}"
|
108
|
+
puts "Setting up your new Stencil project…"
|
109
|
+
system "rm -rf #{ARGV[1]}/.git"
|
110
|
+
puts "… complete!"
|
111
|
+
else
|
112
|
+
puts "Please enter a directory name for your new Stencil project"
|
113
|
+
end
|
103
114
|
else
|
104
115
|
puts "`#{ARGV[0]}` command not found.\n"
|
105
116
|
puts help
|
data/lib/stencil/version.rb
CHANGED
data/lib/stencil.rb
CHANGED
@@ -55,16 +55,26 @@ module Stencil
|
|
55
55
|
end
|
56
56
|
end
|
57
57
|
|
58
|
-
def self.
|
58
|
+
def self.emails folder
|
59
|
+
self.liquid folder, 'emails/', 'build/email-'
|
60
|
+
end
|
61
|
+
|
62
|
+
def self.templates folder
|
63
|
+
self.liquid folder, 'templates', 'build'
|
64
|
+
end
|
65
|
+
|
66
|
+
def self.liquid folder, source, destination
|
59
67
|
begin
|
60
68
|
Liquid::Template.file_system = Liquid::LocalFileSystem.new(folder)
|
61
69
|
Dir.glob(folder + '*.liquid') do |path|
|
62
70
|
next if path =~ /\_/ # do not render partials
|
63
71
|
begin
|
72
|
+
layout_file = File.open(folder + '_layout.liquid').read
|
73
|
+
layout = Liquid::Template.parse(layout_file)
|
64
74
|
file = File.open(path).read
|
65
75
|
liquid = Liquid::Template.parse(file)
|
66
|
-
output_filename = path.gsub('liquid', 'html').gsub(
|
67
|
-
File.open(output_filename, 'w') { |file| file.write(liquid.render) }
|
76
|
+
output_filename = path.gsub('liquid', 'html').gsub(source, destination)
|
77
|
+
File.open(output_filename, 'w') { |file| file.write(layout.render('content_for_layout' => liquid.render)) }
|
68
78
|
rescue => e
|
69
79
|
puts "Liquid error: #{e}"
|
70
80
|
end
|
@@ -79,11 +89,10 @@ module Stencil
|
|
79
89
|
begin
|
80
90
|
Liquid::Template.file_system = Liquid::LocalFileSystem.new(folder)
|
81
91
|
Dir.glob(folder + '*.html') do |path|
|
82
|
-
next if path.include? '-inline.html'
|
83
92
|
begin
|
93
|
+
next unless path.include?('email-').inspect
|
84
94
|
premailer = Premailer.new(path, warn_level: Premailer::Warnings::SAFE)
|
85
|
-
|
86
|
-
File.open(output_filename, 'w') { |file| file.write(premailer.to_inline_css) }
|
95
|
+
File.open(path, 'w') { |file| file.write(premailer.to_inline_css) }
|
87
96
|
|
88
97
|
# Output any CSS warnings
|
89
98
|
premailer.warnings.each do |w|
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
5
|
+
<meta name="viewport" content="width=device-width" />
|
6
|
+
|
7
|
+
</head>
|
8
|
+
<body style="color: red; display: flex"><style type="text/css">
|
9
|
+
body {
|
10
|
+
color: red; display: flex;
|
11
|
+
}
|
12
|
+
</style>
|
13
|
+
<div class="preheader">The first bit of text a user will see in their email client</div>
|
14
|
+
|
15
|
+
<table class="body">
|
16
|
+
<tbody>
|
17
|
+
<tr>
|
18
|
+
<td class="center" align="center" valign="top">
|
19
|
+
|
20
|
+
<h1 style="color: black; font-weight: bold">Hello!</h1>
|
21
|
+
|
22
|
+
|
23
|
+
</td>
|
24
|
+
</tr>
|
25
|
+
</tbody>
|
26
|
+
</table>
|
27
|
+
|
28
|
+
</body>
|
29
|
+
</html>
|
data/spec/build/index.html
CHANGED
@@ -9,23 +9,30 @@
|
|
9
9
|
<meta charset="utf-8">
|
10
10
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
11
11
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
|
12
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
|
12
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
13
|
+
|
14
|
+
|
15
|
+
|
13
16
|
|
14
|
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
15
|
-
<script src="assets/modernizr.js"></script>
|
16
17
|
|
17
|
-
<link rel="stylesheet" href="./application.css" />
|
18
18
|
|
19
19
|
<!--[if lt IE 9]>
|
20
20
|
<script type="text/javascript" src="assets/respond.js"></script>
|
21
21
|
<![endif]-->
|
22
22
|
|
23
23
|
</head>
|
24
|
-
<body>
|
24
|
+
<body style="color: red; display: flex">
|
25
|
+
<style type="text/css">
|
26
|
+
body {
|
27
|
+
color: red; display: flex;
|
28
|
+
}
|
29
|
+
</style>
|
30
|
+
|
31
|
+
|
25
32
|
<div class="loader" data-loader></div>
|
26
33
|
<div class="wrapper">
|
27
34
|
<div class="main">
|
28
|
-
<h1>Hello</h1>
|
35
|
+
<h1 style="color: black; font-weight: bold">Hello</h1>
|
29
36
|
</div>
|
30
37
|
</div>
|
31
38
|
</body>
|
@@ -0,0 +1 @@
|
|
1
|
+
<h1>Hello!</h1>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
5
|
+
<meta name="viewport" content="width=device-width"/>
|
6
|
+
<link href="application.css" rel="stylesheet" />
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
{{content_for_layout}}
|
10
|
+
</body>
|
11
|
+
</html>
|
data/spec/stencil_spec.rb
CHANGED
@@ -3,20 +3,31 @@ describe Stencil do
|
|
3
3
|
it 'renders the css from a scss file' do
|
4
4
|
path = 'spec/assets/stylesheets/'
|
5
5
|
expect(Stencil.sass(path)).to eq "Sass rendered #{path}"
|
6
|
+
expect(File.open('spec/build/application.css').read).to include 'display:-webkit-flex;'
|
6
7
|
end
|
7
8
|
|
8
9
|
it 'renders the javascript' do
|
9
10
|
path = 'spec/assets/javascripts/'
|
10
11
|
expect(Stencil.javascript(path)).to eq "JavaScript rendered #{path}"
|
12
|
+
expect(File.open('spec/build/application.js').read).to include 'console.log'
|
11
13
|
end
|
12
14
|
|
13
15
|
it 'renders html from a liquid file' do
|
14
16
|
path = 'spec/templates/'
|
15
|
-
expect(Stencil.
|
17
|
+
expect(Stencil.templates(path)).to eq "Liquid rendered #{path}"
|
18
|
+
expect(File.open('spec/build/index.html').read).to include 'html'
|
16
19
|
end
|
17
20
|
|
18
|
-
it '
|
21
|
+
it 'renders html from a liquid file' do
|
22
|
+
path = 'spec/emails/'
|
23
|
+
expect(Stencil.emails(path)).to eq "Liquid rendered #{path}"
|
24
|
+
expect(File.open('spec/build/email-welcome.html').read).to include 'html'
|
25
|
+
expect(File.open('spec/build/email-welcome.html').read).to include '<h1>Hello!</h1>'
|
26
|
+
end
|
27
|
+
|
28
|
+
it 'inlines css for an email file' do
|
19
29
|
path = 'spec/build/'
|
20
30
|
expect(Stencil.inline(path)).to eq "Inline rendered #{path}"
|
31
|
+
expect(File.open('spec/build/email-welcome.html').read).to include '<h1 style="color: black; font-weight: bold">Hello!</h1>'
|
21
32
|
end
|
22
33
|
end
|
Binary file
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: stencil-ruby
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Michael Dijkstra
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-09-
|
11
|
+
date: 2015-09-30 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sassc
|
@@ -193,7 +193,6 @@ files:
|
|
193
193
|
- README.md
|
194
194
|
- Rakefile
|
195
195
|
- bin/stencil
|
196
|
-
- index.html
|
197
196
|
- lib/stencil.rb
|
198
197
|
- lib/stencil/version.rb
|
199
198
|
- spec/assets/javascripts/lib/library.js
|
@@ -201,12 +200,16 @@ files:
|
|
201
200
|
- spec/assets/stylesheets/application.scss
|
202
201
|
- spec/build/application.css
|
203
202
|
- spec/build/application.js
|
204
|
-
- spec/build/
|
203
|
+
- spec/build/email-welcome.html
|
205
204
|
- spec/build/index.html
|
205
|
+
- spec/emails/_body.liquid
|
206
|
+
- spec/emails/_layout.liquid
|
207
|
+
- spec/emails/welcome.liquid
|
206
208
|
- spec/spec_helper.rb
|
207
209
|
- spec/stencil_spec.rb
|
208
210
|
- spec/templates/_head.liquid
|
209
211
|
- spec/templates/index.liquid
|
212
|
+
- stencil-ruby-0.0.1.gem
|
210
213
|
- stencil.gemspec
|
211
214
|
homepage: https://github.com/xxix/stencil-ruby
|
212
215
|
licenses:
|
@@ -238,8 +241,11 @@ test_files:
|
|
238
241
|
- spec/assets/stylesheets/application.scss
|
239
242
|
- spec/build/application.css
|
240
243
|
- spec/build/application.js
|
241
|
-
- spec/build/
|
244
|
+
- spec/build/email-welcome.html
|
242
245
|
- spec/build/index.html
|
246
|
+
- spec/emails/_body.liquid
|
247
|
+
- spec/emails/_layout.liquid
|
248
|
+
- spec/emails/welcome.liquid
|
243
249
|
- spec/spec_helper.rb
|
244
250
|
- spec/stencil_spec.rb
|
245
251
|
- spec/templates/_head.liquid
|
data/index.html
DELETED
@@ -1,32 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en" class="no-js">
|
3
|
-
<head>
|
4
|
-
<title></title>
|
5
|
-
|
6
|
-
<meta name="author" content="">
|
7
|
-
<meta name="description" content="">
|
8
|
-
|
9
|
-
<meta charset="utf-8">
|
10
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
11
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
|
12
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
13
|
-
|
14
|
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
15
|
-
<script src="assets/modernizr.js"></script>
|
16
|
-
|
17
|
-
<link rel="stylesheet" href="assets/application.css" />
|
18
|
-
|
19
|
-
<!--[if lt IE 9]>
|
20
|
-
<script type="text/javascript" src="assets/respond.js"></script>
|
21
|
-
<![endif]-->
|
22
|
-
|
23
|
-
</head>
|
24
|
-
<body>
|
25
|
-
<div class="loader" data-loader></div>
|
26
|
-
<div class="wrapper">
|
27
|
-
<div class="main">
|
28
|
-
<h1>Hello</h1>
|
29
|
-
</div>
|
30
|
-
</div>
|
31
|
-
</body>
|
32
|
-
</html>
|
@@ -1,37 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en" class="no-js">
|
3
|
-
<head>
|
4
|
-
<title></title>
|
5
|
-
|
6
|
-
<meta name="author" content="">
|
7
|
-
<meta name="description" content="">
|
8
|
-
|
9
|
-
<meta charset="utf-8">
|
10
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
11
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
|
12
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
<!--[if lt IE 9]>
|
20
|
-
<script type="text/javascript" src="assets/respond.js"></script>
|
21
|
-
<![endif]-->
|
22
|
-
|
23
|
-
</head>
|
24
|
-
<body style="color: red; display: flex">
|
25
|
-
<style type="text/css">
|
26
|
-
body {
|
27
|
-
color: red; display: flex;
|
28
|
-
}
|
29
|
-
</style>
|
30
|
-
<div class="loader" data-loader></div>
|
31
|
-
<div class="wrapper">
|
32
|
-
<div class="main">
|
33
|
-
<h1 style="color: black; font-weight: bold">Hello</h1>
|
34
|
-
</div>
|
35
|
-
</div>
|
36
|
-
</body>
|
37
|
-
</html>
|