mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(blog): show random fallback articles in post footer navigation instead of blank spaces
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 14s
Details
Build & Deploy / 🧪 QA (push) Successful in 6m40s
Details
Build & Deploy / 🏗️ Build (push) Successful in 8m28s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 29s
Details
Build & Deploy / 🧪 Smoke Test (push) Successful in 55s
Details
Build & Deploy / ⚡ Lighthouse (push) Successful in 7m8s
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-21 18:53:10 +01:00
parent 21288a4a45
commit 678c803408
5 changed files with 95 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/[locale]/blog/page.tsx
View File

@@ -62,7 +62,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{featuredPost && featuredPost.frontmatter.featuredImage && (
<>
<Image
src={featuredPost.frontmatter.featuredImage}
src={`${featuredPost.frontmatter.featuredImage}?gravity=obj:face`}
alt={featuredPost.frontmatter.title}
fill
className="absolute inset-0 w-full h-full object-cover opacity-40 md:opacity-60"
@@ -80,8 +80,8 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{featuredPost &&
(new Date(featuredPost.frontmatter.date) > new Date() ||
featuredPost.frontmatter.public === false) && (
<Badge variant="accent" className="bg-orange-500 text-white border-none">
Preview
<Badge variant="neutral" className="border border-white/30 bg-transparent text-white/80 shadow-none">
Draft Preview
</Badge>
)}
</div>
@@ -160,7 +160,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{post.frontmatter.featuredImage && (
<div className="relative h-48 md:h-72 overflow-hidden">
<Image
src={post.frontmatter.featuredImage}
src={`${post.frontmatter.featuredImage}?gravity=obj:face`}
alt={post.frontmatter.title}
fill
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
@@ -175,24 +175,22 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{post.frontmatter.category}
</Badge>
)}
{(new Date(post.frontmatter.date) > new Date() ||
post.frontmatter.public === false) && (
<Badge
variant="accent"
className="absolute top-3 right-3 md:top-6 md:right-6 shadow-lg bg-orange-500 text-white border-none"
>
Preview
</Badge>
)}
</div>
)}
<div className="p-5 md:p-10 flex flex-col flex-1">
<div className="text-[10px] md:text-sm font-bold text-accent-dark mb-2 md:mb-4 tracking-widest uppercase">
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
<div className="flex items-center gap-3 text-[10px] md:text-sm font-bold text-accent-dark mb-2 md:mb-4 tracking-widest uppercase">
<span>
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</span>
{(new Date(post.frontmatter.date) > new Date() ||
post.frontmatter.public === false) && (
<span className="px-1.5 py-0.5 border border-current rounded-sm text-[9px] md:text-xs">Draft</span>
)}
</div>
<h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-2 leading-tight">
{post.frontmatter.title}