post.hbs

{{!< default}}

{{!-- The tag above means: insert everything in this file
into the {body} tag of the default.hbs template --}}


{{#post}}
{{!-- Everything inside the #post block pulls data from the post --}}

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

    <header class="article-header gh-canvas">

        {{#if primary_tag}}
        <section class="article-tag">
            <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
        </section>
        {{/if}}

        <h1 class="article-title">{{title}}</h1>

        {{#if custom_excerpt}}
        <p class="article-excerpt">{{custom_excerpt}}</p>
        {{/if}}

        <div class="article-byline">
            <section class="article-byline-content">
                <ul class="author-list">
                    {{#foreach authors}}
                    <li class="author-list-item">
                        {{#if profile_image}}
                        <a href="{{url}}" class="author-avatar">
                            <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
                        </a>
                        {{else}}
                        <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
                        {{/if}}
                    </li>
                    {{/foreach}}
                </ul>
                <div class="article-byline-meta">
                    <h4 class="author-name">{{authors}}</h4>
                    <div class="byline-meta-content">
                        <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
                        <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
                    </div>
                    {{> byline-meta container='div'}}
                </div>
            </section>

            <section class="sharing">
              {{> share}}
            </section>
        </div>

        {{#if feature_image}}
        <figure class="article-image">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(min-width: 1400px) 1400px, 92vw"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure>
        {{/if}}
    </header>

    <section class="gh-content gh-canvas">
        {{content}}
    </section>

    {{!--
    <section class="article-comments gh-canvas">
        If you want to embed comments, this is a good place to paste your code!
    </section>
    --}}

</article>

{{> ad }}

{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#unless @member}}
<section class="footer-cta">
    <div class="inner">
        <h2>Sign up for more like this.</h2>
        <a class="footer-cta-button" href="#/portal">
            <div>Enter your email</div>
            <span>Subscribe</span>
        </a>
        {{!-- ^ This looks like a form element, but it's just a link to Portal,
        making the form validation and submission much simpler. --}}
    </div>
</section>
{{/unless}}

{{!--

If you use Disqus comments, just uncomment this block.
The only thing you need to change is "test-apkdzgmqhj" - which
should be replaced with your own Disqus site-id.

--}}

<section class="post-full-comments">
    {{comments}}
    <div id="disqus_thread"></div>
    <div id="commento"></div>
    <script>
        var disqus_config = function () {
            this.page.url = '{{url absolute="true"}}';
            this.page.identifier = 'ghost-{{comment_id}}';
        };
        var getDisqusScript = function() {
          var s = document.createElement('script')
          s.src = 'https://time2hack.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          return s;
        }
        var getCommentoScript = function() {
          var s = document.createElement('script')
          s.src = 'https://comments.t2h.app/js/commento.js';
          s.setAttribute('defer', true);
          s.setAttribute('data-page-id', 'ghost-{{comment_id}}');
          return s;
        }
        //document.addEventListener('DOMContentLoaded', function () {
          //setTimeout(function() {
              //var s = (typeof window.__COMMENTO !== 'undefined' && window.__COMMENTO)
              //    ? getCommentoScript()
              //    : getDisqusScript();
              //(document.head || document.body).appendChild(s);
          //}, 3000);
        //})
    </script>
</section>

{{!-- Read more links, just above the footer --}}
<aside class="read-more-wrap">
    <div class="read-more inner">

        {{!-- The {#get} helper below fetches some of the latest posts here
        so that people have something else to read when they finish this one.

        This query gets the latest 3 posts on the site, but adds a filter to
        exclude the post we're currently on from being included. --}}

        {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
            {{#if more_posts}}
                {{#foreach more_posts}}
                    {{> "post-card"}}
                {{/foreach}}
            {{/if}}
        {{/get}}

    </div>
</aside>

{{/post}}

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script id="all-custom-js-functions">
var _toArray = function(nodeList) { return Array.prototype.slice.call(nodeList); };
var _getAll = function(query) { return _toArray(document.querySelectorAll(query)); };

var _pretify = function(block) {
  window.PR && (function(block){
	block.classList.add('prettyprint');
    PR.prettyPrint();
  })(block)
}
var preHeadFoot = function(block) {
    var complete = block.getAttribute('complete');
    var header = block.getAttribute('header');
    var footer = block.getAttribute('footer');
    if(complete){

        var d = document.createElement('div');
        d.classList.add('footer');
        var a = document.createElement('a');
        a.setAttribute('href', complete);
        a.setAttribute('target', '_blank');
        a.innerText = complete;
        d.appendChild(a);

        block.appendChild(d);
    }
    if(header && header !== ''){
        var d = document.createElement('div');
        d.classList.add('header');
        d.innerHTML = header;
        block.insertBefore(d, block.firstChild);
    }
    if(footer && footer !== ''){
        var d = document.createElement('div');
        d.classList.add('footer');
        d.innerHTML = footer;
        block.appendChild(d);
    }
}
// NOTE: Scroll performance is poor in Safari
// - this appears to be due to the events firing much more slowly in Safari.
//   Dropping the scroll event and using only a raf loop results in smoother
//   scrolling but continuous processing even when not scrolling
document.addEventListener("DOMContentLoaded", function(event) {

    // Start CodeBlock Enriching
    var codeBlocks = _getAll('pre, code.hljs');
    codeBlocks.forEach && codeBlocks.forEach(function(block, i) {
        var remotePath = block.getAttribute('remotepath');
        if(remotePath){
            fetch(remotePath).then(function(response){
                return response.text();
            }).then(function(data){
                block.innerText = data;
                _pretify(block);
                preHeadFoot(block);
            });
        } else {
            _pretify(block);
            preHeadFoot(block);
        }
    });
});
</script>