post.hbs

{{!< default}}

{{! The comment above "< default" means - insert everything in this file into
    the {body} of the default.hbs template, which contains our header/footer. }}

<main class="content" role="main">

    <article class="{{post_class}}">

        {{! Everything inside the #post tags pulls data from the post }}
        {{#post}}

        {{#has tag="articleImage"}}

        <div class="article-image">
            <div class="post-image-image">

                Article Image

            </div>
            <div class="post-meta">
                <h1 class="post-title">{{{title}}}</h1>
                <div class="cf post-meta-text">
                    <div class="author-image" style="background-image: url({{author.image}})">Blog Logo</div>
                    <!--<h4 class="author-name" itemprop="author"></h4> on-->
                    <time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time>, tagged on {{#foreach tags}}<span class="post-tag-{{slug}}">{{#if @first}}{{else}}, {{/if}}<a href="/tag/{{slug}}">{{name}}</a></span>{{/foreach}}
                </div>
                <center><a href="#topofpage" class="topofpage"><i class="fa fa-angle-down"></i></a></center>
            </div>
        </div>

        <script>
            (function ($) {
                "use strict";

                $(document).ready(function(){

                    $('.post-content').each(function() {
                        var $this = $(this),
                            img = $this.find('img:first'),
                            url = img.attr('src');

                        $(".post-image-image").css('background-image', 'url('+url+')');

                        img.remove();
                    });

                    var $window = $(window),
                        $image = $('.post-image-image');
                    $window.on('scroll', function() {
                        var top = $window.scrollTop();

                        if (top < 0 || top > 1500) { return; }
                        $image
                            .css('transform', 'translate3d(0px, '+top/3+'px, 0px)')
                            .css('opacity', 1-Math.max(top/700, 0));
                    });
                    $window.trigger('scroll');

                    var height = $('.article-image').height();
                        $('.post-content').css('padding-top', height + 'px');

                    $(function() {
                      $('a[href*=#]:not([href=#])').click(function() {
                        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                          var target = $(this.hash);
                          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                          if (target.length) {
                            $('html,body').animate({
                              scrollTop: target.offset().top
                            }, 500);
                            return false;
                          }
                        }
                      });
                    });

                });

            }(jQuery));
        </script>

        {{! Each post has the blog logo at the top, with a link back to the home page }}

        {{else}}

        <div class="noarticleimage">
            <div class="post-meta">
                <h1 class="post-title">{{{title}}}</h1>
                <div class="cf post-meta-text">
                    <div class="author-image" style="background-image: url({{author.image}})">Blog Logo</div>
                    <!--<h4 class="author-name" itemprop="author" itemscope itemtype="http://schema.org/Person">{{author}}</h4> on-->
                    <time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time>, tagged on {{#foreach tags}}<span class="post-tag-{{slug}}">{{#if @first}}{{else}}, {{/if}}<a href="/tag/{{slug}}">{{name}}</a></span>{{/foreach}}
                </div>
            </div>
        </div>
        <br>
        <br>
        <br>

        {{/has}}


            <section class="post-content">
                <div class="post-reading">
                    <span class="post-reading-time"></span> read
                </div>
                <a name="topofpage"></a>
                {{content}}
            </section>
            <footer class="post-footer">
                <section class="share">
                    <a class="icon-twitter" href="http://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
                        onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                        <span class="hidden">Twitter</span>
                    </a>
                    <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
                        onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
                        <span class="hidden">Facebook</span>
                    </a>
                    <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
                       onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
                        <span class="hidden">Google+</span>
                    </a>
                </section>
            </footer>

            <div class="bottom-teaser cf">
                <div class="isLeft">
                    <h5 class="index-headline featured"><span>Written by</span></h5>
                    <section class="author">
                        <div class="author-image" style="background-image: url({{author.image}})">Blog Logo</div>
                        <h4>A Nember</h4>
                        <p class="bio">{{author.bio}}</p>
                        <hr>
                        <p class="published">Published <time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time></p>
                    </section>
                </div>
                {{/post}}
                <div class="isRight">
                    <h5 class="index-headline featured"><span></span></h5>
                    <br>
                    <footer class="site-footer">
                        <a class="subscribe icon-feed" href="{{@blog.url}}/rss/"><span class="tooltip"> Subscribe!</span></a>
                        <div class="inner">
                             <section class="copyright">All content copyright <a href="{{@blog.url}}/">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
                        </div>
                    </footer>
                </div>
            </div>
            <!--{{> comment-list}}-->
            <div id='discourse-comments'></div>

            <script type="text/javascript">
              DiscourseEmbed = { discourseUrl: 'https://forum.nem.io/',
                                 discourseEmbedUrl: 'http://blog.nem.io{{url}}' };

              (function() {
                var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
                d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
              })();
            </script>


    </article>

</main>

<div class="bottom-closer">
    <div class="background-closer-image" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
        Image
    </div>
    <div class="inner">
        <h1 class="blog-title">{{@blog.title}}</h1>
        <h2 class="blog-description">{{@blog.description}}</h2>
        <a href="/" class="btn">Back to Overview</a>
    </div>
</div>