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

32
components/blog/PostNavigation.tsx
View File

@@ -5,43 +5,47 @@ import { PostMdx } from '@/lib/blog';
interface PostNavigationProps {
prev: PostMdx | null;
next: PostMdx | null;
isPrevRandom?: boolean;
isNextRandom?: boolean;
locale: string;
}
export default function PostNavigation({ prev, next, locale }: PostNavigationProps) {
export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom, locale }: PostNavigationProps) {
if (!prev && !next) return null;
return (
<div className="grid grid-cols-1 md:grid-cols-2 w-full mt-16">
{/* Previous Post (Older) */}
{prev ? (
<Link
<Link
href={`/${locale}/blog/${prev.slug}`}
className="group relative h-64 md:h-80 overflow-hidden block"
>
{/* Background Image */}
{prev.frontmatter.featuredImage ? (
<div
<div
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
style={{ backgroundImage: `url(${prev.frontmatter.featuredImage})` }}
/>
) : (
<div className="absolute inset-0 bg-neutral-100" />
)}
{/* Overlay */}
<div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
{/* Content */}
<div className="absolute inset-0 flex flex-col justify-center p-8 md:p-12 text-white z-10">
<span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
{locale === 'de' ? 'Vorheriger Beitrag' : 'Previous Post'}
{isPrevRandom
? (locale === 'de' ? 'Weiterer Artikel' : 'More Article')
: (locale === 'de' ? 'Vorheriger Beitrag' : 'Previous Post')}
</span>
<h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
{prev.frontmatter.title}
</h3>
</div>
{/* Arrow Icon */}
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -55,33 +59,35 @@ export default function PostNavigation({ prev, next, locale }: PostNavigationPro
{/* Next Post (Newer) */}
{next ? (
<Link
<Link
href={`/${locale}/blog/${next.slug}`}
className="group relative h-64 md:h-80 overflow-hidden block"
>
{/* Background Image */}
{next.frontmatter.featuredImage ? (
<div
<div
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
style={{ backgroundImage: `url(${next.frontmatter.featuredImage})` }}
/>
) : (
<div className="absolute inset-0 bg-neutral-100" />
)}
{/* Overlay */}
<div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
{/* Content */}
<div className="absolute inset-0 flex flex-col justify-center items-end text-right p-8 md:p-12 text-white z-10">
<span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
{locale === 'de' ? 'Nächster Beitrag' : 'Next Post'}
{isNextRandom
? (locale === 'de' ? 'Weiterer Artikel' : 'More Article')
: (locale === 'de' ? 'Nächster Beitrag' : 'Next Post')}
</span>
<h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
{next.frontmatter.title}
</h3>
</div>
{/* Arrow Icon */}
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:translate-x-2 transition-all duration-300">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">