staticmatic 0.8.1 → 0.8.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,3 +1,5 @@
1
+ require 'fileutils'
2
+
1
3
  module StaticMatic
2
4
  class Base
3
5
  # Directories generated for a new site setup
@@ -26,7 +28,7 @@ module StaticMatic
26
28
  @templates_dir = File.dirname(__FILE__) + '/templates'
27
29
  @layout = "application"
28
30
  @scope = Object.new
29
- @scope.instance_variable_set("@base_dir", @base_dir)
31
+ @scope.instance_variable_set("@staticmatic", self)
30
32
  end
31
33
 
32
34
 
@@ -79,17 +81,16 @@ module StaticMatic
79
81
  end
80
82
 
81
83
  def save_page(filename, content)
82
- filename = "#{filename}"
83
84
  generate_site_file(filename, 'html', content)
84
85
  end
85
86
 
86
87
  def save_stylesheet(filename, content)
87
- filename = "stylesheets/#{filename}"
88
- generate_site_file(filename, 'css', content)
88
+ generate_site_file(File.join('stylesheets', filename), 'css', content)
89
89
  end
90
90
 
91
91
  def generate_site_file(filename, extension, content)
92
92
  path = File.join(@site_dir,"#{filename}.#{extension}")
93
+ FileUtils.mkdir_p(File.dirname(path))
93
94
  File.open(path, 'w+') do |f|
94
95
  f << content
95
96
  end
@@ -98,43 +99,38 @@ module StaticMatic
98
99
  end
99
100
 
100
101
  def source_for_layout
101
- layout_template = "#{@src_dir}/layouts/#{@layout}.haml"
102
- if File.exists?(layout_template)
103
- File.read(layout_template)
102
+ if layout_exists?(@layout)
103
+ File.read(full_layout_path(@layout))
104
104
  else
105
- raise StaticMatic::Error.new("", layout_template, "Layout not found")
105
+ raise StaticMatic::Error.new("", full_layout_path(@layout), "Layout not found")
106
106
  end
107
107
  end
108
108
 
109
109
  # Generate html from source file:
110
110
  # generate_html("index.haml")
111
- def generate_html(source_file)
112
- full_file_path = "#{@src_dir}/pages/#{source_file}.haml"
113
- begin
114
- page = Haml::Engine.new(File.read(full_file_path), :locals => {:base_dir => base_dir})
115
- html = page.render(@scope)
116
-
117
- # TODO: DRY this up
118
- if @scope.instance_variable_get("@layout")
119
- @layout = @scope.instance_variable_get("@layout")
120
- end
121
-
122
- html
123
- rescue Haml::Error => haml_error
124
- raise StaticMatic::Error.new(haml_error.haml_line, full_file_path, haml_error.message)
111
+ def generate_html(source_file, source_dir = '')
112
+ full_file_path = File.join(@src_dir, 'pages', source_dir, "#{source_file}.haml")
113
+
114
+ html = generate_html_from_template_source(File.read(full_file_path)) {}
115
+
116
+ # TODO: DRY this up
117
+ if @scope.instance_variable_get("@layout")
118
+ @layout = @scope.instance_variable_get("@layout")
125
119
  end
120
+
121
+ html
126
122
  end
127
123
 
128
- def generate_html_with_layout(source)
129
- begin
130
- generated_content = generate_html(source)
131
- Haml::Engine.new(source_for_layout, :locals => {:base_dir => base_dir}).render(@scope) { generated_content }
132
- rescue StaticMatic::Error => staticmatic_error
133
- # Catch any errors from the actual template - otherwise the error will be assumed to be from the
134
- # layout
135
- raise staticmatic_error
136
- rescue Haml::Error => haml_error
137
- raise StaticMatic::Error.new(haml_error.haml_line, "Layout: #{@layout}", haml_error.message)
124
+ def generate_html_with_layout(source, source_dir = '')
125
+ @layout = layout_from_source_dir(source_dir)
126
+ generate_html_from_template_source(source_for_layout) { generate_html(source, source_dir) }
127
+ end
128
+
129
+ def generate_partial(name)
130
+ partial_path = File.join(@src_dir, 'partials', "#{name}.haml")
131
+
132
+ if File.exists?(partial_path)
133
+ generate_html_from_template_source(File.read(partial_path))
138
134
  end
139
135
  end
140
136
 
@@ -143,39 +139,91 @@ module StaticMatic
143
139
  begin
144
140
  stylesheet = Sass::Engine.new(File.read(full_file_path))
145
141
  stylesheet.to_css
146
- rescue Sass::Error => sass_error
142
+ rescue Sass::SyntaxError => sass_error
147
143
  raise StaticMatic::Error.new(sass_error.sass_line, full_file_path, sass_error.message)
148
144
  end
149
145
  end
146
+
147
+ # Generates html from the passed source string
148
+ #
149
+ # generate_html_from_template_source("%h1 Welcome to My Site") -> "<h1>Welcome to My Site</h1>"
150
+ #
151
+ # Pass a block containing a string to yield within in the passed source:
152
+ #
153
+ # generate_html_from_template_source("content:\n= yield") { "blah" } -> "content: blah"
154
+ #
155
+ def generate_html_from_template_source(source)
156
+
157
+ html = Haml::Engine.new(source)
158
+
159
+ begin
160
+ html.render(@scope) { yield }
161
+ rescue StaticMatic::Error => staticmatic_error
162
+ # Catch any errors from the actual template - otherwise the error will be assumed to be from the
163
+ # layout
164
+ raise staticmatic_error
165
+ rescue Haml::Error => haml_error
166
+ raise StaticMatic::Error.new(haml_error.haml_line, "Layout: #{@layout}", haml_error.message)
167
+ end
168
+ end
169
+
170
+ def layout_from_source_dir(dir)
171
+ layout_name = "application"
150
172
 
173
+ if dir
174
+ dirs = dir.split("/")
175
+ dir_layout_name = dirs[1]
176
+
177
+ if layout_exists?(dir_layout_name)
178
+ layout_name = dir_layout_name
179
+ end
180
+ end
181
+
182
+ layout_name
183
+ end
151
184
 
152
- def template_exists?(name)
153
- File.exists?("#{@src_dir}/pages/#{name}.haml") || File.exists?("#{@src_dir}/stylesheets/#{name}.sass")
154
- end
185
+ # TODO: DRY this _exists? section up
186
+ def template_exists?(name, dir = '')
187
+ File.exists?(File.join(@src_dir, 'pages', dir, "#{name}.haml")) || File.exists?(File.join(@src_dir, 'stylesheets', "#{name}.sass"))
188
+ end
189
+
190
+ def layout_exists?(name)
191
+ File.exists? full_layout_path(name)
192
+ end
193
+
194
+ def template_directory?(path)
195
+ File.directory?(File.join(@src_dir, 'pages', path))
196
+ end
197
+
198
+ def full_layout_path(name)
199
+ "#{@src_dir}/layouts/#{name}.haml"
200
+ end
155
201
 
156
202
  # Build HTML from the source files
157
203
  def build_html
158
204
  Dir["#{@src_dir}/pages/**/*.haml"].each do |path|
159
- template = source_template_from_path(path)
160
- save_page(template, generate_html_with_layout(template))
205
+ file_dir, template = source_template_from_path(path.sub(/^#{@src_dir}\/pages/, ''))
206
+ save_page(File.join(file_dir, template), generate_html_with_layout(template, file_dir))
161
207
 
162
208
  # reset the layout for the next page
163
- @scope.instance_variable_set("@layout", "application")
209
+ @scope.instance_variable_set("@layout", nil)
164
210
  end
165
211
  end
166
212
 
167
213
  # Build CSS from the source files
168
214
  def build_css
169
215
  Dir["#{@src_dir}/stylesheets/**/*.sass"].each do |path|
170
- template = source_template_from_path(path)
171
- save_stylesheet(template, generate_css(template))
216
+ file_dir, template = source_template_from_path(path.sub(/^#{@src_dir}\/stylesheets/, ''))
217
+ save_stylesheet(File.join(file_dir, template), generate_css(template, file_dir))
172
218
  end
173
219
  end
174
220
 
175
221
  # Returns a raw template name from a source file path:
176
222
  # source_template_from_path("/path/to/site/src/stylesheets/application.sass") -> "application"
177
223
  def source_template_from_path(path)
178
- File.basename(path).chomp(File.extname(path))
224
+ file_dir, file_name = File.split(path)
225
+ file_name.chomp!(File.extname(file_name))
226
+ [ file_dir, file_name ]
179
227
  end
180
228
 
181
229
  class << self
@@ -3,13 +3,13 @@ module StaticMatic
3
3
  self.extend self
4
4
 
5
5
  # Generates links to all stylesheets in the source directory
6
- def stylesheets
7
- stylesheet_dir = "#{@base_dir}/src/stylesheets"
6
+ def stylesheets(options = {})
7
+ stylesheet_dir = "#{@staticmatic.base_dir}/src/stylesheets"
8
8
 
9
9
  stylesheet_directories = Dir["#{stylesheet_dir}/**/*.sass"]
10
10
 
11
11
  # Bit of a hack here - adds any stylesheets that exist in the site/ dir that haven't been generated from source sass
12
- Dir["#{@base_dir}/site/stylesheets/*.css"].each do |filename|
12
+ Dir["#{@staticmatic.base_dir}/site/stylesheets/*.css"].each do |filename|
13
13
  search_filename = File.basename(filename).chomp(File.extname(filename))
14
14
  already_included = false
15
15
  stylesheet_directories.each do |path|
@@ -25,7 +25,12 @@ module StaticMatic
25
25
  output = ""
26
26
  stylesheet_directories.each do |path|
27
27
  filename_without_extension = File.basename(path).chomp(File.extname(path))
28
- output << tag(:link, :href => "/stylesheets/#{filename_without_extension}.css", :rel => 'stylesheet', :media => 'all')
28
+ href = "stylesheets/#{filename_without_extension}.css"
29
+
30
+ if !options[:relative]
31
+ href = "/#{href}"
32
+ end
33
+ output << tag(:link, :href => href, :rel => 'stylesheet', :media => 'all')
29
34
  end
30
35
 
31
36
  output
@@ -68,7 +73,9 @@ module StaticMatic
68
73
 
69
74
  # Generates an image tag
70
75
  def img(name, options = {})
71
- tag :img, options.merge!({:src => "images/#{name}"})
76
+ options[:src] = "images/#{name}"
77
+ options[:alt] ||= name.split('.').first.capitalize.gsub(/_|-/, ' ')
78
+ tag :img, options
72
79
  end
73
80
 
74
81
  # Generates HTML tags:
@@ -106,5 +113,10 @@ module StaticMatic
106
113
  sub(/_{2,}/, "_").
107
114
  downcase
108
115
  end
116
+
117
+ # Include a partial template
118
+ def partial(name)
119
+ @staticmatic.generate_partial(name)
120
+ end
109
121
  end
110
122
  end
@@ -11,28 +11,23 @@ module StaticMatic
11
11
  path_info = request.params[Mongrel::Const::PATH_INFO]
12
12
  get_or_head = @@file_only_methods.include? request.params[Mongrel::Const::REQUEST_METHOD]
13
13
 
14
- file_to_serve = path_info
15
-
16
- file_name, file_ext = path_info.split('.')
17
-
18
- if file_name == "/"
19
- file_name = "index"
20
- file_ext = "html"
21
- end
22
-
14
+ file_dir, file_name, file_ext = expand_path(path_info)
15
+
23
16
  # remove stylesheets/ directory if applicable
24
- file_name.gsub!("/stylesheets/", "")
25
-
17
+ file_dir.gsub!(/^\/stylesheets\/?/, "")
18
+
26
19
  if file_ext && file_ext.match(/html|css/)
27
20
  response.start(200) do |head, out|
21
+ head["Content-Type"] = "text/html"
28
22
  output = ""
29
23
 
30
- if @staticmatic.template_exists?(file_name)
24
+ if @staticmatic.template_exists?(file_name, file_dir)
25
+
31
26
  begin
32
- if file_ext == "html"
33
- output = @staticmatic.generate_html_with_layout("#{file_name}")
34
- elsif file_ext == "css"
35
- output = @staticmatic.generate_css("#{file_name}")
27
+ if file_ext == "css"
28
+ output = @staticmatic.generate_css(file_name, file_dir)
29
+ else
30
+ output = @staticmatic.generate_html_with_layout(file_name, file_dir)
36
31
  end
37
32
  rescue StaticMatic::Error => e
38
33
  output = e.message
@@ -53,6 +48,24 @@ module StaticMatic
53
48
  end
54
49
  end
55
50
  end
51
+
52
+ def expand_path(path_info)
53
+ dirname, basename = File.split(path_info)
54
+ extname = File.extname(path_info).sub(/^\./, '')
55
+ filename = basename.chomp(".#{extname}")
56
+
57
+ if extname.empty?
58
+ dir = File.join(dirname, filename)
59
+ is_dir = path_info[-1, 1] == '/' || (@staticmatic.template_directory?(dir) && !@staticmatic.template_exists?(filename, dirname))
60
+ if is_dir
61
+ dirname = dir
62
+ filename = 'index'
63
+ end
64
+ extname = 'html'
65
+ end
66
+
67
+ [ dirname, filename, extname ]
68
+ end
56
69
 
57
70
  class << self
58
71
  # Starts the StaticMatic preview server
Binary file
data/test/base_test.rb CHANGED
@@ -43,6 +43,10 @@ class StaticMaticBaseTest < Test::Unit::TestCase
43
43
  end
44
44
 
45
45
  def test_should_find_source_filename_from_path
46
- assert_equal "application", @staticmatic.source_template_from_path("@base_dir/src/stylesheets/application.css")
46
+ assert_equal "application", @staticmatic.source_template_from_path("@base_dir/src/stylesheets/application.css")[1]
47
+ end
48
+
49
+ def test_should_find_layout_from_passed_path
50
+ assert_equal "projects", @staticmatic.layout_from_source_dir("test/projects")
47
51
  end
48
52
  end
data/test/helpers_test.rb CHANGED
@@ -5,11 +5,15 @@ class HelpersTest < Test::Unit::TestCase
5
5
  include StaticMatic::Helpers
6
6
 
7
7
  def setup
8
- @base_dir = File.dirname(__FILE__) + '/sandbox/test_site'
8
+ @staticmatic = StaticMatic::Base.new(File.dirname(__FILE__) + '/sandbox/test_site')
9
9
  end
10
10
 
11
11
  def test_should_generate_stylesheet_links
12
- assert_match "href=\"stylesheets\/application.css\"", stylesheets
12
+ assert_match "href=\"/stylesheets\/application.css\"", stylesheets
13
+ end
14
+
15
+ def test_should_generate_stylesheet_links_with_relative_path
16
+ assert_match "href=\"stylesheets\/application.css\"", stylesheets(:relative => true)
13
17
  end
14
18
 
15
19
  def test_should_autolink_page
@@ -40,4 +44,10 @@ class HelpersTest < Test::Unit::TestCase
40
44
  expected_output = %q{src="javascripts/test.js"}
41
45
  assert_match expected_output, javascripts('test')
42
46
  end
47
+
48
+ # Soon...
49
+ def test_should_include_partial_template
50
+ expected_output = "My Menu"
51
+ assert_match expected_output, partial("menu")
52
+ end
43
53
  end
@@ -0,0 +1 @@
1
+ %h1 Sub dir test
@@ -0,0 +1 @@
1
+ My Menu
@@ -1,14 +1,15 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
- <html>
2
+ <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
3
3
  <head>
4
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
4
5
  <title>StaticMatic</title>
5
- <link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
6
+ <link href="/stylesheets/application.css" media="all" rel="stylesheet"/>
6
7
  </head>
7
8
  <body>
8
9
  <div id='container'>
9
10
  <div id='header'>
10
11
  <div class='bycurve21'>
11
- <a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
12
+ <a href="http://www.curve21.com"><img alt="Bycurve21" src="images/bycurve21.gif"/>
12
13
  </a>
13
14
  </div>
14
15
  <div class='title'>StaticMatic</div>
@@ -27,24 +28,22 @@
27
28
  <li><a href="faq.html">FAQ</a></li>
28
29
  </ul>
29
30
  </div>
30
- <div id='content'>
31
- <div id='side'>
32
- <strong>News</strong>
33
- <a href="staticmatic_08.html">StaticMatic 0.8</a>
34
- </div>
35
- <h1>Download</h1>
36
- <p>
37
- The simplest way to get StaticMatic is via RubyGems:
38
- </p>
39
- <div class='code'>gem install staticmatic</div>
40
- <h3>Source Code</h3>
41
- <p>
42
- You can get the source code from
43
- <a href="http://rubyforge.org/projects/staticmatic/">RubyForge</a>
44
- :
45
- </p>
46
- <div class='code'>
47
- svn checkout svn://rubyforge.org/var/svn/staticmatic/trunk staticmatic
31
+ <div id='content_wrapper'>
32
+ <div id='content'>
33
+ <h1>Download</h1>
34
+ <p>
35
+ The simplest way to get StaticMatic is via RubyGems:
36
+ </p>
37
+ <div class='code'>gem install staticmatic</div>
38
+ <h3>Source Code</h3>
39
+ <p>
40
+ You can get the source code from
41
+ <a href="http://rubyforge.org/projects/staticmatic/">RubyForge</a>
42
+ :
43
+ </p>
44
+ <div class='code'>
45
+ svn checkout svn://rubyforge.org/var/svn/staticmatic/trunk staticmatic
46
+ </div>
48
47
  </div>
49
48
  </div>
50
49
  <div id='footer'>
@@ -1,14 +1,15 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
- <html>
2
+ <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
3
3
  <head>
4
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
4
5
  <title>StaticMatic</title>
5
- <link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
6
+ <link href="/stylesheets/application.css" media="all" rel="stylesheet"/>
6
7
  </head>
7
8
  <body>
8
9
  <div id='container'>
9
10
  <div id='header'>
10
11
  <div class='bycurve21'>
11
- <a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
12
+ <a href="http://www.curve21.com"><img alt="Bycurve21" src="images/bycurve21.gif"/>
12
13
  </a>
13
14
  </div>
14
15
  <div class='title'>StaticMatic</div>
@@ -27,18 +28,16 @@
27
28
  <li><a href="faq.html">FAQ</a></li>
28
29
  </ul>
29
30
  </div>
30
- <div id='content'>
31
- <div id='side'>
32
- <strong>News</strong>
33
- <a href="staticmatic_08.html">StaticMatic 0.8</a>
31
+ <div id='content_wrapper'>
32
+ <div id='content'>
33
+ <h1>FAQ</h1>
34
+ <h3>
35
+ I hate Haml. Can I use a different template language?
36
+ </h3>
37
+ <p>
38
+ No. At least not at the moment. Haml is perfect for our needs so we've had no reason to investigate using other languages. However, StaticMatic is open source so patches are always welcome.
39
+ </p>
34
40
  </div>
35
- <h1>FAQ</h1>
36
- <h3>
37
- I hate Haml. Can I use a different template language?
38
- </h3>
39
- <p>
40
- No. At least not at the moment. Haml is perfect for our needs so we've had no reason to investigate using other languages. However, StaticMatic is open source so patches are always welcome.
41
- </p>
42
41
  </div>
43
42
  <div id='footer'>
44
43
  <p>
@@ -1,14 +1,15 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
- <html>
2
+ <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
3
3
  <head>
4
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
4
5
  <title>StaticMatic</title>
5
- <link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
6
+ <link href="/stylesheets/application.css" media="all" rel="stylesheet"/>
6
7
  </head>
7
8
  <body>
8
9
  <div id='container'>
9
10
  <div id='header'>
10
11
  <div class='bycurve21'>
11
- <a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
12
+ <a href="http://www.curve21.com"><img alt="Bycurve21" src="images/bycurve21.gif"/>
12
13
  </a>
13
14
  </div>
14
15
  <div class='title'>StaticMatic</div>
@@ -27,120 +28,118 @@
27
28
  <li><a href="faq.html">FAQ</a></li>
28
29
  </ul>
29
30
  </div>
30
- <div id='content'>
31
- <div id='side'>
32
- <strong>News</strong>
33
- <a href="staticmatic_08.html">StaticMatic 0.8</a>
31
+ <div id='content_wrapper'>
32
+ <div id='content'>
33
+ <h1>How to Use</h1>
34
+ <p>
35
+ StaticMatic is very easy to work with. It aims to provide just the tools you need and not get in your way.
36
+ </p>
37
+ <ul>
38
+ <li><a href="#developing">Developing a site</a></li>
39
+ <li>
40
+ <a href="#templates">Templates</a>
41
+ <ul>
42
+ <li><a href="#layouts">Layouts</a></li>
43
+ <li><a href="#helpers">Helpers</a></li>
44
+ </ul>
45
+ </li>
46
+ </ul>
47
+ <h2 id='developing'>Developing a site with StaticMatic</h2>
48
+ <h3>Setting up a site</h3>
49
+ <p>
50
+ The first thing to do with a StaticMatic site is to set up the folders and files ready for use. A simple command will create everything you need to get started:
51
+ </p>
52
+ <div class='code'>staticmatic setup my_site</div>
53
+ <p>This will set up a number of directories:</p>
54
+ <ul>
55
+ <li>
56
+ site/ - contains your static site and any assets such as images or javascript files
57
+ </li>
58
+ <li>
59
+ src/ - where you'll work on your templates
60
+ <ul>
61
+ <li>
62
+ layouts/ - contains templates that 'wrap' your main content pages
63
+ </li>
64
+ <li>pages/ - contains the actual pages of content</li>
65
+ <li>
66
+ stylesheets/ - contains any Sass stylesheets you want to create
67
+ </li>
68
+ </ul>
69
+ </li>
70
+ </ul>
71
+ <h3>Previewing your site</h3>
72
+ <p>
73
+ When you're ready to start working on your site, you can fire up the preview server to see your changes:
74
+ </p>
75
+ <div class='code'>staticmatic preview my_site</div>
76
+ <p>
77
+ This will start a web server on port 3000. Point your web browser to
78
+ <a href="http://localhost:3000">http://localhost:3000</a>
79
+ to see your site.
80
+ </p>
81
+ <h3>Building your site</h3>
82
+ <p>
83
+ When you're happy with the website, you can tell StaticMatic to generate the HTML pages:
84
+ </p>
85
+ <div class='code'>staticmatic build my_site</div>
86
+ <h2 id='templates'>Templates</h2>
87
+ <p>
88
+ <em>
89
+ For information on how to use Haml itself, please check out the
90
+ <a href="http://haml.hamptoncatlin.com/docs/haml">Haml website</a>
91
+ .
92
+ </em>
93
+ </p>
94
+ <h3 id='layouts'>Layouts</h3>
95
+ <p>
96
+ As with web frameworks like
97
+ <a href="http://www.rubyonrails.com">Ruby on Rails</a>
98
+ , StaticMatic uses layouts to 'wrap' up the content contained within page templates.
99
+ </p>
100
+ <p>
101
+ A layout typically contains the header and footer code for a page - code that is common to all pages on the site.
102
+ </p>
103
+ <p>
104
+ The only thing a layout *must* contain is a line that tells StaticMatic where to put the content:
105
+ </p>
106
+ <div class='code'>= yield</div>
107
+ <p>
108
+ By default, StaticMatic will look for a template named 'application.haml'. If you have a page that needs to use a different layout, this can be specified in the page itself:
109
+ </p>
110
+ <em>contact_us.haml:</em>
111
+ <div class='code'>- @layout = "contact"</div>
112
+ <p>
113
+ The above code would tell StaticMatic to use the layout called 'contact.haml' when building and previewing the 'contact_us' page.
114
+ </p>
115
+ <h3 id='helpers'>
116
+ </h3>
117
+ <p>
118
+ StaticMatic provides a number of 'helpers' on top of those in Haml to handle common code and reduce code.
119
+ </p>
120
+ <h4>Links</h4>
121
+ <p>
122
+ 'link' can automatically set up hyperlinks for you:
123
+ </p>
124
+ <div class='code'>= link "Contact Us"</div>
125
+ produces:
126
+ <div class='code'>
127
+ &lt;a href="contact_us.html"&gt;Contact Us&lt;/a&gt;"
128
+ </div>
129
+ <p>You can also specify a URL:</p>
130
+ <div class='code'>
131
+ = link "StaticMatic", "http://staticmatic.rubyforge.org"
132
+ </div>
133
+ <h4>Images</h4>
134
+ <div class='code'>= img "me.jpg"</div>
135
+ produces:
136
+ <div class='code'>&lt;img src="/images/me.jpg"/&gt;</div>
137
+ <h4>Stylesheets</h4>
138
+ <div class='code'>= stylesheets</div>
139
+ <p>
140
+ This will automatically insert links to any Sass stylesheets in your site source.
141
+ </p>
34
142
  </div>
35
- <h1>How to Use</h1>
36
- <p>
37
- StaticMatic is very easy to work with. It aims to provide just the tools you need and not get in your way.
38
- </p>
39
- <ul>
40
- <li><a href="#developing">Developing a site</a></li>
41
- <li>
42
- <a href="#templates">Templates</a>
43
- <ul>
44
- <li><a href="#layouts">Layouts</a></li>
45
- <li><a href="#helpers">Helpers</a></li>
46
- </ul>
47
- </li>
48
- </ul>
49
- <h2 id='developing'>Developing a site with StaticMatic</h2>
50
- <h3>Setting up a site</h3>
51
- <p>
52
- The first thing to do with a StaticMatic site is to set up the folders and files ready for use. A simple command will create everything you need to get started:
53
- </p>
54
- <div class='code'>staticmatic setup my_site</div>
55
- <p>This will set up a number of directories:</p>
56
- <ul>
57
- <li>
58
- site/ - contains your static site and any assets such as images or javascript files
59
- </li>
60
- <li>
61
- src/ - where you'll work on your templates
62
- <ul>
63
- <li>
64
- layouts/ - contains templates that 'wrap' your main content pages
65
- </li>
66
- <li>pages/ - contains the actual pages of content</li>
67
- <li>
68
- stylesheets/ - contains any Sass stylesheets you want to create
69
- </li>
70
- </ul>
71
- </li>
72
- </ul>
73
- <h3>Previewing your site</h3>
74
- <p>
75
- When you're ready to start working on your site, you can fire up the preview server to see your changes:
76
- </p>
77
- <div class='code'>staticmatic preview my_site</div>
78
- <p>
79
- This will start a web server on port 3000. Point your web browser to
80
- <a href="http://localhost:3000">http://localhost:3000</a>
81
- to see your site.
82
- </p>
83
- <h3>Building your site</h3>
84
- <p>
85
- When you're happy with the website, you can tell StaticMatic to generate the HTML pages:
86
- </p>
87
- <div class='code'>staticmatic build my_site</div>
88
- <h2 id='templates'>Templates</h2>
89
- <p>
90
- <em>
91
- For information on how to use Haml itself, please check out the
92
- <a href="http://haml.hamptoncatlin.com/docs/haml">Haml website</a>
93
- .
94
- </em>
95
- </p>
96
- <h3 id='layouts'>Layouts</h3>
97
- <p>
98
- As with web frameworks like
99
- <a href="http://www.rubyonrails.com">Ruby on Rails</a>
100
- , StaticMatic uses layouts to 'wrap' up the content contained within page templates.
101
- </p>
102
- <p>
103
- A layout typically contains the header and footer code for a page - code that is common to all pages on the site.
104
- </p>
105
- <p>
106
- The only thing a layout *must* contain is a line that tells StaticMatic where to put the content:
107
- </p>
108
- <div class='code'>= yield</div>
109
- <p>
110
- By default, StaticMatic will look for a template named 'application.haml'. If you have a page that needs to use a different layout, this can be specified in the page itself:
111
- </p>
112
- <em>contact_us.haml:</em>
113
- <div class='code'>- @layout = "contact"</div>
114
- <p>
115
- The above code would tell StaticMatic to use the layout called 'contact.haml' when building and previewing the 'contact_us' page.
116
- </p>
117
- <h3 id='helpers'>
118
- </h3>
119
- <p>
120
- StaticMatic provides a number of 'helpers' on top of those in Haml to handle common code and reduce code.
121
- </p>
122
- <h4>Links</h4>
123
- <p>
124
- 'link' can automatically set up hyperlinks for you:
125
- </p>
126
- <div class='code'>= link "Contact Us"</div>
127
- produces:
128
- <div class='code'>
129
- &lt;a href="contact_us.html"&gt;Contact Us&lt;/a&gt;"
130
- </div>
131
- <p>You can also specify a URL:</p>
132
- <div class='code'>
133
- = link "StaticMatic", "http://staticmatic.rubyforge.org"
134
- </div>
135
- <h4>Images</h4>
136
- <div class='code'>= img "me.jpg"</div>
137
- produces:
138
- <div class='code'>&lt;img src="/images/me.jpg"/&gt;</div>
139
- <h4>Stylesheets</h4>
140
- <div class='code'>= stylesheets</div>
141
- <p>
142
- This will automatically insert links to any Sass stylesheets in your site source.
143
- </p>
144
143
  </div>
145
144
  <div id='footer'>
146
145
  <p>
Binary file
@@ -1,14 +1,15 @@
1
1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
- <html>
2
+ <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
3
3
  <head>
4
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
4
5
  <title>StaticMatic</title>
5
- <link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
6
+ <link href="/stylesheets/application.css" media="all" rel="stylesheet"/>
6
7
  </head>
7
8
  <body>
8
9
  <div id='container'>
9
10
  <div id='header'>
10
11
  <div class='bycurve21'>
11
- <a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
12
+ <a href="http://www.curve21.com"><img alt="Bycurve21" src="images/bycurve21.gif"/>
12
13
  </a>
13
14
  </div>
14
15
  <div class='title'>StaticMatic</div>
@@ -27,41 +28,37 @@
27
28
  <li><a href="faq.html">FAQ</a></li>
28
29
  </ul>
29
30
  </div>
30
- <div id='content'>
31
- <div id='side'>
32
- <strong>News</strong>
33
- <a href="staticmatic_08.html">StaticMatic 0.8</a>
34
- </div>
35
- <h1>Static websites, the modern way</h1>
36
- <p>
37
- Web developers are used to using dynamic and frameworks like
38
- <a href="http://www.rubyonrails.com">Ruby on Rails</a>
39
- to develop applications. When it comes to working with static, non-dynamic websites it can seem like stepping back in time.
40
- </p>
41
- <p>
42
- The platform of choice for simple sites is often limited:
31
+ <div id='content_wrapper'>
32
+ <div id='content'>
33
+ <h1>Static websites, the modern way</h1>
34
+ <p>
35
+ Web developers are used to using dynamic and frameworks like
36
+ <a href="http://www.rubyonrails.com">Ruby on Rails</a>
37
+ to develop applications. When it comes to working with static, non-dynamic websites it can seem like stepping back in time.
38
+ </p>
39
+ <h2>You'd like to</h2>
43
40
  <ul>
44
- <li>
45
- Content Management Systems with complicated or limiting template languages and far too many features
41
+ <li class='highlight'>
42
+ Replace over-featured, cumbersome Content Management Systems
46
43
  </li>
47
- <li>Over-featured, expensive WYSIWYG applications</li>
44
+ <li class='highlight'>Speed up your prototypes</li>
48
45
  </ul>
49
- </p>
50
- <h2>Enter StaticMatic</h2>
51
- <div class='columns'>
52
- <div class='left_column'>
53
- <em>Concise and terse Haml Templating Language</em>
54
- <img src="images/homepage-templating.jpg"/>
55
- </div>
56
- <div class='right_column'>
57
- <em>Live preview server for use while developing</em>
58
- <img src="images/homepage-previewing.jpg"/>
46
+ <h2>Meet StaticMatic</h2>
47
+ <div class='columns'>
48
+ <div class='left_column'>
49
+ <em>Concise and terse Haml Templating</em>
50
+ <img alt="Homepage templating" src="images/homepage-templating.jpg"/>
51
+ </div>
52
+ <div class='right_column'>
53
+ <em>Live preview server for development</em>
54
+ <img alt="Homepage previewing" src="images/homepage-previewing.jpg"/>
55
+ </div>
59
56
  </div>
57
+ <p>
58
+ <em>Output full HTML pages</em>
59
+ <img alt="Homepage build" src="images/homepage-build.jpg"/>
60
+ </p>
60
61
  </div>
61
- <p>
62
- <em>Output full HTML pages</em>
63
- <img src="images/homepage-build.jpg"/>
64
- </p>
65
62
  </div>
66
63
  <div id='footer'>
67
64
  <p>
@@ -34,10 +34,10 @@ body {
34
34
  #footer {
35
35
  border-top: 1px solid #ccc;
36
36
  border-bottom: 1px solid #ccc;
37
- clear: left;
37
+ clear: both;
38
38
  font-size: 75%;
39
39
  letter-spacing: 1px;
40
- margin: 15px 0 15px 0;
40
+ margin: 30px 0 15px 0;
41
41
  width: 100%;
42
42
  text-align: center;
43
43
  padding: 10px 0 5px 0;
@@ -160,24 +160,28 @@ hr {
160
160
  border: 1px solid #aaa;
161
161
  background-color: #efefef;
162
162
  padding: 5px;
163
- display: none;
163
+ margin: 0 0 10px 0;
164
164
  }
165
165
 
166
166
  #side a {
167
167
  display: block;
168
168
  }
169
169
 
170
- #content {
171
-
172
- width: 880px;
170
+ #content_wrapper {
171
+ width: 920px;
173
172
  }
174
173
 
175
- #content {
174
+ #content_wrapper {
176
175
  margin: 15px 0 15px 0;
177
176
  padding: 0 0 0 20px;
178
177
  }
179
178
 
180
- * html #content { margin-top: 10px; }
179
+ * html #content_wrapper { margin-top: 10px; }
180
+
181
+ #content {
182
+ width: 670px;
183
+ float: left;
184
+ }
181
185
 
182
186
  #menu {
183
187
  padding: 0;
@@ -227,7 +231,7 @@ hr {
227
231
 
228
232
  /* columns */
229
233
  .columns {
230
- width: 880px;
234
+ width: 580px;
231
235
  }
232
236
 
233
237
  .left_column {
@@ -249,8 +253,35 @@ hr {
249
253
  margin: 2px 0 2px 0;
250
254
  }
251
255
 
256
+ #quotes {
257
+ margin: 10px 0 0 0;
258
+ }
259
+
252
260
  .quote {
253
261
  font-style: italic;
254
262
  color: #555;
263
+ font-size: 10pt;
264
+ margin: 10px 0 10px 0;
265
+ }
266
+
267
+
268
+
269
+ #side #news {
270
+ font-size: 10pt;
271
+ }
272
+
273
+ #side .title {
274
+ font-weight: bold;
275
+ margin: 0 0 8px 0;
276
+ }
277
+
278
+ #side .heading {
255
279
  font-weight: bold;
280
+ margin: 0 0 8px 0;
281
+ font-size: 12pt;
282
+ }
283
+
284
+ .highlight {
285
+ background-color: #aaa;
286
+ font-style: italic;
256
287
  }
@@ -1,6 +1,7 @@
1
1
  !!!
2
- %html
2
+ %html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", 'xml:lang' => "en" }
3
3
  %head
4
+ %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}
4
5
  %title StaticMatic
5
6
  = stylesheets
6
7
  %body
@@ -19,11 +20,10 @@
19
20
  %li= link "Community", "http://groups.google.co.uk/group/staticmatic"
20
21
  %li= link "FAQ"
21
22
 
22
- #content
23
- #side
24
- %strong News
25
- = link "StaticMatic 0.8"
26
- = yield
23
+ #content_wrapper
24
+
25
+ #content
26
+ = yield
27
27
 
28
28
  #footer
29
29
  %p
@@ -0,0 +1,4 @@
1
+ !!!
2
+ %h1 Blah
3
+
4
+ = yield
@@ -6,24 +6,21 @@
6
6
  = link "Ruby on Rails", "http://www.rubyonrails.com"
7
7
  to develop applications. When it comes to working with static, non-dynamic websites it can seem like stepping back in time.
8
8
 
9
- %p
10
- The platform of choice for simple sites is often limited:
11
-
12
- %ul
13
- %li Content Management Systems with complicated or limiting template languages and far too many features
14
- %li Over-featured, expensive WYSIWYG applications
9
+ %h2 You'd like to
15
10
 
16
- %p.quote "At Curve21 we use StaticMatic to create flat-HTML based prototypes of our applications. When we're ready to start coding, we just drop the templates straight into our app..."
11
+ %ul
12
+ %li.highlight Replace over-featured, cumbersome Content Management Systems
13
+ %li.highlight Speed up your prototypes
17
14
 
18
- %h2 Enter StaticMatic
15
+ %h2 Meet StaticMatic
19
16
 
20
17
  .columns
21
18
  .left_column
22
- %em Concise and terse Haml Templating Language
19
+ %em Concise and terse Haml Templating
23
20
  = img "homepage-templating.jpg"
24
21
 
25
22
  .right_column
26
- %em Live preview server for use while developing
23
+ %em Live preview server for development
27
24
  = img "homepage-previewing.jpg"
28
25
 
29
26
  %p
metadata CHANGED
@@ -3,8 +3,8 @@ rubygems_version: 0.9.2
3
3
  specification_version: 1
4
4
  name: staticmatic
5
5
  version: !ruby/object:Gem::Version
6
- version: 0.8.1
7
- date: 2007-09-04 00:00:00 +01:00
6
+ version: 0.8.4
7
+ date: 2007-09-18 00:00:00 +01:00
8
8
  summary: Manage static sites using Haml & Sass
9
9
  require_paths:
10
10
  - lib
@@ -62,6 +62,7 @@ files:
62
62
  - README
63
63
  - StaticMatic - website.zip
64
64
  - staticmatic-0.8.0.gem
65
+ - staticmatic-0.8.1.gem
65
66
  - test
66
67
  - test/base_test.rb
67
68
  - test/helpers_test.rb
@@ -78,9 +79,12 @@ files:
78
79
  - test/sandbox/test_site/src/layouts
79
80
  - test/sandbox/test_site/src/layouts/alternate_layout.haml
80
81
  - test/sandbox/test_site/src/layouts/application.haml
82
+ - test/sandbox/test_site/src/layouts/projects.haml
81
83
  - test/sandbox/test_site/src/pages
82
84
  - test/sandbox/test_site/src/pages/index.haml
83
85
  - test/sandbox/test_site/src/pages/layout_test.haml
86
+ - test/sandbox/test_site/src/partials
87
+ - test/sandbox/test_site/src/partials/menu.haml
84
88
  - test/sandbox/test_site/src/stylesheets
85
89
  - test/sandbox/test_site/src/stylesheets/application.sass
86
90
  - test/sandbox/tmp
@@ -103,11 +107,13 @@ files:
103
107
  - website/src
104
108
  - website/src/layouts
105
109
  - website/src/layouts/application.haml
110
+ - website/src/layouts/test.haml
106
111
  - website/src/pages
107
112
  - website/src/pages/download.haml
108
113
  - website/src/pages/faq.haml
109
114
  - website/src/pages/how_to_use.haml
110
115
  - website/src/pages/index.haml
116
+ - website/src/partials
111
117
  - website/src/stylesheets
112
118
  test_files:
113
119
  - test/base_test.rb