konstantin/iamkonstantin
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

add recent blog posts

Browse source
This commit is contained in:
Konstantin 2024-11-10 15:08:09 +01:00
parent 5f6c8a3dfd
commit f28561476c
3 changed files with 82 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

85
blog/templates/blog/blog_index_page.html
View file

@ -15,55 +15,54 @@
<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">
<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 %}">
<span class="absolute inset-0"></span>
{{ post.title }}
</a>
</h2>
<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 %}
<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 %}">
<span class="absolute inset-0"></span>
{{ post.title }}
</a>
</h2>
<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 %}
<div class="flex-col items-center text-xs">
<div class="space-x-2 text-left"><span class="emoji"
aria-hidden="true">🕘</span>
<time class="text-sm"
datetime="{{ post.date|date:"Y-m-d" }}">{{ post.date }}</time>
</div>
{% with tags=post.tags.all %}
{% if tags %}
<div class="tags mt-2">
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li class="lg:space-x-2"><span class="emoji">🏷️</span>
<a class="pr-2"
href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
{% endif %}
<div class="flex-col items-center text-xs">
<div class="space-x-2 text-left"><span class="emoji"
aria-hidden="true">🕘</span>
<time class="text-sm"
datetime="{{ post.date|date:"Y-m-d" }}">{{ post.date }}</time>
</div>
{% with tags=post.tags.all %}
{% if tags %}
<div class="tags mt-2">
<h3 class="sr-only">Tags</h3>
<ul class="flex">
{% for tag in tags %}
<li class="lg:space-x-2"><span class="emoji">🏷️</span>
<a class="pr-2"
href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
</div>
</article>
{% endwith %}
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}

9
home/models.py
View file

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

32
home/templates/home/home_page.html
View file

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