Showcase different tags on the homepage

Thanks to Ghost's Headline theme for the inspiration!
This commit is contained in:
Badri Sunderarajan 2023-02-13 22:42:16 +05:30
parent bb48b15bd5
commit 28cf0c81fc
7 changed files with 144 additions and 38 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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;
}

81
home.hbs Normal file
View file

@ -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>

View file

@ -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}}

View file

@ -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"
}
}
},

19
partials/topic-grid.hbs Normal file
View file

@ -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>