Eurucamp Front-end API Draft

layout.haml

%html
  %head
    = style_css
    = style_javascript
  = style_template :layout do
    = style_template :navigation, root_url: "/", items: [{ url: "/", text: "Home"}, { url: xyz_path(@abc), text: "XYZ" }])
    = style_template :cover, date: "...", location: "..."
    = style_template :team, items: data.team
    = style_template :footer, ...

-# Add attributes to root element of template (maybe needed for JavaScript):
= style_template :team, items: data.team, attributes: { "data-section": "team" }
:html
  <div class="team" data-section="team">
    <div class="team--item">
      ..
    </div>
  </div>

-# Add attributes to each item element of template (maybe needed for JavaScript):
= style_template :team, items: data.team, item_attributes: { "data-id": "\#{item.id}", class: "js-user" }
:html
  <div class="team">
    <div class="team--item js-user" data-id="47">
      ..
    </div>
    <div class="team--item js-user" data-id="11">
      ..
    </div>
  </div>

startup.rb

StyleGuideAPI.load("http://style-guide.eurucamp.org/af45de/2015/style.json")

style.json

{
   "stylesheets": ["http://style-guide.eurucamp.org/af45de/2015/eurucamp.css"],
   "javascripts": [],
   "templates": {
      "navigation": {
         "source": "%header.layout--header\n  .layout--header-container\n    %a.layout--header-logo(href=root_path) eurucamp\n    %nav.layout--header-navigation\n      - items.each do |item|\n        %a.layout--header-navigation-item(href=\"#{item[:url]}\")= item[:text]",
         "type": "haml"
      },
      "layout": {
         "source": "%body.layout\n  = yield",
         "type": "haml"
      },
      "cover": {
         ...
      },
      "team": {
         ...
      },
      "footer": {
         ...
      }
   }
}