Working on homepage

This commit is contained in:
kbe
2025-08-20 14:32:15 +02:00
parent 7f958514b1
commit 1e293852f4

View File

@@ -29,46 +29,41 @@
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2> <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
{{ range first 2 (where .Site.Data.wordpress.posts "status" "publish") }} {{ range first 2 $.Site.RegularPages }}
{{ $author := index .Site.Data.wordpress.authors .author }}
{{ $categories := slice }}
{{ range .categories }}
{{ $categoryID := . }}
{{ range $.Site.Data.wordpress.categories }}
{{ if eq .id $categoryID }}
{{ $categories = $categories | append .name }}
{{ end }}
{{ end }}
{{ end }}
<div class="bg-white rounded-xl overflow-hidden shadow-lg article-card"> <div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
<div class="featured-article"> <div class="featured-article">
{{ if .featured_image }} {{ if .Params.featured_image }}
<img src="{{ .featured_image }}" alt="{{ .title.rendered | plainify }}" class="w-full h-64 object-cover"> <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-64 object-cover">
{{ else }} {{ else }}
<img src="/assets/images/col-1.jpg" alt="{{ .title.rendered | plainify }}" class="w-full h-64 object-cover"> <img src="/assets/images/col-1.jpg" alt="{{ .Title }}" class="w-full h-64 object-cover">
{{ end }} {{ end }}
</div> </div>
<div class="p-6"> <div class="p-6">
<div class="flex flex-wrap gap-2 mb-4"> <div class="flex flex-wrap gap-2 mb-4">
{{ range first 2 $categories }} {{ range first 2 .Params.categories }}
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
{{ end }} {{ end }}
</div> </div>
<h3 class="text-xl font-bold text-gray-900 mb-3">{{ .title.rendered | plainify }}</h3> <h3 class="text-xl font-bold text-gray-900 mb-3">
<p class="text-gray-600 mb-4">{{ .excerpt.rendered | plainify | truncate 150 }}</p> <a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h3>
<p class="text-gray-600 mb-4">
{{ if .Params.excerpt }}
{{ .Params.excerpt }}
{{ else if .Summary }}
{{ .Summary }}
{{ else }}
{{ truncate 200 .Content }}
{{ end }}
</p>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center text-sm text-gray-500"> <div class="flex items-center text-sm text-gray-500">
{{ if $author.avatar_url }} <img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2">
<img src="{{ $author.avatar_url }}" alt="{{ $author.name }}" class="w-6 h-6 rounded-full mr-2"> <span>{{ .Params.author }}</span>
{{ else }}
<img src="https://i.pravatar.cc/24" alt="{{ $author.name }}" class="w-6 h-6 rounded-full mr-2">
{{ end }}
<span>{{ $author.name }}</span>
<span class="mx-2"></span> <span class="mx-2"></span>
<span>{{ .date | time.Format "Jan 2, 2006" }}</span> <span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
</div> </div>
<a href="{{ .link }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a> <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
</div> </div>
</div> </div>
</div> </div>
@@ -90,35 +85,31 @@
<h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2> <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
{{ range first 6 (after 2 (where .Site.Data.wordpress.posts "status" "publish")) }} {{ range first 6 (after 2 $.Site.RegularPages) }}
{{ $author := index .Site.Data.wordpress.authors .author }}
{{ $categories := slice }}
{{ range .categories }}
{{ $categoryID := . }}
{{ range $.Site.Data.wordpress.categories }}
{{ if eq .id $categoryID }}
{{ $categories = $categories | append .name }}
{{ end }}
{{ end }}
{{ end }}
<div class="bg-white rounded-xl overflow-hidden shadow-md article-card"> <div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
{{ if .featured_image }} {{ if .Params.featured_image }}
<img src="{{ .featured_image }}" alt="{{ .title.rendered | plainify }}" class="w-full h-48 object-cover"> <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
{{ else }} {{ else }}
<img src="/assets/images/col-1.jpg" alt="{{ .title.rendered | plainify }}" class="w-full h-48 object-cover"> <img src="/assets/images/col-1.jpg" alt="{{ .Title }}" class="w-full h-48 object-cover">
{{ end }} {{ end }}
<div class="p-6"> <div class="p-6">
<div class="flex flex-wrap gap-2 mb-3"> <div class="flex flex-wrap gap-2 mb-3">
{{ range first 1 $categories }} {{ range first 1 .Params.categories }}
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
{{ end }} {{ end }}
</div> </div>
<h3 class="text-lg font-bold text-gray-900 mb-3">{{ .title.rendered | plainify }}</h3> <h3 class="text-lg font-bold text-gray-900 mb-3">{{ .Title }}</h3>
<p class="text-gray-600 text-sm mb-4">{{ .excerpt.rendered | plainify | truncate 100 }}</p> <p class="text-gray-600 text-sm mb-4">
{{ if .Params.excerpt }}
{{ .Params.excerpt }}
{{ else if .Summary }}
{{ .Summary }}
{{ else }}
{{ truncate 200 .Content }}
{{ end }}
</p>
<div class="flex items-center justify-between text-sm text-gray-500"> <div class="flex items-center justify-between text-sm text-gray-500">
<span>{{ .date | time.Format "Jan 2, 2006" }}</span> <span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
<span>{{ .reading_time | default "5" }} min read</span>
</div> </div>
</div> </div>
</div> </div>