Skip to content

feat(articles): visual tile on article cards with featured_image fallback #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HeyItsGilbert merged 2 commits into from
Jun 23, 2026
Merged

feat(articles): visual tile on article cards with featured_image fallback #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f85545c
style(cards): plainify and truncate summaries for consistent card sizing
HeyItsGilbert Jun 23, 2026
52bd3fe
feat(articles): add visual tile to article cards with featured_image …
HeyItsGilbert Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions themes/powershell-community/layouts/_default/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ <h2 class="text-xl font-bold text-gray-900 mb-3">
{{ .Title }}
</a>
</h2>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary }}</p>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary | plainify | truncate 300 }}</p>
<div class="flex items-center space-x-4">
<a href="{{ .RelPermalink }}"
class="inline-flex items-center bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors duration-200">
Expand All @@ -81,7 +81,27 @@ <h2 class="text-xl font-bold text-gray-900 mb-3">

{{ else }}
<!-- Regular Article Layout -->
<div class="p-6">
<div class="lg:flex">
<div class="lg:w-1/4 p-6 lg:pr-0">
{{ with .Params.featured_image }}
<a href="{{ $.RelPermalink }}" class="block aspect-square rounded-lg overflow-hidden border border-gray-200 hover:border-blue-300 transition-colors duration-200">
<img src="{{ . | relURL }}" alt="{{ $.Title }}" loading="lazy" class="w-full h-full object-cover">
</a>
{{ else }}
<a href="{{ .RelPermalink }}" class="block aspect-square bg-gray-900 rounded-lg p-4 flex flex-col justify-center border border-blue-400 hover:border-blue-300 transition-colors duration-200">
<div class="flex space-x-1.5 mb-3">
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
</div>
<div class="font-mono text-xs">
<span class="text-blue-400">PS C:\&gt;</span>
<div class="text-blue-300 mt-2 line-clamp-3">{{ with .Params.categories }}{{ index . 0 }}{{ else }}Get-Article{{ end }}</div>
</div>
</a>
{{ end }}
</div>
<div class="lg:w-3/4 p-6 lg:pl-8">
<div class="flex items-center justify-between text-sm text-gray-500 mb-3">
<div class="flex items-center space-x-3">
<time>{{ .Date.Format "Jan 2, 2006" }}</time>
Expand All @@ -103,7 +123,7 @@ <h2 class="text-xl font-bold text-gray-900 mb-3">
</a>
</h2>

<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary }}</p>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary | plainify | truncate 300 }}</p>

<div class="flex items-center justify-between">
<a href="{{ .RelPermalink }}"
Expand All @@ -122,6 +142,7 @@ <h2 class="text-xl font-bold text-gray-900 mb-3">
</div>
{{ end }}
</div>
</div>
</div>
{{ end }}
</article>
Expand Down
4 changes: 2 additions & 2 deletions themes/powershell-community/layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ <h3 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
{{ .Title }}
</a>
</h3>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary }}</p>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary | plainify | truncate 300 }}</p>
<a href="{{ .RelPermalink }}"
class="inline-flex items-center text-blue-600 font-medium hover:text-blue-700">
Listen Now <i class="fas fa-play ml-2"></i>
Expand Down Expand Up @@ -211,7 +211,7 @@ <h3 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
{{ .Title }}
</a>
</h3>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary }}</p>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary | plainify | truncate 300 }}</p>
{{ with .Params.author }}
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-user-circle mr-2"></i>
Expand Down
2 changes: 1 addition & 1 deletion themes/powershell-community/layouts/podcast/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h2 class="text-xl lg:text-2xl font-bold text-gray-900 mb-3">
{{ .Title }}
</a>
</h2>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary }}</p>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary | plainify | truncate 300 }}</p>
<div class="flex flex-wrap items-center gap-4">
<a href="{{ .RelPermalink }}"
class="inline-flex items-center bg-purple-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-purple-700 transition-colors duration-200">
Expand Down
4 changes: 2 additions & 2 deletions themes/powershell-community/layouts/taxonomy/author.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ <h2 class="text-xl lg:text-2xl font-bold text-gray-900 mb-3">
{{ .Title }}
</a>
</h2>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary }}</p>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary | plainify | truncate 300 }}</p>
<div class="flex flex-wrap items-center gap-4">
<a href="{{ .RelPermalink }}"
class="inline-flex items-center bg-purple-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-purple-700 transition-colors duration-200">
Expand Down Expand Up @@ -133,7 +133,7 @@ <h2 class="text-xl lg:text-2xl font-bold text-gray-900 mb-3">
{{ .Title }}
</a>
</h2>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary }}</p>
<p class="text-gray-600 mb-4 line-clamp-3">{{ .Summary | plainify | truncate 300 }}</p>
<div class="flex flex-wrap items-center gap-4">
<a href="{{ .RelPermalink }}"
class="inline-flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors duration-200">
Expand Down
Loading