pieces 0.5.1 → 0.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +27 -115
- data/docs/README.md +36 -0
- data/{CODE_OF_CONDUCT.md → docs/code_of_conduct.md} +0 -0
- data/docs/contributing.md +7 -0
- data/{LICENSE.txt → docs/license.md} +0 -0
- data/docs/pieces.yml.md +186 -0
- data/examples/README.md +18 -0
- data/examples/babel/Gemfile +7 -0
- data/examples/babel/app/assets/javascripts/app.js +4 -0
- data/examples/babel/app/assets/javascripts/components/article.es6 +18 -0
- data/examples/babel/app/assets/javascripts/lazy.js +11 -0
- data/examples/babel/app/assets/manifest.js +9 -0
- data/examples/babel/app/assets/stylesheets/components/articles/article.scss +10 -0
- data/examples/babel/app/assets/stylesheets/components/articles/articles_introduction.scss +5 -0
- data/examples/babel/app/assets/stylesheets/components/branding.scss +3 -0
- data/examples/babel/app/assets/stylesheets/components/footer.scss +3 -0
- data/examples/babel/app/assets/stylesheets/components/html.scss +5 -0
- data/examples/babel/app/assets/stylesheets/components/page.scss +15 -0
- data/examples/babel/app/assets/stylesheets/critical.scss +4 -0
- data/examples/babel/app/assets/stylesheets/lazy.scss +1 -0
- data/examples/babel/app/views/application/branding.html.erb +3 -0
- data/examples/babel/app/views/application/footer.html.erb +3 -0
- data/examples/babel/app/views/application/header.html.erb +3 -0
- data/examples/babel/app/views/articles/article.html.erb +9 -0
- data/examples/babel/app/views/articles/articles_introduction.html.erb +4 -0
- data/examples/babel/app/views/layouts/pieces.html.erb +27 -0
- data/examples/babel/config/pieces.yml +24 -0
- data/examples/babel/vendor/assets/javascripts/load_css.js +52 -0
- data/examples/babel/vendor/assets/javascripts/webfontloader.js +16 -0
- data/examples/rails_app/config/routes.rb +1 -1
- data/lib/pieces.rb +9 -0
- data/lib/pieces/app.rb +50 -0
- data/lib/pieces/builder.rb +12 -6
- data/lib/pieces/cli.rb +2 -5
- data/lib/pieces/config.rb +6 -5
- data/lib/pieces/rails.rb +5 -4
- data/lib/pieces/rails/install_generator.rb +1 -1
- data/lib/pieces/route_compiler.rb +10 -7
- data/lib/pieces/server.rb +17 -10
- data/lib/pieces/version.rb +1 -1
- data/pieces.gemspec +0 -1
- metadata +31 -20
- data/lib/pieces/backtrace_formatter.rb +0 -21
- data/lib/pieces/listener.rb +0 -50
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fa215e433ea7bd0333f955d366a8b1302b8d68e0
|
4
|
+
data.tar.gz: de0568280564ce3d334dee9e22e4b4a56366b2e2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c6502d0e96b060454f0d9397b6679833fd5d79240ec8f7394d5252d8ec789b4622cf5b3a56357c7649ab346af9eec6c257952da6fab718c0131385377644c90d
|
7
|
+
data.tar.gz: 22d2a095c956b4cf4e9d816e524350a6b5f592850b8e00f84471b4549b8306531fa80a347cb43b0c354cd5ba28ab06b9561e17fb8f431e0845c0777d3275890d
|
data/README.md
CHANGED
@@ -6,14 +6,15 @@
|
|
6
6
|
[![Test Coverage](https://codeclimate.com/github/drpheltright/pieces/badges/coverage.svg)](https://codeclimate.com/github/drpheltright/pieces/coverage)
|
7
7
|
|
8
8
|
Pieces is a gem that will take your HTML and CSS components and compile them
|
9
|
-
into a static site or styleguide.
|
9
|
+
into a static site or styleguide. It can work with or without rails.
|
10
10
|
|
11
11
|
- <h5>Build static sites and blogs</h5>
|
12
12
|
- <h5>Produce styleguides for your rails applications</h5>
|
13
13
|
- <h5>Mock up designs</h5>
|
14
14
|
|
15
|
-
|
16
|
-
|
15
|
+
Define the view of your application with reusable components. Even your layout
|
16
|
+
is just another component. Use Pieces to pull together these components into
|
17
|
+
websites, styleguides and mock ups.
|
17
18
|
|
18
19
|
## Welcome early adopters
|
19
20
|
|
@@ -22,6 +23,21 @@ or next project. Obviously it's new and changing but I adhere very closely
|
|
22
23
|
to semantic versioning and your styleguide should be a safe place to try
|
23
24
|
new things. Thanks in advance, Luke.
|
24
25
|
|
26
|
+
## Table of Contents
|
27
|
+
|
28
|
+
- [Installation](#installation)
|
29
|
+
- [How does Pieces work?](#how-it-works)
|
30
|
+
- [Create a UI styleguide for rails](#using-with-rails)
|
31
|
+
- [Create a static site](#create-static-site)
|
32
|
+
|
33
|
+
**Other links**
|
34
|
+
|
35
|
+
- [Documentation](https://github.com/drpheltright/pieces/tree/master/docs)
|
36
|
+
- [Examples](https://github.com/drpheltright/pieces/tree/master/examples)
|
37
|
+
- [Code of Conduct](https://github.com/drpheltright/pieces/blob/master/docs/code_of_conduct.md)
|
38
|
+
- [Contributing](https://github.com/drpheltright/pieces/blob/master/docs/contributing.md)
|
39
|
+
- [MIT License](https://github.com/drpheltright/pieces/blob/master/docs/license.md)
|
40
|
+
|
25
41
|
## Installation
|
26
42
|
|
27
43
|
If installing Pieces into a rails app, add it to your Gemfile:
|
@@ -36,7 +52,7 @@ If building a standalone site, install globally:
|
|
36
52
|
gem install pieces
|
37
53
|
```
|
38
54
|
|
39
|
-
##
|
55
|
+
## How it works
|
40
56
|
|
41
57
|
Let's start by defining some "pieces", or components, or views as they are
|
42
58
|
better known in the rails world. You'll notice Pieces looks for files in the
|
@@ -120,9 +136,13 @@ pieces server
|
|
120
136
|
Now visit [http://localhost:8080](http://localhost:8080) to see your site! If
|
121
137
|
you change your `config/pieces.yml` or views they will be reflected on the site.
|
122
138
|
|
123
|
-
##
|
139
|
+
## Using with rails
|
124
140
|
|
125
|
-
|
141
|
+
Want to create a styleguide or UI design pattern library for your rails app? If
|
142
|
+
so you're in the right place. Styleguides pull together reusable components
|
143
|
+
into micro site that documents how and when to use them.
|
144
|
+
|
145
|
+
To get started ensure you have added Pieces to your application's `Gemfile`:
|
126
146
|
|
127
147
|
``` ruby
|
128
148
|
gem 'pieces'
|
@@ -163,18 +183,7 @@ bundle exec pieces s
|
|
163
183
|
|
164
184
|
And then visit [http://localhost:8080](http://localhost:8080)
|
165
185
|
|
166
|
-
|
167
|
-
|
168
|
-
If you do you should update Pieces::Rails in your `config/routes.rb` as follows:
|
169
|
-
|
170
|
-
``` ruby
|
171
|
-
mount Pieces::Rails.mount(force_polling: true), at: '/styleguide' unless Rails.env.production?
|
172
|
-
```
|
173
|
-
|
174
|
-
This will tell `listen`, the gem that watches for changes, to poll your app
|
175
|
-
for changes. This is required for vagrant!
|
176
|
-
|
177
|
-
## Create new static site
|
186
|
+
## Create static site
|
178
187
|
|
179
188
|
To create a new static site with Pieces:
|
180
189
|
|
@@ -207,100 +216,3 @@ pieces server
|
|
207
216
|
|
208
217
|
Now visit [http://localhost:8080](http://localhost:8080) in your browser.
|
209
218
|
|
210
|
-
## Configuration
|
211
|
-
|
212
|
-
Using configuration found in `config/pieces.yml` Pieces' will compile your
|
213
|
-
modular components ala BEM (or whatever you prefer) into a static HTML site.
|
214
|
-
|
215
|
-
At the top level of your `pieces.yml` you define your output files, or "routes".
|
216
|
-
The following example will build both `index.html` and `about.html`.
|
217
|
-
|
218
|
-
``` yml
|
219
|
-
index:
|
220
|
-
_pieces:
|
221
|
-
- intro: { title: 'Welcome to my site' }
|
222
|
-
|
223
|
-
about:
|
224
|
-
_pieces:
|
225
|
-
- intro: { title: 'About me' }
|
226
|
-
```
|
227
|
-
|
228
|
-
Both `index.html` and `about.html` make use of a piece called "intro". This
|
229
|
-
piece will be found in either `app/views/intro.html.*`,
|
230
|
-
`app/views/intro/intro.html.*` or `app/views/application/intro.html.*`. The `*`
|
231
|
-
can be any format supported by [tilt](https://github.com/rtomayko/tilt).
|
232
|
-
|
233
|
-
You can generate your HTML into directories quite easily:
|
234
|
-
|
235
|
-
``` yml
|
236
|
-
portfolio/a-client:
|
237
|
-
_pieces:
|
238
|
-
- carousel: {}
|
239
|
-
- case_study: {}
|
240
|
-
portfolio/another-client:
|
241
|
-
_pieces:
|
242
|
-
- carousel: {}
|
243
|
-
- case_study: {}
|
244
|
-
```
|
245
|
-
|
246
|
-
Likewise you can structure your components in directories:
|
247
|
-
|
248
|
-
``` yml
|
249
|
-
about:
|
250
|
-
_pieces:
|
251
|
-
- header: {}
|
252
|
-
- copy/intro: {}
|
253
|
-
- galleries/photo: {}
|
254
|
-
- footer: {}
|
255
|
-
```
|
256
|
-
|
257
|
-
"copy/intro" and "galleries/photo" will be found in
|
258
|
-
`app/views/copy/intro.html.*` and `app/views/galleries/photo.html.*`
|
259
|
-
respectively.
|
260
|
-
|
261
|
-
You can place your content in a layout quite easily with nested pieces.
|
262
|
-
|
263
|
-
``` yml
|
264
|
-
about:
|
265
|
-
_pieces:
|
266
|
-
- layouts/pieces:
|
267
|
-
_pieces:
|
268
|
-
- header: {}
|
269
|
-
- copy/intro: {}
|
270
|
-
- galleries/photo: {}
|
271
|
-
- footer: {}
|
272
|
-
```
|
273
|
-
|
274
|
-
The child pieces will be rendered in order and passed into the parent
|
275
|
-
"layouts/application" piece as `yield`. If you had
|
276
|
-
`app/views/layouts/pieces.html.erb` then you can call yield like so:
|
277
|
-
|
278
|
-
``` erb
|
279
|
-
<html>
|
280
|
-
<body>
|
281
|
-
<%= yield %>
|
282
|
-
</body>
|
283
|
-
</html>
|
284
|
-
```
|
285
|
-
|
286
|
-
## More Examples
|
287
|
-
|
288
|
-
- [Original example][original] using .erb and .mustache (liek wtf!)
|
289
|
-
- [Boilerplate example][boilerplate] used by `pieces init`
|
290
|
-
- [Rails example][rails] using Pieces as a styleguide
|
291
|
-
|
292
|
-
[original]: https://github.com/drpheltright/pieces/tree/master/examples/original
|
293
|
-
[boilerplate]: https://github.com/drpheltright/pieces/tree/master/examples/boilerplate
|
294
|
-
[rails]: https://github.com/drpheltright/pieces/tree/master/examples/rails
|
295
|
-
|
296
|
-
## Contributing
|
297
|
-
|
298
|
-
1. Fork it ( https://github.com/drpheltright/pieces/fork )
|
299
|
-
2. Create your feature branch (`git checkout -b my-new-feature`)
|
300
|
-
3. Commit your changes (`git commit -am 'Add some feature'`)
|
301
|
-
4. Push to the branch (`git push origin my-new-feature`)
|
302
|
-
5. Create a new Pull Request
|
303
|
-
|
304
|
-
## Author
|
305
|
-
|
306
|
-
Luke Morton (again)
|
data/docs/README.md
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
# Pieces Documentation
|
2
|
+
|
3
|
+
We're trying to make Pieces easy to understand. Let us know via an [issue][issue]
|
4
|
+
if you can't find the information you are looking for here.
|
5
|
+
|
6
|
+
## Getting started
|
7
|
+
|
8
|
+
The [README][README] contains information for getting started with pieces:
|
9
|
+
|
10
|
+
- [Installation](https://github.com/drpheltright/pieces/blob/master/README.md#installation)
|
11
|
+
- [How does Pieces work?](https://github.com/drpheltright/pieces/blob/master/README.md#how-it-works)
|
12
|
+
- [Create a UI styleguide for rails](https://github.com/drpheltright/pieces/blob/master/README.md#using-with-rails)
|
13
|
+
- [Create a static site](https://github.com/drpheltright/pieces/blob/master/README.md#create-static-site)
|
14
|
+
|
15
|
+
## Documentation
|
16
|
+
|
17
|
+
For documentation and howtos look no further:
|
18
|
+
|
19
|
+
- [pieces.yml](https://github.com/drpheltright/pieces/blob/master/docs/pieces.yml.md) (you really ought to read this)
|
20
|
+
|
21
|
+
## Working with Pieces
|
22
|
+
|
23
|
+
If you want to work with Pieces in your own project you should probably have a
|
24
|
+
look at these links:
|
25
|
+
|
26
|
+
- [Code of Conduct](https://github.com/drpheltright/pieces/blob/master/docs/code_of_conduct.md)
|
27
|
+
- [Contributing](https://github.com/drpheltright/pieces/blob/master/docs/contributing.md)
|
28
|
+
- [MIT License](https://github.com/drpheltright/pieces/blob/master/docs/license.md)
|
29
|
+
|
30
|
+
## Help
|
31
|
+
|
32
|
+
Find help and more in the Pieces [README][README] or [raise an issue][issue] on
|
33
|
+
github.
|
34
|
+
|
35
|
+
[README]: https://github.com/drpheltright/pieces/blob/master/README.md
|
36
|
+
[issue]: https://github.com/drpheltright/pieces/issues
|
File without changes
|
@@ -0,0 +1,7 @@
|
|
1
|
+
# Contributing
|
2
|
+
|
3
|
+
1. Fork it ( https://github.com/drpheltright/pieces/fork )
|
4
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
5
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
6
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
7
|
+
5. Create a new Pull Request
|
File without changes
|
data/docs/pieces.yml.md
ADDED
@@ -0,0 +1,186 @@
|
|
1
|
+
# `pieces.yml`
|
2
|
+
|
3
|
+
In order to pull together your reusable UI components into web pages we use
|
4
|
+
`config/pieces.yml`. This file defines the pages of your site, what components
|
5
|
+
that page is made up of, the data passed into your components,
|
6
|
+
along with meta data such as where to publish your site or styleguide.
|
7
|
+
|
8
|
+
## Table of Contents
|
9
|
+
|
10
|
+
- [Defining pages](#defining-pages)
|
11
|
+
- [Components](#components)
|
12
|
+
- [Data](#data)
|
13
|
+
- [Global data](#global-data)
|
14
|
+
- [Publishing to GitHub pages](#publishing-to-github-pages)
|
15
|
+
|
16
|
+
## Defining pages
|
17
|
+
|
18
|
+
At the top level of your `pieces.yml` you define your pages. The following
|
19
|
+
example will build `index.html` and `about.html`.
|
20
|
+
|
21
|
+
``` yml
|
22
|
+
index: # <-- index.html page
|
23
|
+
_pieces:
|
24
|
+
- intro: {}
|
25
|
+
|
26
|
+
about: # <-- about.html page
|
27
|
+
_pieces:
|
28
|
+
- intro: {}
|
29
|
+
```
|
30
|
+
|
31
|
+
Both `index.html` and `about.html` make use of a component called "intro". We'll
|
32
|
+
get onto components in a minute.
|
33
|
+
|
34
|
+
### Structuring pages in directories
|
35
|
+
|
36
|
+
You can generate your HTML into directories quite easily:
|
37
|
+
|
38
|
+
``` yml
|
39
|
+
portfolio/a-client: # <-- portfolio/a-client.html
|
40
|
+
_pieces:
|
41
|
+
- carousel: {}
|
42
|
+
- case_study: {}
|
43
|
+
portfolio/another-client: # <-- portfolio/another-client.html
|
44
|
+
_pieces:
|
45
|
+
- carousel: {}
|
46
|
+
- case_study: {}
|
47
|
+
```
|
48
|
+
|
49
|
+
## Components
|
50
|
+
|
51
|
+
All your reusable components can be assembled and nested within one another.
|
52
|
+
Under your page, you define which components or "pieces" under the `_pieces`
|
53
|
+
key.
|
54
|
+
|
55
|
+
``` yml
|
56
|
+
index:
|
57
|
+
_pieces:
|
58
|
+
- intro: {} # <-- intro component
|
59
|
+
```
|
60
|
+
|
61
|
+
The example above references an "intro" component. This piece will be found in
|
62
|
+
one of the following locations:
|
63
|
+
|
64
|
+
- `app/views/intro.html.*`
|
65
|
+
- `app/views/intro/intro.html.*`
|
66
|
+
- `app/views/application/intro.html.*`
|
67
|
+
|
68
|
+
The `*` can be any format supported by [tilt](https://github.com/rtomayko/tilt).
|
69
|
+
|
70
|
+
### Structuring components in directories
|
71
|
+
|
72
|
+
You can specify a full path to your component which will often be the case. This
|
73
|
+
allows you to categories your components.
|
74
|
+
|
75
|
+
``` yml
|
76
|
+
about:
|
77
|
+
_pieces:
|
78
|
+
- header: {}
|
79
|
+
- copy/intro: {} # <-- component in directory
|
80
|
+
- galleries/photo: {} # <-- component in directory
|
81
|
+
- footer: {}
|
82
|
+
```
|
83
|
+
|
84
|
+
"copy/intro" and "galleries/photo" will be found in
|
85
|
+
`app/views/copy/intro.html.*` and `app/views/galleries/photo.html.*`
|
86
|
+
respectively.
|
87
|
+
|
88
|
+
### Nesting components
|
89
|
+
|
90
|
+
You can place your content in a layout quite easily with nested pieces.
|
91
|
+
|
92
|
+
``` yml
|
93
|
+
about:
|
94
|
+
_pieces:
|
95
|
+
- layouts/pieces:
|
96
|
+
_pieces: # <-- nested within layouts/pieces
|
97
|
+
- header: {}
|
98
|
+
- copy/intro: {}
|
99
|
+
- galleries/photo: {}
|
100
|
+
- footer: {}
|
101
|
+
```
|
102
|
+
|
103
|
+
The child pieces will be rendered in order and passed into the parent
|
104
|
+
"layouts/application" piece as `yield`. If you had
|
105
|
+
`app/views/layouts/pieces.html.erb` then you can call yield like so:
|
106
|
+
|
107
|
+
``` erb
|
108
|
+
<html>
|
109
|
+
<body>
|
110
|
+
<%= yield %>
|
111
|
+
</body>
|
112
|
+
</html>
|
113
|
+
```
|
114
|
+
|
115
|
+
## Data
|
116
|
+
|
117
|
+
To make components reusable you will inject data into them via `pieces.yml`.
|
118
|
+
|
119
|
+
``` yml
|
120
|
+
index:
|
121
|
+
_pieces:
|
122
|
+
- layouts/blog:
|
123
|
+
title: 'Blog posts' # <-- data
|
124
|
+
_pieces:
|
125
|
+
- blog/post_summary:
|
126
|
+
title: 'A great post' # <-- data
|
127
|
+
excerpt: 'In where you will learn great things.' # <-- data
|
128
|
+
```
|
129
|
+
|
130
|
+
Here you can see "title" is injected into "layouts/blog". This data variable
|
131
|
+
will only be accessible to the layout file and not any nested pieces.
|
132
|
+
In the example you can also see another variable called "title" nested under
|
133
|
+
"blog/post_summary" along side "excerpt".
|
134
|
+
|
135
|
+
## Global data
|
136
|
+
|
137
|
+
If you have data that needs to be used in more than one page you can use
|
138
|
+
globals. These globals are available in every file and component but will be
|
139
|
+
overridden if the page or pieces use the same key.
|
140
|
+
|
141
|
+
``` yml
|
142
|
+
_global:
|
143
|
+
site_name: 'My Blog' # <-- global
|
144
|
+
|
145
|
+
index:
|
146
|
+
_pieces:
|
147
|
+
- layouts/blog:
|
148
|
+
title: 'Blog posts'
|
149
|
+
_pieces:
|
150
|
+
- blog/post_summary:
|
151
|
+
title: 'A great post'
|
152
|
+
excerpt: 'In where you will learn great things.'
|
153
|
+
```
|
154
|
+
|
155
|
+
The variable "site_name" will be available in all components.
|
156
|
+
|
157
|
+
### Per page globals
|
158
|
+
|
159
|
+
You can also specify globals per page. These will be available for all
|
160
|
+
components in the page.
|
161
|
+
|
162
|
+
``` yml
|
163
|
+
_global:
|
164
|
+
site_name: 'My Blog'
|
165
|
+
|
166
|
+
index:
|
167
|
+
_global:
|
168
|
+
title: 'Blog posts' # <-- per page global
|
169
|
+
|
170
|
+
_pieces:
|
171
|
+
- layouts/blog:
|
172
|
+
_pieces:
|
173
|
+
- blog/post_summary:
|
174
|
+
title: 'A great post'
|
175
|
+
excerpt: 'In where you will learn great things.'
|
176
|
+
```
|
177
|
+
|
178
|
+
## Publishing to GitHub pages
|
179
|
+
|
180
|
+
You can specify your GitHub repo in order to publish to the gh-pages branch:
|
181
|
+
|
182
|
+
```
|
183
|
+
_publish:
|
184
|
+
- type: github
|
185
|
+
remote: https://github.com/username/repo
|
186
|
+
```
|
data/examples/README.md
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
# Examples
|
2
|
+
|
3
|
+
Within this directory you will find the following examples:
|
4
|
+
|
5
|
+
- [Original example][original-example] using .erb and .mustache (liek wtf!)
|
6
|
+
- [Boilerplate example][boilerplate-example] used by `pieces init`
|
7
|
+
- [Rails example][rails-example] using Pieces as a styleguide
|
8
|
+
- [Babel.js][babel-example] using Pieces as a styleguide
|
9
|
+
|
10
|
+
[original-example]: https://github.com/drpheltright/pieces/tree/master/examples/original
|
11
|
+
[boilerplate-example]: https://github.com/drpheltright/pieces/tree/master/examples/boilerplate
|
12
|
+
[rails-example]: https://github.com/drpheltright/pieces/tree/master/examples/rails
|
13
|
+
[babel-example]: https://github.com/drpheltright/pieces/tree/master/examples/babel
|
14
|
+
|
15
|
+
Find help and more in the Pieces [README][README] and [documentation][docs].
|
16
|
+
|
17
|
+
[README]: https://github.com/drpheltright/pieces/blob/master/README.md
|
18
|
+
[docs]: https://github.com/drpheltright/pieces/blob/master/docs/README.md
|
@@ -0,0 +1,18 @@
|
|
1
|
+
class Hello {
|
2
|
+
world() {
|
3
|
+
console.log('hello world!!')
|
4
|
+
}
|
5
|
+
}
|
6
|
+
|
7
|
+
(new Hello).world()
|
8
|
+
|
9
|
+
window.onload = function () {
|
10
|
+
console.log('page has loaded')
|
11
|
+
}
|
12
|
+
|
13
|
+
|
14
|
+
window.onload = () => {
|
15
|
+
console.log('page has loaded with arrow syntax!!')
|
16
|
+
console.log('multi line')
|
17
|
+
}
|
18
|
+
|
@@ -0,0 +1 @@
|
|
1
|
+
//= require ./components/footer
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title><%= title %></title>
|
5
|
+
|
6
|
+
<style>
|
7
|
+
<%= File.read('build/assets/critical.css') %>
|
8
|
+
</style>
|
9
|
+
|
10
|
+
<script>
|
11
|
+
<%= File.read('build/assets/lazy.js') %>
|
12
|
+
</script>
|
13
|
+
|
14
|
+
<noscript>
|
15
|
+
<link rel="stylesheet" href="/assets/lazy.css" />
|
16
|
+
</noscript>
|
17
|
+
</head>
|
18
|
+
<body>
|
19
|
+
<div class="page">
|
20
|
+
<div class="page__content">
|
21
|
+
<%= yield %>
|
22
|
+
</div>
|
23
|
+
</div>
|
24
|
+
|
25
|
+
<script src="/assets/app.js"></script>
|
26
|
+
</body>
|
27
|
+
</html>
|
@@ -0,0 +1,24 @@
|
|
1
|
+
_global:
|
2
|
+
title: 'Styleguide!'
|
3
|
+
|
4
|
+
index:
|
5
|
+
_pieces:
|
6
|
+
- layouts/pieces:
|
7
|
+
_pieces:
|
8
|
+
- header:
|
9
|
+
_pieces:
|
10
|
+
- branding: {}
|
11
|
+
- articles/articles_introduction: { intro: '<p>Some articles' }
|
12
|
+
- articles/article: { title: 'Nice', content: '<p>Bob' }
|
13
|
+
- articles/article: { title: 'Bob', content: '<p>Some nice example content' }
|
14
|
+
- articles/article: { title: 'Cooob', content: '<p>Some nice example content' }
|
15
|
+
- articles/article: { title: 'Adele', content: '<p>Some nice example content' }
|
16
|
+
- articles/article: { title: 'Hehe', content: '<p>Some nice example content' }
|
17
|
+
- footer: {}
|
18
|
+
|
19
|
+
info:
|
20
|
+
_pieces:
|
21
|
+
- layouts/pieces:
|
22
|
+
title: 'About this style guide'
|
23
|
+
_pieces:
|
24
|
+
- articles/article: { title: 'About this guide' }
|
@@ -0,0 +1,52 @@
|
|
1
|
+
/*!
|
2
|
+
loadCSS: load a CSS file asynchronously.
|
3
|
+
[c]2014 @scottjehl, Filament Group, Inc.
|
4
|
+
Licensed MIT
|
5
|
+
*/
|
6
|
+
|
7
|
+
/* exported loadCSS */
|
8
|
+
function loadCSS( href, before, media, callback ){
|
9
|
+
"use strict";
|
10
|
+
// Arguments explained:
|
11
|
+
// `href` is the URL for your CSS file.
|
12
|
+
// `before` optionally defines the element we'll use as a reference for injecting our <link>
|
13
|
+
// By default, `before` uses the first <script> element in the page.
|
14
|
+
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
|
15
|
+
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
|
16
|
+
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
|
17
|
+
var ss = window.document.createElement( "link" );
|
18
|
+
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
|
19
|
+
var sheets = window.document.styleSheets;
|
20
|
+
ss.rel = "stylesheet";
|
21
|
+
ss.href = href;
|
22
|
+
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
|
23
|
+
ss.media = "only x";
|
24
|
+
// DEPRECATED
|
25
|
+
if( callback ) {
|
26
|
+
ss.onload = callback;
|
27
|
+
}
|
28
|
+
|
29
|
+
// inject link
|
30
|
+
ref.parentNode.insertBefore( ss, ref );
|
31
|
+
// This function sets the link's media back to `all` so that the stylesheet applies once it loads
|
32
|
+
// It is designed to poll until document.styleSheets includes the new sheet.
|
33
|
+
ss.onloadcssdefined = function( cb ){
|
34
|
+
var defined;
|
35
|
+
for( var i = 0; i < sheets.length; i++ ){
|
36
|
+
if( sheets[ i ].href && sheets[ i ].href === ss.href ){
|
37
|
+
defined = true;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
if( defined ){
|
41
|
+
cb();
|
42
|
+
} else {
|
43
|
+
setTimeout(function() {
|
44
|
+
ss.onloadcssdefined( cb );
|
45
|
+
});
|
46
|
+
}
|
47
|
+
};
|
48
|
+
ss.onloadcssdefined(function() {
|
49
|
+
ss.media = media || "all";
|
50
|
+
});
|
51
|
+
return ss;
|
52
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
/* Web Font Loader v1.6.6 - (c) Adobe Systems, Google. License: Apache 2.0 */
|
2
|
+
(function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var c=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(c,d);return a.apply(b,c)}}return function(){return a.apply(b,arguments)}}function n(a,b,c){n=Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?aa:ba;return n.apply(null,arguments)}var p=Date.now||function(){return+new Date};function r(a,b){this.D=a;this.m=b||a;this.F=this.m.document}r.prototype.createElement=function(a,b,c){a=this.F.createElement(a);if(b)for(var d in b)b.hasOwnProperty(d)&&("style"==d?a.style.cssText=b[d]:a.setAttribute(d,b[d]));c&&a.appendChild(this.F.createTextNode(c));return a};function s(a,b,c){a=a.F.getElementsByTagName(b)[0];a||(a=document.documentElement);a.insertBefore(c,a.lastChild)}
|
3
|
+
function t(a,b,c){b=b||[];c=c||[];for(var d=a.className.split(/\s+/),f=0;f<b.length;f+=1){for(var e=!1,g=0;g<d.length;g+=1)if(b[f]===d[g]){e=!0;break}e||d.push(b[f])}b=[];for(f=0;f<d.length;f+=1){e=!1;for(g=0;g<c.length;g+=1)if(d[f]===c[g]){e=!0;break}e||b.push(d[f])}a.className=b.join(" ").replace(/\s+/g," ").replace(/^\s+|\s+$/,"")}function u(a,b){for(var c=a.className.split(/\s+/),d=0,f=c.length;d<f;d++)if(c[d]==b)return!0;return!1}
|
4
|
+
function v(a){if("string"===typeof a.da)return a.da;var b=a.m.location.protocol;"about:"==b&&(b=a.D.location.protocol);return"https:"==b?"https:":"http:"}function w(a,b){var c=a.createElement("link",{rel:"stylesheet",href:b,media:"all"}),d=!1;c.onload=function(){d||(d=!0)};c.onerror=function(){d||(d=!0)};s(a,"head",c)}
|
5
|
+
function x(a,b,c,d){var f=a.F.getElementsByTagName("head")[0];if(f){var e=a.createElement("script",{src:b}),g=!1;e.onload=e.onreadystatechange=function(){g||this.readyState&&"loaded"!=this.readyState&&"complete"!=this.readyState||(g=!0,c&&c(null),e.onload=e.onreadystatechange=null,"HEAD"==e.parentNode.tagName&&f.removeChild(e))};f.appendChild(e);setTimeout(function(){g||(g=!0,c&&c(Error("Script load timeout")))},d||5E3);return e}return null};function y(a){this.ca=a||"-"}y.prototype.d=function(a){for(var b=[],c=0;c<arguments.length;c++)b.push(arguments[c].replace(/[\W_]+/g,"").toLowerCase());return b.join(this.ca)};function A(a,b){this.V=a;this.N=4;this.H="n";var c=(b||"n4").match(/^([nio])([1-9])$/i);c&&(this.H=c[1],this.N=parseInt(c[2],10))}A.prototype.getName=function(){return this.V};function B(a){return a.H+a.N}function ca(a){var b=4,c="n",d=null;a&&((d=a.match(/(normal|oblique|italic)/i))&&d[1]&&(c=d[1].substr(0,1).toLowerCase()),(d=a.match(/([1-9]00|normal|bold)/i))&&d[1]&&(/bold/i.test(d[1])?b=7:/[1-9]00/.test(d[1])&&(b=parseInt(d[1].substr(0,1),10))));return c+b};function da(a,b){this.a=a;this.h=a.m.document.documentElement;this.J=b;this.f="wf";this.e=new y("-");this.Z=!1!==b.events;this.u=!1!==b.classes}function ea(a){a.u&&t(a.h,[a.e.d(a.f,"loading")]);C(a,"loading")}function D(a){if(a.u){var b=u(a.h,a.e.d(a.f,"active")),c=[],d=[a.e.d(a.f,"loading")];b||c.push(a.e.d(a.f,"inactive"));t(a.h,c,d)}C(a,"inactive")}function C(a,b,c){if(a.Z&&a.J[b])if(c)a.J[b](c.getName(),B(c));else a.J[b]()};function fa(){this.t={}}function ga(a,b,c){var d=[],f;for(f in b)if(b.hasOwnProperty(f)){var e=a.t[f];e&&d.push(e(b[f],c))}return d};function E(a,b){this.a=a;this.q=b;this.j=this.a.createElement("span",{"aria-hidden":"true"},this.q)}
|
6
|
+
function G(a,b){var c=a.j,d;d=[];for(var f=b.V.split(/,\s*/),e=0;e<f.length;e++){var g=f[e].replace(/['"]/g,"");-1==g.indexOf(" ")?d.push(g):d.push("'"+g+"'")}d=d.join(",");f="normal";"o"===b.H?f="oblique":"i"===b.H&&(f="italic");c.style.cssText="display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:"+d+";"+("font-style:"+f+";font-weight:"+(b.N+"00")+";")}
|
7
|
+
function H(a){s(a.a,"body",a.j)}E.prototype.remove=function(){var a=this.j;a.parentNode&&a.parentNode.removeChild(a)};function I(a,b,c,d,f,e,g){this.O=a;this.ba=b;this.a=c;this.g=d;this.q=g||"BESbswy";this.s={};this.M=f||3E3;this.T=e||null;this.C=this.B=this.w=this.v=null;this.v=new E(this.a,this.q);this.w=new E(this.a,this.q);this.B=new E(this.a,this.q);this.C=new E(this.a,this.q);G(this.v,new A(this.g.getName()+",serif",B(this.g)));G(this.w,new A(this.g.getName()+",sans-serif",B(this.g)));G(this.B,new A("serif",B(this.g)));G(this.C,new A("sans-serif",B(this.g)));H(this.v);H(this.w);H(this.B);H(this.C)}
|
8
|
+
var J={ga:"serif",fa:"sans-serif"},K=null;function L(){if(null===K){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);K=!!a&&(536>parseInt(a[1],10)||536===parseInt(a[1],10)&&11>=parseInt(a[2],10))}return K}I.prototype.start=function(){this.s.serif=this.B.j.offsetWidth;this.s["sans-serif"]=this.C.j.offsetWidth;this.ea=p();M(this)};function N(a,b,c){for(var d in J)if(J.hasOwnProperty(d)&&b===a.s[J[d]]&&c===a.s[J[d]])return!0;return!1}
|
9
|
+
function M(a){var b=a.v.j.offsetWidth,c=a.w.j.offsetWidth,d;(d=b===a.s.serif&&c===a.s["sans-serif"])||(d=L()&&N(a,b,c));d?p()-a.ea>=a.M?L()&&N(a,b,c)&&(null===a.T||a.T.hasOwnProperty(a.g.getName()))?O(a,a.O):O(a,a.ba):ha(a):O(a,a.O)}function ha(a){setTimeout(n(function(){M(this)},a),50)}function O(a,b){setTimeout(n(function(){this.v.remove();this.w.remove();this.B.remove();this.C.remove();b(this.g)},a),0)};function P(a,b,c){this.a=a;this.o=b;this.K=0;this.X=this.S=!1;this.M=c}P.prototype.$=function(a){var b=this.o;b.u&&t(b.h,[b.e.d(b.f,a.getName(),B(a).toString(),"active")],[b.e.d(b.f,a.getName(),B(a).toString(),"loading"),b.e.d(b.f,a.getName(),B(a).toString(),"inactive")]);C(b,"fontactive",a);this.X=!0;Q(this)};
|
10
|
+
P.prototype.aa=function(a){var b=this.o;if(b.u){var c=u(b.h,b.e.d(b.f,a.getName(),B(a).toString(),"active")),d=[],f=[b.e.d(b.f,a.getName(),B(a).toString(),"loading")];c||d.push(b.e.d(b.f,a.getName(),B(a).toString(),"inactive"));t(b.h,d,f)}C(b,"fontinactive",a);Q(this)};function Q(a){0==--a.K&&a.S&&(a.X?(a=a.o,a.u&&t(a.h,[a.e.d(a.f,"active")],[a.e.d(a.f,"loading"),a.e.d(a.f,"inactive")]),C(a,"active")):D(a.o))};function R(a){this.D=a;this.p=new fa;this.U=0;this.P=this.Q=!0}R.prototype.load=function(a){this.a=new r(this.D,a.context||this.D);this.Q=!1!==a.events;this.P=!1!==a.classes;ia(this,new da(this.a,a),a)};
|
11
|
+
function ja(a,b,c,d,f){var e=0==--a.U;(a.P||a.Q)&&setTimeout(function(){var a=f||null,l=d||null||{};if(0===c.length&&e)D(b.o);else{b.K+=c.length;e&&(b.S=e);var h,k=[];for(h=0;h<c.length;h++){var m=c[h],z=l[m.getName()],q=b.o,F=m;q.u&&t(q.h,[q.e.d(q.f,F.getName(),B(F).toString(),"loading")]);C(q,"fontloading",F);q=null;q=new I(n(b.$,b),n(b.aa,b),b.a,m,b.M,a,z);k.push(q)}for(h=0;h<k.length;h++)k[h].start()}},0)}
|
12
|
+
function ia(a,b,c){var d=[],f=c.timeout;ea(b);var d=ga(a.p,c,a.a),e=new P(a.a,b,f);a.U=d.length;b=0;for(c=d.length;b<c;b++)d[b].load(function(b,c,d){ja(a,e,b,c,d)})};function S(a,b,c){this.I=a?a:b+ka;this.k=[];this.L=[];this.Y=c||""}var ka="//fonts.googleapis.com/css";S.prototype.d=function(){if(0==this.k.length)throw Error("No fonts to load!");if(-1!=this.I.indexOf("kit="))return this.I;for(var a=this.k.length,b=[],c=0;c<a;c++)b.push(this.k[c].replace(/ /g,"+"));a=this.I+"?family="+b.join("%7C");0<this.L.length&&(a+="&subset="+this.L.join(","));0<this.Y.length&&(a+="&text="+encodeURIComponent(this.Y));return a};function T(a){this.k=a;this.W=[];this.G={}}
|
13
|
+
var U={latin:"BESbswy",cyrillic:"йяЖ",greek:"αβΣ",khmer:"កខគ",Hanuman:"កខគ"},la={thin:"1",extralight:"2","extra-light":"2",ultralight:"2","ultra-light":"2",light:"3",regular:"4",book:"4",medium:"5","semi-bold":"6",semibold:"6","demi-bold":"6",demibold:"6",bold:"7","extra-bold":"8",extrabold:"8","ultra-bold":"8",ultrabold:"8",black:"9",heavy:"9",l:"3",r:"4",b:"7"},ma={i:"i",italic:"i",n:"n",normal:"n"},na=/^(thin|(?:(?:extra|ultra)-?)?light|regular|book|medium|(?:(?:semi|demi|extra|ultra)-?)?bold|black|heavy|l|r|b|[1-9]00)?(n|i|normal|italic)?$/;
|
14
|
+
T.prototype.parse=function(){for(var a=this.k.length,b=0;b<a;b++){var c=this.k[b].split(":"),d=c[0].replace(/\+/g," "),f=["n4"];if(2<=c.length){var e;var g=c[1];e=[];if(g)for(var g=g.split(","),l=g.length,h=0;h<l;h++){var k;k=g[h];if(k.match(/^[\w-]+$/))if(k=na.exec(k.toLowerCase()),null==k)k="";else{var m;m=k[1];if(null==m||""==m)m="4";else{var z=la[m];m=z?z:isNaN(m)?"4":m.substr(0,1)}k=k[2];k=[null==k||""==k?"n":ma[k],m].join("")}else k="";k&&e.push(k)}0<e.length&&(f=e);3==c.length&&(c=c[2],e=[],
|
15
|
+
c=c?c.split(","):e,0<c.length&&(c=U[c[0]])&&(this.G[d]=c))}this.G[d]||(c=U[d])&&(this.G[d]=c);for(c=0;c<f.length;c+=1)this.W.push(new A(d,f[c]))}};function V(a,b){this.a=a;this.c=b}var oa={Arimo:!0,Cousine:!0,Tinos:!0};V.prototype.load=function(a){for(var b=this.a,c=new S(this.c.api,v(b),this.c.text),d=this.c.families,f=d.length,e=0;e<f;e++){var g=d[e].split(":");3==g.length&&c.L.push(g.pop());var l="";2==g.length&&""!=g[1]&&(l=":");c.k.push(g.join(l))}d=new T(d);d.parse();w(b,c.d());a(d.W,d.G,oa)};function W(a,b){this.a=a;this.c=b;this.R=[]}W.prototype.A=function(a){var b=this.a;return v(this.a)+(this.c.api||"//f.fontdeck.com/s/css/js/")+(b.m.location.hostname||b.D.location.hostname)+"/"+a+".js"};
|
16
|
+
W.prototype.load=function(a){var b=this.c.id,c=this.a.m,d=this;b?(c.__webfontfontdeckmodule__||(c.__webfontfontdeckmodule__={}),c.__webfontfontdeckmodule__[b]=function(b,c){for(var g=0,l=c.fonts.length;g<l;++g){var h=c.fonts[g];d.R.push(new A(h.name,ca("font-weight:"+h.weight+";font-style:"+h.style)))}a(d.R)},x(this.a,this.A(b),function(b){b&&a([])})):a([])};function X(a,b){this.a=a;this.c=b}X.prototype.A=function(a){return(this.c.api||"https://use.typekit.net")+"/"+a+".js"};X.prototype.load=function(a){var b=this.c.id,c=this.a.m;b?x(this.a,this.A(b),function(b){if(b)a([]);else if(c.Typekit&&c.Typekit.config&&c.Typekit.config.fn){b=c.Typekit.config.fn;for(var f=[],e=0;e<b.length;e+=2)for(var g=b[e],l=b[e+1],h=0;h<l.length;h++)f.push(new A(g,l[h]));try{c.Typekit.load({events:!1,classes:!1,async:!0})}catch(k){}a(f)}},2E3):a([])};function Y(a,b){this.a=a;this.c=b}Y.prototype.A=function(a,b){var c=v(this.a),d=(this.c.api||"fast.fonts.net/jsapi").replace(/^.*http(s?):(\/\/)?/,"");return c+"//"+d+"/"+a+".js"+(b?"?v="+b:"")};Y.prototype.load=function(a){var b=this.c.projectId,c=this.c.version;if(b){var d=this.a.m;x(this.a,this.A(b,c),function(c){if(c)a([]);else if(d["__mti_fntLst"+b]){c=d["__mti_fntLst"+b]();var e=[];if(c)for(var g=0;g<c.length;g++)e.push(new A(c[g].fontfamily));a(e)}else a([])}).id="__MonotypeAPIScript__"+b}else a([])};function pa(a,b){this.a=a;this.c=b}pa.prototype.load=function(a){var b,c,d=this.c.urls||[],f=this.c.families||[],e=this.c.testStrings||{};b=0;for(c=d.length;b<c;b++)w(this.a,d[b]);d=[];b=0;for(c=f.length;b<c;b++){var g=f[b].split(":");if(g[1])for(var l=g[1].split(","),h=0;h<l.length;h+=1)d.push(new A(g[0],l[h]));else d.push(new A(g[0]))}a(d,e)};var Z=new R(window);Z.p.t.custom=function(a,b){return new pa(b,a)};Z.p.t.fontdeck=function(a,b){return new W(b,a)};Z.p.t.monotype=function(a,b){return new Y(b,a)};Z.p.t.typekit=function(a,b){return new X(b,a)};Z.p.t.google=function(a,b){return new V(b,a)};var $={load:n(Z.load,Z)};"function"===typeof define&&define.amd?define(function(){return $}):"undefined"!==typeof module&&module.exports?module.exports=$:(window.WebFont=$,window.WebFontConfig&&Z.load(window.WebFontConfig));}());
|
data/lib/pieces.rb
CHANGED
@@ -1,9 +1,18 @@
|
|
1
1
|
require 'pieces/config'
|
2
2
|
require 'pieces/configurable'
|
3
|
+
require 'pieces/app'
|
4
|
+
require 'pieces/route_compiler'
|
5
|
+
require 'pieces/tilt_extension'
|
6
|
+
require 'pieces/server'
|
3
7
|
require 'pieces/builder'
|
8
|
+
require 'pieces/generator'
|
4
9
|
require 'pieces/publisher'
|
5
10
|
require 'pieces/rails' if defined?(Rails)
|
6
11
|
require 'pieces/version'
|
7
12
|
|
13
|
+
%w(bits-n-pieces bourbon neat bitters compass sass uglifier).each do |gem|
|
14
|
+
begin require gem; rescue LoadError; end
|
15
|
+
end
|
16
|
+
|
8
17
|
module Pieces
|
9
18
|
end
|
data/lib/pieces/app.rb
ADDED
@@ -0,0 +1,50 @@
|
|
1
|
+
module Pieces
|
2
|
+
class App
|
3
|
+
include Configurable
|
4
|
+
|
5
|
+
def call(env)
|
6
|
+
config.reload!
|
7
|
+
request = Rack::Request.new(env)
|
8
|
+
|
9
|
+
if route = match_route(request)
|
10
|
+
render_page(route)
|
11
|
+
else
|
12
|
+
render_page_not_found
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
private
|
17
|
+
|
18
|
+
def route_from_path(request)
|
19
|
+
start_index = config.mounted_at.nil? ? 1 : (config.mounted_at.length + 1)
|
20
|
+
path = request.path[start_index..-1]
|
21
|
+
|
22
|
+
if path == ''
|
23
|
+
'index'
|
24
|
+
else
|
25
|
+
path.gsub(/\.html$/, '')
|
26
|
+
end
|
27
|
+
end
|
28
|
+
|
29
|
+
def match_route(request)
|
30
|
+
route = route_from_path(request)
|
31
|
+
|
32
|
+
if request.get? and config.routes.keys.include?(route)
|
33
|
+
route
|
34
|
+
end
|
35
|
+
end
|
36
|
+
|
37
|
+
def route_compiler
|
38
|
+
@route_compiler ||= RouteCompiler.new(config)
|
39
|
+
end
|
40
|
+
|
41
|
+
def render_page(route)
|
42
|
+
files = route_compiler.compile({}, route, config.routes[route])
|
43
|
+
['200', {'Content-Type' => 'text/html'}, files.values.map { |f| f[:contents] }]
|
44
|
+
end
|
45
|
+
|
46
|
+
def render_page_not_found
|
47
|
+
[404, {}, ['Not found']]
|
48
|
+
end
|
49
|
+
end
|
50
|
+
end
|
data/lib/pieces/builder.rb
CHANGED
@@ -1,10 +1,6 @@
|
|
1
1
|
require 'ostruct'
|
2
2
|
require 'yaml'
|
3
3
|
require 'sprockets'
|
4
|
-
require 'pieces/route_compiler'
|
5
|
-
require 'pieces/config'
|
6
|
-
require 'pieces/server'
|
7
|
-
require 'pieces/tilt_extension'
|
8
4
|
|
9
5
|
module Pieces
|
10
6
|
class Builder
|
@@ -29,9 +25,19 @@ module Pieces
|
|
29
25
|
@env ||= Server.new(config).sprockets_env
|
30
26
|
end
|
31
27
|
|
28
|
+
def manifest
|
29
|
+
@manifest ||= Sprockets::Manifest.new(env, 'build/assets')
|
30
|
+
end
|
31
|
+
|
32
32
|
def build_assets(files = {})
|
33
|
-
|
34
|
-
|
33
|
+
if env['manifest.js']
|
34
|
+
manifest.find('manifest.js').reduce(files) do |files, file|
|
35
|
+
files.merge("assets/#{file.logical_path}" => { type: file.content_type, contents: file })
|
36
|
+
end
|
37
|
+
else
|
38
|
+
files.merge('assets/pieces.css' => { type: 'text/css', contents: env['pieces.css'] },
|
39
|
+
'assets/pieces.js' => { type: 'application/js', contents: env['pieces.js'] })
|
40
|
+
end
|
35
41
|
end
|
36
42
|
|
37
43
|
def build_routes(files = {})
|
data/lib/pieces/cli.rb
CHANGED
@@ -1,8 +1,5 @@
|
|
1
1
|
require 'thor'
|
2
|
-
require 'pieces
|
3
|
-
require 'pieces/configurable'
|
4
|
-
require 'pieces/builder'
|
5
|
-
require 'pieces/generator'
|
2
|
+
require 'pieces'
|
6
3
|
|
7
4
|
module Pieces
|
8
5
|
class CLI < Thor
|
@@ -24,7 +21,7 @@ module Pieces
|
|
24
21
|
|
25
22
|
desc 'server DIR', 'serve application in DIR'
|
26
23
|
def server(path = Dir.pwd)
|
27
|
-
puts "Serving pieces from #{path}
|
24
|
+
puts "Serving pieces from #{path}... "
|
28
25
|
Pieces::Server.start(path: path)
|
29
26
|
end
|
30
27
|
|
data/lib/pieces/config.rb
CHANGED
@@ -7,7 +7,8 @@ module Pieces
|
|
7
7
|
attr_accessor :env
|
8
8
|
|
9
9
|
def initialize(config = {})
|
10
|
-
@path = config
|
10
|
+
@path = config.delete(:path) || Dir.pwd
|
11
|
+
merge!(config)
|
11
12
|
load_config! unless config[:load] == false
|
12
13
|
end
|
13
14
|
|
@@ -27,14 +28,14 @@ module Pieces
|
|
27
28
|
end
|
28
29
|
end
|
29
30
|
|
30
|
-
def force_polling?
|
31
|
-
self['_force_polling']
|
32
|
-
end
|
33
|
-
|
34
31
|
def asset_prefix
|
35
32
|
self['_asset_prefix']
|
36
33
|
end
|
37
34
|
|
35
|
+
def mounted_at
|
36
|
+
self['_mounted_at']
|
37
|
+
end
|
38
|
+
|
38
39
|
def reload!
|
39
40
|
load_config!
|
40
41
|
end
|
data/lib/pieces/rails.rb
CHANGED
@@ -1,18 +1,19 @@
|
|
1
1
|
require 'pieces/rails/railtie'
|
2
|
-
require 'pieces/server'
|
3
2
|
|
4
3
|
module Pieces
|
5
4
|
class Rails
|
6
5
|
def self.mount(config = {})
|
6
|
+
mounted_at = config.delete(:at)
|
7
|
+
|
7
8
|
config = Config.new(config.merge(path: config[:path] || ::Rails.root,
|
8
|
-
'
|
9
|
-
|
9
|
+
'_mounted_at' => mounted_at))
|
10
|
+
|
11
|
+
{ new(config).mount => mounted_at }
|
10
12
|
end
|
11
13
|
|
12
14
|
include Configurable
|
13
15
|
|
14
16
|
def mount
|
15
|
-
Listener.new(config).listen
|
16
17
|
Server.new(config).app
|
17
18
|
end
|
18
19
|
end
|
@@ -9,7 +9,7 @@ module Pieces
|
|
9
9
|
end
|
10
10
|
|
11
11
|
def compile(files, name, route)
|
12
|
-
files.merge("#{name}.html" => { contents: yield_pieces(route), type: 'html' })
|
12
|
+
files.merge("#{name}.html" => { contents: yield_pieces(route), type: 'text/html' })
|
13
13
|
end
|
14
14
|
|
15
15
|
private
|
@@ -33,9 +33,7 @@ module Pieces
|
|
33
33
|
end
|
34
34
|
|
35
35
|
def compile_piece(piece, data)
|
36
|
-
view_model = ViewModel.new(data['_global'].merge(data))
|
37
|
-
view_model.env = config.env
|
38
|
-
view_model.asset_prefix = config.asset_prefix
|
36
|
+
view_model = ViewModel.new(data['_global'].merge(data).merge(config: config))
|
39
37
|
::Tilt.new(piece_path(piece)).render(view_model) { yield_pieces(data) }
|
40
38
|
end
|
41
39
|
|
@@ -46,9 +44,6 @@ module Pieces
|
|
46
44
|
end
|
47
45
|
|
48
46
|
class ViewModel < OpenStruct
|
49
|
-
attr_accessor :env
|
50
|
-
attr_accessor :asset_prefix
|
51
|
-
|
52
47
|
begin
|
53
48
|
require 'action_view'
|
54
49
|
include ActionView::Context
|
@@ -61,6 +56,14 @@ module Pieces
|
|
61
56
|
_prepare_context if respond_to?(:_prepare_context)
|
62
57
|
end
|
63
58
|
|
59
|
+
def asset_prefix
|
60
|
+
config.asset_prefix
|
61
|
+
end
|
62
|
+
|
63
|
+
def env
|
64
|
+
config.env
|
65
|
+
end
|
66
|
+
|
64
67
|
def compute_asset_path(path, options = {})
|
65
68
|
if env.resolve!(path)
|
66
69
|
File.join(asset_prefix || '/assets', path)
|
data/lib/pieces/server.rb
CHANGED
@@ -1,7 +1,5 @@
|
|
1
1
|
require 'rack'
|
2
|
-
require 'listen'
|
3
2
|
require 'sprockets'
|
4
|
-
require 'pieces/listener'
|
5
3
|
|
6
4
|
module Pieces
|
7
5
|
class Server < Rack::Server
|
@@ -16,16 +14,24 @@ module Pieces
|
|
16
14
|
super({})
|
17
15
|
end
|
18
16
|
|
19
|
-
def start
|
20
|
-
Pieces::Listener.new(config).listen
|
21
|
-
super
|
22
|
-
end
|
23
|
-
|
24
17
|
def sprockets_env
|
25
18
|
Sprockets::Environment.new(config.path).tap do |env|
|
26
19
|
env.append_path 'app/assets/javascripts'
|
27
20
|
env.append_path 'app/assets/stylesheets'
|
21
|
+
env.append_path 'vendor/assets/stylesheets'
|
22
|
+
env.append_path 'vendor/assets/javascripts'
|
23
|
+
env.append_path 'app/assets'
|
24
|
+
env.append_path 'app/views'
|
28
25
|
env.append_path 'app/views'
|
26
|
+
|
27
|
+
if defined? ::Sass
|
28
|
+
::Sass.load_paths.each { |path| env.append_path(path) }
|
29
|
+
env.css_compressor = :scss
|
30
|
+
end
|
31
|
+
|
32
|
+
if defined? ::Uglifier
|
33
|
+
env.js_compressor = :uglify
|
34
|
+
end
|
29
35
|
end
|
30
36
|
end
|
31
37
|
|
@@ -33,12 +39,13 @@ module Pieces
|
|
33
39
|
urls = files_to_serve(config.path)
|
34
40
|
build_path = "#{config.path}/build"
|
35
41
|
assets_app = sprockets_env
|
42
|
+
config.env = sprockets_env
|
43
|
+
app = App.new(config)
|
36
44
|
|
37
45
|
Rack::Builder.app do
|
38
46
|
use Rack::Reloader
|
39
|
-
map('/assets') { run assets_app }
|
40
|
-
|
41
|
-
run Proc.new { |env| [404, {}, ['Not found']] }
|
47
|
+
map('/assets') { run assets_app }
|
48
|
+
run app
|
42
49
|
end
|
43
50
|
end
|
44
51
|
|
data/lib/pieces/version.rb
CHANGED
data/pieces.gemspec
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: pieces
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.6.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Luke Morton
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-08-
|
11
|
+
date: 2015-08-25 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: tilt
|
@@ -52,20 +52,6 @@ dependencies:
|
|
52
52
|
- - ">="
|
53
53
|
- !ruby/object:Gem::Version
|
54
54
|
version: '0'
|
55
|
-
- !ruby/object:Gem::Dependency
|
56
|
-
name: listen
|
57
|
-
requirement: !ruby/object:Gem::Requirement
|
58
|
-
requirements:
|
59
|
-
- - ">="
|
60
|
-
- !ruby/object:Gem::Version
|
61
|
-
version: '0'
|
62
|
-
type: :runtime
|
63
|
-
prerelease: false
|
64
|
-
version_requirements: !ruby/object:Gem::Requirement
|
65
|
-
requirements:
|
66
|
-
- - ">="
|
67
|
-
- !ruby/object:Gem::Version
|
68
|
-
version: '0'
|
69
55
|
- !ruby/object:Gem::Dependency
|
70
56
|
name: sprockets
|
71
57
|
requirement: !ruby/object:Gem::Requirement
|
@@ -274,12 +260,38 @@ files:
|
|
274
260
|
- ".rspec"
|
275
261
|
- ".ruby-version"
|
276
262
|
- ".travis.yml"
|
277
|
-
- CODE_OF_CONDUCT.md
|
278
263
|
- Gemfile
|
279
|
-
- LICENSE.txt
|
280
264
|
- README.md
|
281
265
|
- Rakefile
|
282
266
|
- bin/pieces
|
267
|
+
- docs/README.md
|
268
|
+
- docs/code_of_conduct.md
|
269
|
+
- docs/contributing.md
|
270
|
+
- docs/license.md
|
271
|
+
- docs/pieces.yml.md
|
272
|
+
- examples/README.md
|
273
|
+
- examples/babel/Gemfile
|
274
|
+
- examples/babel/app/assets/javascripts/app.js
|
275
|
+
- examples/babel/app/assets/javascripts/components/article.es6
|
276
|
+
- examples/babel/app/assets/javascripts/lazy.js
|
277
|
+
- examples/babel/app/assets/manifest.js
|
278
|
+
- examples/babel/app/assets/stylesheets/components/articles/article.scss
|
279
|
+
- examples/babel/app/assets/stylesheets/components/articles/articles_introduction.scss
|
280
|
+
- examples/babel/app/assets/stylesheets/components/branding.scss
|
281
|
+
- examples/babel/app/assets/stylesheets/components/footer.scss
|
282
|
+
- examples/babel/app/assets/stylesheets/components/html.scss
|
283
|
+
- examples/babel/app/assets/stylesheets/components/page.scss
|
284
|
+
- examples/babel/app/assets/stylesheets/critical.scss
|
285
|
+
- examples/babel/app/assets/stylesheets/lazy.scss
|
286
|
+
- examples/babel/app/views/application/branding.html.erb
|
287
|
+
- examples/babel/app/views/application/footer.html.erb
|
288
|
+
- examples/babel/app/views/application/header.html.erb
|
289
|
+
- examples/babel/app/views/articles/article.html.erb
|
290
|
+
- examples/babel/app/views/articles/articles_introduction.html.erb
|
291
|
+
- examples/babel/app/views/layouts/pieces.html.erb
|
292
|
+
- examples/babel/config/pieces.yml
|
293
|
+
- examples/babel/vendor/assets/javascripts/load_css.js
|
294
|
+
- examples/babel/vendor/assets/javascripts/webfontloader.js
|
283
295
|
- examples/boilerplate/.gitignore
|
284
296
|
- examples/boilerplate/Gemfile
|
285
297
|
- examples/boilerplate/app/assets/stylesheets/components/header.css
|
@@ -356,13 +368,12 @@ files:
|
|
356
368
|
- examples/rails_app/public/favicon.ico
|
357
369
|
- examples/rails_app/public/robots.txt
|
358
370
|
- lib/pieces.rb
|
359
|
-
- lib/pieces/
|
371
|
+
- lib/pieces/app.rb
|
360
372
|
- lib/pieces/builder.rb
|
361
373
|
- lib/pieces/cli.rb
|
362
374
|
- lib/pieces/config.rb
|
363
375
|
- lib/pieces/configurable.rb
|
364
376
|
- lib/pieces/generator.rb
|
365
|
-
- lib/pieces/listener.rb
|
366
377
|
- lib/pieces/publisher.rb
|
367
378
|
- lib/pieces/rails.rb
|
368
379
|
- lib/pieces/rails/install_generator.rb
|
@@ -1,21 +0,0 @@
|
|
1
|
-
module Pieces
|
2
|
-
class BacktraceFormatter
|
3
|
-
include Configurable
|
4
|
-
|
5
|
-
def format(exception)
|
6
|
-
output = ["Exception<#{exception.class.name}>: #{exception.message}"]
|
7
|
-
output << ''
|
8
|
-
|
9
|
-
begin
|
10
|
-
require 'rails'
|
11
|
-
trace = ::Rails.backtrace_cleaner.clean(exception.backtrace)
|
12
|
-
rescue LoadError => e
|
13
|
-
trace = exception.backtrace
|
14
|
-
# .delete_if { |line| !line.include?(config.path) }
|
15
|
-
# .map { |line| line.sub("#{config.path}/", '') }
|
16
|
-
end
|
17
|
-
|
18
|
-
output.concat(trace.map { |line| " #{line}" }).join("\n")
|
19
|
-
end
|
20
|
-
end
|
21
|
-
end
|
data/lib/pieces/listener.rb
DELETED
@@ -1,50 +0,0 @@
|
|
1
|
-
require 'pieces/backtrace_formatter'
|
2
|
-
|
3
|
-
module Pieces
|
4
|
-
class Listener
|
5
|
-
def self.listen(config = {})
|
6
|
-
new(Config.new(config)).listen
|
7
|
-
end
|
8
|
-
|
9
|
-
include Configurable
|
10
|
-
|
11
|
-
def initialize(config = {})
|
12
|
-
super
|
13
|
-
build_pieces
|
14
|
-
end
|
15
|
-
|
16
|
-
def listen
|
17
|
-
Listen.to(*paths, force_polling: config.force_polling?) do
|
18
|
-
rebuild_pieces
|
19
|
-
end.tap(&:start)
|
20
|
-
end
|
21
|
-
|
22
|
-
private
|
23
|
-
|
24
|
-
def paths
|
25
|
-
["#{config.path}/config", "#{config.path}/app/views"]
|
26
|
-
end
|
27
|
-
|
28
|
-
def backtrace_formatter
|
29
|
-
@backtrace_formatter ||= Pieces::BacktraceFormatter.new(config)
|
30
|
-
end
|
31
|
-
|
32
|
-
def build_pieces
|
33
|
-
Pieces::Builder.new(config).build
|
34
|
-
rescue => e
|
35
|
-
puts backtrace_formatter.format(e)
|
36
|
-
exit(1)
|
37
|
-
end
|
38
|
-
|
39
|
-
def rebuild_pieces
|
40
|
-
print "\nRebuilding #{File.basename(config.path)}... "
|
41
|
-
config.reload!
|
42
|
-
Pieces::Builder.new(config).build
|
43
|
-
puts 'done.'
|
44
|
-
rescue => e
|
45
|
-
puts 'an error occurred.'
|
46
|
-
puts ''
|
47
|
-
puts backtrace_formatter.format(e)
|
48
|
-
end
|
49
|
-
end
|
50
|
-
end
|