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 */}