Add a home/latest widget

Add a shortcode and some styles for a two column, two row grid of latest posts.
This commit is contained in:
Eryn Wells 2024-10-20 09:19:14 -07:00
parent f55b445c1f
commit 5c2942bc56
2 changed files with 43 additions and 0 deletions

View file

@ -0,0 +1,24 @@
.home-latest {
display: grid;
gap: 1ch;
grid-column: main-start / main-end;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content min-content;
grid-template-areas:
"blog1 photo"
"blog2 photo";
.home-latest__blog:nth-of-type(1) {
grid-area: blog1;
}
.home-latest__blog:nth-of-type(2) {
grid-area: blog2;
}
.home-latest__photo {
border-left: 2px dashed var(--gray6);
padding-inline-start: 1ch;
grid-area: photo;
}
}

View file

@ -0,0 +1,19 @@
{{- $blogSection := site.GetPage "blog" -}}
{{- $latestBlogPosts := $blogSection.Pages.ByDate.Reverse.Limit 2 -}}
{{- $photosSection := site.GetPage "photos" -}}
{{- $latestPhotoPosts := $photosSection.Pages.ByDate.Reverse.Limit 1 -}}
<div class="home-latest">
{{ range $latestBlogPosts }}
<div class="home-latest__blog">
{{ .Render "page_summary" }}
</div>
{{ end }}
{{ range $latestPhotoPosts }}
<div class="home-latest__photo">
{{ .Render "page_summary" }}
</div>
{{ end }}
</div>