webby 0.7.1 → 0.7.2
Sign up to get free protection for your applications and to get access to all the features.
- data/History.txt +15 -0
- data/Manifest.txt +21 -15
- data/Rakefile +4 -2
- data/data/content/css/blueprint/compressed/print.css +76 -0
- data/data/content/css/blueprint/compressed/screen.css +696 -0
- data/data/content/css/blueprint/lib/forms.css +45 -0
- data/data/content/css/blueprint/lib/grid.css +95 -51
- data/data/content/css/blueprint/lib/grid.png +0 -0
- data/data/content/css/blueprint/lib/ie.css +30 -0
- data/data/content/css/blueprint/lib/reset.css +11 -12
- data/data/content/css/blueprint/lib/typography.css +69 -114
- data/data/content/css/blueprint/plugins/buttons/Readme +31 -0
- data/data/content/css/blueprint/{lib → plugins/buttons}/buttons.css +17 -32
- data/data/content/css/blueprint/{lib/img → plugins/buttons}/icons/cross.png +0 -0
- data/data/content/css/blueprint/{lib/img/icons/textfield_key.png → plugins/buttons/icons/key.png} +0 -0
- data/data/content/css/blueprint/{lib/img → plugins/buttons}/icons/tick.png +0 -0
- data/data/content/css/blueprint/plugins/css-classes/Readme +14 -0
- data/data/content/css/blueprint/plugins/css-classes/css-classes.css +24 -0
- data/data/content/css/blueprint/plugins/fancy-type/Readme +22 -0
- data/data/content/css/blueprint/plugins/fancy-type/fancy-type-compressed.css +5 -0
- data/data/content/css/blueprint/plugins/fancy-type/fancy-type.css +74 -0
- data/data/content/css/blueprint/print.css +35 -46
- data/data/content/css/blueprint/screen.css +10 -18
- data/data/content/css/site.css +8 -0
- data/data/content/index.txt +2 -2
- data/data/layouts/default.rhtml +4 -4
- data/data/templates/page.erb +3 -3
- data/examples/webby/content/css/blueprint/print.css +58 -61
- data/examples/webby/content/css/blueprint/screen.css +696 -30
- data/examples/webby/content/css/site.css +63 -45
- data/examples/webby/content/index.txt +2 -2
- data/examples/webby/content/manual.txt +366 -15
- data/examples/webby/content/script/jquery.corner.js +152 -0
- data/examples/webby/content/script/jquery.js +31 -0
- data/examples/webby/content/tips_and_tricks.txt +2 -2
- data/examples/webby/content/tutorial.txt +5 -5
- data/examples/webby/layouts/default.rhtml +19 -10
- data/examples/webby/templates/page.erb +5 -3
- data/lib/webby.rb +25 -3
- data/lib/webby/filters/basepath.rb +97 -0
- data/lib/webby/filters/coderay.rb +2 -2
- data/lib/webby/filters/graphviz.rb +10 -10
- data/lib/webby/filters/haml.rb +3 -7
- data/lib/webby/filters/outline.rb +194 -0
- data/lib/webby/helpers/tag_helper.rb +14 -13
- data/lib/webby/helpers/url_helper.rb +84 -13
- data/lib/webby/pages_db.rb +15 -8
- data/lib/webby/renderer.rb +2 -2
- data/lib/webby/resource.rb +6 -6
- data/lib/webby/utils.rb +17 -1
- data/lib/webby/webby_task.rb +20 -7
- data/tasks/annotations.rake +1 -1
- data/tasks/doc.rake +2 -2
- data/tasks/gem.rake +3 -3
- data/tasks/manifest.rake +5 -2
- data/tasks/post_load.rake +18 -0
- data/tasks/rubyforge.rake +1 -1
- data/tasks/setup.rb +56 -11
- data/tasks/spec.rake +4 -1
- data/tasks/svn.rake +44 -0
- data/tasks/website.rake +2 -2
- metadata +33 -18
- data/data/content/css/blueprint/lib/compressed.css +0 -137
- data/data/content/css/blueprint/lib/img/grid.png +0 -0
- data/examples/webby/content/css/blueprint/lib/buttons.css +0 -112
- data/examples/webby/content/css/blueprint/lib/compressed.css +0 -137
- data/examples/webby/content/css/blueprint/lib/grid.css +0 -149
- data/examples/webby/content/css/blueprint/lib/img/grid.png +0 -0
- data/examples/webby/content/css/blueprint/lib/img/icons/cross.png +0 -0
- data/examples/webby/content/css/blueprint/lib/img/icons/textfield_key.png +0 -0
- data/examples/webby/content/css/blueprint/lib/img/icons/tick.png +0 -0
- data/examples/webby/content/css/blueprint/lib/reset.css +0 -40
- data/examples/webby/content/css/blueprint/lib/typography.css +0 -161
@@ -6,19 +6,18 @@ sass_options:
|
|
6
6
|
:style: :expanded
|
7
7
|
---
|
8
8
|
!text = #000
|
9
|
-
!border = #
|
10
|
-
!header = #
|
9
|
+
!border = #CCC
|
10
|
+
!header = #111
|
11
11
|
!link = #125AA7
|
12
12
|
!link_hover = #000
|
13
13
|
!blockquote = #666
|
14
14
|
!code = #000
|
15
|
-
!box_bg = #
|
15
|
+
!box_bg = #EEE
|
16
16
|
!highlight = #B2CCFF
|
17
17
|
!quiet = #666
|
18
18
|
!alt = #666
|
19
19
|
|
20
20
|
body
|
21
|
-
:margin 1.5em 0
|
22
21
|
:color = !text
|
23
22
|
:font-family Verdana, sans-serif
|
24
23
|
|
@@ -26,7 +25,10 @@ body
|
|
26
25
|
// ------------------------------------------------------------------------
|
27
26
|
h1,h2,h3,h4,h5,h6
|
28
27
|
:color = !header
|
29
|
-
:font-
|
28
|
+
:font-weight bold
|
29
|
+
|
30
|
+
h2,h3,h4,h5,h6
|
31
|
+
:border-bottom = 2px solid !highlight
|
30
32
|
|
31
33
|
// Text Elements
|
32
34
|
// ------------------------------------------------------------------------
|
@@ -34,18 +36,27 @@ a
|
|
34
36
|
:color = !link
|
35
37
|
&:hover
|
36
38
|
:color = !link_hover
|
39
|
+
|
37
40
|
blockquote
|
38
41
|
:color = !blockquote
|
39
42
|
|
40
43
|
pre
|
44
|
+
:margin-left 18px
|
45
|
+
:padding 8px
|
46
|
+
:color = !code
|
47
|
+
:font-family monospace, courier
|
48
|
+
:overflow auto
|
41
49
|
:background = !box_bg
|
42
|
-
:border
|
50
|
+
:border = 1px solid !border
|
43
51
|
:border-left = 7px solid !border
|
44
52
|
|
45
53
|
hr
|
46
54
|
:background = !highlight
|
47
55
|
:color = !highlight
|
48
56
|
|
57
|
+
code
|
58
|
+
:background-color = !box_bg
|
59
|
+
|
49
60
|
// Tables
|
50
61
|
// ------------------------------------------------------------------------
|
51
62
|
table
|
@@ -65,65 +76,72 @@ p.quiet
|
|
65
76
|
// My Site Stylings
|
66
77
|
// ------------------------------------------------------------------------
|
67
78
|
#header
|
68
|
-
:margin-bottom 1.7em
|
69
|
-
h1
|
70
|
-
:margin-bottom 0
|
71
|
-
:padding-bottom 0.2em
|
72
|
-
hr
|
73
|
-
:height 0.3em
|
74
|
-
:margin-bottom 0.5em
|
75
79
|
|
76
80
|
#navigation
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
:background-color = !highlight
|
81
|
+
ul
|
82
|
+
:margin-left 0
|
83
|
+
:text-align right
|
84
|
+
:font-size 16px
|
85
|
+
:list-style-type none
|
86
|
+
li
|
87
|
+
a
|
88
|
+
:display block
|
89
|
+
:text-decoration none
|
90
|
+
:padding-right 5px
|
91
|
+
&:hover
|
92
|
+
:background-color = !highlight
|
90
93
|
|
91
94
|
#footer
|
92
95
|
hr
|
93
|
-
:margin-bottom
|
96
|
+
:margin-bottom 18px
|
94
97
|
p
|
95
98
|
:text-align right
|
96
99
|
|
97
|
-
pre.code
|
98
|
-
:padding 0.5em
|
99
|
-
:margin-bottom 1.3em
|
100
|
-
:color = !code
|
101
|
-
:font 1.1em 'Courier New', 'Terminal', monospace
|
102
|
-
:overflow auto
|
103
|
-
|
104
100
|
.CodeRay
|
105
|
-
:
|
101
|
+
:margin-left 18px
|
102
|
+
:padding 8px
|
103
|
+
:border = 1px solid !border
|
106
104
|
:border-left = 7px solid !border
|
107
105
|
:background = !box_bg
|
108
106
|
:color = !code
|
109
107
|
pre
|
110
|
-
:font
|
108
|
+
:font 12px monospace, courier
|
111
109
|
|
112
110
|
div.toc
|
113
111
|
:float right
|
114
|
-
:padding
|
115
|
-
:margin-left
|
116
|
-
:margin-bottom
|
112
|
+
:padding 8px
|
113
|
+
:margin-left 16px
|
114
|
+
:margin-bottom 16px
|
117
115
|
:background-color = !highlight
|
118
116
|
:border = 1px solid !border
|
119
|
-
|
117
|
+
ol
|
118
|
+
:margin-bottom 0.5em
|
119
|
+
ol
|
120
|
+
:margin-bottom 0
|
121
|
+
p.title
|
122
|
+
:margin-bottom 0.25em
|
123
|
+
:font-weight bold
|
124
|
+
:font-size 1.2em
|
125
|
+
:text-align center
|
126
|
+
|
127
|
+
ul
|
128
|
+
ul
|
120
129
|
:margin-bottom 0
|
121
130
|
|
122
|
-
span.
|
123
|
-
:
|
131
|
+
span.heading-num
|
132
|
+
:margin-right 10px
|
124
133
|
|
125
|
-
|
126
|
-
|
127
|
-
|
134
|
+
p.fn
|
135
|
+
:color = !blockquote
|
136
|
+
:margin-left 1.5em
|
137
|
+
|
138
|
+
p.span-2
|
139
|
+
:clear left
|
140
|
+
|
141
|
+
pre.option
|
142
|
+
:float left
|
143
|
+
:margin-left 80px
|
144
|
+
:width 500px
|
145
|
+
:clear both
|
128
146
|
|
129
147
|
// EOF
|
@@ -9,7 +9,7 @@ Webby works by combining the contents of a *page* with a *layout* to produce HTM
|
|
9
9
|
|
10
10
|
Install Webby and try it out!
|
11
11
|
|
12
|
-
<pre
|
12
|
+
<pre>
|
13
13
|
sudo gem install -y webby
|
14
14
|
</pre>
|
15
15
|
|
@@ -28,7 +28,7 @@ h2. But Wait! There's More!
|
|
28
28
|
|
29
29
|
Webby has a great _autobuild_ feature that continuously generates HTML whenever the *pages* or *layouts* change. The HTML is served up via "heel":http://copiousfreetime.rubyforge.org/heel/, a static file webserver based on mongrel. Whenever you change a page, you can immediately see those changes without having to run any commands.
|
30
30
|
|
31
|
-
<pre
|
31
|
+
<pre>
|
32
32
|
$ rake autobuild
|
33
33
|
heel --root output --daemonize
|
34
34
|
[10:21:26] INFO: starting autobuild (Ctrl-C to stop)
|
@@ -1,40 +1,391 @@
|
|
1
1
|
---
|
2
2
|
title: Manual
|
3
3
|
created_at: Wed Aug 29 08:57:00 -0600 2007
|
4
|
-
filter:
|
4
|
+
filter:
|
5
|
+
- erb
|
6
|
+
- graphviz
|
7
|
+
- coderay
|
8
|
+
- textile
|
9
|
+
- outline
|
5
10
|
---
|
6
|
-
|
11
|
+
<div class="toc push-1">
|
7
12
|
|
8
|
-
|
13
|
+
p(title). Table of Contents
|
14
|
+
|
15
|
+
<toc />
|
16
|
+
</div>
|
17
|
+
|
18
|
+
h2{clear:none}. Getting Started
|
19
|
+
|
20
|
+
h3{clear:none}. Requirements
|
21
|
+
|
22
|
+
Webby is an application written using the Ruby programming language. To install and run Webby you will need the following applications on your system:
|
23
|
+
|
24
|
+
* "Ruby":http://ruby-lang.org
|
25
|
+
* "RubyGems":http://rubygems.org/read/chapter/3
|
26
|
+
|
27
|
+
h3{clear:none}. Installation
|
28
|
+
|
29
|
+
Webby is an application written using the Ruby programming language. You will need to install a Ruby interpreter on your computer. Download and installation instructions can be found on the "Ruby":http://ruby-lang.org website. For the Windows platform, the one-click installer is recommended. Webby is not compatible with the Ruby 1.9.0 release; please use the Ruby 1.8.6 release.
|
9
30
|
|
10
31
|
You will also need to install RubyGems. If you used the Windows one-click installer, RubyGems is already present on your system. For everyone else you can find installation instructions on the "RubyGems":http://rubygems.org/read/chapter/3 website.
|
11
32
|
|
12
33
|
To install Webby and its dependent gems type the following command. Omit the @sudo@ portion for the Windows platform; you will need to specify the *mswin32* versions of the _mongrel_ and _hpricot_ dependent gems when prompted.
|
13
34
|
|
14
|
-
<pre
|
35
|
+
<pre>
|
15
36
|
sudo gem install -y webby
|
16
37
|
</pre>
|
17
38
|
|
39
|
+
To make use of all the features Webby has to offer, the following gems should also be installed. These gems provide different ways to transform text into HTML or CSS.
|
18
40
|
|
19
|
-
<pre
|
41
|
+
<pre>
|
20
42
|
sudo gem install -y RedcCoth
|
21
43
|
sudo gem install -y BlueCloth
|
22
44
|
sudo gem install -y haml
|
23
45
|
sudo gem install -y coderay
|
24
46
|
</pre>
|
25
47
|
|
26
|
-
|
48
|
+
h3. New Website
|
49
|
+
|
50
|
+
h2. Working With Resources
|
51
|
+
|
52
|
+
A resource is any file that is found in the _content_ or _layouts_ folders. Resources are either copied to the output folder or they are processed through the Webby filter engine to generate an output file. Resources fall into one of three types:
|
53
|
+
|
54
|
+
* Files
|
55
|
+
* Pages
|
56
|
+
* Layouts
|
57
|
+
|
58
|
+
Files are the simplest resource to handle. They are copied, unchanged, from the content folder to the output folder. Files include resources such as images, CSS stylesheets, and so forth. A file will be copied from its location in the content folder to its corresponding location in the output folder -- i.e. a file located at @content/some/folder/image.jpg@ would be copied to @output/some/folder/image.jpg@.
|
59
|
+
|
60
|
+
Files will only be found in the _content_ folder. The _layouts_ folder is reserved solely for layouts.
|
61
|
+
|
62
|
+
h3(#pages). Pages
|
63
|
+
|
64
|
+
Pages are found in the _content_ folder along with regular files. Pages contain *meta-data* at the top of the file; this is what differentiates a page from a regular file. The meta-data is a section of "YAML":http://www.yaml.org/spec/1.1/ formatted text that describes various properties and attributes of the page. These attributes are used by Webby to determine how the page will be processed by the filter engine.
|
65
|
+
|
66
|
+
Let's look at an example page.
|
67
|
+
|
68
|
+
<pre>
|
69
|
+
---
|
70
|
+
title: Lorem Ipsum
|
71
|
+
created_at: Wed Aug 29 08:57:00 -0600 2007
|
72
|
+
filter:
|
73
|
+
- erb
|
74
|
+
- textile
|
75
|
+
---
|
76
|
+
h2. <%= @page.title %>
|
77
|
+
|
78
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc congue ipsum
|
79
|
+
vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu
|
80
|
+
lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.
|
81
|
+
</pre>
|
82
|
+
|
83
|
+
The page meta-data is contained in the first section -- it is located between the two @---@ lines. The page meta-data will not be present in the generated HTML file. Only the page content (the text below the second @---@ line) will be rendered into the final HTML file. The meta-data defines a collection of attributes that (1) are made available to the various Webby filters and (2) provide instructions to the Webby filter engine itself.
|
84
|
+
|
85
|
+
Three attributes are defined in the above example: @title@, @created_at@, and @filter@. The first attribute, @title@, is associated with the value "Lorem Ipsum". This attribute is used in the first line of the page content to render the title using a combination of the ERB and Textile filters (more can be read in the "Filters":#filters section of this manual). The example page above will result in the following snippet of HTML code.
|
86
|
+
|
87
|
+
<pre>
|
88
|
+
<h2>Lorem Ipsum</h2>
|
89
|
+
|
90
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc congue ipsum
|
91
|
+
vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu
|
92
|
+
lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
|
93
|
+
</pre>
|
94
|
+
|
95
|
+
You can see that the value of the @title@ attribute was substituted for the ERB snippet <code><%= @page.title %></code>. All page attributes can be accessed using the <code>@page.attribute</code> syntax within an ERB block. This will be discussed in greater detail in the "ERB Filter":#erbfilter section.
|
96
|
+
|
97
|
+
The last attribute in the meta-data section is the @filter@ attribute. The value for this attribute is a list of filters that will be applied to the page contents. The filters will be applied in the order they are specified. For the example page this would be the ERB filter followed by the Textile filter.
|
98
|
+
|
99
|
+
h4. Page Attributes
|
100
|
+
|
101
|
+
Attribute identifiers cannot contain spaces; they must be separated from their values by a colon. Other than that, you are free to define as many attributes as you like. Aside from defining values that can be rendered into a page, attributes are also used to find other pages in the site. Finding and linking to other pages is discussed in the "ERB Filter":#erbfilter section.
|
102
|
+
|
103
|
+
There are a few attributes that control when, where, and how pages are rendered. These are listed below with a brief description of how the attribute affects the system.
|
104
|
+
|
105
|
+
* *destination* -- Defines the path in the output directory where the rendered page should be stored.
|
106
|
+
* *dirty* -- The dirty flag is used to determine whether the page should rendered or not. Normally this is automatically determined by the filter engine, but it can be overridden by setting this attribute. If the dirty flag is set to _true_ then the page will always be rendered. If the dirty flag is set to _false_ then the page will never be rendered.
|
107
|
+
* *extension* -- Defines the extension that will be appended to the filename of the rendered page in the output folder. The extension is determined by looking at the following:
|
108
|
+
** the meta-data of the current page for an @extension@ attribute
|
109
|
+
** the meta-data of layout file of the current page for an @extension@ attribute
|
110
|
+
** the extension of this page file in the _content_ folder
|
111
|
+
* *filter* -- Defines the list of filters that will be applied to the contents of this page. If left blank, then the default filter will be applied to the page contents.
|
112
|
+
* *layout* -- Defines the layout that the page contents will be rendered into. The default layout will be used if this attribute is not defined. The value of @nil@ should be specified if the page should not be rendered into any layout.
|
113
|
+
|
114
|
+
The following attributes are defined for each page in the content folder. These attributes cannot be changed in the page's meta-data section. However, they are available to the ERB filter when rendering the contents of a page.
|
115
|
+
|
116
|
+
* *path* -- The full path to the file in the _content_ folder
|
117
|
+
* *dir* -- The relative directory in the output folder where the page will be rendered
|
118
|
+
* *filename* -- The name of the file in the _content_ folder excluding any path information
|
119
|
+
* *ext* -- The extension of the file in the _content_ folder
|
120
|
+
* *mtime* -- The modification time of the file in the _content_ folder
|
121
|
+
* *number* -- Reserved variable used for multi-page content
|
122
|
+
* *url* -- A URL suitable for creating a link to the page
|
123
|
+
* *render* -- Returns the contents of the page as rendered by the Webby filter engine
|
124
|
+
|
125
|
+
h4. Page Filters
|
126
|
+
|
127
|
+
Filters operate on the content of a page by transforming the text of the content section according to the rules of the individual filter. Some filters transform simplified markup into true HTML syntax; examples of these are the Textile filter and the Markdown filter. Other filters create images from text in the page (Graphviz filter) or apply syntax highlighting to the text (CodeRay filter). All the filters are discussed in detail in the "Filters":#filters section of this document.
|
128
|
+
|
129
|
+
h3. Layouts
|
130
|
+
|
131
|
+
Layouts provide the basic framework for a page -- the header, the footer, the navigation. They provide a consistent look and feel across all pages in the website. Individual pages contain just the content for that particular page.
|
132
|
+
|
133
|
+
<graphviz path="images" class="push-0" alt="layout diagram">
|
134
|
+
digraph layout_graph {
|
135
|
+
rankdir = LR;
|
136
|
+
edge [fontname="Verdana", fontsize=8];
|
137
|
+
node [fontname="Verdana", fontsize=10];
|
138
|
+
|
139
|
+
page -> layout [label="rendered\ninto"];
|
140
|
+
layout -> HTML [label="results\nin"];
|
141
|
+
}
|
142
|
+
</graphviz>
|
143
|
+
|
144
|
+
The diagram to the right shows a typical page rendering process. The content of a page is rendered by the Webby filter engine. The rendered content is inserted into the layout specified by the page; the content insertion occurs as the layout is being rendered. The result is the HTML that is stored in the _output_ folder.
|
145
|
+
|
146
|
+
Layouts are treated exactly as pages are treated with one exception -- the layout has access to the rendered contents of another page in site. The content of the page being rendered is made available to the layout via the @@content@ variable accessible from the ERB filter.
|
147
|
+
|
148
|
+
<pre>
|
149
|
+
---
|
150
|
+
extension: html
|
151
|
+
filter: erb
|
152
|
+
---
|
153
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
|
154
|
+
<head>
|
155
|
+
<title><%= @page.title %></title>
|
156
|
+
</head>
|
157
|
+
<body>
|
158
|
+
<%= @content %>
|
159
|
+
</body>
|
160
|
+
</html>
|
161
|
+
</pre>
|
162
|
+
|
163
|
+
The example above shows a very simple layout. The content for the current page being rendered will be inserted between the HTML body tags.
|
164
|
+
|
165
|
+
Along with the @@content@ variable, all the attributes of the current page being rendered are also accessible in the layout. The page title is inserted into the HTML title tags. But again, any page attribute can be accessed within the layout via the @@page@ variable.
|
166
|
+
|
167
|
+
h2(#filters). Filters
|
168
|
+
|
169
|
+
Filters are used in Webby to transform the text of pages and layouts. The filters applied to a page are defined in the meta-data of the page. The filters are used to transform different parts of the page contents resulting in HTML syntax, images, highlighted code, etc. Filters apply equally to pages and to layouts -- that is, pages and layouts are treated in the same manner by filters.
|
170
|
+
|
171
|
+
This section will look at the various filters provided by Webby, what those filters do, and how they should be used. Enjoy!
|
172
|
+
|
173
|
+
h3(#erbfilter). ERB
|
174
|
+
|
175
|
+
"ERB":http://ruby-doc.org/stdlib/libdoc/erb/rdoc/classes/ERB.html provides an easy to use but powerful templating system for Ruby. Using ERB, Ruby code can be added to any plain text document for the purposes of generating document information details and/or flow control. Much of the functionality Webby has to offer is made available through the erb filter. ERB does not place any limitations on the content of the page, so it is recommended to use the erb filter with another filter that simplifies the HTML markup -- Textile is my favorite, but Markdown and HAML support are provided in Webby, as well. Chose the markup language that suits your style.
|
176
|
+
|
177
|
+
Some examples of ERB have already been seen in the "pages":#pages section of this document. Ruby code is placed between ERB delimiters, <code><notextile><%= ruby code %></notextile></code> somewhere in the content section of your page or layout. The erb filter executes that code and inserts the results into the page. Webby provides quite a few features that are accessed via ERB. Page attributes are one feature, and "helper methods":#helpermethods are another that are discussed elsewhere in this manual.
|
178
|
+
|
179
|
+
<pre><notextile>
|
180
|
+
The title of this page is "<%= @page.title" %>".
|
181
|
+
</notextile></pre>
|
182
|
+
|
183
|
+
<pre>
|
184
|
+
The title of this page is "<%= @page.title %>".
|
185
|
+
</pre>
|
186
|
+
|
187
|
+
p(column span-2). *Usage*:
|
188
|
+
|
189
|
+
p(column span-13). Include "erb" in the filter list of the page or layout that contains ERB formatting.
|
190
|
+
|
191
|
+
p(column span-2). *Options*:
|
192
|
+
|
193
|
+
p(column span-13). none
|
194
|
+
|
195
|
+
p(column span-2). *Require*:
|
196
|
+
|
197
|
+
p(column span-13). none
|
198
|
+
|
199
|
+
h3. Textile
|
200
|
+
|
201
|
+
"Textile":http://en.wikipedia.org/wiki/Textile_%28markup_language%29 is a lightweight markup language originally developed by Dean Allen and billed as a "humane Web text generator". The textile filter converts Textile formatted text into valid, well-formed XHTML.
|
202
|
+
|
203
|
+
A complete textile reference is beyond the scope of this document. Please refer to the "Textile reference":http://hobix.com/textile/ compiled by _why the luck stiff_ <sup><a href="#fn1">1</a></sup>.
|
204
|
+
|
205
|
+
The textile filter will operate on all the contents of a page or layout. Given that fact, it should be one of the last filters applied to the page. You can prevent a section of the page from being processed by the textile filter by surrounding it with <code><notextile><notextile>...</notextile></notextile></code> tags.
|
206
|
+
|
207
|
+
p(column span-2). *Usage*:
|
208
|
+
|
209
|
+
p(column span-13). Include "textile" in the filter list of the page or layout that contains Textile formatting
|
210
|
+
|
211
|
+
p(column span-2). *Options*:
|
212
|
+
|
213
|
+
p(column span-13). none
|
214
|
+
|
215
|
+
p(column span-2). *Require*:
|
216
|
+
|
217
|
+
p(column span-13). The @RedCloth@ gem must be installed on your system in order to use the textile filter.
|
218
|
+
|
219
|
+
fn1(fn){clear:both}. Please don't ask. Why is very smart, he wrote the Ruby code that handles Textile markup, and the code is very solid. Enjoy the benefits of his work.
|
27
220
|
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
221
|
+
h3. Markdown
|
222
|
+
|
223
|
+
"Markdown":http://daringfireball.net/projects/markdown/ is a lightweight markup language created by John Gruber. It allows you to write using an easy-to-read, easy-to-write plain text format. From the Markdown web page:
|
224
|
+
|
225
|
+
bq. The overriding design goal for Markdown's formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions. While Markdown's syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown's syntax is the format of plain text email.
|
226
|
+
|
227
|
+
The markdown filter will operate on all the contents of a page or layout. Given that fact, it should be one of the last filters applied to the page.
|
228
|
+
|
229
|
+
p(column span-2). *Usage*:
|
230
|
+
|
231
|
+
p(column span-13). Include "markdown" in the filter list of the page or layout that contains Markdown formatting.
|
232
|
+
|
233
|
+
p(column span-2). *Options*:
|
234
|
+
|
235
|
+
p(column span-13). none
|
236
|
+
|
237
|
+
p(column span-2). *Require*:
|
238
|
+
|
239
|
+
p(column span-13). The @BlueCloth@ gem must be installed on your system in order to use the markdown filter.
|
240
|
+
|
241
|
+
h3. HAML & SASS
|
242
|
+
|
243
|
+
"HAML":http://haml.hamptoncatlin.com/ is a markup language created by Hampton Catlin that's used to cleanly and simply describe the XHTML of any web document without the use of inline code. SASS is the equivalent for CSS documents. From the HAML website:
|
244
|
+
|
245
|
+
bq. "HAML":http://haml.hamptoncatlin.com/docs/haml and "SASS":http://haml.hamptoncatlin.com/docs/sass are templating engines for the two most common types of documents on the web: HTML and CSS, respectively. They are designed to make it both easier and more pleasant to code HTML and CSS documents, by eliminating redundancy, reflecting the underlying structure that the document represents, and providing elegant, easily understandable, and powerful syntax.
|
246
|
+
|
247
|
+
Both the haml and the sass filter will operate on all the contents of a page or layout. Given that fact, these should be one of the last filters applied to the page.
|
248
|
+
|
249
|
+
p(column span-2). *Usage*:
|
250
|
+
|
251
|
+
p(column span-13). Include "haml" in the filter list of the page or layout that contains HAML formatting. Include "sass" in the filter list of the page that contains SASS formatting (this should be a CSS page).
|
252
|
+
|
253
|
+
p(column span-2). *Options*:
|
254
|
+
|
255
|
+
p(column span-13). Options are passed to the haml filter by setting the "haml_options" in the page meta-data -- the hash of options defined under the "haml_options" attribute will be passed to the haml filter engine when it is run. Please refer to the HAML documentation for the list of available options.
|
256
|
+
|
257
|
+
p(column span-13 prepend-2). Options are passed to the sass filter by setting the "sass_options" in the page meta-data -- the hash of options defined under the "sass_options" attribute will be passed to the sass filter engine when it is run. Please refer to the SASS documentation for the list of available options.
|
258
|
+
|
259
|
+
p(column span-2). *Require*:
|
260
|
+
|
261
|
+
p(column span-13). The @haml@ gem must be installed on your system in order to use the haml filter or the sass filter.
|
262
|
+
|
263
|
+
h3. CodeRay
|
264
|
+
|
265
|
+
"CodeRay":http://coderay.rubychan.de/ is a Ruby library that provides syntax highlighting for various types of source code. The coderay filter takes a portion of the page contents and runs it through the CodeRay syntax highlighter, and pretty, colored XHTML is inserted into the page. The end result is that you can embed code into a page, and the coderay filter will convert that code into valid XHTML.
|
266
|
+
|
267
|
+
Unlike the filters mentioned thus far, the coderay filter does not operate on the entire contents of a page. Only text between <code><notextile><coderay>...</coderay></notextile></code> tags will be run through the coderay filter. The XHTML inserted into the page is contained in a @div@ element styled with a @CodeRay@ class.
|
268
|
+
|
269
|
+
The coderay filter is controlled by setting attributes on the coderay tags in the content of the page. These attributes tell the CodeRay engine the language being parsed, to show line numbers, where to start numbering etc.
|
270
|
+
|
271
|
+
<pre>
|
272
|
+
<notextile><coderay lang="ruby" line_numbers="inline">
|
273
|
+
class Object
|
274
|
+
def returning( r )
|
275
|
+
yield r if block_given?
|
276
|
+
r
|
277
|
+
end
|
278
|
+
end
|
279
|
+
</coderay></notextile>
|
280
|
+
</pre>
|
281
|
+
|
282
|
+
<coderay lang="ruby" line_numbers="inline">
|
283
|
+
class Object
|
284
|
+
def returning( r )
|
285
|
+
yield r if block_given?
|
286
|
+
r
|
287
|
+
end
|
288
|
+
end
|
289
|
+
</coderay>
|
290
|
+
|
291
|
+
p(column span-2). *Usage*:
|
292
|
+
|
293
|
+
p(column span-13). Include "coderay" in the filter list of the page or layout that contains Markdown formatting. You will also need to link to the coderay stylesheet in any page containing coderay markup.
|
294
|
+
|
295
|
+
p(column span-2). *Options*:
|
296
|
+
|
297
|
+
p(column span-13). The full list of "coderay options":/rdoc/classes/Webby/Filters/CodeRay.html can be found in the source documentation.
|
298
|
+
|
299
|
+
p(column span-2). *Require*:
|
300
|
+
|
301
|
+
p(column span-13). The @coderay@ gem must be installed on your system in order to use the coderay filter. Be sure to include the coderay stylesheet in your layout.
|
302
|
+
|
303
|
+
h3. Graphviz
|
304
|
+
|
305
|
+
"Graphviz":http://www.graphviz.org/ is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in several useful formats. The graphviz filter allows you to embed Graphviz scripts into a page and generate an image in the page.
|
306
|
+
|
307
|
+
The graphviz filter does not operate on the entire contents of a page. Only text between <code><notextile><graphviz>...</graphviz></notextile></code> tags will be run through the graphviz filter. The resulting image will be inserted into the page using a standard @img@ tag. If the Graphviz script contains references to URLs, then an image map will also be generated and inserted into the page. This results in an image with clickable regions.
|
308
|
+
|
309
|
+
The graphviz filter is controlled by setting attributes on the graphviz tags in the content of the page. These attributes tell the Graphviz renderer where to store the generated image, the type of image to create, etc.
|
310
|
+
|
311
|
+
<pre>
|
312
|
+
<notextile><graphviz path="images" alt="hello world graph">
|
313
|
+
digraph hello_world {
|
314
|
+
rankdir = LR;
|
315
|
+
Hello -> World;
|
316
|
+
}
|
317
|
+
</graphviz></notextile>
|
318
|
+
</pre>
|
319
|
+
|
320
|
+
<graphviz path="images" alt="hello world graph">
|
321
|
+
digraph hello_world {
|
322
|
+
rankdir = LR;
|
323
|
+
Hello -> World;
|
324
|
+
}
|
325
|
+
</graphviz>
|
326
|
+
|
327
|
+
p(column span-2). *Usage*:
|
328
|
+
|
329
|
+
p(column span-13). Include "graphviz" in the filter list of the page or layout that contains Graphviz scripts.
|
330
|
+
|
331
|
+
p(column span-2). *Options*:
|
332
|
+
|
333
|
+
p(column span-13). The full list of "graphviz options":/rdoc/classes/Webby/Filters/Graphviz.html can be found in the source documentation.
|
334
|
+
|
335
|
+
p(column span-2). *Require*:
|
336
|
+
|
337
|
+
p(column span-13). The Graphviz application must be installed on your system, and the Graphviz executables must be available on the path.
|
338
|
+
|
339
|
+
h3. BasePath
|
340
|
+
|
341
|
+
The basepath filter is used to rewrite the base path location for all URLs in a page. This is useful for the times when the publish location of the website is no at the root of the web server -- @http://your.website.com/path/to/your/site@ for example. This allows pages and resources (images, javascript, stylesheets, etc.) to be referenced from the root of the Webby web server for easy development, but the paths of these resources can easily be changed by the basepath filter when the website is being deployed.
|
342
|
+
|
343
|
+
The basepath filter only works on HTML/XHTML text, and therefore, it should be one of the last (if not the last) filter applied to your content. It is recommended to only include the basepath filter in your layout(s). The basepath filter should appear before the tidy filter.
|
344
|
+
|
345
|
+
p(column span-2). *Usage*:
|
346
|
+
|
347
|
+
p(column span-13){margin-bottom:0}. Include "basepath" in the filter list of your layout(s). Specify the new base path to use either as a command line argument or as an option configured in the _Rakefile_. The base path specified on the command line takes precedence over the base path specified in the Rakefile.
|
348
|
+
|
349
|
+
<pre class="option">
|
350
|
+
$ rake rebuild BASE='http://your.website.com/path/to/your/site'
|
351
|
+
</pre>
|
352
|
+
|
353
|
+
p(column span-2). *Options*:
|
354
|
+
|
355
|
+
p(column span-13){margin-bottom:0}. Options can be passed to the basepath filter by specifying them in the project _Rakefile_.
|
356
|
+
|
357
|
+
<pre class="option">
|
358
|
+
SITE.xpaths << '/html/body//img[@usemap]'
|
359
|
+
SITE.base = 'http://webby.rubyforge.org'
|
360
|
+
</pre>
|
361
|
+
|
362
|
+
p(column span-2). *Require*:
|
363
|
+
|
364
|
+
p(column span-13). none
|
365
|
+
|
366
|
+
h3. Tidy
|
367
|
+
|
368
|
+
"Tidy":http://www.w3.org/People/Raggett/tidy/ is a useful application for cleaning up and detecting errors in XHTML text. The tidy filter will run your XHTML code through the tidy program and report any errors in the build log. From the HTML Tidy website:
|
369
|
+
|
370
|
+
bq. When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a simple way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup? Well now there is! Dave Raggett's HTML TIDY is a free utility for doing just that. Tidy is able to fix up a wide range of problems and to bring to your attention things that you need to work on yourself. Each item found is listed with the line number and column so that you can see where the problem lies in your markup. Tidy won't generate a cleaned up version when there are problems that it can't be sure of how to handle. These are logged as "errors" rather than "warnings".
|
371
|
+
|
372
|
+
The tidy program only works on HTML/XHTML text, and therefore, tidy should be one of the last (if not the last) filter applied to your content. It is recommended to only include the tidy filter in your layout(s).
|
373
|
+
|
374
|
+
p(column span-2). *Usage*:
|
375
|
+
|
376
|
+
p(column span-13). Include "tidy" as the last item in the filter list of your layout(s).
|
377
|
+
|
378
|
+
p(column span-2). *Options*:
|
379
|
+
|
380
|
+
p(column span-13){margin-bottom:0}. Options can be passed to the tidy program by specifying them in the project _Rakefile_. These are the command line options that will be passed to the tidy program when it is run.
|
381
|
+
|
382
|
+
<pre class="option">
|
383
|
+
SITE.tidy_options = '-indent -wrap 80'
|
384
|
+
</pre>
|
34
385
|
|
35
|
-
|
386
|
+
p(column span-2). *Require*:
|
36
387
|
|
37
|
-
|
388
|
+
p(column span-13). The HTML Tidy application must be installed on your system, and the @tidy@ executable must be available on the path.
|
38
389
|
|
39
|
-
|
390
|
+
h2. Using Rake
|
40
391
|
|