Creating a proper document - or... looking at the one that's just been created :)

Creating a complete web page using HAML and Markdown or even better - Maruku or, as speed tests would suggest: Rdiscount which lives above Discount, arguably the fastest markdown interpreter in this universe.

This document is a bit superfluous, as the mentioned document is already created within your empty new application, but I left it here for nostalgic/humorous reasons as well as an example of simple document creation.

Creating a content for your web page

In previous tutorial we created a simple "hello world" application. This is without the doubt the lamest thing to do with any platform (apart from actually doing nothing at all), so let's step up to the occasion and make some HTML.

In order to have a proper web page, we need a title and some content. After all, what kind of a document doesn't have those two.

# >> /content/index.yaml
# ---------------------------------------------------------------------
title: Hello world!
content: |
  %h1= page['title']
  %p Welcome to Soxer!

Two things happened in the index file.

  1. We created a title and a content according to YAML standard. This means that multiline values need to start it with a pipe and have to be indented (check out the slingle line title and multiline content).
  2. Content is not regular text anymore. It's HAML. And not just a simple example. The heading is obvioulsly not a normal string. It's a value 'title' from this very page, that becomes ruby array in Soxer. Needless to say, including a 'content' into 'content' will not make your mamma proud at all. You have the gun and the bullet. Use them wisely.

Creating a layout

We are not done yet. We need the HTML container - a layout. That (an all other layouts or partials) ar located in the 'views' directory. That's a Sinatra's default which you can change with Sinatra's settings. We are going to make this a very simple HAML:

# >> /views/layout.haml
# ---------------------------------------------------------------------
!!!
%html
  %head
    %title= page['title']
  %body
    = yield

Title in the header does the same thing as "h1" in the actual document. It pulls the title from the YAML array. All document's keys and values are passed to layout and - conversly - the document itself.

Very 'meta'. Very useful.

When running "ruby app.rb" in the root of your application, you can view your first complete web page. Just point to "http://localhost:4567" and get the result:

Image of Hello world in a browser

The resulting HTML looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world!</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <p>Welcome to Soxer!</p>
  </body>
</html>

Excluding the actual app.rb, we wrote about 5 rows of 'layout' and 3 lines of content. It does not get much simpler than this.

If you copy the index to - say "somefile.yaml", you can expect to have a working "http://localhost:9394/somefile" document. We are getting some useful results now. This way you can organize your website to your content with readable and memorable URLs, that completely follow your organisational scheme on disk.

How cool is that?

blog comments powered by Disqus