add recent blog posts

blog/templates/blog/blog_index_page.html

@@ -15,7 +15,7 @@
             <div class="mt-16 space-y-20 lg:mt-20 blog-pages">
                 {% for post in blogpages %}
                     {% with post=post.specific %}
-                        <div class="relative isolate flex flex-col gap-8">
+                        <article class="relative isolate flex flex-col gap-8">
                             <div class="group relative w-full">
                                 <h2 class="mt-3 font-semibold leading-6 group-hover:text-klavender border-klavender border-b-4">
                                     <a href="{% pageurl post %}">
@@ -57,13 +57,12 @@
                                     {% endif %}
                                 {% endwith %}
                             </div>
-
                         </article>
                     {% endwith %}
                 {% endfor %}
-                </div>
-            </div>
 
+            </div>
+        </div>
     </section>
 
 {% endblock %}

home/models.py

@@ -4,6 +4,8 @@ from wagtail.models import Page
 from wagtail.fields import RichTextField, StreamField
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 from wagtailseo.models import SeoMixin, SeoType
+
+from blog.models import BlogPage
 from .blocks import HomeContentBlock
 
 
@@ -57,3 +59,10 @@ class HomePage(SeoMixin, Page):
 
     promote_panels = SeoMixin.seo_panels
     seo_content_type = SeoType.WEBSITE
+
+    def get_context(self, request, *args, **kwargs):
+        context = super().get_context(request)
+        # retrieve the last 3 blogposts
+        recent_blog_items = BlogPage.objects.live().order_by('-first_published_at')[:3]
+        context['recent_blog_items'] = recent_blog_items
+        return context

home/templates/home/home_page.html

@@ -5,7 +5,7 @@
 
 {% block content %}
     <article
-    class="h-full mx-4 sm:mx-10 md:mx-16 md:mt-4 flex flex-col md:flex-row justify-center md:justify-start items-center"
+    class="h-full mx-4 sm:mx-10 md:mx-16 md:mt-4 flex flex-col md:flex-row justify-center md:justify-between items-center"
   >
     <figure class="w-1/2" style="min-width: 24rem">
       <figcaption class="sr-only">
@@ -45,6 +45,36 @@
         </div>
     </section>
 
+    <section class="mx-auto max-w-7xl px-6 lg:px-8">
+        <h2 class="text-balance">From the blog</h2>
+        <ul class="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+            {% for post in recent_blog_items %}
+                {% with post=post.specific %}
+                    <article class="flex flex-col items-center justify-start max-w-xl">
+                            <div class="group relative w-full">
+                                <h3 class="">
+                                    <a href="{% pageurl post %}">
+                                        <span class="absolute inset-0"></span>
+                                        {{ post.title }}
+                                    </a>
+                                </h3>
+                                <p class="mt-5 leading-6">{{ post.intro }}</p>
+                            </div>
+                            {% if post.main_image %}
+                                <div class="relative mx-auto">
+                                    {% with post.main_image as main_image %}
+                                        {% if main_image %}
+                                            {% image main_image width-1600 class="blog" %}{% endif %}
+                                    {% endwith %}
+                                    <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                            {% endif %}
+                        </article>
+                {% endwith %}
+            {% endfor %}
+        </ul>
+    </section>
+
     <section class="px-0 md:px-4 lg:px-8 home-content">
         <div class="w-full px-2 lg:px-4">
             {{ page.body }}