Boban Jovanoski

Generating SHTML with middleman BobiYo Mar 11

6 comments Latest by remomos

Tags: shtml   frontend   middleman   haml  

Introduction

Because I wanted to improve my css skills, I've decided to spend time learning css, optimizations, the whole front-end development shebang. The latest project I worked on, the client required static web site done using SSI/Server Side Includes.

SSI/Server Side Includes ???

I knew it was something old, but I never touhght 15 years back :) as Rolad pointed that out. It is same as html but you can include content from other files (think of it as using partials in html). You can also use "bash scripting" syntax in your html, I have not look deeply into it, all I needed was to use shtml just for including content.

How to turn on SSI? Simply open your apache conf file and add +Includes in your apache options and add shtml to the known file types.

Options  +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

How to include content using shtml? It is very simple, the syntax that the includes module will recognize is almost the same as writing comments in html. Example: (notice there is no empty space before the #):

<!--#include file="includes/header.shtml" -->

It's middleman time

After creating your middleman project (how to create new project and how to use middleman, you can check on the middleman wiki), you need to setup middleman to generate shtml files.

Middleman already does this for you, so you'll just need to name your files ending with ".shtml.haml".

The next thing that you'll need to do is to make middleman insert the required shtml syntax to include content from other files (I've used this for header.shtml and footer.shtml which were put inside the includes directory). To do this, I've defined an alias for the partial method inside middlemans config.rb file.

alias_method :shtml_partial, :partial

When the content is build I've defined the shtml_partial method like this:

def shtml_partial(*args)
   "<!--#include file=\"includes/#{args.first}.shtml\" -->"
end

Wherever the shtml_partial method is used (same as partial) instead of rendering the partials content, it will generate the required shtml include content from file. But the files inside the includes directory don't exist yet?!! For solving this, on build time, I've just copied the partials files that are used inside the includes directory.

File.copy_stream("views/_header.haml", 'views/includes/header.shtml.haml');
File.copy_stream("views/_footer.haml", 'views/includes/footer.shtml.haml');

Hint - Remember to use relative links when building :)

activate :relative_assets

Happy using Server Side Includes in 2011 :)

Feel free to comment about new sugestions. Thank you in advance.

Haml, Compass, Front-end development BobiYo Feb 19

5 comments Latest by Guido

Tags: haml   scss   sass   compass   staticmatic  

Update

Thanks to Arthur Gunn I've checked out the middleman gem and by my humble opinion it is better than staticmatic, it is sinatra based and the helpers it provides are with the same names as in rails so you'll feel right at home. I still have not played with the frank gem, I'll update this post after I take a closer look at it.

Introduction - Staticmatic

During my recent work, I needed to create only the front-end (html, css, javascript) for an application. As you may guess, I've decided to use haml and compass, but creating a rails app for doing this seamed to me just like killing an alien with Justin Bieber's music.

Implementation

So I thought...there must be an easier way to to this (save the aliens)...so I did some research and discovered Staticmatic (all features are still not well documented).

gem install staticmatic

It's very easy to use. You just need to create your new staticmatic project:

staticmatic setup project_name

Compass and haml are supported, and a default layout is already setup for you to play with. All additional configuration for staticmatic and compass is done inside the config directory. Inside the compass configuration file I've only added

http_images_path = '/images'

because when css files are generated by compass the default directory is set to stylesheets.

If you wish to use other compass plugins like 960gs or whatever simply add the scss, sass files inside the src/stylesheets dir.

So now all you need to do is power up you favorite code editor, than start compass watch and the web server and start coding :)

#on separate consoles
compass watch 
staticmatic preview project_name

When you're done with that, you can generate the html with:

staticmatic build project_name

Explore the documentation how to use the layouts etc.

Things that I missed while using staticmatic

Features that I really missed and by my opinion need to be included are:

  1. Generating sprites for images - with the sprite_css or limonade gems

  2. yield :sidebar

  3. Using other gems :) I just wanted this usability to be implemented in staticmatic rather than hacking around and doing it manually.

Easier way?

I really like using haml and compass for front-end development, if you know a better way for doing this pls comment or email me, I'll be glad to update the post.