webby 0.1.0 → 0.2.0

data/website/content/css/blueprint/lib/reset.css

@@ -0,0 +1,37 @@
+/* -------------------------------------------------------------- 
+  
+   Reset.css
+   * Resets default browser CSS styles.
+   
+   Original by Erik Meyer:
+   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
+   
+-------------------------------------------------------------- */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-weight: inherit;
+	font-style: inherit;
+	font-size: 100%;
+	font-family: inherit;
+	vertical-align: baseline;
+}
+
+body { line-height: 1; color: #333; background: white; }
+
+/* Tables still need 'cellspacing="0"' in the markup. */
+table { border-collapse: separate; border-spacing: 0; }
+caption, th, td { text-align: left; font-weight: normal; }
+
+/* Remove possible quote marks (") from <q>, <blockquote>. */
+blockquote:before, blockquote:after, q:before, q:after { content: ""; }
+blockquote, q { quotes: "" ""; }

data/website/content/css/blueprint/lib/typography.css

@@ -0,0 +1,159 @@
+/* -------------------------------------------------------------- 
+   
+   Typography.css
+   * Sets some default typography.
+  
+   Based on work by:
+   * Nathan Borror     [playgroundblues.com]
+   * Jeff Croft        [jeffcroft.com]
+   * Christian Metts   [mintchaos.com]
+   * Wilson Miner      [wilsonminer.com]
+   
+   Read more about using a baseline here:
+   * alistapart.com/articles/settingtypeontheweb
+  
+-------------------------------------------------------------- */   
+
+body {
+  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
+  line-height: 1.5; /* Unitless for proper inheritance */
+}
+
+/* This is where you set your desired font size. The line-height 
+   and vertical margins are automatically calculated from this. 
+   
+   You have to add an extra calculation here because of IE, so that 
+   all users may resize text manually in their browsers.
+   
+   The top one is for IE: The percentage is of 16px (default IE text size)
+   10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth).
+   The second value is what all other browsers see (the wanted font size). */
+   
+body          { font-size: 75%; }   /* IE */
+html > body   { font-size: 12px; }  /* Other browsers */
+
+
+/* Headings
+-------------------------------------------------------------- */
+
+h1,h2,h3,h4,h5,h6 { 
+  font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;
+  color:#111; 
+  clear:both; 
+}
+
+h1 { font-size: 3em; }
+h2 { font-size: 2em; }
+h3 { font-size: 1.5em; line-height:2; }
+h4 { font-size: 1.2em; line-height:1.25; font-weight:bold; }
+h5 { font-size: 1em; font-weight:bold; }
+h6 { font-size: 1em; }
+
+
+/* Text elements
+-------------------------------------------------------------- */
+
+p           { margin: 0 0 1.5em 0; text-align:justify; }
+p.last      { margin-bottom:0; }
+p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }
+p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */
+
+ul, ol      { margin: 0 0 1.5em 1.5em; }
+ol          { list-style-type: decimal; }
+dl          { margin: 1.5em 0; }
+dl dt       { font-weight: bold; }
+
+a           { color: #125AA7; text-decoration: underline; outline: none; }
+a:hover     { color: #000; }
+
+blockquote  { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; }
+strong      { font-weight: bold; }
+em          { font-style: italic; }
+pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
+code        { font:0.9em Monaco, monospace; }
+
+/* Use this to create a horizontal ruler across a column. */
+hr {
+  background: #B2CCFF; 
+  color: #B2CCFF;
+  clear: both; 
+  float: none; 
+  width: 100%; 
+  height: 0.1em;
+  margin: 0 0 1.4em 0;
+  border: none; 
+}
+* html hr { margin: 0 0 1.2em 0; } /* IE6 fix */
+
+
+/* Tables
+-------------------------------------------------------------- */
+
+table   { margin-bottom: 1.4em; border-top:0.1em solid #ddd; border-left:0.1em solid #ddd; }
+th,td   { height: 1em; padding:0.2em 0.4em; border-bottom:0.1em solid #ddd; border-right:0.1em solid #ddd; }
+th      { font-weight:bold; }
+
+
+/* Forms
+-------------------------------------------------------------- */
+
+label     { font-weight: bold; }
+textarea  { height: 180px; width: 300px; }
+
+
+/* Some default classes
+-------------------------------------------------------------- */
+
+p.small   { font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; }
+p.large   { font-size: 1.2em; line-height: 2.5em; }
+p.quiet   { color: #666; }
+.hide     { display: none; }
+
+
+/* Extra fancy typography
+-------------------------------------------------------------- */
+
+/* For great looking type, use this code instead of asdf: 
+   <span class="alt">asdf</span>  
+   Best used on prepositions and ampersands. */
+  
+.alt { 
+  color: #666; 
+  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; 
+  font-size: 1.2em;
+  line-height: 1%; /* Maintain correct baseline */
+  font-style: italic;
+}
+
+/* For great looking quote marks in titles, replace "asdf" width:
+   <span class="dquo">&#8220;</span>asdf&#8221;
+   (That is, when the title starts with a quote mark). 
+   (You may have to change this value depending on your font size). */  
+   
+.dquo { margin-left: -.7em; } 
+
+
+/* Reduced size type with incremental leading
+   (http://www.markboulton.co.uk/journal/comments/incremental_leading/)
+
+   This could be used for side notes. For smaller type, you don't necessarily want to 
+   follow the 1.5x vertical rhythm -- the line-height is too much. 
+   
+   Using this class, it reduces your font size and line-height so that for 
+   every four lines of normal sized type, there is five lines of the sidenote. eg:
+
+   New type size in em's:
+     10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)
+
+   New line-height value:
+     12px x 1.5 = 18px (old line-height)
+     18px x 4 = 72px 
+     60px / 5 = 14.4px (new line height)
+     14.4px / 10px = 1.44 (new line height in em's) */
+
+p.incr, .incr p {
+	font-size: 0.83333em; /* font size 10px */
+	line-height: 1.44em;  
+	margin-bottom: 1.8em; /* Still 1.5 x normal font size as baseline */
+}
+

data/website/content/css/blueprint/print.css

@@ -0,0 +1,75 @@
+/* -------------------------------------------------------------- 
+  
+   Blueprint CSS Framework
+   [bjorkoy.com/blueprint]
+   
+   * Print Styles *
+   
+   This file creates CSS styles for printing documents. 
+   Include this in the <head> of every page. See the
+   Readme file in this directory for further instructions.
+   
+   Some additions you'll want to make, 
+   customized to your markup:
+   
+   #heder, #footer, #navigation { display:none; }
+   
+-------------------------------------------------------------- */
+
+body {
+  font-family: Georgia, Times, serif;
+  line-height: 1.5;
+  color:#000;
+  background: none;
+  font-size: 11pt;
+}
+
+img { 
+  float:left; 
+  margin:1.5em 1.5em 1.5em 0;
+}
+p img.top { 
+  margin-top: 0; 
+}
+
+hr { 
+  background:#ccc; 
+  color:#ccc;
+  width:100%; 
+  height:2px; 
+  margin:2em 0; 
+  padding:0; 
+  border:none; 
+}
+blockquote { 
+  margin:1.5em 0; 
+  padding:1em; 
+  border:0.2em solid #ccc; 
+  font-style:italic; 
+  font-size:0.9em; 
+}
+
+.small, .small p  { font-size: 0.9em; }
+.large, .large p  { font-size: 1.1em; }
+.quiet, .quiet p  { color: #999; }
+.hide             { display:none; }
+
+a:link, a:visited {
+	background: transparent;
+	font-weight: bold;
+	text-decoration: underline;
+}
+
+a:link:after, a:visited:after {
+   content: " (" attr(href) ") ";
+   font-size: 90%;
+}
+
+/* If you're having trouble printing relative links, uncomment and customize this:
+   (note: This is valid CSS3, but it still won't go through the W3C CSS Validator) */ 
+
+/* a[href^="/"]:after {
+  content: " (http://www.yourdomain.com" attr(href) ") ";
+} */
+
+

data/website/content/css/blueprint/screen.css

@@ -0,0 +1,34 @@
+/* -------------------------------------------------------------- 
+  
+   Blueprint CSS Framework
+   [bjorkoy.com/blueprint]
+   
+   * Screen & Projection Styles *
+      
+   This is the main CSS-file for the framework.
+   Include this in the <head> of every page. See the
+   Readme file in this directory for further instructions.
+   
+-------------------------------------------------------------- */
+
+/* Import stylesheets and hide from IE/Mac \*/
+@import "lib/reset.css";
+@import "lib/typography.css";
+@import "lib/grid.css";
+@import "lib/buttons.css";
+/* End import/hide */
+
+
+/* Compressed version: 
+   [http://teenage.cz/acidofil/tools/cssformat.php]
+   
+   Comment out @import statements above, and add this 
+   one when your site has launched (Ca 60% compressed):
+   @import "lib/compressed.css"; */
+
+
+/* Uncomment the line below to see the grid and baseline. 
+   (Assuming you've wrapped your columns in a container).
+
+  .container { background: url(lib/img/grid.png); }
+  .container { background: url(lib/img/baseline.png); } */

data/website/content/css/site.css

@@ -0,0 +1,22 @@
+
+
+body { margin: 1.0em 0 }
+
+#header hr { margin-bottom: 0.5em; height: 0.3em; }
+
+#navigation { text-align: center; margin-left: 0; font-size: 1.5em; list-style-type: none; }
+#navigation li { display:inline; padding-right: 0.5em; }
+#navigation li a { padding-right: 0.5em; }
+
+
+#footer hr { margin-bottom: 0.5em }
+#footer p { text-align: right }
+
+.code {
+  padding: 0.5em;
+  margin-bottom: 1.3em;
+  color: #fff;
+  background-color: #333;
+  border: 0.1em solid black;
+  font: 1.1em Monaco, monospace;
+}

data/website/content/download.txt

@@ -0,0 +1,8 @@
+--- 
+title:      Download
+created_at: Wed Aug 22 08:36:50 -0600 2007
+filter:     textile
+--- 
+h2. Download
+
+You can read more about textile "here":http://whytheluckystiff.net/ruby/redcloth/

data/website/content/index.txt

@@ -0,0 +1,28 @@
+--- 
+title:      Home
+created_at: Tue Aug 21 11:25:06 -0600 2007
+filter:     textile
+--- 
+*Webby* is a super fantastic little website management system. It would be called a _content management system_ if it were a bigger kid. But, it's just a runt with a special knack for transforming text. And that's really all it does - manages the legwork of turning text into something else, an *ASCII Alchemist* if you will.
+
+Webby works by combining the contents of a *page* with a *layout* to produce HTML. The layout contains everthing common to all the pages - HTML headers, navigation menu, footer, etc. - and the page contains just the information for that page. You can use your favorite markup language to write your pages; Webby supports quite a few.
+
+Install Webby and try it out!
+
+<pre class="code">
+gem install webby
+</pre>
+
+h3. Features
+
+* choose your templating language: *eRuby*, *Textile*, *Markdown*, *HAML*
+* quick and speedy - only builds pages that have changed
+* deploy anywhere - it's just HTML, no special server stuff required
+* happy "rake":http://docs.rubyrake.org/ tasks for deploying your website to a server
+* build new pages from templates for quicker blog posts and news items
+
+h3. But Wait! There's More!
+
+Webby is not limited to producing HTML. By no means! Do you ever get tired of repeating the same color code *#D3C4A2* in your CSS files? Webby can help. Need some customized JavaScript for your website. Webby can help. Anytime you find yourself repeating the same bit of text over and over, then you should be using Webby.
+
+Read the "tutorial":tutorial.html section for a quick introduction to Webby, and enjoy the wonders of *ASCII Alchemy*.

data/website/content/tutorial.txt

@@ -0,0 +1,130 @@
+--- 
+title:      Tutorial
+created_at: Tue Aug 21 17:02:40 -0600 2007
+filter:     textile
+--- 
+h3. Require
+
+Webby has a family of friends that help it get it's job done. The command-line is where Webby lives and works. You should be comfortable with your terminal if you're going to get serious with Webby. Webby is built on top of "Ruby":http://www.ruby-lang.org/, and many of the templates use Ruby in one way or another. Learning a little bit about Ruby will make Webby far less intimidating.
+
+This tutorial requires *Ruby* to be installed as well as *Webby* and the "*RedCloth*":http://whytheluckystiff.net/ruby/redcloth/ templating engine. RedCloth provides support for the Textile markup language.
+
+h3. Create a Site
+
+You need a catchy name for your website to survive in this Web 2.0 world. Webby is distinctly Web 1.0 (or maybe Web 0.5) so we'll use the name *my_site*.
+
+<pre class="code">
+webby my_site
+</pre>
+
+This command creates a new folder named _my_site_, and the new Webby based website resides there. Change directories to the _my_site_ folder and do a listing. You will see the following files and folder:
+
+<pre class="code">
+Rakefile
+content/
+layouts/
+lib/
+output/
+tasks/
+templates/
+</pre> 
+
+h3. Build Your Site
+
+What? Didn't we just do that?
+
+Webby creates a site template - the larval form of your new website. "Rake":http://docs.rubyrake.org/ (another command line tool) is used to generate the HTML files for your site - a unique, beautiful butterfly.
+
+<pre class="code">
+rake
+</pre>
+
+Again, you will see lots of output scrolling across the screen. This is the rake task copying files from the _content_ folder to the _output_ folder. Some files are copied "as is", while others are compiled into HTML using your markup language of choice.
+
+Point your web browser to *my_site/output/index.html* to see what your new website looks like.
+
+h3. Making Changes
+
+Of course _Lorem Ipsum_ is some great content, but if everyone posted their site in such a state the web would be a monochromatic smurf blue. Let's change that into something more creative, more us. Open the *content/index.rhtml* file in your favorite editor.
+
+<pre class="code">
+--- 
+title:  Home Page
+filter:
+  - erb
+  - textile
+--- 
+h2. <%= @page.title %>
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc congue ipsum
+vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est
+eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at
+metus.
+
+h3. Litora Sociis
+...
+</pre>
+
+This is not the entire contents of the file, just to enough to get a feel for how Webby operates. The text between the dashed lines "@---@" is information about the page, referred to as _meta-data_. Obviously one piece of information is the *title* of the page, "Home Page". The other is a little more cryptic and bears some explaining.
+
+The content of this page is not HTML, but it ends up that way. How? Webby uses _filters_ on the page to transform the text into HTML. The *filter* item in the meta-data tells Webby which filters to apply to the page. Two filters will be applied, "erb" and "textile" - in that order. Each filter operates on the page text (everything after the meta-data).
+
+The erb filter (erb stands for "embedded Ruby") allows Webby to process Ruby statements found in the page text and to substitue the output of those Ruby statements back into the page text. The Ruby statements appear between @<%= ruby_code %>@ delimiters. The meta-data found at the top of the page is made available through the @@page@ object. You can see from the index.rhtml file that the page title, "Home Page", will be substituted on the first line.
+
+The textile filter operates on all page text. It is a human readable markup that gets converted into HTML. For example, the line @h3. Litora Sociis@ will be converted into @<h3>Litora Sociis</h3>@ by the textile filter. It is a powerful markup language that simplifies web publishing. 
+
+Okay, back to our regularly scheduled page changes. Go ahead and change the title of the page in the meta-data. Then run rake again.
+
+<pre class="code">
+rake
+</pre>
+
+You'll notice much less output than before. The rake task only builds those pages that you have modified. You'll also notice, after reloading the page in your browser, that the title has now changed.
+
+Play around with making changes, running rake, and seeing your changes show up in the web browser. Done? All right! Let's go on to the next section.
+
+bq. *TIP* You can simplify this whole process - modify content, rake, view in browser - by running @rake autobuild@ on the command line. This starts a build loop that compiles the content of your website as files change. All you need to do now is - modify content, view in browser.
+
+h3. Creating a Page
+
+Let's tell the world all about your new website. We'll create a new _about_ page that describes what this website is all about, who you are, and the answer to life, the universe, and everything.
+
+<pre class="code">
+rake create:page about
+</pre>
+
+The output from the command tells you that a new file has been created - @content/about.txt@. You can now edit this page, give it a title "About", and somewhere in there include _42_.
+
+h3. Change the Layout
+
+The next step is to change how the page looks. In fact, we want to change the appearance of all the pages in our website. This is easily by done by changing the website layout file in the _layouts_ folder. Open the *layouts/default.rhtml* file in your favorite editor.
+
+<pre class="code">
+--- 
+extension: html
+filter:    erb
+--- 
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
+   <title><%= @page.title %></title>
+   <meta name="author" content="<%= @page.author %>" />
+...
+</pre>
+
+Ahhh, I love the smell of HTML in the morning!
+
+You'll notice that the layout file has meta-data just like the content files we've been editing. The *extension* defines the filename extentions that will be appened to every file generated by this layout. Just like the content files, layouts are filtered to produce valid HTML. The current page being rendered is available in the layout using the @@page@ variable.
+
+We can see in the HTML header data that the page title will be set to the value of the @@page.title@ from the meta-datalayouts are filtered to produce valid HTML. The current page being rendered is available in the layout using the @@page@ variable. The meta-data of the layout is not made available in the layout itself - just the meta-data of the content file being rendered.
+
+Let's change the layout by removing the sidebar from every page. Find the sidebar div @<div class="column span-3 last">@. Delete that div, run rake to build the webiste again, and take a look at the site in your browser. You'll notice that both pages have been updated since both depend upon the default layout.
+
+h3. What Now?
+
+Let your creativity run wild!
+
+You can read more about the features of Webby in the "manual":manual.html. There you'll discover how to reference layouts other than the default, how to create page templates for simplifying blog posts. Take a look at the "tips &amp; tricks":tips_and_tricks.html for more ideas on simplying your web development work cycle.