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 { TableOfContents } from '@/components/post/TableOfContents'
import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts' import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
import { slugify } from '@/utils/slug' 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 type { Metadata } from 'next'
import Link from 'next/link' import Link from 'next/link'
@ -126,26 +126,39 @@ export default async function Post({ params }: { params: Promise<{ slug: string
/> />
</div> </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 ? ( {previous ? (
<Link <Link
href={`/posts/${previous.slug}`} 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> </Link>
) : ( ) : (
<div /> <div className="hidden sm:block" />
)} )}
{next ? ( {next ? (
<Link <Link
href={`/posts/${next.slug}`} 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> </Link>
) : ( ) : (
<div /> <div className="hidden sm:block" />
)} )}
</div> </div>
</article> </article>

8
lib/posts.tsx
View file

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