HangerThem/blog.hangerthem.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better post navigation

Browse source
This commit is contained in:
HangerThem 2026-08-04 11:45:46 +02:00
parent cbb148d0af
commit 729d3ae611
2 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/posts/[slug]/page.tsx
View file

@ -4,7 +4,7 @@ import { ShareLinks } from '@/components/post/ShareLinks'
import { TableOfContents } from '@/components/post/TableOfContents'
import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
import { slugify } from '@/utils/slug'
import { Pencil, SendHorizonal } from 'lucide-react'
import { ArrowLeft, ArrowRight, Pencil, SendHorizonal } from 'lucide-react'
import type { Metadata } from 'next'
import Link from 'next/link'
@ -126,26 +126,39 @@ export default async function Post({ params }: { params: Promise<{ slug: string
/>
</div>
<div className="mt-8 flex justify-between">
<div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 border-t border-border pt-8">
{previous ? (
<Link
href={`/posts/${previous.slug}`}
className="text-accent hover:underline font-sm mb-2 block"
className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70"
>
&larr; {previous.title}
<span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide">
<ArrowLeft className="w-3 h-3 shrink-0 transition-transform group-hover:-translate-x-1" />
Previous
</span>
<span className="text-accent font-medium group-hover:underline line-clamp-2">
{previous.title}
</span>
</Link>
) : (
<div />
<div className="hidden sm:block" />
)}
{next ? (
<Link
href={`/posts/${next.slug}`}
className="text-accent hover:underline font-sm mb-2 block"
className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70 sm:text-right"
>
{next.title} &rarr;
<span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide sm:justify-end">
Next
<ArrowRight className="w-3 h-3 shrink-0 transition-transform group-hover:translate-x-1" />
</span>
<span className="text-accent font-medium group-hover:underline line-clamp-2">
{next.title}
</span>
</Link>
) : (
<div />
<div className="hidden sm:block" />
)}
</div>
</article>

8
lib/posts.tsx
View file

@ -56,8 +56,8 @@ export function getNextAndPreviousPosts(slug: string): {
} {
const posts = getAllPostsMeta()
const index = posts.findIndex((post) => post.slug === slug)
const next = index < posts.length - 1 ? posts[index + 1] : null
const previous = index > 0 ? posts[index - 1] : null
const previous = index < posts.length - 1 ? posts[index + 1] : null
const next = index > 0 ? posts[index - 1] : null
return { next, previous }
}
@ -99,9 +99,7 @@ export async function getPostBySlug(slug: string, postDirectory: string = postsD
img: ({ src, alt }: { src: string; alt: string }) => <ImageWrapper src={src} alt={alt} />,
a: ({ href, children }: { href: string; children: ReactNode }) =>
href?.startsWith('http') ? (
<ExternalLink href={href}>
{children}
</ExternalLink>
<ExternalLink href={href}>{children}</ExternalLink>
) : (
<Link href={href}>{children}</Link>
),