Vivid-Casper/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>
                </div>
            </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>

{{!-- 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}}


{{!-- 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}}