Skip to content

Commit

Permalink
update: Fri Nov 22 09:16:08 PM UTC 2024 - Updated the recent posts an…
Browse files Browse the repository at this point in the history 
…d posts list to use a reusable card component
  • Loading branch information
@0xDezzy
0xDezzy committed Nov 22, 2024
1 parent a347602 commit 2522285
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 105 deletions.
10 changes: 10 additions & 0 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1772,6 +1772,11 @@ body:is(.dark *) {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-hacking-royal-darker {
--tw-text-opacity: 1;
color: rgb(36 3 101 / var(--tw-text-opacity));
}

.opacity-20 {
opacity: 0.2;
}
Expand Down Expand Up @@ -1976,6 +1981,11 @@ body:is(.dark *) {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark\:text-hacking-royal-darker:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(36 3 101 / var(--tw-text-opacity));
}

.dark\:hover\:text-hacking-violet-lighter:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(143 110 217 / var(--tw-text-opacity));
Expand Down
56 changes: 56 additions & 0 deletions layouts/partials/components/post-card.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{{ $showFeaturedImage := and site.Params.show_featured_image_in_list .Params.featured_image }}
<div class="relative shadow-lg rounded-lg overflow-hidden h-full {{ if $showFeaturedImage }}bg-transparent{{ else }}bg-white dark:bg-hacking-slate{{ end }}">
{{ if $showFeaturedImage }}
<div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('{{ .Params.featured_image }}');"></div>
<div class="absolute inset-0 bg-black opacity-70 z-10"></div>
{{ end }}
<div class="relative z-20 p-6 flex flex-col h-full">
<!-- Tags at the top -->
{{ if .Params.tags }}
<div class="mb-4 flex flex-wrap">
{{ range .Params.tags }}
<a href="/tags/{{ . | urlize }}" class="inline-block bg-hacking-violet text-white text-xs px-2 py-1 rounded mr-2 mb-2">{{ . }}</a>
{{ end }}
</div>
{{ end }}

<a href="{{ .RelPermalink }}" class="block flex-grow">
<h3 class="text-xl font-semibold mb-2 {{ if $showFeaturedImage }}text-white{{ else }}text-hacking-midnight dark:text-white{{ end }} hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">{{ .Title }}</h3>

{{ $content := default .Summary .Description | plainify }}
<p class="{{ if $showFeaturedImage }}text-white{{ else }}text-neutral-600 dark:text-neutral-300{{ end }} mb-4">
{{ $content | truncate 120 }}
</p>
</a>

<!-- Author, Date and Category -->
<div class="flex flex-wrap items-center text-sm {{ if $showFeaturedImage }}text-neutral-300{{ else }}text-neutral-500{{ end }} mb-4">
{{ if .Params.author }}
<span class="font-bold text-lg mr-4">
By
<a href="/authors/{{ .Params.author | urlize }}" class="text-hacking-royal-lighter hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">
{{ .Params.author }}
</a>
</span>
{{ end }}

<span class="mr-4">
{{ .Date.Format "January 2, 2006" }}
</span>

{{ if .Params.category }}
<span class="mr-4">Category: <span class="font-semibold">{{ .Params.category }}</span></span>
{{ end }}
</div>

<!-- Reading Time -->
{{ if .ReadingTime }}
<div class="flex items-center text-sm {{ if $showFeaturedImage }}text-neutral-300{{ else }}text-neutral-500{{ end }}">
<span class="icon-[mdi-light--clock] w-4 h-4 mr-1"></span>
<span>{{ .ReadingTime }} min read</span>
</div>
{{ end }}

<span class="text-hacking-royal-lighter hover:underline mt-4">Read more</span>
</div>
</div>
59 changes: 5 additions & 54 deletions layouts/partials/components/recent-posts.html
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,11 @@
<section class="bg-white dark:bg-hacking-slate-darker py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-hacking-violet dark:text-hacking-violet-lighter text-center">Recent Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{{ $posts := where .Site.RegularPages "Section" "posts" }}
{{ range first 6 $posts }}
<div class="relative shadow-lg rounded-lg overflow-hidden h-full {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}bg-transparent{{ else }}bg-white dark:bg-hacking-slate{{ end }}">
{{ if and site.Params.show_featured_image_in_list .Params.featured_image }}
<div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('{{ .Params.featured_image }}');"></div>
<!-- Increased opacity for better readability -->
<div class="absolute inset-0 bg-black opacity-70 z-10"></div>
{{ end }}
<div class="relative z-20 p-6 flex flex-col h-full">
<!-- Tags at the top -->
{{ if .Params.tags }}
<div class="mb-4 flex flex-wrap">
{{ range .Params.tags }}
<a href="/tags/{{ . | urlize }}" class="inline-block bg-hacking-violet text-white text-xs px-2 py-1 rounded mr-2 mb-2">{{ . }}</a>
{{ end }}
</div>
{{ end }}

<a href="{{ .RelPermalink }}" class="block flex-grow">
<h3 class="text-xl font-semibold mb-2 {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-hacking-midnight dark:text-white{{ end }} hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">{{ .Title }}</h3>

{{ $content := default .Summary .Description | plainify }}
<p class="{{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-neutral-600 dark:text-neutral-300{{ end }} mb-4">
{{ $content | truncate 120 }}
</p>
</a>

<!-- Author and Category -->
<div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }} mb-4">
{{ if .Params.author }}
<span class="font-bold text-lg mr-4">
By
<a href="/authors/{{ .Params.author | urlize }}" class="hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300 text-hacking-royal-lighter">
{{ .Params.author }}
</a>
</span>
{{ end }}
{{ if .Params.category }}
<span class="mr-4">Category: <span class="font-semibold">{{ .Params.category }}</span></span>
{{ end }}
</div>

<!-- Reading Time -->
{{ if .ReadingTime }}
<div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }}">
<span class="icon-[mdi-light--clock] w-4 h-4 mr-1"></span>
<span>{{ .ReadingTime }} min read</span>
</div>
{{ end }}

<span class="text-hacking-violet dark:text-hacking-violet-lighter hover:underline mt-4">Read more</span>
</div>
</div>
{{ $posts := where .Site.RegularPages "Section" "posts" }}
{{ $postCount := len $posts }}
<div class="grid grid-cols-1 md:grid-cols-2 {{ if ge $postCount 8 }}lg:grid-cols-4{{ else if ge $postCount 4 }}lg:grid-cols-4{{ else }}lg:grid-cols-3{{ end }} gap-8">
{{ range first (cond (ge $postCount 8) 8 (cond (ge $postCount 4) 4 3)) $posts }}
{{ partial "components/post-card.html" . }}
{{ end }}
</div>
</div>
Expand Down
51 changes: 1 addition & 50 deletions layouts/posts/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,56 +13,7 @@ <h1 class="text-4xl md:text-6xl font-bold mb-4 text-center">{{ .Title }}</h1>
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{{ range .Pages }}
<div class="relative shadow-lg rounded-lg overflow-hidden h-full {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}bg-transparent{{ else }}bg-white dark:bg-hacking-slate{{ end }}">
{{ if and site.Params.show_featured_image_in_list .Params.featured_image }}
<div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('{{ .Params.featured_image }}');"></div>
<div class="absolute inset-0 bg-black opacity-70 z-10"></div>
{{ end }}
<div class="relative z-20 p-6 flex flex-col h-full">
<!-- Tags at the top -->
{{ if .Params.tags }}
<div class="mb-4 flex flex-wrap">
{{ range .Params.tags }}
<a href="/tags/{{ . | urlize }}" class="inline-block bg-hacking-violet text-white text-xs px-2 py-1 rounded mr-2 mb-2">{{ . }}</a>
{{ end }}
</div>
{{ end }}

<a href="{{ .RelPermalink }}" class="block flex-grow">
<h2 class="text-xl font-semibold mb-2 {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-hacking-midnight dark:text-white{{ end }} hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">{{ .Title }}</h2>

{{ $content := default .Summary .Description | plainify }}
<p class="{{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-neutral-600 dark:text-neutral-300{{ end }} mb-4">
{{ $content | truncate 120 }}
</p>
</a>

<!-- Author and Category -->
<div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }} mb-4">
{{ if .Params.author }}
<span class="font-bold text-lg mr-4">
By
<a href="/authors/{{ .Params.author | urlize }}" class="text-hacking-royal-lighter hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">
{{ .Params.author }}
</a>
</span>
{{ end }}
{{ if .Params.category }}
<span class="mr-4">Category: <span class="font-semibold">{{ .Params.category }}</span></span>
{{ end }}
</div>

<!-- Reading Time -->
{{ if .ReadingTime }}
<div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }}">
<span class="icon-[mdi-light--clock] w-4 h-4 mr-1"></span>
<span>{{ .ReadingTime }} min read</span>
</div>
{{ end }}

<span class="text-hacking-royal-lighter hover:underline mt-4">Read more</span>
</div>
</div>
{{ partial "components/post-card.html" . }}
{{ end }}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion layouts/posts/single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1 class="text-4xl font-bold text-white mb-4">{{ .Title }}</h1>
<span class="mr-4">{{ .Date.Format "January 2, 2006" }}</span>
<span class="mr-4">{{ .ReadingTime }} min read</span>
{{ with .Params.author }}
<span class="mr-4">By <a href="{{ "/authors/" | relLangURL }}{{ . | urlize }}" class="text-hacking-violet-lighter dark:text-hacking-violet-lighter hover:underline">{{ . }}</a></span>
<span class="mr-4">By <a href="{{ "/authors/" | relLangURL }}{{ . | urlize }}" class="text-hacking-voilet-darker dark:text-hacking-royal-darker hover:underline">{{ . }}</a></span>
{{ end }}
{{ with .Params.categories }}
<span class="mr-4">In
Expand Down

0 comments on commit 2522285

Please sign in to comment.