3 {{!-- The tag above means: insert everything in this file
4 into the {body} tag of the default.hbs template --}}
8 {{!-- Everything inside the #post block pulls data from the post --}}
10 <article class="article {{post_class}}">
12 <header class="article-header gh-canvas">
15 <section class="article-tag">
16 <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
20 <h1 class="article-title">{{title}}</h1>
22 {{#if custom_excerpt}}
23 <p class="article-excerpt">{{custom_excerpt}}</p>
26 <div class="article-byline">
27 <section class="article-byline-content">
28 <ul class="author-list">
30 <li class="author-list-item">
32 <a href="{{url}}" class="author-avatar">
33 <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
36 <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
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">•</span> {{reading_time}}</span>
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 --}}
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"}}"
68 <section class="gh-content gh-canvas">
73 <section class="article-comments gh-canvas">
74 If you want to embed comments, this is a good place to paste your code!
80 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
82 <section class="footer-cta">
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>
89 {{!-- ^ This looks like a form element, but it's just a link to Portal,
90 making the form validation and submission much simpler. --}}
96 {{!-- Read more links, just above the footer --}}
97 <aside class="read-more-wrap">
98 <div class="read-more inner">
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.
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. --}}
106 {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
108 {{#foreach more_posts}}