demo.html

<!DOCTYPE html>
<html lang="en">

  <!-- HEAD [BEGIN] ======================================================== -->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Blender Demo Blog</title>

    <!-- Bootstrap Styling -->
    <link href="//oss.maxcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="blog.css" rel="stylesheet">

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!--<script type="text/javascript" src="../lib/blender.js"></script>-->
    <script type="text/javascript" src="../lib/blender.js" repo="/xlson/xlson.github.com"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
      body[layout=default] [layout]:not([layout=default]) { display: none; }
      body[layout=main] [layout]:not([layout=main]) { display: none; }
      body[layout=page] [layout]:not([layout=page]) { display: none; }
      body[layout=post] [layout]:not([layout=post]) { display: none; }
      div.themes img { width: 100px; }
    </style>
  </head>
  <!-- HEAD [END] ========================================================== -->

  <body layout="default">


    <!-- NAVIGATION [BEGIN] ================================================== -->
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item" href="#:">Home</a>
          <a class="blog-nav-item" href="#:archive.md">Archive</a>
          <a class="blog-nav-item" href="#:about.md">About</a>
          <a class="blog-nav-item" href="#:README.md">README</a>
        </nav>
      </div>
    </div>
    <!-- NAVIGATION [END] ==================================================== -->


    <div class="container">

      <!--
      <div class="row themes" layout="default">
        <img src="https://assets-cdn.github.com/themes/cayman/thumbnail.png"/>
        <img src="https://assets-cdn.github.com/themes/merlot/thumbnail.png"/>
        <img src="https://assets-cdn.github.com/themes/slate/thumbnail.png"/>
        <img src="https://assets-cdn.github.com/themes/time_machine/thumbnail.png"/>
      </div>
      -->


      <!-- BLOG HEADER [BEGIN] ================================================= -->
      <div class="blog-header">
        <h1 class="blog-title">Blender Demo Blog</h1>
        <p class="lead blog-description">
          Example template of creating a blog with Blender
          (mimicking <a href="https://getbootstrap.com/examples/blog/">Bootstrap</a>'s).
        </p>
      </div>
      <!-- BLOG HEADER [END] =================================================== -->


      <div class="row">


        <div class="col-sm-8 blog-main">

          <div class="alert alert-warning" style="font-size: 10pt;" layout="default">
            This is an example of how we can quickly build a blog with a single page of HTML re-using the structure
            of Jekyll blogs. Pointing <code>blender.repo</code> to <code>"/acrodrig/acrodrig.github.io"</code>
            the current HTML page loads those pages and blogs posts dynamically. Additionally, it displays the
            plugin <code>toc.html</code> on the right.
          </div>


          <!-- POSTS LIST [BEGIN] ================================================== -->
          <h2 layout="default">Blog Posts</h2>
          <div class="blog-list" layout="default">
            <ul>
              {% for (var i = 0; i < items.length; i++) { %}
              <li>
                <a href="#:_posts/{{ items[i].name }}">{{ items[i].title }}</a>
                <span class="sub">(Published on {{ items[i].date }})</span></li>
              {% } %}
            </ul>
            <script>
              $.ajax({ method: "GET", url: "https://api.github.com/repos"+blender.repo+"/contents"+blender.path+"/_posts" }).done(function(data) {
                  var items = _.map(data, function(item) {
                      item.title = _.capitalize(item.name.split('.').shift().substring(11).replace(/-/g, ' '));
                      item.date = item.name.split('.').shift().substring(0, 10);
                      return item;
                  });
                  items = _.orderBy(items, "date", "desc");
                  _.render(document.querySelector(".blog-main ul"), { items: items });
              });
            </script>
          </div>
          <!-- POSTS LIST [END] ==================================================== -->


          <!-- BLOG POST [BEGIN] =================================================== -->
          <div class="blog-post" layout="post">
            <h2 class="blog-post-title">Sample blog post</h2>
            <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
            <script>
              $(window).on("hashload", function(ev) {
                  $("h2.blog-post-title").html(meta.title || "");
                  $("p.blog-post-meta").text("Published on "+meta.date+"");
              });
            </script>
            <article>
            </article>
          </div>
          <!-- BLOG POST [END] ===================================================== -->


        </div>


        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">


          <!-- ABOUT [START] ======================================================= -->
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>
              One page example of how to display a static blog via <a href="https://acrodrig.github.io/blender">Blender</a>.
            </p>
          </div>
          <!-- ABOUT [END] ========================================================= -->


          <!-- TOC [BEGIN] ========================================================= -->
          <div class="sidebar-module toc-container">
          </div>
          <script>$(".toc-container").load("toc.html")</script>
          <!-- TOC [END] =========================================================== -->


          <!-- ARCHIVES [BEGIN] ==================================================== -->
          <div class="sidebar-module">
            <h4>Archives (Sample)</h4>
            <ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
          </div>
          <!-- ARCHIVES [END] ====================================================== -->


          <!-- OTHER [BEGIN] ======================================================= -->
          <div class="sidebar-module">
            <h4>Elsewhere (Sample)</h4>
            <ol class="list-unstyled">
              <li><a href="//github.com">GitHub</a></li>
              <li><a href="//twitter.com">Twitter</a></li>
              <li><a href="//facebook.com">Facebook</a></li>
            </ol>
          </div>
          <!-- OTHER [END] ========================================================= -->

        </div>

      </div>

    </div>


    <!-- FOOTER [BEGIN]======================================================= -->
    <footer class="blog-footer">
      <p>
        Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a> and adapted to work for Blender.<br/>
        <a href="javascript: void(0)" onclick="window.scrollTo(0,0)">Back to top</a>
      </p>
      </p>
    </footer>
    <!-- FOOTER [END] ======================================================== -->


    <script src="//oss.maxcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js" async></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js" async></script>
  </body>
</html>