z0x/blog.z0x.ca
Code Actions

fix: inverted PostNavigation logic

Browse source
This commit is contained in:
jason 2024-10-14 21:58:04 -07:00
parent dc05cb25a6
commit 98adfca816
4 changed files with 556 additions and 713 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1242
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "astro-erudite", "name": "astro-erudite",
"type": "module", "type": "module",
"version": "1.1.7", "version": "1.1.8",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",

21
src/components/PostNavigation.astro
View file

@ -9,13 +9,13 @@ const { prevPost, nextPost } = Astro.props
<div class="col-start-2 flex flex-col gap-4 sm:flex-row"> <div class="col-start-2 flex flex-col gap-4 sm:flex-row">
<Link <Link
href={prevPost ? `/blog/${prevPost.slug}` : '#'} href={nextPost ? `/blog/${nextPost.slug}` : '#'}
class={cn( class={cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),
'rounded-xl group flex items-center justify-start w-full sm:w-1/2 h-fit', 'rounded-xl group flex items-center justify-start w-full sm:w-1/2 h-fit',
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed', !nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)} )}
aria-disabled={!prevPost} aria-disabled={!nextPost}
> >
<div class="mr-2 flex-shrink-0"> <div class="mr-2 flex-shrink-0">
<Icon <Icon
@ -24,25 +24,26 @@ const { prevPost, nextPost } = Astro.props
/> />
</div> </div>
<div class="flex flex-col items-start overflow-hidden"> <div class="flex flex-col items-start overflow-hidden">
<span class="text-left text-xs text-muted-foreground">Previous Post</span> <span class="text-left text-xs text-muted-foreground">Latest Post</span>
<span class="w-full truncate text-left text-sm" <span class="w-full truncate text-left text-sm"
>{prevPost?.data.title || 'Latest post!'}</span >{nextPost?.data.title || 'Last post!'}</span
> >
</div> </div>
</Link> </Link>
<Link <Link
href={nextPost ? `/blog/${nextPost.slug}` : '#'} href={prevPost ? `/blog/${prevPost.slug}` : '#'}
class={cn( class={cn(
buttonVariants({ variant: 'outline' }), buttonVariants({ variant: 'outline' }),
'rounded-xl group flex items-center justify-end w-full sm:w-1/2 h-fit', 'rounded-xl group flex items-center justify-end w-full sm:w-1/2 h-fit',
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed', !prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)} )}
aria-disabled={!nextPost} aria-disabled={!prevPost}
> >
<div class="flex flex-col items-end overflow-hidden"> <div class="flex flex-col items-end overflow-hidden">
<span class="text-right text-xs text-muted-foreground">Next Post</span> <span class="text-right text-xs text-muted-foreground">Previous Post</span
>
<span class="w-full truncate text-right text-sm" <span class="w-full truncate text-right text-sm"
>{nextPost?.data.title || 'Last post!'}</span >{prevPost?.data.title || 'Latest post!'}</span
> >
</div> </div>
<div class="ml-2 flex-shrink-0"> <div class="ml-2 flex-shrink-0">

4
src/pages/blog/[...slug].astro
View file

@ -31,14 +31,14 @@ function getPostIndex(slug: string): number {
return posts.findIndex((post) => post.slug === slug) return posts.findIndex((post) => post.slug === slug)
} }
function getNextPost(slug: string): Props | null { function getPrevPost(slug: string): Props | null {
const postIndex = getPostIndex(slug) const postIndex = getPostIndex(slug)
return postIndex !== -1 && postIndex < posts.length - 1 return postIndex !== -1 && postIndex < posts.length - 1
? posts[postIndex + 1] ? posts[postIndex + 1]
: null : null
} }
function getPrevPost(slug: string): Props | null { function getNextPost(slug: string): Props | null {
const postIndex = getPostIndex(slug) const postIndex = getPostIndex(slug)
return postIndex > 0 ? posts[postIndex - 1] : null return postIndex > 0 ? posts[postIndex - 1] : null
} }