post.hbs

{{!< default}}

{{#post}}

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

    <header class="gh-header gh-canvas">
        <div class="pico-pagehead">
            {{#if @site.logo}}
            <img src="{{@site.logo}}" alt="{{@site.title}}" />
            {{/if}}
            <div class="pico-pagehead-content">
                <p><strong>{{@site.title}}</strong> &bull; {{@site.description}}</p>
                <div class="pico-pagehead-cta">
                    {{#if @member.paid}}
                        <a class="gh-button" href="/signup/">My account</a>
                    {{else if @member}}
                        <a class="gh-button" href="/signup/">Upgrade now</a>
                    {{else}}
                        <a class="gh-button" href="/signup/">Subscribe now</a>
                    {{/if}}
                </div>
            </div>
        </div>
        <span class="gh-post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
        <h1 class="gh-title">{{title}}</h1>

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

        {{#if feature_image}}
            <figure class="gh-feature-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="(max-width: 800px) 400px,
                        (max-width: 1170px) 1170px,
                            2000px"
                    src="{{img_url feature_image size="xl"}}"
                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                />
                {{#if feature_image_caption}}
                    <figcaption>{{feature_image_caption}}</figcaption>
                {{/if}}
            </figure>
        {{/if}}
    </header>

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

    <footer class="gh-footer gh-canvas">

        <p class="gh-post-authors">
            Written by {{#foreach authors}}<a href="{{url}}">{{name}}</a> {{/foreach}} in {{tags}}
        </p>

        {{!--
        <section class="gh-post-comments">
            If you want to embed comments, this is a good place to do it!
        </section>
        --}}

    </footer>

</article>

<aside class="gh-readmore">
    <div class="gh-readmore-inner">
        <div class="gh-readmore-next">
            {{#next_post}}<a href="{{url}}">{{> "icons/arrow-left"}} <h4>{{title}}</h4></a>{{/next_post}}
        </div>
        <div class="gh-readmore-prev">
            {{#prev_post}}<a href="{{url}}">
                <h4>{{title}}</h4> {{> "icons/arrow-right"}}
            </a>{{/prev_post}}
        </div>
    </div>
</aside>

{{/post}}