Showcase different tags on the homepage

Thanks to Ghost's Headline theme for the inspiration!

assets/css/screen.css

@@ -913,6 +913,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     opacity: 0.6;
 }
 
+.post-card-centred {
+    text-align: center;
+}
+
 .single-author-byline {
     display: flex;
     flex-direction: column;
@@ -954,6 +958,10 @@ make sure this only happens on large viewports / desktop-ish devices.
         border-top: 0;
     }
 
+    .post-card-large.post-card-centred .post-card-content {
+        grid-column: 1/span 3;
+    }
+
     .post-card-large:not(.no-image) .post-card-header {
         margin-top: 0;
     }
@@ -999,6 +1007,17 @@ make sure this only happens on large viewports / desktop-ish devices.
     }
 }
 
+/* Special Styling for home page topics (below):
+
+The home page has several topics, each with its own section, header,
+and footer. Here, we style the headers and footers.
+
+ */
+
+.gh-topic-header {
+    font-family: var(--font-heading);
+}
+
 
 /* 7. Single Post
 /* ---------------------------------------------------------- */
@@ -1763,7 +1782,8 @@ Ghost editor. */
 /* ---------------------------------------------------------- */
 
 .gh-content > hr,
-.gh-inline hr {
+.gh-inline hr,
+.home-template hr {
     border: 0;
     height: 3rem;
     display: block;
@@ -1774,7 +1794,8 @@ Ghost editor. */
 }
 
 .gh-content > hr::after,
-.gh-inline hr::after {
+.gh-inline hr::after,
+.home-template hr::after {
     display: none;
 }
 

home.hbs

@@ -0,0 +1,81 @@
+{{!< default}}
+{{!-- The tag above means: insert everything in this file
+into the {body} of the default.hbs template --}}
+
+<div class="site-header-content">
+    {{#if @site.cover_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 class="site-header-cover"
+            srcset="{{img_url @site.cover_image size="s"}} 300w,
+                    {{img_url @site.cover_image size="m"}} 600w,
+                    {{img_url @site.cover_image size="l"}} 1000w,
+                    {{img_url @site.cover_image size="xl"}} 2000w"
+            sizes="100vw"
+            src="{{img_url @site.cover_image size="xl"}}"
+            alt=""
+        />
+    {{/if}}
+    <h1 class="site-title">
+        {{#if @site.logo}}
+            <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
+        {{else}}
+            {{@site.title}}
+        {{/if}}
+    </h1>
+    <p>{{@site.description}}</p>
+    <a class="header-cta-button" href="#/search">
+      <div>I want to think about...</div>
+      <span>Search</span>
+    </a>
+    {{#unless @member}}
+        <a class="header-cta-secondary" href="#/portal">
+          <p>{{> "icons/email"}} Think about something new every week</p>
+        </a>
+    {{/unless}}
+</div>
+
+{{!-- The main content area --}}
+<main id="site-main" class="site-main outer">
+    <div class="inner posts">
+
+        <section>
+            <header class="gh-topic-header">
+                {{#match pagination.pages ">" 1}}
+                    <a href="{{@site.url}}/page/2"><h2>Latest</h2></a>
+                {{else}}
+                    <h2>Latest</h2>
+                {{/match}}
+            </header>
+
+            <div class="post-feed">
+                {{#foreach posts limit="4"}}
+
+                    {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                    {{> "post-card"}}
+
+               {{/foreach}}
+            </div>
+
+        </section>
+
+        {{#if @custom.enter_tag_slugs}}
+            {{#get "tags" filter="slug:[{{@custom.enter_tag_slugs}}]"}}
+                {{#foreach tags}}
+                    <hr />
+                    {{> "topic-grid"}}
+                {{/foreach}}
+            {{/get}}
+        {{else}}
+            {{#match posts.length ">" 1}}
+                {{#get "tags" include="count.posts" order="count.posts desc" limit="6"}}
+                    {{#foreach tags}}
+                        <hr />
+                        {{> "topic-grid"}}
+                    {{/foreach}}
+                {{/get}}
+            {{/match}}
+        {{/if}}
+
+    </div>
+</main>

index.hbs

@@ -2,43 +2,24 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-<div class="site-header-content">
-    {{#if @site.cover_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 class="site-header-cover"
-            srcset="{{img_url @site.cover_image size="s"}} 300w,
-                    {{img_url @site.cover_image size="m"}} 600w,
-                    {{img_url @site.cover_image size="l"}} 1000w,
-                    {{img_url @site.cover_image size="xl"}} 2000w"
-            sizes="100vw"
-            src="{{img_url @site.cover_image size="xl"}}"
-            alt=""
-        />
-    {{/if}}
-    <h1 class="site-title">
-        {{#if @site.logo}}
-            <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
-        {{else}}
-            {{@site.title}}
-        {{/if}}
-    </h1>
-    <p>{{@site.description}}</p>
-    <a class="header-cta-button" href="#/search">
-      <div>I want to think about...</div>
-      <span>Search</span>
-    </a>
-    {{#unless @member}}
-        <a class="header-cta-secondary" href="#/portal">
-          <p>{{> "icons/email"}} Think about something new every week</p>
-        </a>
-    {{/unless}}
-</div>
-
 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer">
     <div class="inner posts">
 
+      <section class="post-card post-card-large post-card-centred">
+          <div class="post-card-content">
+              <div class="post-card-content-link">
+                  <header class="post-card-header">
+                      <h2 class="post-card-title">Latest Posts</h2>
+                  </header>
+                  <div class="gh-banner-button">
+                      <a href="{{@site.url}}/">← Back to home</a>
+                  </div>
+              </div>
+          </div>{{!--/.post-card-content--}}
+
+        </section>
+
         <div class="post-feed">
             {{#foreach posts}}
 

package.json

@@ -2,7 +2,7 @@
     "name": "weflock",
     "description": "Snipette theme with Analog vibes, derived from Casper",
     "demo": "https://snipettemag.com",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "engines": {
         "ghost": ">=4.0.0"
     },
@@ -95,6 +95,10 @@
           "instagram_url": {
             "type": "text",
             "default": ""
+          },
+          "enter_tag_slugs": {
+              "type": "text",
+              "group": "homepage"
           }
         }
     },

partials/topic-grid.hbs

@@ -0,0 +1,19 @@
+<section>
+    <header class="gh-topic-header">
+        <h2>
+            <a href="{{url}}">{{name}}</a>
+        </h2>
+    </header>
+
+    <div class="post-feed">
+        {{#get "posts" include="tags,authors" filter="tag:{{slug}}" limit="4"}}
+            {{#foreach posts}}
+
+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+
+           {{/foreach}}
+        {{/get}}
+    </div>
+
+</section>