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",
"type": "module",
"version": "1.1.7",
"version": "1.1.8",
"private": true,
"scripts": {
"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">
<Link
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'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">
<Icon
@ -24,25 +24,26 @@ const { prevPost, nextPost } = Astro.props
/>
</div>
<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"
>{prevPost?.data.title || 'Latest post!'}</span
>{nextPost?.data.title || 'Last post!'}</span
>
</div>
</Link>
<Link
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'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">
<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"
>{nextPost?.data.title || 'Last post!'}</span
>{prevPost?.data.title || 'Latest post!'}</span
>
</div>
<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)
}
function getNextPost(slug: string): Props | null {
function getPrevPost(slug: string): Props | null {
const postIndex = getPostIndex(slug)
return postIndex !== -1 && postIndex < posts.length - 1
? posts[postIndex + 1]
: null
}
function getPrevPost(slug: string): Props | null {
function getNextPost(slug: string): Props | null {
const postIndex = getPostIndex(slug)
return postIndex > 0 ? posts[postIndex - 1] : null
}