staticmatic 0.7.1 → 0.8.1
Sign up to get free protection for your applications and to get access to all the features.
- data/StaticMatic - website.zip +0 -0
- data/lib/staticmatic/helpers.rb +19 -2
- data/staticmatic-0.8.0.gem +0 -0
- data/website/site/download.html +65 -0
- data/website/site/faq.html +58 -0
- data/website/site/how_to_use.html +160 -0
- data/website/site/images/bycurve21.gif +0 -0
- data/website/site/images/curve21.jpg +0 -0
- data/website/site/images/homepage-build.jpg +0 -0
- data/website/site/images/homepage-previewing.jpg +0 -0
- data/website/site/images/homepage-templating.jpg +0 -0
- data/website/site/index.html +81 -0
- data/website/site/stylesheets/application.css +256 -0
- data/website/src/layouts/application.haml +38 -0
- data/website/src/pages/download.haml +15 -0
- data/website/src/pages/faq.haml +6 -0
- data/website/src/pages/how_to_use.haml +108 -0
- data/website/src/pages/index.haml +31 -0
- metadata +28 -4
- data/staticmatic-0.7.0.gem +0 -0
- data/test.rb +0 -16
|
Binary file
|
data/lib/staticmatic/helpers.rb
CHANGED
|
@@ -5,10 +5,27 @@ module StaticMatic
|
|
|
5
5
|
# Generates links to all stylesheets in the source directory
|
|
6
6
|
def stylesheets
|
|
7
7
|
stylesheet_dir = "#{@base_dir}/src/stylesheets"
|
|
8
|
+
|
|
9
|
+
stylesheet_directories = Dir["#{stylesheet_dir}/**/*.sass"]
|
|
10
|
+
|
|
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|
|
|
13
|
+
search_filename = File.basename(filename).chomp(File.extname(filename))
|
|
14
|
+
already_included = false
|
|
15
|
+
stylesheet_directories.each do |path|
|
|
16
|
+
path = File.basename(path)
|
|
17
|
+
if path.include?(search_filename)
|
|
18
|
+
already_included = true
|
|
19
|
+
end
|
|
20
|
+
end
|
|
21
|
+
|
|
22
|
+
stylesheet_directories << filename if !already_included
|
|
23
|
+
end
|
|
24
|
+
|
|
8
25
|
output = ""
|
|
9
|
-
|
|
26
|
+
stylesheet_directories.each do |path|
|
|
10
27
|
filename_without_extension = File.basename(path).chomp(File.extname(path))
|
|
11
|
-
output << tag(:link, :href => "stylesheets/#{filename_without_extension}.css", :rel => 'stylesheet', :media => 'all')
|
|
28
|
+
output << tag(:link, :href => "/stylesheets/#{filename_without_extension}.css", :rel => 'stylesheet', :media => 'all')
|
|
12
29
|
end
|
|
13
30
|
|
|
14
31
|
output
|
|
Binary file
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>StaticMatic</title>
|
|
5
|
+
<link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id='container'>
|
|
9
|
+
<div id='header'>
|
|
10
|
+
<div class='bycurve21'>
|
|
11
|
+
<a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
|
|
12
|
+
</a>
|
|
13
|
+
</div>
|
|
14
|
+
<div class='title'>StaticMatic</div>
|
|
15
|
+
</div>
|
|
16
|
+
<div id='menu'>
|
|
17
|
+
<ul>
|
|
18
|
+
<li><a href="/">Home</a></li>
|
|
19
|
+
<li><a href="download.html">Download</a></li>
|
|
20
|
+
<li><a href="how_to_use.html">How to use</a></li>
|
|
21
|
+
<li>
|
|
22
|
+
<a href="http://rubyforge.org/projects/staticmatic">Development</a>
|
|
23
|
+
</li>
|
|
24
|
+
<li>
|
|
25
|
+
<a href="http://groups.google.co.uk/group/staticmatic">Community</a>
|
|
26
|
+
</li>
|
|
27
|
+
<li><a href="faq.html">FAQ</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</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
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div id='footer'>
|
|
51
|
+
<p>
|
|
52
|
+
Made with StaticMatic, Hosted by
|
|
53
|
+
<a href="http://rubyforge.org">RubyForge</a>
|
|
54
|
+
</p>
|
|
55
|
+
</div>
|
|
56
|
+
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
|
|
57
|
+
_hamlspace = "";
|
|
58
|
+
</script>
|
|
59
|
+
<script type='text/javascript'>
|
|
60
|
+
_uacct = "UA-775359-8";
|
|
61
|
+
urchinTracker();
|
|
62
|
+
</script>
|
|
63
|
+
</div>
|
|
64
|
+
</body>
|
|
65
|
+
</html>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>StaticMatic</title>
|
|
5
|
+
<link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id='container'>
|
|
9
|
+
<div id='header'>
|
|
10
|
+
<div class='bycurve21'>
|
|
11
|
+
<a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
|
|
12
|
+
</a>
|
|
13
|
+
</div>
|
|
14
|
+
<div class='title'>StaticMatic</div>
|
|
15
|
+
</div>
|
|
16
|
+
<div id='menu'>
|
|
17
|
+
<ul>
|
|
18
|
+
<li><a href="/">Home</a></li>
|
|
19
|
+
<li><a href="download.html">Download</a></li>
|
|
20
|
+
<li><a href="how_to_use.html">How to use</a></li>
|
|
21
|
+
<li>
|
|
22
|
+
<a href="http://rubyforge.org/projects/staticmatic">Development</a>
|
|
23
|
+
</li>
|
|
24
|
+
<li>
|
|
25
|
+
<a href="http://groups.google.co.uk/group/staticmatic">Community</a>
|
|
26
|
+
</li>
|
|
27
|
+
<li><a href="faq.html">FAQ</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</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>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
|
+
</div>
|
|
43
|
+
<div id='footer'>
|
|
44
|
+
<p>
|
|
45
|
+
Made with StaticMatic, Hosted by
|
|
46
|
+
<a href="http://rubyforge.org">RubyForge</a>
|
|
47
|
+
</p>
|
|
48
|
+
</div>
|
|
49
|
+
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
|
|
50
|
+
_hamlspace = "";
|
|
51
|
+
</script>
|
|
52
|
+
<script type='text/javascript'>
|
|
53
|
+
_uacct = "UA-775359-8";
|
|
54
|
+
urchinTracker();
|
|
55
|
+
</script>
|
|
56
|
+
</div>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>StaticMatic</title>
|
|
5
|
+
<link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id='container'>
|
|
9
|
+
<div id='header'>
|
|
10
|
+
<div class='bycurve21'>
|
|
11
|
+
<a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
|
|
12
|
+
</a>
|
|
13
|
+
</div>
|
|
14
|
+
<div class='title'>StaticMatic</div>
|
|
15
|
+
</div>
|
|
16
|
+
<div id='menu'>
|
|
17
|
+
<ul>
|
|
18
|
+
<li><a href="/">Home</a></li>
|
|
19
|
+
<li><a href="download.html">Download</a></li>
|
|
20
|
+
<li><a href="how_to_use.html">How to use</a></li>
|
|
21
|
+
<li>
|
|
22
|
+
<a href="http://rubyforge.org/projects/staticmatic">Development</a>
|
|
23
|
+
</li>
|
|
24
|
+
<li>
|
|
25
|
+
<a href="http://groups.google.co.uk/group/staticmatic">Community</a>
|
|
26
|
+
</li>
|
|
27
|
+
<li><a href="faq.html">FAQ</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</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>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
|
+
<a href="contact_us.html">Contact Us</a>"
|
|
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'><img src="/images/me.jpg"/></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
|
+
</div>
|
|
145
|
+
<div id='footer'>
|
|
146
|
+
<p>
|
|
147
|
+
Made with StaticMatic, Hosted by
|
|
148
|
+
<a href="http://rubyforge.org">RubyForge</a>
|
|
149
|
+
</p>
|
|
150
|
+
</div>
|
|
151
|
+
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
|
|
152
|
+
_hamlspace = "";
|
|
153
|
+
</script>
|
|
154
|
+
<script type='text/javascript'>
|
|
155
|
+
_uacct = "UA-775359-8";
|
|
156
|
+
urchinTracker();
|
|
157
|
+
</script>
|
|
158
|
+
</div>
|
|
159
|
+
</body>
|
|
160
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>StaticMatic</title>
|
|
5
|
+
<link media="all" href="/stylesheets/application.css" rel="stylesheet"/>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id='container'>
|
|
9
|
+
<div id='header'>
|
|
10
|
+
<div class='bycurve21'>
|
|
11
|
+
<a href="http://www.curve21.com"><img src="images/bycurve21.gif"/>
|
|
12
|
+
</a>
|
|
13
|
+
</div>
|
|
14
|
+
<div class='title'>StaticMatic</div>
|
|
15
|
+
</div>
|
|
16
|
+
<div id='menu'>
|
|
17
|
+
<ul>
|
|
18
|
+
<li><a href="/">Home</a></li>
|
|
19
|
+
<li><a href="download.html">Download</a></li>
|
|
20
|
+
<li><a href="how_to_use.html">How to use</a></li>
|
|
21
|
+
<li>
|
|
22
|
+
<a href="http://rubyforge.org/projects/staticmatic">Development</a>
|
|
23
|
+
</li>
|
|
24
|
+
<li>
|
|
25
|
+
<a href="http://groups.google.co.uk/group/staticmatic">Community</a>
|
|
26
|
+
</li>
|
|
27
|
+
<li><a href="faq.html">FAQ</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</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:
|
|
43
|
+
<ul>
|
|
44
|
+
<li>
|
|
45
|
+
Content Management Systems with complicated or limiting template languages and far too many features
|
|
46
|
+
</li>
|
|
47
|
+
<li>Over-featured, expensive WYSIWYG applications</li>
|
|
48
|
+
</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"/>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<p>
|
|
62
|
+
<em>Output full HTML pages</em>
|
|
63
|
+
<img src="images/homepage-build.jpg"/>
|
|
64
|
+
</p>
|
|
65
|
+
</div>
|
|
66
|
+
<div id='footer'>
|
|
67
|
+
<p>
|
|
68
|
+
Made with StaticMatic, Hosted by
|
|
69
|
+
<a href="http://rubyforge.org">RubyForge</a>
|
|
70
|
+
</p>
|
|
71
|
+
</div>
|
|
72
|
+
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
|
|
73
|
+
_hamlspace = "";
|
|
74
|
+
</script>
|
|
75
|
+
<script type='text/javascript'>
|
|
76
|
+
_uacct = "UA-775359-8";
|
|
77
|
+
urchinTracker();
|
|
78
|
+
</script>
|
|
79
|
+
</div>
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
body {
|
|
2
|
+
background: #fff;
|
|
3
|
+
color: #333;
|
|
4
|
+
margin: 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
font: 16px/1em arial, helvetica, verdana, sans-serif;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
#header {
|
|
10
|
+
height: 50px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
#header {
|
|
14
|
+
padding: 15px 0 0px 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#header .title {
|
|
18
|
+
font: normal 35px/35px georgia, "times new roman", times, serif;
|
|
19
|
+
border-bottom: 1px solid #999;
|
|
20
|
+
color: #cc0000;
|
|
21
|
+
padding-left: 20px;
|
|
22
|
+
margin-bottom: 0px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
#header .bycurve21 {
|
|
26
|
+
float: right;
|
|
27
|
+
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
* html #header .title {
|
|
31
|
+
margin-bottom: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
#footer {
|
|
35
|
+
border-top: 1px solid #ccc;
|
|
36
|
+
border-bottom: 1px solid #ccc;
|
|
37
|
+
clear: left;
|
|
38
|
+
font-size: 75%;
|
|
39
|
+
letter-spacing: 1px;
|
|
40
|
+
margin: 15px 0 15px 0;
|
|
41
|
+
width: 100%;
|
|
42
|
+
text-align: center;
|
|
43
|
+
padding: 10px 0 5px 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:link,:visited { text-decoration:none }
|
|
47
|
+
|
|
48
|
+
ul,ol,li,h1,h2,h3,h4,h5,h6,form,body,html {
|
|
49
|
+
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
p {
|
|
53
|
+
clear: both;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#content ul {
|
|
57
|
+
margin-left: 20px;
|
|
58
|
+
padding-left: 0;
|
|
59
|
+
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
#content li {
|
|
63
|
+
padding-left: 18px;
|
|
64
|
+
background: url(../images/list.png) no-repeat 0% .5em;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
a, a:link, a:visited {
|
|
68
|
+
font-weight: bold;
|
|
69
|
+
color: #206fbc;
|
|
70
|
+
letter-spacing: 1px;
|
|
71
|
+
outline: none;
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
a:hover {
|
|
76
|
+
color: #669933;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
#content a, #content a:link, #content a:visited {
|
|
81
|
+
color: #cc0000;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
#content a:hover {
|
|
85
|
+
color: #cc6600;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
a img,:link img,:visited img {
|
|
89
|
+
border: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
h1, h2, h3, h4 {
|
|
93
|
+
font-family: arial, helvetica, verdana, sans-serif;
|
|
94
|
+
font-weight: normal;
|
|
95
|
+
letter-spacing: 1px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
h1 {
|
|
99
|
+
font-size: 218%;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
h2 {
|
|
103
|
+
font-size: 164%;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
h3 {
|
|
107
|
+
color: #5190b2;
|
|
108
|
+
font-size: 145%;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
h4 {
|
|
112
|
+
color: #669933;
|
|
113
|
+
font-size: 118%;
|
|
114
|
+
font-weight: bold;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
#navtop, #content, #leftcolumn, #rightcolumn {
|
|
118
|
+
font-size: 85%;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
#content p, #leftcolumn p, #rightcolumn p {
|
|
122
|
+
margin-bottom: 18px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
blockquote {
|
|
126
|
+
background-color: #f4f4f4;
|
|
127
|
+
padding: 5px 10px 5px 10px;
|
|
128
|
+
margin: 15px 40px 15px 20px;
|
|
129
|
+
border-left: 5px solid #ccc;
|
|
130
|
+
border-right: 5px solid #ccc;
|
|
131
|
+
font-style: italic;
|
|
132
|
+
letter-spacing: 1px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
img {
|
|
136
|
+
border: 1px solid #aaa;
|
|
137
|
+
padding: 0;
|
|
138
|
+
margin: 0;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
hr {
|
|
142
|
+
clear: both;
|
|
143
|
+
border: 0;
|
|
144
|
+
height: 1px;
|
|
145
|
+
color: #ccc;
|
|
146
|
+
background-color: #ccc;
|
|
147
|
+
margin: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
#container {
|
|
152
|
+
width: 960px;
|
|
153
|
+
margin: 0 auto;
|
|
154
|
+
position: relative;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
#side {
|
|
158
|
+
float: right;
|
|
159
|
+
width: 200px;
|
|
160
|
+
border: 1px solid #aaa;
|
|
161
|
+
background-color: #efefef;
|
|
162
|
+
padding: 5px;
|
|
163
|
+
display: none;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
#side a {
|
|
167
|
+
display: block;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
#content {
|
|
171
|
+
|
|
172
|
+
width: 880px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
#content {
|
|
176
|
+
margin: 15px 0 15px 0;
|
|
177
|
+
padding: 0 0 0 20px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
* html #content { margin-top: 10px; }
|
|
181
|
+
|
|
182
|
+
#menu {
|
|
183
|
+
padding: 0;
|
|
184
|
+
width: 100%;
|
|
185
|
+
border-bottom: 5px solid #5190b2;
|
|
186
|
+
height: 26px;
|
|
187
|
+
background: transparent;
|
|
188
|
+
voice-family: "\"}\"";
|
|
189
|
+
voice-family: inherit;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
#menu ul {
|
|
194
|
+
font: bold 13px arial;
|
|
195
|
+
margin: 0;
|
|
196
|
+
margin-left: 20px;
|
|
197
|
+
padding: 0;
|
|
198
|
+
list-style: none;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
#menu li {
|
|
202
|
+
display: inline;
|
|
203
|
+
margin: 0 2px 0 0;
|
|
204
|
+
padding: 0;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
#menu a, #menu a:link, #menu a:visited {
|
|
208
|
+
float: left;
|
|
209
|
+
display: block;
|
|
210
|
+
color: #fff;
|
|
211
|
+
margin: 0 1px 0 0;
|
|
212
|
+
padding: 5px 10px;
|
|
213
|
+
text-decoration: none;
|
|
214
|
+
letter-spacing: 1px;
|
|
215
|
+
background: #333 url(../images/button.png) repeat-x;
|
|
216
|
+
border-bottom: 1px solid #fff;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
#menu a:hover{
|
|
220
|
+
background: #999;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
#menu #current a {
|
|
224
|
+
background: #5190b2 url(../images/button_current.png) repeat-x;
|
|
225
|
+
border-color: #5190b2;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* columns */
|
|
229
|
+
.columns {
|
|
230
|
+
width: 880px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.left_column {
|
|
234
|
+
width: 45%;
|
|
235
|
+
float: left;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.right_column {
|
|
239
|
+
width: 45%;
|
|
240
|
+
float: right;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.code {
|
|
244
|
+
font-family: courier, sans-serif;
|
|
245
|
+
font-size: 10pt;
|
|
246
|
+
padding: 5px;
|
|
247
|
+
background-color: #efefef;
|
|
248
|
+
border: 1px solid #aaa;
|
|
249
|
+
margin: 2px 0 2px 0;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.quote {
|
|
253
|
+
font-style: italic;
|
|
254
|
+
color: #555;
|
|
255
|
+
font-weight: bold;
|
|
256
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
!!!
|
|
2
|
+
%html
|
|
3
|
+
%head
|
|
4
|
+
%title StaticMatic
|
|
5
|
+
= stylesheets
|
|
6
|
+
%body
|
|
7
|
+
#container
|
|
8
|
+
#header
|
|
9
|
+
.bycurve21= link(img("bycurve21.gif"), "http://www.curve21.com")
|
|
10
|
+
.title StaticMatic
|
|
11
|
+
|
|
12
|
+
#menu
|
|
13
|
+
|
|
14
|
+
%ul
|
|
15
|
+
%li= link "Home", "/"
|
|
16
|
+
%li= link "Download"
|
|
17
|
+
%li= link "How to use"
|
|
18
|
+
%li= link "Development", "http://rubyforge.org/projects/staticmatic"
|
|
19
|
+
%li= link "Community", "http://groups.google.co.uk/group/staticmatic"
|
|
20
|
+
%li= link "FAQ"
|
|
21
|
+
|
|
22
|
+
#content
|
|
23
|
+
#side
|
|
24
|
+
%strong News
|
|
25
|
+
= link "StaticMatic 0.8"
|
|
26
|
+
= yield
|
|
27
|
+
|
|
28
|
+
#footer
|
|
29
|
+
%p
|
|
30
|
+
Made with StaticMatic, Hosted by
|
|
31
|
+
= link "RubyForge", "http://rubyforge.org"
|
|
32
|
+
|
|
33
|
+
%script{:src => "http://www.google-analytics.com/urchin.js", :type => "text/javascript"}
|
|
34
|
+
_hamlspace = "";
|
|
35
|
+
%script{:type => "text/javascript"}
|
|
36
|
+
_uacct = "UA-775359-8";
|
|
37
|
+
urchinTracker();
|
|
38
|
+
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
%h1 Download
|
|
2
|
+
|
|
3
|
+
%p The simplest way to get StaticMatic is via RubyGems:
|
|
4
|
+
|
|
5
|
+
.code gem install staticmatic
|
|
6
|
+
|
|
7
|
+
%h3 Source Code
|
|
8
|
+
|
|
9
|
+
%p
|
|
10
|
+
You can get the source code from
|
|
11
|
+
= link "RubyForge", "http://rubyforge.org/projects/staticmatic/"
|
|
12
|
+
\:
|
|
13
|
+
|
|
14
|
+
.code svn checkout svn://rubyforge.org/var/svn/staticmatic/trunk staticmatic
|
|
15
|
+
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
%h1 How to Use
|
|
2
|
+
|
|
3
|
+
%p StaticMatic is very easy to work with. It aims to provide just the tools you need and not get in your way.
|
|
4
|
+
|
|
5
|
+
%ul
|
|
6
|
+
%li= link "Developing a site", "#developing"
|
|
7
|
+
%li
|
|
8
|
+
= link "Templates", "#templates"
|
|
9
|
+
%ul
|
|
10
|
+
%li= link "Layouts", "#layouts"
|
|
11
|
+
%li= link "Helpers", "#helpers"
|
|
12
|
+
|
|
13
|
+
%h2{:id => 'developing'} Developing a site with StaticMatic
|
|
14
|
+
|
|
15
|
+
%h3 Setting up a site
|
|
16
|
+
|
|
17
|
+
%p 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:
|
|
18
|
+
|
|
19
|
+
.code staticmatic setup my_site
|
|
20
|
+
|
|
21
|
+
%p This will set up a number of directories:
|
|
22
|
+
|
|
23
|
+
%ul
|
|
24
|
+
%li site/ - contains your static site and any assets such as images or javascript files
|
|
25
|
+
%li
|
|
26
|
+
src/ - where you'll work on your templates
|
|
27
|
+
%ul
|
|
28
|
+
%li layouts/ - contains templates that 'wrap' your main content pages
|
|
29
|
+
%li pages/ - contains the actual pages of content
|
|
30
|
+
%li stylesheets/ - contains any Sass stylesheets you want to create
|
|
31
|
+
|
|
32
|
+
%h3 Previewing your site
|
|
33
|
+
|
|
34
|
+
%p When you're ready to start working on your site, you can fire up the preview server to see your changes:
|
|
35
|
+
|
|
36
|
+
.code staticmatic preview my_site
|
|
37
|
+
|
|
38
|
+
%p
|
|
39
|
+
This will start a web server on port 3000. Point your web browser to
|
|
40
|
+
= link "http://localhost:3000", "http://localhost:3000"
|
|
41
|
+
to see your site.
|
|
42
|
+
|
|
43
|
+
%h3 Building your site
|
|
44
|
+
|
|
45
|
+
%p When you're happy with the website, you can tell StaticMatic to generate the HTML pages:
|
|
46
|
+
|
|
47
|
+
.code staticmatic build my_site
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
%h2{:id => 'templates'} Templates
|
|
51
|
+
|
|
52
|
+
%p
|
|
53
|
+
%em
|
|
54
|
+
For information on how to use Haml itself, please check out the
|
|
55
|
+
= link "Haml website", "http://haml.hamptoncatlin.com/docs/haml"
|
|
56
|
+
\.
|
|
57
|
+
|
|
58
|
+
%h3{:id => 'layouts'} Layouts
|
|
59
|
+
|
|
60
|
+
%p
|
|
61
|
+
As with web frameworks like
|
|
62
|
+
= link "Ruby on Rails", "http://www.rubyonrails.com"
|
|
63
|
+
\, StaticMatic uses layouts to 'wrap' up the content contained within page templates.
|
|
64
|
+
|
|
65
|
+
%p A layout typically contains the header and footer code for a page - code that is common to all pages on the site.
|
|
66
|
+
|
|
67
|
+
%p The only thing a layout *must* contain is a line that tells StaticMatic where to put the content:
|
|
68
|
+
|
|
69
|
+
.code = yield
|
|
70
|
+
|
|
71
|
+
%p 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:
|
|
72
|
+
|
|
73
|
+
%em contact_us.haml:
|
|
74
|
+
.code - @layout = "contact"
|
|
75
|
+
|
|
76
|
+
%p The above code would tell StaticMatic to use the layout called 'contact.haml' when building and previewing the 'contact_us' page.
|
|
77
|
+
|
|
78
|
+
%h3{:id => 'helpers'}
|
|
79
|
+
|
|
80
|
+
%p StaticMatic provides a number of 'helpers' on top of those in Haml to handle common code and reduce code.
|
|
81
|
+
|
|
82
|
+
%h4 Links
|
|
83
|
+
|
|
84
|
+
%p 'link' can automatically set up hyperlinks for you:
|
|
85
|
+
|
|
86
|
+
.code = link "Contact Us"
|
|
87
|
+
|
|
88
|
+
produces:
|
|
89
|
+
|
|
90
|
+
.code <a href="contact_us.html">Contact Us</a>"
|
|
91
|
+
|
|
92
|
+
%p You can also specify a URL:
|
|
93
|
+
|
|
94
|
+
.code = link "StaticMatic", "http://staticmatic.rubyforge.org"
|
|
95
|
+
|
|
96
|
+
%h4 Images
|
|
97
|
+
|
|
98
|
+
.code = img "me.jpg"
|
|
99
|
+
produces:
|
|
100
|
+
.code <img src="/images/me.jpg"/>
|
|
101
|
+
|
|
102
|
+
%h4 Stylesheets
|
|
103
|
+
|
|
104
|
+
.code = stylesheets
|
|
105
|
+
|
|
106
|
+
%p This will automatically insert links to any Sass stylesheets in your site source.
|
|
107
|
+
|
|
108
|
+
- "It will also link up any static stylesheets in your site/stylesheets/ directory"
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
|
|
2
|
+
%h1 Static websites, the modern way
|
|
3
|
+
|
|
4
|
+
%p
|
|
5
|
+
Web developers are used to using dynamic and frameworks like
|
|
6
|
+
= link "Ruby on Rails", "http://www.rubyonrails.com"
|
|
7
|
+
to develop applications. When it comes to working with static, non-dynamic websites it can seem like stepping back in time.
|
|
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
|
|
15
|
+
|
|
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..."
|
|
17
|
+
|
|
18
|
+
%h2 Enter StaticMatic
|
|
19
|
+
|
|
20
|
+
.columns
|
|
21
|
+
.left_column
|
|
22
|
+
%em Concise and terse Haml Templating Language
|
|
23
|
+
= img "homepage-templating.jpg"
|
|
24
|
+
|
|
25
|
+
.right_column
|
|
26
|
+
%em Live preview server for use while developing
|
|
27
|
+
= img "homepage-previewing.jpg"
|
|
28
|
+
|
|
29
|
+
%p
|
|
30
|
+
%em Output full HTML pages
|
|
31
|
+
= img "homepage-build.jpg"
|
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.
|
|
7
|
-
date: 2007-
|
|
6
|
+
version: 0.8.1
|
|
7
|
+
date: 2007-09-04 00:00:00 +01:00
|
|
8
8
|
summary: Manage static sites using Haml & Sass
|
|
9
9
|
require_paths:
|
|
10
10
|
- lib
|
|
@@ -60,7 +60,8 @@ files:
|
|
|
60
60
|
- lib/staticmatic.rb
|
|
61
61
|
- RakeFile
|
|
62
62
|
- README
|
|
63
|
-
-
|
|
63
|
+
- StaticMatic - website.zip
|
|
64
|
+
- staticmatic-0.8.0.gem
|
|
64
65
|
- test
|
|
65
66
|
- test/base_test.rb
|
|
66
67
|
- test/helpers_test.rb
|
|
@@ -84,7 +85,30 @@ files:
|
|
|
84
85
|
- test/sandbox/test_site/src/stylesheets/application.sass
|
|
85
86
|
- test/sandbox/tmp
|
|
86
87
|
- test/server_test.rb
|
|
87
|
-
-
|
|
88
|
+
- website
|
|
89
|
+
- website/site
|
|
90
|
+
- website/site/download.html
|
|
91
|
+
- website/site/faq.html
|
|
92
|
+
- website/site/how_to_use.html
|
|
93
|
+
- website/site/images
|
|
94
|
+
- website/site/images/bycurve21.gif
|
|
95
|
+
- website/site/images/curve21.jpg
|
|
96
|
+
- website/site/images/homepage-build.jpg
|
|
97
|
+
- website/site/images/homepage-previewing.jpg
|
|
98
|
+
- website/site/images/homepage-templating.jpg
|
|
99
|
+
- website/site/index.html
|
|
100
|
+
- website/site/javascripts
|
|
101
|
+
- website/site/stylesheets
|
|
102
|
+
- website/site/stylesheets/application.css
|
|
103
|
+
- website/src
|
|
104
|
+
- website/src/layouts
|
|
105
|
+
- website/src/layouts/application.haml
|
|
106
|
+
- website/src/pages
|
|
107
|
+
- website/src/pages/download.haml
|
|
108
|
+
- website/src/pages/faq.haml
|
|
109
|
+
- website/src/pages/how_to_use.haml
|
|
110
|
+
- website/src/pages/index.haml
|
|
111
|
+
- website/src/stylesheets
|
|
88
112
|
test_files:
|
|
89
113
|
- test/base_test.rb
|
|
90
114
|
- test/helpers_test.rb
|
data/staticmatic-0.7.0.gem
DELETED
|
Binary file
|
data/test.rb
DELETED