This is a script to display a list of common building blocks used by Backend as a Service (BaaS) providers, from a JSON file.

gistfile1.txt

<style>

    .buildingblocklistingcontainer{
        padding-left: 10px; 
        padding-right: 10px; 
        width:550px;
    }
    .buildingblockcategorylistingul{
        padding-left: 30px;
    }  
    .buildingblockcategorylistingul li{
        list-style: none; 
        padding: 10px 10px 20px 10px;
        border: 0px solid #000;
        font-size: 18px;
        font-weight: bold;
    }  
    .buildingblocklistingul{
        padding-left: 30px;
    }  
    .buildingblocklistingul li{
        padding: 20px; 
        border: 0px solid #000;
        font-size: 14px;
        font-weight: normal;
    } 
</style>

<ul class="toolbar">
    <li>{"<a href="https://raw.github.com/kinlane/backend-as-a-service/gh-pages/data/buildingblocks.json" title="JSON" target="_blank">JSON</a>"}</li>
    <li>{"<a href="https://apievangelist.3scale.net/docs" title="API" target="_blank">API</a>"}</li>
    <li>{"<a href="https://gist.github.com/kinlane/5992075" title="Script" target="_blank">SCRIPT</a>"}</li>
</ul>

<h1 class="title">Building Blocks</h1>

<!--BaaS Full Listing Template--->
{% raw  %}

<script id="buildingblockcategoryTemplate" type="text/template">       
    <li><strong>{{category}}</strong><ul id="{{slug}}" class="buildingblocklistingul"></ul></li>                                                                                               
</script>

<script id="buildingblockTemplate" type="text/template">       
    <li><img src="{{image}}" width="50" align="left" style="padding: 15px;" /><strong>{{name}}</strong> - {{summary}}</li>                                                                                               
</script>
{% endraw %}

<!--BaaS Full Listing Container--->
<div class="buildingblocklistingcontainter">
     <ul id="buildingblockListing" class="buildingblockcategorylistingul"></ul>
</div>  

<!--BaaS Full Listing JavaScript--->
<script type="text/javascript">

// Requires Mustache - http://mustache.github.io/

function listbuidingblockcategories()
    {
    $.getJSON('data/buildingblockcategories.json', function(data) {
         $.each(data['buildingblockcategories'], function(key, val) {
             
            var template = $('#buildingblockcategoryTemplate').html();
            var html = Mustache.to_html(template, val);
            $('#buildingblockListing').append(html);  
            });                                   
        });           
    } 
    
function listbuidingblocks()
    {
    $.getJSON('data/buildingblocks.json', function(data) {
         $.each(data['buildingblocks'], function(key, val) {
            categoryslug = val['categoryslug']; 
            var template = $('#buildingblockTemplate').html();
            var html = Mustache.to_html(template, val);
            $('#'+categoryslug).append(html);   
            });                                   
        });        
    }    
</script>

<!--Trigger BaaS Full Listing JavaScript onLoad-->
<script type="text/javascript">
listbuidingblockcategories();
listbuidingblocks();
</script>