post.hbs

   1 {{!< default}}
   2
   3 {{!-- The tag above means: insert everything in this file
   4 into the {body} tag of the default.hbs template --}}
   5
   6
   7 {{#post}}
   8 {{!-- Everything inside the #post block pulls data from the post --}}
   9
  10 <article class="article {{post_class}}">
  11
  12     <header class="article-header gh-canvas">
  13
  14         {{#if primary_tag}}
  15         <section class="article-tag">
  16             <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
  17         </section>
  18         {{/if}}
  19
  20         <h1 class="article-title">{{title}}</h1>
  21
  22         {{#if custom_excerpt}}
  23         <p class="article-excerpt">{{custom_excerpt}}</p>
  24         {{/if}}
  25
  26         <div class="article-byline">
  27             <section class="article-byline-content">
  28                 <ul class="author-list">
  29                     {{#foreach authors}}
  30                     <li class="author-list-item">
  31                         {{#if profile_image}}
  32                         <a href="{{url}}" class="author-avatar">
  33                             <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
  34                         </a>
  35                         {{else}}
  36                         <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
  37                         {{/if}}
  38                     </li>
  39                     {{/foreach}}
  40                 </ul>
  41                 <div class="article-byline-meta">
  42                     <h4 class="author-name">{{authors}}</h4>
  43                     <div class="byline-meta-content">
  44                         <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
  45                         <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
  46                     </div>
  47                 </div>
  48             </section>
  49         </div>
  50
  51         {{#if feature_image}}
  52         <figure class="article-image">
  53             {{!-- This is a responsive image, it loads different sizes depending on device
  54             https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
  55             <img
  56                 srcset="{{img_url feature_image size="s"}} 300w,
  57                         {{img_url feature_image size="m"}} 600w,
  58                         {{img_url feature_image size="l"}} 1000w,
  59                         {{img_url feature_image size="xl"}} 2000w"
  60                 sizes="(min-width: 1400px) 1400px, 92vw"
  61                 src="{{img_url feature_image size="xl"}}"
  62                 alt="{{title}}"
  63             />
  64         </figure>
  65         {{/if}}
  66     </header>
  67
  68     <section class="gh-content gh-canvas">
  69         {{content}}
  70     </section>
  71
  72     {{!--
  73     <section class="article-comments gh-canvas">
  74         If you want to embed comments, this is a good place to paste your code!
  75     </section>
  76     --}}
  77
  78 </article>
  79
  80 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
  81 {{#unless @member}}
  82 <section class="footer-cta">
  83     <div class="inner">
  84         <h2>Sign up for more like this.</h2>
  85         <a class="footer-cta-button" href="#/portal">
  86             <div>Enter your email</div>
  87             <span>Subscribe</span>
  88         </a>
  89         {{!-- ^ This looks like a form element, but it's just a link to Portal,
  90         making the form validation and submission much simpler. --}}
  91     </div>
  92 </section>
  93 {{/unless}}
  94
  95
  96 {{!-- Read more links, just above the footer --}}
  97 <aside class="read-more-wrap">
  98     <div class="read-more inner">
  99
 100         {{!-- The {#get} helper below fetches some of the latest posts here
 101         so that people have something else to read when they finish this one.
 102
 103         This query gets the latest 3 posts on the site, but adds a filter to
 104         exclude the post we're currently on from being included. --}}
 105
 106         {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
 107             {{#if more_posts}}
 108                 {{#foreach more_posts}}
 109                     {{> "post-card"}}
 110                 {{/foreach}}
 111             {{/if}}
 112         {{/get}}
 113
 114     </div>
 115 </aside>
 116
 117 {{/post}}