Add recent post cards to homepage

static/src/scss/_homepage.scss

@@ -1,17 +1,34 @@
 body.page-homepage {
-  height: 100vh;
+  min-height: 100vh;
+
+  @include tablet {
+    height: 100vh;
+  }
 
   main {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
     color: $white;
     margin-bottom: 0;
+    padding-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+  }
+
+  .top-section {
+    min-width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+
+    @include mobile {
+      margin: 2rem;
+    }
   }
 
   h1 {
@@ -23,7 +40,7 @@ body.page-homepage {
     min-width: 45%;
   }
 
-  .latest {
+  .box {
     padding: 0.25rem 0.5rem;
     margin-top: 2rem;
     background-color: color.adjust($dark, $alpha: -0.2);
@@ -59,4 +76,60 @@ body.page-homepage {
   #to-top {
     display: none;
   }
+
+  .content-list {
+    width: 100%;
+
+    .card-image {
+      overflow: hidden;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      position: absolute;
+      transition: filter 0.25s;
+      filter: brightness(0.9);
+    }
+
+    p {
+      position: absolute;
+      bottom: 0;
+      color: $white;
+      padding: 0.5rem;
+      transition: background-color 0.25s;
+      width: 100%;
+      background-color: rgb(0 0 0 / 50%);
+    }
+
+    figure {
+      margin: 0;
+      text-align: initial;
+    }
+
+    a:hover {
+      img {
+        filter: unset;
+      }
+
+      p {
+        background-color: rgb(0 0 0 / 70%);
+      }
+    }
+  }
+
+  .recent-posts {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    flex-grow: unset;
+    margin-top: 2rem;
+
+    .box {
+      margin: 0 auto;
+      display: inline-block;
+    }
+  }
 }

website/home/models.py

@@ -1,8 +1,5 @@
-from typing import Optional, Tuple
-
 from django.db import models
 from django.http.request import HttpRequest
-from django_cache_decorator import django_cache_decorator
 from wagtail.admin.panels import FieldPanel
 from wagtail.images import get_image_model_string
 from wagtail.images.models import Image
@@ -12,20 +9,6 @@ from website.common.models import BasePage
 from website.contrib.singleton_page.utils import SingletonPageCache
 
 
-@django_cache_decorator(time=600)
-def get_latest_blog_post() -> Optional[Tuple[str, str]]:
-    from website.blog.models import BlogPostPage
-
-    try:
-        latest_blog_post = (
-            BlogPostPage.objects.live().public().defer_streamfields().latest("date")
-        )
-    except BlogPostPage.DoesNotExist:
-        return None
-
-    return latest_blog_post.title, latest_blog_post.get_url()
-
-
 class HomePage(BasePage, WagtailImageMetadataMixin):
     max_count = 1
 
@@ -55,9 +38,22 @@ class HomePage(BasePage, WagtailImageMetadataMixin):
         return self.html_title
 
     def get_context(self, request: HttpRequest) -> dict:
+        from website.blog.models import BlogPostListPage, BlogPostPage
         from website.search.models import SearchPage
 
         context = super().get_context(request)
-        context["latest_blog_post"] = get_latest_blog_post()
+        context["recent_posts"] = list(
+            BlogPostPage.objects.live()
+            .public()
+            .defer_streamfields()
+            .order_by("-date")[:7]
+        )
+        context["latest_blog_post"] = (
+            context["recent_posts"].pop(0) if context["recent_posts"] else None
+        )
         context["search_page_url"] = SingletonPageCache.get_url(SearchPage, request)
+        context["blog_post_list_url"] = SingletonPageCache.get_url(
+            BlogPostListPage, request
+        )
+
         return context

website/home/templates/home/home_page.html

@@ -4,21 +4,38 @@
 
 {% block main %}
   <main {% if page.image %}style="background-image: url({% image_url page.image 'width-1200' %})"{% endif %}>
-    <div class="heading-wrapper">
-      <h1>{{ page.heading }}</h1>
-      {% if search_page_url %}
-        <form action="{{ search_page_url }}">
-          <input id="search-input" class="input" type="text" placeholder="Search" name="q" />
-        </form>
+    <div class="top-section">
+      <div class="heading-wrapper">
+        <h1>{{ page.heading }}</h1>
+        {% if search_page_url %}
+          <form action="{{ search_page_url }}">
+            <input id="search-input" class="input" type="text" placeholder="Search" name="q" />
+          </form>
+        {% endif %}
+      </div>
+
+      {% if latest_blog_post %}
+        <div class="box latest is-size-5">
+          <strong>Latest Post</strong>:
+          <a href="{% pageurl latest_blog_post %}">{{ latest_blog_post.title }}</a>
+          &rarr;
+        </div>
       {% endif %}
     </div>
 
-    {% if latest_blog_post %}
-      <div class="box latest">
-        <strong>Latest Post</strong>:
-        <a href="{{ latest_blog_post.1 }}">{{ latest_blog_post.0 }}</a>
-        &rarr;
+    <section class="container content recent-posts">
+      <h2 class="has-text-centered has-text-white is-size-3">Recent Posts</h2>
+      <div class="columns content-list is-multiline">
+        {% for page in recent_posts %}
+          {% include "home/home_page_card.html" %}
+        {% endfor %}
       </div>
-    {% endif %}
+
+      {% if blog_post_list_url %}
+        <div class="box">
+          <a href="{{ blog_post_list_url }}">View more &rarr;</a>
+        </div>
+      {% endif %}
+    </section>
   </main>
 {% endblock %}

website/home/templates/home/home_page_card.html

@@ -0,0 +1,16 @@
+{% load wagtail_cache wagtailcore_tags %}
+
+{% wagtailpagecache FRAGMENT_CACHE_TTL "homepage-card" %}
+<div class="column is-one-third-widescreen is-half">
+  <div class="card">
+    <div class="card-image">
+      <a href="{% pageurl page %}">
+        <figure class="image is-16by9">
+          <img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
+          <p class="has-text-weight-light">{{ page.title }}</p>
+        </figure>
+      </a>
+    </div>
+  </div>
+</div>
+{% endwagtailpagecache %}