post.hbs

{{!< default}}

{{#post}}
  <article itemscope itemtype="http://schema.org/BlogPosting" role="article" class="post {{post_class}}">
    <header class="post-header wrapper wrapper-post">
      <div>
        <div class="post-header-content wrapper-container">
          <h1 itemprop="name headline" class="post-title">
            {{{title}}}
          </h1>

          {{! A subtitle not available in Ghosts yet }}
          <!--h2 itemprop="about" class="post-subtitle"></h2-->

          <ul class="post-meta-list">
            <li class="post-meta-item post-meta-item-date-published">
              <time datetime="{{date published_at format="YYYY-MM-DD"}}" itemprop="datePublished">
                {{date published_at timeago="true"}}
              </time>
            </li>
            {{#if tags}}
              <li class="post-meta-item post-meta-item-tags">
                <i class="fa fa-tags"></i>
                {{#foreach tags}}
                  <a itemprop="{{#if @first}}articleSection{{else}}keywords{{/if}}" href="{{url}}" data-pjax>{{name}}</a>
                  {{~#if @last}} {{else}}, {{/if}}
                {{/foreach}}
              </li>
            {{/if}}
            <li class="post-meta-item post-meta-item-comments">
              <i class="fa fa-comments"></i>
              <a href="#disqus_thread" data-disqus-identifier="{{id}}">Comments</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <section class="wrapper wrapper-post">
      <div class="wrapper-container">
        <section class="post-container">
          <aside class="post-side">
            <div class="post-author">
              {{#if author.image}}
                <a href="{{author.website}}" class="post-author-avatar">
                  <img src="{{author.image}}" alt="{{author.name}}">
                </a>
              {{/if}}

              <div class="post-author-info">
                <a href="{{author.website}}" class="post-author-name">
                  {{author.name}}
                </a>
                <p class="post-author-bio">{{author.bio}}</p>
              </div>
            </div>
          </aside>

          <div itemprop="articleBody" class="post-body">
            {{content}}
          </div>

          <footer class="post-footer">
            <div itemprop="author" itemscope itemtype="http://schema.org/Person" class="post-author">
              {{#if author.image}}
                <a href="{{author.website}}" class="post-author-avatar">
                  <img itemprop="image" src="{{author.image}}" alt="{{author.name}}">
                </a>
              {{/if}}
              <div class="post-author-info">
                <h4 class="post-footer-heading">Written By</h4>

                <a href="{{author.website}}" itemprop="url" class="post-author-name">
                  <span itemprop="name">{{author.name}}</span>
                </a>

                <p itemprop="description" class="post-author-bio">{{author.bio}}</p>

                {{#if author.location}}
                  <p class="post-author-location">{{author.location}}</p>
                {{/if}}

                {{#if author.website}}
                  <p class="post-author-website">
                    <a href="{{author.website}}" rel="nofollow">{{author.website}}</a>
                  </p>
                {{/if}}

                <p class="post-info">
                  <b class="post-info-title">Published on</b>
                  <time class="post-date">{{date format='MMMM DD, YYYY'}}</time>
                </p>
              </div>
            </div>
            <div class="post-social">
              <h4 class="post-footer-heading">Spread the word</h4>
              <a href="#" data-action="share-twitter"><i class="fa fa-fw fa-lg fa-twitter"></i></a>
              <a href="#" data-action="share-facebook"><i class="fa fa-fw fa-lg fa-facebook"></i></a>
              <a href="#" data-action="share-gplus"><i class="fa fa-fw fa-lg fa-google-plus"></i></a>
            </div>
          </footer>
        </section>

        <section itemprop="comment" class="post-comments">
          <div id="disqus_thread"></div>
        </section>

        {{> footer this}}
      </div>
    </section>
  </article>
{{/post}}

<script>
  if(GHOSTIUM.haveDisqus) {
    {{#post}}
    var disqus_identifier = '{{id}}';
    {{/post}}

    if(typeof DISQUS !== 'object') {
      (function () {
      var s = document.createElement('script'); s.async = true;
      s.type = 'text/javascript';
      s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
      }());
    }
  } else {
    document.querySelector('.post-comments').remove();
  }
</script>