Code documented

author.hbs

@@ -1,9 +1,17 @@
+{{!--
+This template is used for the author page.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
 <div class="main-wrap">
+  {{!-- Everything inside the #author tags pulls data from the author --}}
   {{#author}}
+  {{!--Special header.hbs partial to generate the <header> tag--}}
   {{> header background=cover_image}}
-  
+  {{!-- Inject styles of the hero image to make it responsive --}}
   {{> hero background=cover_image}}
   <div class="m-hero__content" data-aos="fade-down">
     {{#if profile_image}}
@@ -59,9 +67,11 @@
     <div class="l-content">
       <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
         <div class="l-grid centered">
+          {{!-- The tag below iterates over all the posts --}}
           {{> "loop"}}
         </div>
       </div>
+      {{!-- Links to Previous/Next posts --}}
       {{pagination}}
     </div>
   </main>

default.hbs

@@ -13,15 +13,19 @@
     {{!-- Styles'n'Scripts --}}
     <link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" />
 
+    {{!-- This #block helper will pull data from the hero partial 
+    to inject styles of the hero image to make it responsive --}}
     {{{block "herobackground"}}}
 
     {{!-- This tag outputs SEO meta+structured data and other important settings --}}
     {{ghost_head}}
 
+    {{!-- This variable is used to make the search form work --}}
     <script>
       const ghostHost = "{{@site.url}}"
     </script>
 
+    {{!-- This script loads the Google fornt asynchronously --}}
     <script>
       WebFontConfig = {
         google: { families: ['Source+Sans+Pro:400,600,700'] }

error-404.hbs

@@ -1,5 +1,12 @@
+{{!--
+This error template is used for all 404 errors, which might occur on your site.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
+{{!--Special header.hbs partial to generate the <header> tag--}}
 {{> header}}
 
 <main class="l-fullscreen">

index.hbs

@@ -1,8 +1,16 @@
+{{!--
+This template is used for the index page.
+It can be used also as the home page or the default page.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
 <div class="main-wrap">
+  {{!--Special header.hbs partial to generate the <header> tag--}}
   {{> header background=@site.cover_image}}
-  
+  {{!-- Inject styles of the hero image to make it responsive --}}
   {{> hero background=@site.cover_image}}
   <div class="m-hero__content" data-aos="fade-down">
     <h1 class="m-hero-title bigger">{{@site.title}}</h1>
@@ -66,14 +74,17 @@
           </div>
           {{/if}}
           {{/get}}
+          {{!-- The tag below iterates over all the posts --}}
           {{> "loop"}}
         </div>
       </div>
+      {{!-- Links to Previous/Next posts --}}
       {{pagination}}
     </div>
   </main>
 </div>
 
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}
   <script defer src="{{asset "js/home.js"}}"></script>
 {{/contentFor}}

page-authors.hbs

@@ -1,9 +1,17 @@
+{{!--
+This template is used for the authors page.
+You must first create a page called Authors in the dashboard to enable it.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
 {{#post}}
   <div class="main-wrap">
+    {{!--Special header.hbs partial to generate the <header> tag--}}
     {{> header background=feature_image}}
-    
+    {{!-- Inject styles of the hero image to make it responsive --}}
     {{> hero background=feature_image}}
     <div class="m-hero__content" data-aos="fade-down">
       <h1 class="m-hero-title bigger">{{title}}</h1>

page.hbs

@@ -1,9 +1,17 @@
+{{!--
+This template is used for the posts that are marked as pages.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
+{{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
   <div class="main-wrap">
+    {{!--Special header.hbs partial to generate the <header> tag--}}
     {{> header background=feature_image}}
-    
+    {{!-- Inject styles of the hero image to make it responsive --}}
     {{> hero background=feature_image}}
     <div class="m-hero__content" data-aos="fade-down">
       <h1 class="m-hero-title bigger">{{title}}</h1>
@@ -28,6 +36,7 @@
   </div>
 {{/post}}
 
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}
   <script defer src="{{asset "js/page.js"}}"></script>
 {{/contentFor}}

partials/footer.hbs

@@ -1,3 +1,7 @@
+{{!--
+This footer template is shared across all the pages.
+--}}
+
 <footer class="m-footer">
   <div class="m-footer__content">
     <p class="m-footer-copyright">

partials/header.hbs

@@ -1,3 +1,7 @@
+{{!--
+This header template is shared across all the pages.
+--}}
+
 {{#if background}}
   <header class="m-header with-picture js-header">
 {{else}}

partials/hero.hbs

@@ -1,3 +1,8 @@
+{{!--
+If the template in question has a background image, then we render responsive image styles
+for it, and apply those styles to the <header> tag.
+--}}
+
 {{#if background}}
   {{#contentFor "herobackground"}}
   <style>

partials/loop.hbs

@@ -1,3 +1,5 @@
+{{!-- The template below includes the markup for each post --}}
+
 {{#foreach posts}}
   {{#is "post"}}
     <div class="m-recommended-slider__item">

partials/navigation.hbs

@@ -1,3 +1,8 @@
+{{!--
+This navigation template is shared across all the pages.
+Also it includes the big submenu.
+--}}
+
 <ul role="menu">
   {{#if @site.logo}}
   <li class="only-desktop" role="menuitem">

partials/pagination.hbs

@@ -1,3 +1,7 @@
+{{!--
+This pagination template is used to navigate through newer and older articles.
+--}}
+
 <div class="l-wrapper">
   <nav class="m-pagination">
     {{#if prev}}

partials/search.hbs

@@ -1,3 +1,9 @@
+{{!--
+This search template is used to display the search form.
+You need to create a custom integration first to get a Content API key and then 
+follow the instructions to enable the search feature.
+--}}
+
 <div class="m-search js-search">
   <button class="m-icon-button outlined as-close-search js-close-search" aria-label="Close search">
     <span class="icon-close"></span>

partials/subscribe_form.hbs

@@ -1,3 +1,8 @@
+{{!--
+This subscribe template is used to display the form where users can subscribe.
+You need to enable the subscription feature first.
+--}}
+
 <form method="post" action="{{action}}" id="{{form_id}}" class="{{form_class}}">
   {{hidden}}
 

post.hbs

@@ -1,9 +1,17 @@
+{{!--
+This template is used for the post page.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
 <div class="main-wrap">
+  {{!-- Everything inside the #post tags pulls data from the post --}}
   {{#post}}
+  {{!--Special header.hbs partial to generate the <header> tag--}}
   {{> header background=feature_image}}
-  
+  {{!-- Inject styles of the hero image to make it responsive --}}
   {{> hero background=feature_image}}
   </header>
   {{/post}}
@@ -11,6 +19,7 @@
   <main>
     <article>
       <div class="l-content">
+        {{!-- Everything inside the #post tags pulls data from the post --}}
         {{#post}}
         <div class="l-wrapper in-post js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
           {{#if @labs.subscribers}}
@@ -49,6 +58,7 @@
             </div>
           </div>
         </div>
+        {{!-- Email subscribe form at the bottom of the page --}}
         {{#if @labs.subscribers}}
         <section class="m-subscribe-section">
           <div class="l-wrapper in-post">
@@ -123,6 +133,7 @@
             </div>
           </div>
         </section>
+        {{!-- If you want to embed comments, this is a good place to do it! --}}
         {{!--
           <section class="m-comments">
             <div class="m-load-comments">
@@ -149,12 +160,14 @@
           </section>
           --}}
         {{/post}}
+        {{!-- Related posts --}}
         {{#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">
               <div class="m-recommended-slider js-recommended-articles">
+                {{!-- The tag below iterates over all the related posts --}}
                 {{> "loop"}}
               </div>
             </div>
@@ -166,6 +179,7 @@
   </main>
 </div>
 
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}
   <script defer src="{{asset "js/post.js"}}"></script>
 {{/contentFor}}

subscribe.hbs

@@ -1,3 +1,9 @@
+{{!--
+This error template is used for the subscription page.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
 <div class="l-wrapper" data-aos="fade-down">

tag.hbs

@@ -1,9 +1,17 @@
+{{!--
+This template is used for the tag page.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
 {{!< default}}
 
 <div class="main-wrap">
+  {{!-- Everything inside the #tag tags pulls data from the tag --}}
   {{#tag}}
+  {{!--Special header.hbs partial to generate the <header> tag--}}
   {{> header background=feature_image}}
-  
+  {{!-- Inject styles of the hero image to make it responsive --}}
   {{> hero background=feature_image}}
   <div class="m-hero__content" data-aos="fade-down">
     <h1 class="m-hero-title bigger">{{name}}</h1>
@@ -18,9 +26,11 @@
     <div class="l-content">
       <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
         <div class="l-grid centered">
+          {{!-- The tag below iterates over all the posts --}}
           {{> "loop"}}
         </div>
       </div>
+      {{!-- Links to Previous/Next posts --}}
       {{pagination}}
     </div>
   </main>