serve 1.5.0.pre4 → 1.5.0.pre5
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile +17 -9
- data/Gemfile.lock +44 -24
- data/LICENSE +2 -1
- data/README.rdoc +52 -224
- data/Rakefile +8 -0
- data/VERSION +1 -1
- data/lib/serve/application.rb +10 -7
- data/lib/serve/project.rb +1 -0
- data/lib/serve/templates/Gemfile +26 -0
- data/lib/serve/templates/config.ru +9 -1
- metadata +170 -76
- data/QUICKSTART.rdoc +0 -241
data/Gemfile
CHANGED
@@ -1,16 +1,17 @@
|
|
1
|
-
source
|
1
|
+
source :rubygems
|
2
2
|
|
3
|
-
gem '
|
4
|
-
gem 'rack',
|
5
|
-
gem '
|
6
|
-
gem '
|
7
|
-
gem '
|
8
|
-
gem '
|
9
|
-
gem 'i18n', '~> 0.5.0'
|
3
|
+
gem 'rack', '~> 1.2'
|
4
|
+
gem 'rack-test', '~> 0.5'
|
5
|
+
gem 'tilt', '~> 1.3'
|
6
|
+
gem 'activesupport', '~> 3.0'
|
7
|
+
gem 'tzinfo'
|
8
|
+
gem 'i18n'
|
10
9
|
|
11
10
|
group :development do
|
11
|
+
gem 'rake', '~> 0.9.0'
|
12
|
+
gem 'rdoc', '~> 3.8.0'
|
12
13
|
gem 'rspec', '~> 2.6.0'
|
13
|
-
gem 'jeweler', '~> 1.4
|
14
|
+
gem 'jeweler', '~> 1.6.4'
|
14
15
|
gem 'haml', '~> 3.1.1'
|
15
16
|
gem 'sass', '~> 3.1.1'
|
16
17
|
gem 'compass', '~> 0.11.1'
|
@@ -20,4 +21,11 @@ group :development do
|
|
20
21
|
gem 'erubis', '~> 2.7.0'
|
21
22
|
gem 'less', '~> 1.2.21'
|
22
23
|
gem 'radius', '~> 0.6.1'
|
24
|
+
gem 'coffee-script', '~> 2.2.0'
|
25
|
+
end
|
26
|
+
|
27
|
+
group :website do
|
28
|
+
gem 'serve', '~> 1.5.0.pre4'
|
29
|
+
gem 'css_parser', '~> 1.1.9'
|
30
|
+
gem 'maruku', '~> 0.6.0'
|
23
31
|
end
|
data/Gemfile.lock
CHANGED
@@ -2,74 +2,94 @@ GEM
|
|
2
2
|
remote: http://rubygems.org/
|
3
3
|
specs:
|
4
4
|
RedCloth (4.2.7)
|
5
|
-
activesupport (3.0.
|
5
|
+
activesupport (3.0.9)
|
6
6
|
chunky_png (1.2.0)
|
7
|
-
|
8
|
-
|
7
|
+
coffee-script (2.2.0)
|
8
|
+
coffee-script-source
|
9
|
+
execjs
|
10
|
+
coffee-script-source (1.1.1)
|
11
|
+
compass (0.11.4)
|
12
|
+
chunky_png (~> 1.2)
|
9
13
|
fssm (>= 0.2.7)
|
10
14
|
sass (~> 3.1)
|
15
|
+
css_parser (1.1.9)
|
11
16
|
diff-lcs (1.1.2)
|
12
17
|
erubis (2.7.0)
|
18
|
+
execjs (1.2.0)
|
19
|
+
multi_json (~> 1.0)
|
13
20
|
fssm (0.2.7)
|
14
|
-
gemcutter (0.6.1)
|
15
21
|
git (1.2.5)
|
16
|
-
haml (3.1.
|
22
|
+
haml (3.1.2)
|
17
23
|
i18n (0.5.0)
|
18
|
-
jeweler (1.4
|
19
|
-
|
24
|
+
jeweler (1.6.4)
|
25
|
+
bundler (~> 1.0)
|
20
26
|
git (>= 1.2.5)
|
21
|
-
|
22
|
-
json_pure (1.4.6)
|
27
|
+
rake
|
23
28
|
less (1.2.21)
|
24
29
|
mutter (>= 0.4.2)
|
25
30
|
treetop (>= 1.4.2)
|
31
|
+
maruku (0.6.0)
|
32
|
+
syntax (>= 1.0.0)
|
33
|
+
multi_json (1.0.3)
|
26
34
|
mutter (0.5.3)
|
27
35
|
polyglot (0.3.1)
|
28
36
|
rack (1.2.3)
|
29
37
|
rack-test (0.5.7)
|
30
38
|
rack (>= 1.0)
|
31
39
|
radius (0.6.1)
|
32
|
-
rake (0.9.
|
40
|
+
rake (0.9.2)
|
33
41
|
rdiscount (1.6.8)
|
42
|
+
rdoc (3.8)
|
34
43
|
rspec (2.6.0)
|
35
44
|
rspec-core (~> 2.6.0)
|
36
45
|
rspec-expectations (~> 2.6.0)
|
37
46
|
rspec-mocks (~> 2.6.0)
|
38
|
-
rspec-core (2.6.
|
47
|
+
rspec-core (2.6.4)
|
39
48
|
rspec-expectations (2.6.0)
|
40
49
|
diff-lcs (~> 1.1.2)
|
41
50
|
rspec-mocks (2.6.0)
|
42
|
-
|
43
|
-
|
44
|
-
|
51
|
+
sass (3.1.4)
|
52
|
+
serve (1.5.0.pre4)
|
53
|
+
activesupport (~> 3.0.7)
|
54
|
+
i18n (~> 0.5.0)
|
55
|
+
rack (~> 1.2.1)
|
56
|
+
rack-test (~> 0.5.7)
|
57
|
+
tilt (~> 1.3.1)
|
58
|
+
tzinfo (~> 0.3.23)
|
45
59
|
slim (0.9.4)
|
46
60
|
temple (~> 0.3.0)
|
47
61
|
tilt (~> 1.2)
|
48
|
-
|
49
|
-
|
62
|
+
syntax (1.0.0)
|
63
|
+
temple (0.3.2)
|
64
|
+
tilt (1.3.2)
|
50
65
|
treetop (1.4.9)
|
51
66
|
polyglot (>= 0.3.1)
|
52
|
-
tzinfo (0.3.
|
67
|
+
tzinfo (0.3.29)
|
53
68
|
|
54
69
|
PLATFORMS
|
55
70
|
ruby
|
56
71
|
|
57
72
|
DEPENDENCIES
|
58
73
|
RedCloth (~> 4.2.7)
|
59
|
-
activesupport (~> 3.0
|
74
|
+
activesupport (~> 3.0)
|
75
|
+
coffee-script (~> 2.2.0)
|
60
76
|
compass (~> 0.11.1)
|
77
|
+
css_parser (~> 1.1.9)
|
61
78
|
erubis (~> 2.7.0)
|
62
79
|
haml (~> 3.1.1)
|
63
|
-
i18n
|
64
|
-
jeweler (~> 1.4
|
80
|
+
i18n
|
81
|
+
jeweler (~> 1.6.4)
|
65
82
|
less (~> 1.2.21)
|
66
|
-
|
67
|
-
rack
|
83
|
+
maruku (~> 0.6.0)
|
84
|
+
rack (~> 1.2)
|
85
|
+
rack-test (~> 0.5)
|
68
86
|
radius (~> 0.6.1)
|
69
87
|
rake (~> 0.9.0)
|
70
88
|
rdiscount (~> 1.6.8)
|
89
|
+
rdoc (~> 3.8.0)
|
71
90
|
rspec (~> 2.6.0)
|
72
91
|
sass (~> 3.1.1)
|
92
|
+
serve (~> 1.5.0.pre4)
|
73
93
|
slim (~> 0.9.4)
|
74
|
-
tilt (~> 1.3
|
75
|
-
tzinfo
|
94
|
+
tilt (~> 1.3)
|
95
|
+
tzinfo
|
data/LICENSE
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
Copyright (c) 2007-2011 John W. Long and Adam I. Williams
|
2
|
-
Portions contributed by Robert Evans and others
|
2
|
+
Portions contributed by Robert Evans and others. Some view helpers
|
3
|
+
have been extracted from Rails.
|
3
4
|
|
4
5
|
Permission is hereby granted, free of charge, to any person obtaining
|
5
6
|
a copy of this software and associated documentation files (the
|
data/README.rdoc
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
= Serve -
|
1
|
+
= Serve - Delicious ERB, Haml, and Sass
|
2
2
|
|
3
3
|
link:../../downloads/jlong/serve/logo-hifi-3.png
|
4
4
|
|
@@ -10,15 +10,7 @@ This makes Serve an ideal framework for prototyping Rails applications or
|
|
10
10
|
creating simple websites. Serve has full support for Rails-style partials
|
11
11
|
and layouts.
|
12
12
|
|
13
|
-
|
14
|
-
find Serve especially useful. Create a separate "prototype" project for your
|
15
|
-
application (using Serve) and copy views over into actual application when
|
16
|
-
they are ready to go. This workflow can allow the designer to focus on
|
17
|
-
presentation and flow, while the developer can focus on implementation. One
|
18
|
-
benefit to this approach is that the designer can identify and fix a large
|
19
|
-
number of problems before a feature is ever touched by the developer. Once a
|
20
|
-
feature has been completed in the prototype project it can also be estimated
|
21
|
-
with a high degree of accuracy.
|
13
|
+
Serve is made with Rack & Tilt.
|
22
14
|
|
23
15
|
|
24
16
|
== Installation
|
@@ -36,11 +28,11 @@ If you are new to the command prompt and are a Mac user see:
|
|
36
28
|
|
37
29
|
http://wiseheartdesign.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/
|
38
30
|
|
39
|
-
Google "command prompt windows" if you are on a PC to find a simple
|
31
|
+
Search Google for "command prompt windows" if you are on a PC to find a simple
|
40
32
|
tutorial.
|
41
33
|
|
42
34
|
|
43
|
-
== Usage
|
35
|
+
== Basic Usage
|
44
36
|
|
45
37
|
Once the gem is installed the `serve` command will be available from the
|
46
38
|
command prompt. To launch Serve, just type the command and press enter:
|
@@ -53,241 +45,85 @@ at the following address:
|
|
53
45
|
http://localhost:4000
|
54
46
|
|
55
47
|
Once the server is going it will output a running log of its activity. To
|
56
|
-
stop the server at any time, type CTRL+C at the command prompt.
|
57
|
-
serve command serves up files from the current directory. To change this
|
58
|
-
behavior, `cd` to the appropriate directory before starting serve or pass the
|
59
|
-
directory as the final parameter to the command:
|
48
|
+
stop the server at any time, type CTRL+C at the command prompt.
|
60
49
|
|
61
|
-
|
50
|
+
Learn more: http://get-serve.com/documentation/usage
|
62
51
|
|
63
|
-
The `serve` command automatically binds to 0.0.0.0 (localhost) and uses port
|
64
|
-
4000 by default. To serve files over a different IP (that is bound to your
|
65
|
-
computer) or port specify those options on the command line:
|
66
52
|
|
67
|
-
|
68
|
-
|
69
|
-
serve 192.168.1.6 # a custom IP
|
70
|
-
|
71
|
-
serve 192.168.1.6:4000 # a custom IP and port
|
53
|
+
== Creating a Structured Serve Project
|
72
54
|
|
73
|
-
For
|
74
|
-
|
75
|
-
|
76
|
-
as an option on the command line:
|
55
|
+
For simple projects, you don't need to structure your files in a specific
|
56
|
+
way. All ERB, Haml, and Sass files will be processed wherever they are found
|
57
|
+
in the project root. But for more complex projects you may want add a bit of structure.
|
77
58
|
|
78
|
-
|
59
|
+
To create a structured Serve project in the "project" directory, type the
|
60
|
+
following on the command line:
|
79
61
|
|
62
|
+
serve create project # create a new project in the project directory
|
80
63
|
|
81
|
-
|
64
|
+
Lear more: http://get-serve.com/documentation/create
|
82
65
|
|
83
|
-
For simple projects, you don't need to structure your files in a specific
|
84
|
-
way. All ERB, Haml, and Sass files will be processed wherever they are found
|
85
|
-
in the project root. But for more complex projects you may want to use Serve
|
86
|
-
with a `config.ru` file so that you can take advantage of other Rack
|
87
|
-
middleware and structure the project in a Rack compatible way.
|
88
66
|
|
89
|
-
|
90
|
-
following on the command line:
|
67
|
+
== Layouts & Partials
|
91
68
|
|
92
|
-
|
93
|
-
|
94
|
-
This will create a new project with the following directory structure:
|
95
|
-
|
96
|
-
mockups/
|
97
|
-
|
|
98
|
-
+-- config.ru # Rack configuration file
|
99
|
-
|
|
100
|
-
+-- compass.config # Compass configuration file
|
101
|
-
|
|
102
|
-
+-- public/ # Directories for static assets
|
103
|
-
| |
|
104
|
-
| +-- stylesheets/ # Compiled stylesheets
|
105
|
-
| |
|
106
|
-
| +-- images/
|
107
|
-
| |
|
108
|
-
| `-- javascripts/
|
109
|
-
|
|
110
|
-
+-- stylesheets/ # Sass and SCSS source files
|
111
|
-
| |
|
112
|
-
| `-- application.scss # Example SCSS file for application
|
113
|
-
|
|
114
|
-
+-- tmp/ # Needed for Passenger (mod_passenger)
|
115
|
-
| |
|
116
|
-
| `-- restart.txt
|
117
|
-
|
|
118
|
-
`-- views/ # Store your ERB, Haml, etc. here
|
119
|
-
|
|
120
|
-
+-- _layout.html.erb # Example layout
|
121
|
-
|
|
122
|
-
+-- hello.html.erb # Example view
|
123
|
-
|
|
124
|
-
+-- index.redirect # Example redirect
|
125
|
-
|
|
126
|
-
`-- view_helpers.rb # Example view helpers
|
127
|
-
|
128
|
-
If you would like to generate the project with a specific JavaScript framework
|
129
|
-
you can do so with the <tt>-j</tt> flag:
|
130
|
-
|
131
|
-
serve create mockups -j prototype
|
132
|
-
|
133
|
-
Available frameworks are: <tt>jquery</tt>, <tt>jquery-ui</tt>,
|
134
|
-
<tt>mootools</tt>, <tt>prototype</tt>, and <tt>scriptaculous</tt>.
|
135
|
-
|
136
|
-
The `serve create` command can be executed multiple times or on an existing
|
137
|
-
project without negative consequences.
|
138
|
-
|
139
|
-
|
140
|
-
== Upgrading a Compass Project to a Serve Project
|
141
|
-
|
142
|
-
If you are a Compass user you can convert an existing Compass project to a
|
143
|
-
Serve project with the "convert" sub-command:
|
144
|
-
|
145
|
-
serve convert mockups
|
146
|
-
|
147
|
-
This will rename and move a number of files for you and will turn your Compass
|
148
|
-
project into a Serve project.
|
149
|
-
|
150
|
-
Note that after upgrading a Compass project, you will no longer need to use
|
151
|
-
the `compass watch` command to generate your stylesheets. Your stylesheets
|
152
|
-
will be compiled on the fly with Serve.
|
153
|
-
|
154
|
-
|
155
|
-
== Layouts
|
156
|
-
|
157
|
-
In Serve layouts work a little differently than they do in Rails. Because there are no
|
158
|
-
controllers to derive layout names from, Serve relies on the directory structure to
|
159
|
-
determine the layout associated with a specific view. Serve layouts are stored in
|
160
|
-
"_layout.erb" or "_layout.haml" files. Serve searches for a layout file in the same
|
161
|
-
directory as the view. If it fails to find one there, it traverses up the directory
|
162
|
-
tree searching each parent directory until it finds the "nearest" layout.
|
163
|
-
|
164
|
-
For example, assuming following directory structure:
|
165
|
-
|
166
|
-
views/
|
167
|
-
|
|
168
|
-
A) +-- _layout.erb
|
169
|
-
|
|
170
|
-
+-- index.erb
|
171
|
-
|
|
172
|
-
`-- about/
|
173
|
-
|
|
174
|
-
B) +-- _layout.erb
|
175
|
-
|
|
176
|
-
`-- index.erb
|
177
|
-
|
178
|
-
For "views/about/index.erb" Serve will use layout B. If layout B did not exist,
|
179
|
-
Serve would go up the directory tree and discover layout A which it would use to
|
180
|
-
render the view.
|
181
|
-
|
182
|
-
For "views/index.erb" Serve would immediately discover and use layout A because it
|
183
|
-
is in the same directory.
|
184
|
-
|
185
|
-
So Serve searches up the directory tree for the nearest layout file, and uses that
|
186
|
-
file to render the view. This is convenient because it allows you to structure your
|
187
|
-
Serve project in a way that allows entire "branches" of to share the same layout
|
188
|
-
and "branches" lower down can override the layout used.
|
189
|
-
|
190
|
-
|
191
|
-
== Partials
|
192
|
-
|
193
|
-
Partials in Serve work much like they do in Rails. Prefix your partials with an
|
194
|
-
underscore ("_") and use the <tt>render</tt> helper method in your views to render
|
195
|
-
the partial:
|
69
|
+
Serve has full support for Rails-style layouts and partials.
|
196
70
|
|
197
|
-
|
71
|
+
Serve layouts are stored in "_layout.erb" or "_layout.haml" files in the same directory as the page they are rendering.
|
72
|
+
|
73
|
+
Learn more: http://get-serve.com/documentation/layouts
|
198
74
|
|
199
|
-
|
75
|
+
Serve partials (much like PHP includes) are rendered using the familiar render syntax:
|
200
76
|
|
201
|
-
<%= render "
|
77
|
+
<%= render "footer" %>
|
78
|
+
|
79
|
+
Learn more: http://get-serve.com/documentation/partials
|
202
80
|
|
203
81
|
|
204
82
|
== View Helpers
|
205
83
|
|
206
84
|
If you drop a file called "view_helpers.rb" in your views directory, you can
|
207
85
|
define custom helpers for your Haml and ERB views. Just create a ViewHelpers
|
208
|
-
module and define your helper methods there:
|
86
|
+
module and define your custom helper methods there:
|
209
87
|
|
210
88
|
module ViewHelpers
|
211
|
-
|
212
|
-
|
89
|
+
|
90
|
+
# Calculate the years for a copyright
|
91
|
+
def copyright_years(start_year)
|
92
|
+
end_year = Date.today.year
|
93
|
+
if start_year == end_year
|
94
|
+
start_year
|
95
|
+
else
|
96
|
+
start_year.to_s + "–" + end_year.to_s
|
97
|
+
end
|
213
98
|
end
|
99
|
+
|
214
100
|
end
|
215
101
|
|
216
|
-
|
217
|
-
read and manipulate headers or do other fancy tricks.
|
218
|
-
|
219
|
-
Serve provides a number of stock helpers to make it easier for you to
|
220
|
-
prototype Rails applications:
|
102
|
+
You can then use your custom helper methods inside a view or layout:
|
221
103
|
|
222
|
-
|
223
|
-
html_escape(string) # escape HTML in string
|
224
|
-
h(string) # alias for html_escape
|
225
|
-
json_escape(string) # escape invalid JSON characters in string
|
226
|
-
j(string) # alias for json_escape
|
227
|
-
|
228
|
-
# Content Helpers
|
229
|
-
capture(&block) # Capture a block inside of a view or layout
|
230
|
-
content_for(symbol, &block) # Capture a block and store it by symbol
|
231
|
-
content_for?(symbol) # Has content been captured for symbol?
|
232
|
-
get_content_for(symbol) # Retrieve content for symbol (equivalent to `yield symbol`)
|
233
|
-
set_content_for(symbol, string) # Set content for symbol to string
|
234
|
-
|
235
|
-
# Flash Helpers
|
236
|
-
flash # fake flash for request
|
237
|
-
|
238
|
-
# Param Helpers
|
239
|
-
params # access params for request
|
240
|
-
boolean_param(key) # retrieve value of a boolean param (true/false)
|
241
|
-
|
242
|
-
# Render Helpers
|
243
|
-
render(partial) # Render a partial
|
244
|
-
|
245
|
-
# Tag Helpers
|
246
|
-
content_tag(name, content, ...) # a double HTML tag
|
247
|
-
tag(name, ...) # a single HTML tag
|
248
|
-
image_tag(src, ...) # an HTML image tag
|
249
|
-
image(name, ...) # shorthand for standard image tag
|
250
|
-
javascript_tag(...) # a javascript tag
|
251
|
-
link_to(name, href, ...) # a link to name at href
|
252
|
-
link_to_function(name, ...) # a link to a function
|
253
|
-
mail_to(email_address, ...) # a mailto link
|
104
|
+
<%= copyright_years(2010) %>
|
254
105
|
|
255
|
-
|
106
|
+
Serve also provides a number of stock helpers methods that are very similar to their Rails counter parts.
|
256
107
|
|
257
|
-
|
108
|
+
Learn more: http://get-serve.com/documentation/view-helpers
|
258
109
|
|
259
110
|
|
260
|
-
==
|
111
|
+
== "Design First" Prototyping
|
261
112
|
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
email :: Evaluates the document as if it is an e-mail message; the format is identical to a plain/text e-mail message's source
|
272
|
-
redirect :: Redirects to the URL contained on the last line of the file
|
273
|
-
|
274
|
-
|
275
|
-
== Exporting a Serve Project
|
276
|
-
|
277
|
-
The edge version of Serve now has limited support for exporting your Serve
|
278
|
-
project to HTML. To get started with the prerelease version:
|
279
|
-
|
280
|
-
gem install --pre serve
|
281
|
-
|
282
|
-
To export your project, use the new "export" command:
|
113
|
+
If you use a "Design First" methodology, you may find Serve especially useful
|
114
|
+
for prototyping your applications. Create a separate "prototype" project for
|
115
|
+
your application (using Serve) and copy views over into actual application
|
116
|
+
when they are ready to go. This workflow allows the designer to focus on
|
117
|
+
presentation and flow, while the developer can focuses on implementation. One
|
118
|
+
benefit to this approach is that the designer can identify and fix a large
|
119
|
+
number of design-related problems before a feature is ever touched by the
|
120
|
+
developer. Once a feature has been completed in the prototype project it can
|
121
|
+
also be estimated with a high degree of accuracy.
|
283
122
|
|
284
|
-
serve export project output
|
285
123
|
|
286
|
-
|
287
|
-
directory where you would like your HTML and CSS generated.
|
124
|
+
== Website & Documentation
|
288
125
|
|
289
|
-
|
290
|
-
please post them to the GitHub issue tracker.
|
126
|
+
Detailed documentation is available on the Serve website: http://get-serve.com
|
291
127
|
|
292
128
|
|
293
129
|
== Mailing List
|
@@ -297,16 +133,8 @@ Have questions? Please don't be ashamed to ask. Post them on the mailing list:
|
|
297
133
|
http://groups.google.com/group/serve-users
|
298
134
|
|
299
135
|
|
300
|
-
== More Information
|
301
|
-
|
302
|
-
You can find more information about Serve, including a detailed screencast, on
|
303
|
-
the GitHub wiki:
|
304
|
-
|
305
|
-
http://wiki.github.com/jlong/serve
|
306
|
-
|
307
|
-
|
308
136
|
== License
|
309
137
|
|
310
|
-
Serve is released under
|
138
|
+
Serve is released under a MIT-style license and is copyright (c) 2007-2011
|
311
139
|
John W. Long and Adam I. Williams. Portions have been contributed by Robert
|
312
|
-
Evans and others. A copy of the
|
140
|
+
Evans and others. A copy of the license can be found in the LICENSE file.
|
data/Rakefile
CHANGED
@@ -1,4 +1,12 @@
|
|
1
1
|
require 'rubygems'
|
2
|
+
require 'bundler'
|
3
|
+
begin
|
4
|
+
Bundler.setup(:default, :development)
|
5
|
+
rescue Bundler::BundlerError => e
|
6
|
+
$stderr.puts e.message
|
7
|
+
$stderr.puts "Run `bundle install` to install missing gems"
|
8
|
+
exit e.status_code
|
9
|
+
end
|
2
10
|
require 'rake'
|
3
11
|
|
4
12
|
load 'tasks/jeweler.rake'
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
1.5.0.
|
1
|
+
1.5.0.pre5
|
data/lib/serve/application.rb
CHANGED
@@ -82,12 +82,12 @@ module Serve
|
|
82
82
|
" #{program} command [arguments] [options]",
|
83
83
|
" ",
|
84
84
|
"Examples:",
|
85
|
-
" #{program}
|
86
|
-
" #{program} 2100
|
87
|
-
" #{program} mockups
|
88
|
-
" #{program} create
|
89
|
-
" #{program} convert
|
90
|
-
" #{program} export
|
85
|
+
" #{program} # launch server in current directory",
|
86
|
+
" #{program} 2100 # launch server on port 2100",
|
87
|
+
" #{program} mockups # launch server for mockups directory",
|
88
|
+
" #{program} create project # new structured project in project dir",
|
89
|
+
" #{program} convert project # convert a Compass project in directory",
|
90
|
+
" #{program} export project output # export project to output directory",
|
91
91
|
" ",
|
92
92
|
"Description:",
|
93
93
|
" Starts a web server on the specified address and port with its document root ",
|
@@ -124,6 +124,9 @@ module Serve
|
|
124
124
|
" convert",
|
125
125
|
" Converts an existing Compass project into a Rack-based Serve project.",
|
126
126
|
" ",
|
127
|
+
" export",
|
128
|
+
" Exports a Serve project to regular HTML and CSS.",
|
129
|
+
" ",
|
127
130
|
"Options:",
|
128
131
|
" -j, --javascript The name of the JavaScript Framework you'd like to use.",
|
129
132
|
" (Only valid for create and convert commands.)",
|
@@ -131,7 +134,7 @@ module Serve
|
|
131
134
|
" -v, --version Show the program version number and quit.",
|
132
135
|
" ",
|
133
136
|
"Further information:",
|
134
|
-
" http://
|
137
|
+
" http://get-serve.com/documentation"
|
135
138
|
].join("\n")
|
136
139
|
end
|
137
140
|
|
data/lib/serve/project.rb
CHANGED
@@ -72,6 +72,7 @@ module Serve #:nodoc:
|
|
72
72
|
tmp
|
73
73
|
views
|
74
74
|
).each { |path| make_path path }
|
75
|
+
create_file 'Gemfile', read_template('Gemfile')
|
75
76
|
create_file 'config.ru', read_template('config.ru')
|
76
77
|
create_file '.gitignore', read_template('gitignore')
|
77
78
|
create_file 'compass.config', read_template('compass.config')
|
@@ -0,0 +1,26 @@
|
|
1
|
+
source :rubygems
|
2
|
+
|
3
|
+
gem 'serve', '#{Serve.version}'
|
4
|
+
|
5
|
+
# Use edge instead:
|
6
|
+
# gem 'serve', :get => 'git://github.com/jlong/serve.git'
|
7
|
+
|
8
|
+
# Use Compass and Sass
|
9
|
+
gem 'compass'
|
10
|
+
|
11
|
+
# Markdown and Textile
|
12
|
+
# gem 'rdiscount'
|
13
|
+
# gem 'RedCloth'
|
14
|
+
|
15
|
+
# Other templating languages
|
16
|
+
# gem 'erubis'
|
17
|
+
# gem 'haml'
|
18
|
+
# gem 'slim'
|
19
|
+
# gem 'radius'
|
20
|
+
# gem 'less'
|
21
|
+
|
22
|
+
# Coffee Script
|
23
|
+
# gem 'coffee-script'
|
24
|
+
|
25
|
+
# Use mongrel for the Web server
|
26
|
+
# gem 'mongrel'
|
@@ -1,6 +1,14 @@
|
|
1
1
|
#\\ -p 4000
|
2
2
|
|
3
|
-
|
3
|
+
require 'rubygems'
|
4
|
+
require 'bundler'
|
5
|
+
begin
|
6
|
+
Bundler.setup(:default, :development)
|
7
|
+
rescue Bundler::BundlerError => e
|
8
|
+
$stderr.puts e.message
|
9
|
+
$stderr.puts "Run `bundle install` to install missing gems"
|
10
|
+
exit e.status_code
|
11
|
+
end
|
4
12
|
|
5
13
|
require 'serve'
|
6
14
|
require 'serve/rack'
|
metadata
CHANGED
@@ -1,14 +1,8 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: serve
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
|
6
|
-
segments:
|
7
|
-
- 1
|
8
|
-
- 5
|
9
|
-
- 0
|
10
|
-
- pre4
|
11
|
-
version: 1.5.0.pre4
|
4
|
+
prerelease: 6
|
5
|
+
version: 1.5.0.pre5
|
12
6
|
platform: ruby
|
13
7
|
authors:
|
14
8
|
- John W. Long
|
@@ -18,121 +12,229 @@ autorequire:
|
|
18
12
|
bindir: bin
|
19
13
|
cert_chain: []
|
20
14
|
|
21
|
-
date: 2011-07-
|
15
|
+
date: 2011-07-11 00:00:00 -04:00
|
22
16
|
default_executable: serve
|
23
17
|
dependencies:
|
24
18
|
- !ruby/object:Gem::Dependency
|
25
19
|
name: rack
|
26
|
-
prerelease: false
|
27
20
|
requirement: &id001 !ruby/object:Gem::Requirement
|
28
21
|
none: false
|
29
22
|
requirements:
|
30
23
|
- - ~>
|
31
24
|
- !ruby/object:Gem::Version
|
32
|
-
|
33
|
-
segments:
|
34
|
-
- 1
|
35
|
-
- 2
|
36
|
-
- 1
|
37
|
-
version: 1.2.1
|
25
|
+
version: "1.2"
|
38
26
|
type: :runtime
|
27
|
+
prerelease: false
|
39
28
|
version_requirements: *id001
|
40
29
|
- !ruby/object:Gem::Dependency
|
41
30
|
name: rack-test
|
42
|
-
prerelease: false
|
43
31
|
requirement: &id002 !ruby/object:Gem::Requirement
|
44
32
|
none: false
|
45
33
|
requirements:
|
46
34
|
- - ~>
|
47
35
|
- !ruby/object:Gem::Version
|
48
|
-
|
49
|
-
segments:
|
50
|
-
- 0
|
51
|
-
- 5
|
52
|
-
- 7
|
53
|
-
version: 0.5.7
|
36
|
+
version: "0.5"
|
54
37
|
type: :runtime
|
38
|
+
prerelease: false
|
55
39
|
version_requirements: *id002
|
56
40
|
- !ruby/object:Gem::Dependency
|
57
41
|
name: tilt
|
58
|
-
prerelease: false
|
59
42
|
requirement: &id003 !ruby/object:Gem::Requirement
|
60
43
|
none: false
|
61
44
|
requirements:
|
62
45
|
- - ~>
|
63
46
|
- !ruby/object:Gem::Version
|
64
|
-
|
65
|
-
segments:
|
66
|
-
- 1
|
67
|
-
- 3
|
68
|
-
- 1
|
69
|
-
version: 1.3.1
|
47
|
+
version: "1.3"
|
70
48
|
type: :runtime
|
49
|
+
prerelease: false
|
71
50
|
version_requirements: *id003
|
72
51
|
- !ruby/object:Gem::Dependency
|
73
52
|
name: activesupport
|
74
|
-
prerelease: false
|
75
53
|
requirement: &id004 !ruby/object:Gem::Requirement
|
76
54
|
none: false
|
77
55
|
requirements:
|
78
56
|
- - ~>
|
79
57
|
- !ruby/object:Gem::Version
|
80
|
-
|
81
|
-
segments:
|
82
|
-
- 3
|
83
|
-
- 0
|
84
|
-
- 7
|
85
|
-
version: 3.0.7
|
58
|
+
version: "3.0"
|
86
59
|
type: :runtime
|
60
|
+
prerelease: false
|
87
61
|
version_requirements: *id004
|
88
62
|
- !ruby/object:Gem::Dependency
|
89
63
|
name: tzinfo
|
90
|
-
prerelease: false
|
91
64
|
requirement: &id005 !ruby/object:Gem::Requirement
|
92
65
|
none: false
|
93
66
|
requirements:
|
94
|
-
- -
|
67
|
+
- - ">="
|
95
68
|
- !ruby/object:Gem::Version
|
96
|
-
|
97
|
-
segments:
|
98
|
-
- 0
|
99
|
-
- 3
|
100
|
-
- 23
|
101
|
-
version: 0.3.23
|
69
|
+
version: "0"
|
102
70
|
type: :runtime
|
71
|
+
prerelease: false
|
103
72
|
version_requirements: *id005
|
104
73
|
- !ruby/object:Gem::Dependency
|
105
74
|
name: i18n
|
106
|
-
prerelease: false
|
107
75
|
requirement: &id006 !ruby/object:Gem::Requirement
|
108
76
|
none: false
|
109
77
|
requirements:
|
110
|
-
- -
|
78
|
+
- - ">="
|
111
79
|
- !ruby/object:Gem::Version
|
112
|
-
|
113
|
-
segments:
|
114
|
-
- 0
|
115
|
-
- 5
|
116
|
-
- 0
|
117
|
-
version: 0.5.0
|
80
|
+
version: "0"
|
118
81
|
type: :runtime
|
82
|
+
prerelease: false
|
119
83
|
version_requirements: *id006
|
120
84
|
- !ruby/object:Gem::Dependency
|
121
|
-
name:
|
122
|
-
prerelease: false
|
85
|
+
name: rake
|
123
86
|
requirement: &id007 !ruby/object:Gem::Requirement
|
124
87
|
none: false
|
125
88
|
requirements:
|
126
89
|
- - ~>
|
127
90
|
- !ruby/object:Gem::Version
|
128
|
-
|
129
|
-
segments:
|
130
|
-
- 2
|
131
|
-
- 6
|
132
|
-
- 0
|
133
|
-
version: 2.6.0
|
91
|
+
version: 0.9.0
|
134
92
|
type: :development
|
93
|
+
prerelease: false
|
135
94
|
version_requirements: *id007
|
95
|
+
- !ruby/object:Gem::Dependency
|
96
|
+
name: rdoc
|
97
|
+
requirement: &id008 !ruby/object:Gem::Requirement
|
98
|
+
none: false
|
99
|
+
requirements:
|
100
|
+
- - ~>
|
101
|
+
- !ruby/object:Gem::Version
|
102
|
+
version: 3.8.0
|
103
|
+
type: :development
|
104
|
+
prerelease: false
|
105
|
+
version_requirements: *id008
|
106
|
+
- !ruby/object:Gem::Dependency
|
107
|
+
name: rspec
|
108
|
+
requirement: &id009 !ruby/object:Gem::Requirement
|
109
|
+
none: false
|
110
|
+
requirements:
|
111
|
+
- - ~>
|
112
|
+
- !ruby/object:Gem::Version
|
113
|
+
version: 2.6.0
|
114
|
+
type: :development
|
115
|
+
prerelease: false
|
116
|
+
version_requirements: *id009
|
117
|
+
- !ruby/object:Gem::Dependency
|
118
|
+
name: jeweler
|
119
|
+
requirement: &id010 !ruby/object:Gem::Requirement
|
120
|
+
none: false
|
121
|
+
requirements:
|
122
|
+
- - ~>
|
123
|
+
- !ruby/object:Gem::Version
|
124
|
+
version: 1.6.4
|
125
|
+
type: :development
|
126
|
+
prerelease: false
|
127
|
+
version_requirements: *id010
|
128
|
+
- !ruby/object:Gem::Dependency
|
129
|
+
name: haml
|
130
|
+
requirement: &id011 !ruby/object:Gem::Requirement
|
131
|
+
none: false
|
132
|
+
requirements:
|
133
|
+
- - ~>
|
134
|
+
- !ruby/object:Gem::Version
|
135
|
+
version: 3.1.1
|
136
|
+
type: :development
|
137
|
+
prerelease: false
|
138
|
+
version_requirements: *id011
|
139
|
+
- !ruby/object:Gem::Dependency
|
140
|
+
name: sass
|
141
|
+
requirement: &id012 !ruby/object:Gem::Requirement
|
142
|
+
none: false
|
143
|
+
requirements:
|
144
|
+
- - ~>
|
145
|
+
- !ruby/object:Gem::Version
|
146
|
+
version: 3.1.1
|
147
|
+
type: :development
|
148
|
+
prerelease: false
|
149
|
+
version_requirements: *id012
|
150
|
+
- !ruby/object:Gem::Dependency
|
151
|
+
name: compass
|
152
|
+
requirement: &id013 !ruby/object:Gem::Requirement
|
153
|
+
none: false
|
154
|
+
requirements:
|
155
|
+
- - ~>
|
156
|
+
- !ruby/object:Gem::Version
|
157
|
+
version: 0.11.1
|
158
|
+
type: :development
|
159
|
+
prerelease: false
|
160
|
+
version_requirements: *id013
|
161
|
+
- !ruby/object:Gem::Dependency
|
162
|
+
name: slim
|
163
|
+
requirement: &id014 !ruby/object:Gem::Requirement
|
164
|
+
none: false
|
165
|
+
requirements:
|
166
|
+
- - ~>
|
167
|
+
- !ruby/object:Gem::Version
|
168
|
+
version: 0.9.4
|
169
|
+
type: :development
|
170
|
+
prerelease: false
|
171
|
+
version_requirements: *id014
|
172
|
+
- !ruby/object:Gem::Dependency
|
173
|
+
name: rdiscount
|
174
|
+
requirement: &id015 !ruby/object:Gem::Requirement
|
175
|
+
none: false
|
176
|
+
requirements:
|
177
|
+
- - ~>
|
178
|
+
- !ruby/object:Gem::Version
|
179
|
+
version: 1.6.8
|
180
|
+
type: :development
|
181
|
+
prerelease: false
|
182
|
+
version_requirements: *id015
|
183
|
+
- !ruby/object:Gem::Dependency
|
184
|
+
name: RedCloth
|
185
|
+
requirement: &id016 !ruby/object:Gem::Requirement
|
186
|
+
none: false
|
187
|
+
requirements:
|
188
|
+
- - ~>
|
189
|
+
- !ruby/object:Gem::Version
|
190
|
+
version: 4.2.7
|
191
|
+
type: :development
|
192
|
+
prerelease: false
|
193
|
+
version_requirements: *id016
|
194
|
+
- !ruby/object:Gem::Dependency
|
195
|
+
name: erubis
|
196
|
+
requirement: &id017 !ruby/object:Gem::Requirement
|
197
|
+
none: false
|
198
|
+
requirements:
|
199
|
+
- - ~>
|
200
|
+
- !ruby/object:Gem::Version
|
201
|
+
version: 2.7.0
|
202
|
+
type: :development
|
203
|
+
prerelease: false
|
204
|
+
version_requirements: *id017
|
205
|
+
- !ruby/object:Gem::Dependency
|
206
|
+
name: less
|
207
|
+
requirement: &id018 !ruby/object:Gem::Requirement
|
208
|
+
none: false
|
209
|
+
requirements:
|
210
|
+
- - ~>
|
211
|
+
- !ruby/object:Gem::Version
|
212
|
+
version: 1.2.21
|
213
|
+
type: :development
|
214
|
+
prerelease: false
|
215
|
+
version_requirements: *id018
|
216
|
+
- !ruby/object:Gem::Dependency
|
217
|
+
name: radius
|
218
|
+
requirement: &id019 !ruby/object:Gem::Requirement
|
219
|
+
none: false
|
220
|
+
requirements:
|
221
|
+
- - ~>
|
222
|
+
- !ruby/object:Gem::Version
|
223
|
+
version: 0.6.1
|
224
|
+
type: :development
|
225
|
+
prerelease: false
|
226
|
+
version_requirements: *id019
|
227
|
+
- !ruby/object:Gem::Dependency
|
228
|
+
name: coffee-script
|
229
|
+
requirement: &id020 !ruby/object:Gem::Requirement
|
230
|
+
none: false
|
231
|
+
requirements:
|
232
|
+
- - ~>
|
233
|
+
- !ruby/object:Gem::Version
|
234
|
+
version: 2.2.0
|
235
|
+
type: :development
|
236
|
+
prerelease: false
|
237
|
+
version_requirements: *id020
|
136
238
|
description: Serve is a small Rack-based web server that makes it easy to serve ERB or HAML from any directory. Serve is an ideal tool for building HTML prototypes of Rails applications. Serve can also handle SASS, Textile, and Markdown if the appropriate gems are installed.
|
137
239
|
email: me@johnwlong.com
|
138
240
|
executables:
|
@@ -147,7 +249,6 @@ files:
|
|
147
249
|
- Gemfile
|
148
250
|
- Gemfile.lock
|
149
251
|
- LICENSE
|
150
|
-
- QUICKSTART.rdoc
|
151
252
|
- README.rdoc
|
152
253
|
- Rakefile
|
153
254
|
- VERSION
|
@@ -167,6 +268,7 @@ files:
|
|
167
268
|
- lib/serve/project.rb
|
168
269
|
- lib/serve/rack.rb
|
169
270
|
- lib/serve/router.rb
|
271
|
+
- lib/serve/templates/Gemfile
|
170
272
|
- lib/serve/templates/README.markdown
|
171
273
|
- lib/serve/templates/_layout.html.erb
|
172
274
|
- lib/serve/templates/application.scss
|
@@ -197,8 +299,8 @@ post_install_message: |-
|
|
197
299
|
|
198
300
|
Serve doesn't install these dependencies by default, so that you can
|
199
301
|
make your own decisions about what you want to use.
|
200
|
-
rdoc_options:
|
201
|
-
|
302
|
+
rdoc_options: []
|
303
|
+
|
202
304
|
require_paths:
|
203
305
|
- lib
|
204
306
|
required_ruby_version: !ruby/object:Gem::Requirement
|
@@ -206,7 +308,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
206
308
|
requirements:
|
207
309
|
- - ">="
|
208
310
|
- !ruby/object:Gem::Version
|
209
|
-
hash:
|
311
|
+
hash: 1813519296002584178
|
210
312
|
segments:
|
211
313
|
- 0
|
212
314
|
version: "0"
|
@@ -215,21 +317,13 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
215
317
|
requirements:
|
216
318
|
- - ">"
|
217
319
|
- !ruby/object:Gem::Version
|
218
|
-
hash: 25
|
219
|
-
segments:
|
220
|
-
- 1
|
221
|
-
- 3
|
222
|
-
- 1
|
223
320
|
version: 1.3.1
|
224
321
|
requirements: []
|
225
322
|
|
226
323
|
rubyforge_project:
|
227
|
-
rubygems_version: 1.
|
324
|
+
rubygems_version: 1.6.2
|
228
325
|
signing_key:
|
229
326
|
specification_version: 3
|
230
327
|
summary: Serve is a small web server that makes it easy to serve ERB or HAML from any directory.
|
231
|
-
test_files:
|
232
|
-
|
233
|
-
- spec/project_spec.rb
|
234
|
-
- spec/router_spec.rb
|
235
|
-
- spec/spec_helper.rb
|
328
|
+
test_files: []
|
329
|
+
|
data/QUICKSTART.rdoc
DELETED
@@ -1,241 +0,0 @@
|
|
1
|
-
= Serve Quickstart - Prototyping Rails Applications
|
2
|
-
|
3
|
-
|
4
|
-
<b>This is tutorial is incomplete. Help us finish it!</b>
|
5
|
-
|
6
|
-
Serve is a rapid prototyping framework for Rails applications. It is designed to compliment Rails development and enforce a strict separation of concerns between designer and developer. Using Serve with Rails allows the designer to happily work in his own space creating an HTML prototype of the application, while the developer works on the Rails application and copies over HTML from the prototype as needed. This allows the designer to focus on presentation and flow while the developer can focus on the implementation.
|
7
|
-
|
8
|
-
Let's have a look at how it all works.
|
9
|
-
|
10
|
-
|
11
|
-
== Installation
|
12
|
-
|
13
|
-
To get started we need to download and install the Ruby gem for Serve:
|
14
|
-
|
15
|
-
$ sudo gem install serve
|
16
|
-
|
17
|
-
After we've done that it's probably a good idea to install a couple of additional gems so that Serve will play nicely with HAML, Markdown, and Textile:
|
18
|
-
|
19
|
-
$ sudo gem install haml BlueCloth RedCloth
|
20
|
-
|
21
|
-
|
22
|
-
== Project Directory Structure
|
23
|
-
|
24
|
-
Once we have everything installed the next thing to do is setup the project directory. I like to setup my projects with the following directory structure:
|
25
|
-
|
26
|
-
artwork :: Logos and other identity design files go here
|
27
|
-
mockups :: Fireworks or Photoshop web app mockups go here
|
28
|
-
prototype :: The HTML prototype for the web app goes here
|
29
|
-
application :: The actual Rails application is here
|
30
|
-
|
31
|
-
Let's go ahead and setup the directory for the prototype. We'll use the `serve create` command to create the initial project directory and files:
|
32
|
-
|
33
|
-
$ serve create prototype
|
34
|
-
|
35
|
-
This should output:
|
36
|
-
|
37
|
-
create prototype
|
38
|
-
create prototype/public
|
39
|
-
create prototype/tmp
|
40
|
-
create prototype/views
|
41
|
-
create prototype/config.ru
|
42
|
-
create prototype/LICENSE
|
43
|
-
create prototype/.gitignore
|
44
|
-
create prototype/compass.config
|
45
|
-
create prototype/README.markdown
|
46
|
-
create prototype/public/images
|
47
|
-
create prototype/public/javascripts
|
48
|
-
create prototype/public/stylesheets
|
49
|
-
create prototype/sass
|
50
|
-
create prototype/sass/application.sass
|
51
|
-
create prototype/views/_layout.html.erb
|
52
|
-
create prototype/views/hello.html.erb
|
53
|
-
create prototype/views/view_helpers.rb
|
54
|
-
create prototype/views/index.redirect
|
55
|
-
|
56
|
-
You'll note that the `serve create` command creates a directory structure that is somewhat similar to a Rails project:
|
57
|
-
|
58
|
-
prototype/
|
59
|
-
|
|
60
|
-
+-- config.ru # Rack configuration file
|
61
|
-
|
|
62
|
-
+-- compass.config # Compass configuration file
|
63
|
-
|
|
64
|
-
+-- public/ # Directories for static assets
|
65
|
-
| |
|
66
|
-
| +-- stylesheets/ # Compiled stylesheets
|
67
|
-
| |
|
68
|
-
| +-- images/
|
69
|
-
| |
|
70
|
-
| `-- javascripts/
|
71
|
-
|
|
72
|
-
+-- sass/ # Store Sass source files here
|
73
|
-
| |
|
74
|
-
| `-- application.sass # Example Sass file for application
|
75
|
-
|
|
76
|
-
+-- tmp/ # Needed for Passenger (mod_passenger)
|
77
|
-
| |
|
78
|
-
| `-- restart.txt
|
79
|
-
|
|
80
|
-
`-- views/ # Store your ERB, Haml, etc. here
|
81
|
-
|
|
82
|
-
+-- _layout.html.erb # Example layout
|
83
|
-
|
|
84
|
-
+-- hello.html.erb # Example view
|
85
|
-
|
|
86
|
-
`-- view_helpers.rb # Example view helpers
|
87
|
-
|
88
|
-
Views and layouts for your prototype application belong in the "views" directory. The "public" directory is for static assets -- resources like images or javascripts that don't need server side processing. The "sass" directory is the place where you should store Sass source files (if you use those). Serve will automatically compile Sass and SCSS files stored here into <tt>public/stylesheets</tt> directory.
|
89
|
-
|
90
|
-
|
91
|
-
== Creating Our First Screen
|
92
|
-
|
93
|
-
Now that we have the prototype directory set up, let's create our first page so that you can get a feel for how Serve works. This will be a simple HTML login page for our application.
|
94
|
-
|
95
|
-
In the "views" directory, create a file named "login.html.erb" and insert the following source code:
|
96
|
-
|
97
|
-
<form action="/dashboard/" method="put">
|
98
|
-
<p>
|
99
|
-
<label for="username">Username</label>
|
100
|
-
<input type="text" name="username" id="username" />
|
101
|
-
</p>
|
102
|
-
<p>
|
103
|
-
<label for="password">Password</label>
|
104
|
-
<input type="password" name="password" id="password" />
|
105
|
-
</p>
|
106
|
-
<p>
|
107
|
-
<input type="submit" value="Login" />
|
108
|
-
</p>
|
109
|
-
</form>
|
110
|
-
|
111
|
-
|
112
|
-
== Starting Serve
|
113
|
-
|
114
|
-
To view our login page in a Web browser, we need to start up Serve in the directory where we are building the prototype:
|
115
|
-
|
116
|
-
% cd prototype
|
117
|
-
% serve
|
118
|
-
[2008-02-23 15:19:05] INFO WEBrick 1.3.1
|
119
|
-
[2008-02-23 15:19:05] INFO ruby 1.8.6 (2007-09-24) [universal-darwin9.0]
|
120
|
-
[2008-02-23 15:19:05] INFO Serve::Server#start: pid=5087 port=4000
|
121
|
-
...
|
122
|
-
|
123
|
-
Once you execute the `serve` command it will launch a mini Web server for the prototype and will output a noisy log of any activity. (To stop the command at any point simply switch back to the command line and press Ctrl+C.)
|
124
|
-
|
125
|
-
By default the `serve` command automatically serves files from the directory that it is started in over port 4000 on your local machine. To access the the prototype in your Web browser go to:
|
126
|
-
|
127
|
-
http://localhost:4000
|
128
|
-
|
129
|
-
Now navigate to the following URL:
|
130
|
-
|
131
|
-
http://localhost:4000/login/
|
132
|
-
|
133
|
-
You should see the contents of the login page. Note that Serve allows you to refer to pages without their extension. This allows you to use URLs in your documents that correspond to the URLs that Rails uses by default.
|
134
|
-
|
135
|
-
|
136
|
-
== Layouts
|
137
|
-
|
138
|
-
One thing to note about the source that I gave you for the login page. I intentionally left out the <html>, <head>, and <body> tags because they belong a layout---not the source file. Let's go ahead and define that layout now.
|
139
|
-
|
140
|
-
Replace the contents of the file named "_layout.html.erb" in the "views" directory of your prototype with the following:
|
141
|
-
|
142
|
-
<html>
|
143
|
-
<head>
|
144
|
-
<title><%= @title %></title>
|
145
|
-
</head>
|
146
|
-
<body>
|
147
|
-
<h1><%= @title %>/h1>
|
148
|
-
<%= yield %>
|
149
|
-
</body>
|
150
|
-
</html>
|
151
|
-
|
152
|
-
This layout includes a small amount of ERB. ERB stands for Embedded Ruby. ERB allows you to embed Ruby code into a web page to dynamically render content. In our case, we are using it in the layout to indicate the title of the web page and to insert the content of the page at the appropriate point. You can use ERB in layout or view files.
|
153
|
-
|
154
|
-
Embedded Ruby is delineated with the opening and closing sequence <% and %> respectively. Sequences that begin with an addition equals sign insert their output directly into the HTML. In this case we want to render the @title variable as the title in the head and as the first heading in the document body. The `yield` keyword is used to insert the content of the page at that point.
|
155
|
-
|
156
|
-
We need to make one small change to our login page before continuing. Insert the following line at the top of login.html.erb file:
|
157
|
-
|
158
|
-
<% @title = "Login" %>
|
159
|
-
|
160
|
-
This will set the @title variable for the login page. Now, switch back to your Web browser and navigate to:
|
161
|
-
|
162
|
-
http://localhost:4000/login/
|
163
|
-
|
164
|
-
The page should now have a title and heading that both read "Login".
|
165
|
-
|
166
|
-
== Content regions with `content_for`
|
167
|
-
|
168
|
-
Let's add a sidebar to the login page. To do this in a layout friendly way, we will use the `content_for` helper method to define the sidebar.
|
169
|
-
|
170
|
-
Add the following code to the bottom of login.html.erb:
|
171
|
-
|
172
|
-
<% content_for :sidebar do %>
|
173
|
-
<h3>New Around Here?</h3>
|
174
|
-
<p>No problem! Just <a href="/signup/">create an account</a>.</p>
|
175
|
-
<% end %>
|
176
|
-
|
177
|
-
This defines a new content region of the page that we can render wherever we want in the layout. The :sidebar symbol defines the name of the content region.
|
178
|
-
|
179
|
-
Now to modify the layout to work with this new content region. In _layout.html.erb replace the code:
|
180
|
-
|
181
|
-
<h1><%= @title %>/h1>
|
182
|
-
<%= yield %>
|
183
|
-
|
184
|
-
With the following:
|
185
|
-
|
186
|
-
<div id="content">
|
187
|
-
<h1><%= @title %>/h1>
|
188
|
-
<%= yield %>
|
189
|
-
</div>
|
190
|
-
<div id="sidebar">
|
191
|
-
<%= yield :sidebar %>
|
192
|
-
</div>
|
193
|
-
|
194
|
-
This defines two new divs for the content and sidebar portions of the document. The first call to `yield` renders the content portion of a view (everything apart from regions defined by calls to `content_for`). The second call to `yield` passes the name of our content region as a symbol. When yield is called with a symbol, it renders the associated content region. In our case `yield :sidebar` causes Serve to render the content that we defined for the :sidebar region at that point in the layout.
|
195
|
-
|
196
|
-
Now add a block for inline styles to the "head" of the layout:
|
197
|
-
|
198
|
-
<styles>
|
199
|
-
#content { float: left; width: 60%; }
|
200
|
-
#sidebar { float: right; width: 40%; }
|
201
|
-
</styles>
|
202
|
-
|
203
|
-
We could certainly put this in it's own file (in the public/stylesheets directory), but for the purposes of this demonstration, it works just as well in the head of the document.
|
204
|
-
|
205
|
-
The full layout file should now look like this:
|
206
|
-
|
207
|
-
<html>
|
208
|
-
<head>
|
209
|
-
<title><%= @title %></title>
|
210
|
-
<styles>
|
211
|
-
#content { float: left; width: 60%; }
|
212
|
-
#sidebar { float: right; width: 40%; }
|
213
|
-
</styles>
|
214
|
-
</head>
|
215
|
-
<body>
|
216
|
-
<div id="content">
|
217
|
-
<h1><%= @title %>/h1>
|
218
|
-
<%= yield %>
|
219
|
-
</div>
|
220
|
-
<div id="sidebar">
|
221
|
-
<%= yield :sidebar %>
|
222
|
-
</div>
|
223
|
-
</body>
|
224
|
-
</html>
|
225
|
-
|
226
|
-
Now switch back to your Web browser at:
|
227
|
-
|
228
|
-
http://localhost:4000/login/
|
229
|
-
|
230
|
-
And check out the new multi-column layout on the login page.
|
231
|
-
|
232
|
-
|
233
|
-
== Partials
|
234
|
-
|
235
|
-
<%= render 'footer' %>
|
236
|
-
|
237
|
-
== View Helpers
|
238
|
-
|
239
|
-
view_helpers.rb
|
240
|
-
|
241
|
-
This tutorial is incomplete. Patches are welcome!
|