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

22
app/[locale]/blog/[slug]/page.tsx
View File

@@ -54,7 +54,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
const { locale, slug } = await params;
setRequestLocale(locale);
const post = await getPostBySlug(slug, locale);
const { prev, next } = await getAdjacentPosts(slug, locale);
const { prev, next, isPrevRandom, isNextRandom } = await getAdjacentPosts(slug, locale);
if (!post) {
notFound();
@@ -70,11 +70,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
category={post.frontmatter.category}
readingTime={getReadingTime(post.content)}
/>
{(new Date(post.frontmatter.date) > new Date() || post.frontmatter.public === false) && (
<div className="bg-orange-500 text-white text-center py-2 px-4 font-bold text-sm tracking-wider uppercase relative z-50">
Preview (Not visible in production)
</div>
)}
{/* Featured Image Header */}
{post.frontmatter.featuredImage ? (
<div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
@@ -114,6 +110,12 @@ export default async function BlogPost({ params }: BlogPostProps) {
</time>
<span className="w-1 h-1 bg-white/30 rounded-full" />
<span>{getReadingTime(post.content)} min read</span>
{(new Date(post.frontmatter.date) > new Date() || post.frontmatter.public === false) && (
<>
<span className="w-1 h-1 bg-white/30 rounded-full" />
<span className="px-2 py-0.5 border border-white/40 text-white/80 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">Draft Preview</span>
</>
)}
</div>
</div>
</div>
@@ -142,6 +144,12 @@ export default async function BlogPost({ params }: BlogPostProps) {
</time>
<span className="w-1 h-1 bg-neutral-300 rounded-full" />
<span>{getReadingTime(post.content)} min read</span>
{(new Date(post.frontmatter.date) > new Date() || post.frontmatter.public === false) && (
<>
<span className="w-1 h-1 bg-neutral-300 rounded-full" />
<span className="px-2 py-0.5 border border-orange-500/50 text-orange-600 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">Draft Preview</span>
</>
)}
</div>
</div>
</header>
@@ -173,7 +181,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
{/* Post Navigation */}
<div className="mt-16">
<PostNavigation prev={prev} next={next} locale={locale} />
<PostNavigation prev={prev} next={next} isPrevRandom={isPrevRandom} isNextRandom={isNextRandom} locale={locale} />
</div>
{/* Back to blog link */}

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}