Post template integrated 👍🏼

partials/hero.hbs

@@ -26,7 +26,11 @@
   </style>
 
   <header class="m-hero with-picture" data-aos="fade">
+    {{#is "post"}}
+      <div class="m-hero__picture in-post"></div>
+    {{else}}
       <div class="m-hero__picture"></div>
+    {{/is}}
 {{else}}
   <header class="m-hero" data-aos="fade">
 {{/if}}

partials/loop.hbs

@@ -1,4 +1,7 @@
 {{#foreach posts}}
+  {{#is "post"}}
+    <li class="m-recommended-slider__item">
+  {{/is}}
   {{#if feature_image}}
     <article class="m-article-card {{post_class}}">
       <div class="m-article-card__picture" style="background-image: url({{feature_image}});">
@@ -38,6 +41,9 @@
       </a>
     </div>
   </article>
+  {{#is "post"}}
+    </li>
+  {{/is}}
   {{else}}
     <header class="m-heading">
       <h3>No posts found</h3>

post.hbs

@@ -5,10 +5,13 @@
 
   {{> hero background=feature_image}}
   </header>
+{{/post}}
+
 <main role="main">
   <article>
     <section class="l-content">
-        <div class="l-wrapper in-post" data-aos="fade-up" data-aos-delay="300">
+      {{#post}}
+        <div class="l-wrapper in-post js-wrapper-aos" data-aos="fade-up" data-aos-delay="300">
           <div class="l-post-content js-progress-content">
             <header class="m-heading">
               <h1 class="m-heading__title in-post">{{title}}</h1>
@@ -41,7 +44,6 @@
             </section>
           </div>
         </div>
-      </section>
         <section class="m-subscribe-section">
           <div class="l-wrapper in-post">
             <div class="m-subscribe-section__content">
@@ -57,7 +59,6 @@
                       input_class="m-input in-subscribe-section"
                       button_class="m-button primary block"
                       placeholder="Your email address"
-                autofocus="true"
                     }}
               </div>
             </div>
@@ -78,11 +79,11 @@
               <h4 class="m-author__name">
                 <a href="{{primary_author.url}}">{{primary_author.name}}</a>
               </h4>
-            {{#if authors}}
+              {{#has author="count:>1"}}
               <p class="m-small-text in-author-along-with">
                 {{authors separator=", " prefix="Among with " from="2"}}
               </p>
-            {{/if}}
+              {{/has}}
               {{#if primary_author.bio}}
               <p class="m-author__bio">{{primary_author.bio}}</p>
               {{/if}}
@@ -112,17 +113,47 @@
             </div>
           </div>
         </section>
+        {{!--
         <section class="m-comments">
           <div class="m-load-comments">
             <div class="m-load-comments__line"></div>
-          <button class="m-icon-button filled as-load-comments">
+            <button class="m-icon-button filled as-load-comments js-tooltip js-load-comments" data-tippy-content="Load comments">
               <span class="icon-comments"></span>
             </button>
           </div>
+          <div class="m-load-comments__iframe l-wrapper in-comments js-comments-iframe">
+            <div id="disqus_thread"></div>
+            <script>
+              var disqus_config = function () {
+                this.page.url = "{{url absolute="true"}}";
+                this.page.identifier = "ghost-{{comment_id}}"
+              };
+              (function () {
+                var d = document, s = d.createElement('script');
+                s.src = 'https://CHANGETHIS.disqus.com/embed.js';
+                s.setAttribute('data-timestamp', +new Date());
+                (d.head || d.body).appendChild(s);
+              })();
+            </script>
+          </div>
+        </section>
+        --}}
+      {{/post}}
+      {{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" as |related|}}
+        <section class="m-recommended">
+          <div class="l-wrapper in-recommended">
+            <h3 class="m-section-title in-recommended">Recommended for you</h3>
+            <div class="m-recommended-articles">
+              <ul class="m-recommended-slider js-recommended-articles">
+                {{> "loop"}}
+              </ul>
+            </div>
+          </div>
+        </section>
+      {{/get}}
     </section>
   </article>
 </main>
-{{/post}}
 
 {{#contentFor "scripts"}}
   <script defer src="{{asset "js/post.js"}}"></script>