FOSS4G2009 Website Update

How To Update FOSS4G 2009 Website

How Is FOSS4G 2009 Website Built?

FOSS4G 2009 website is built using the http://staticmatic.rubyforge.org/ web framework.

New to Staticmatic?

If you are new to staticmatic then you will need to put on your inquisitive-nerd-hat for an hour or two and learn the concepts behind it. And like any nerdy-kitten-cuteness staticmatic will leave you feeling warm and fuzzy after an hour or two. Oh the joys of using staticmatic: http://staticmatic.rubyforge.org/how_to_use.html

Prerequisits

1. You need to install Ruby. New to ruby? Don't fret download one-click installer for your OS from here: http://www.ruby-lang.org/en/downloads/
2. Then install staticmatic http://staticmatic.rubyforge.org/download.html
3. Get the source code for the http://2009.foss4g.org/ website from https://svn.osgeo.org/osgeo/foss4g/2009/website/foss4g09_staticmatic/ You will need your OSGeo (http://osgeo.org/) login/password to commit stuff.
4. Editor - you can use any editor for editing haml but you ideally want something with syntax highlighting

Understanding the Website Source code

The FOSS4G 2009 website's html is generated by templates written using staticmatics. This means that we can write haml template instead of html, write ruby helpers to generate html code and create partials and layouts for a more modular website while keeping to the good programing philosophy of DRY (Don't Repeat Yourself). So the current source directories are:

+-src/
  |
  +-helpers/
  |
  +-layouts/
  |
  +-pages/
  |
  +-partials/
  |
  +-stylesheets/

Below we describe the purpose and content of each of these directories with examples on how to make edits

pages

This directory contains the haml template for the main pages of the http://2009.foss4g.org website. say for example that you want to go change the main index page. This would require you to edit the src/pages/index.haml page. Notice that the page only contains the content of the mainContent div. This is because staticmatic automatically creates the surrounding layout from the src/layouts/application.haml

layouts

Layouts directory contains haml templates that get rendered as the html surrounding the main content. This is done though the use of the method called yield src/layouts/application.haml.

     #mainContent        
       = partial('site_wide_notice')      
       = yield

partials

Partials are snippets of html or haml code that can be called and inserted into other templates. This lets us make our site very modular. For example you will notice that the site a has an announcement DIV at the top of each page. That bit of html comes from a partial called: src/partials/site_wide_notice.haml. This partial is referenced in the layout

helpers

Helpers are bits of ruby code that generate HTML. These helper methods are automatically available to us for use inside our templates. This can be a very powerful and time saving concept. For example if we look at the page for: http://2009.foss4g.org/presenters/ it contains a list of all the presenters with a location. This is all being done using a helper. Have a look at the code snippet below from the src/helpers/foss4g_helper.rb

  def presenters_profiles
    presenters = YAML.load_file('./site/presenters.yml')
    html = ""
    presenters['presenters'].sort.each do |k, v|
      html +=
      "<div id=#{cycle}><div id=#{k}>\n" +
      "  <p><strong>#{v['name']}</strong></p>\n" +     
      "  <p>#{wkt2gmap(v['location_wkt'])}</p>\n" + 
      "  <p>#{v['biography'] || 'Biography comming soon...'}</p>\n" +
      "  <p>Sessions:\n" +    
      "    #{get_session_links(v['sessions'])}" +
      "  </p>\n" +
      "</div></div>\n"
    end
    html
  end
 
  def wkt2gmap(wkt)
    # given a wkt string will generate a static google-map: SRID=4326;POINT(151.182612 -33.86069)
    maps_api_key = "ABQIAAAAa7SFeUyLeV9ADXW6EhbOsBQwQaF-9jncuJd4ycPNgXVY1CR_CBT1fvTdGxp8mfE2KX5_P6Qdv1ggOA" # http://2009.foss4g.org/
    wkt =~ /SRID=4326;POINT\((.*)\)/
    return nil if $1.nil?
    lng, lat = $1.split(" ")
    "<img src=\"http://maps.google.com/staticmap?center=#{lat},#{lng}&zoom=10&size=380x100&maptype=terrain\
        &markers=#{lat},#{lng},midblue\
        &key=#{maps_api_key}&sensor=false\
        &format=png8\" alt=\"#{wkt}\" border=\"0\" title=\"#{wkt}\">"
  end

stylesheets

This contains the stylesheets in SASS format. SASS is a syntactically simple and elegant language for generating CSS. http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html It comes part and parcel with HAML.