index.ejs

<div class="pure-g frontpage">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 ">
    <div class="mt-container">
      <h2 class="content-subhead">Micro Blog</h2>
      <div id="mt-timeline" class="mt-timeline">
        <div id="mt-body" class="mt-body">
          <div class="loading-spinner"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
    <div class="posts-container">
      <% var count = 0; %>
      <% var limit = 6; %>
      <h2 class="content-subhead">Most Recent Blog Posts</h2>
      <% for(var slug in public.posts._data){ %>
        <div class="post">
          <a href="/<%= slug %>" rel="bookmark" title="<%= public.posts._data[slug].title %>"><%= public.posts._data[slug].title %></a>

          <div class="post-meta">
            <%-partial("_includes/date", {"date": public.posts._data[slug].date})%>
          </div>
          <div class="post-description">
            <%= public.posts._data[slug].description %>
          </div>
        </div>
        <% count++ %>
        <% if(count >= limit){ break; }; %>
      <% }; %>
      <div class="pagination"> 
        <a class="pure-button pure-button-outline" href="/posts">View All</a>
      </div>
    </div>
  </div>
  <div class="pure-u-1 pure-u-md-1-1 pure-u-lg-1-3">
    <div class="photostream-container">
      <a data-flickr-embed="true" data-header="true" data-footer="true" href="https://www.flickr.com/photos/25375072@N06" title=""><img src="https://live.staticflickr.com/7303/10301199376_f74923dd22_w.jpg" width="375" height="500" alt=""></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
    </div>
  </div>
</div>



<script src='/js/mastodon-timeline.js'>
</script>