mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-21 19:35:41 +00:00
Added Article navigation
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m42s
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m42s
This commit is contained in:
parent
9bd9188921
commit
339d7cdcf6
7
app/api/articles/route.ts
Normal file
7
app/api/articles/route.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import {getAllArticles} from '@/lib/getAllArticles'
|
||||||
|
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const articles = await getAllArticles()
|
||||||
|
|
||||||
|
return new Response(JSON.stringify(articles), {status: 200})
|
||||||
|
}
|
@ -5,6 +5,7 @@ import {Prose} from '@/components/ui/Prose'
|
|||||||
import {Views} from '@/components/ui/Views'
|
import {Views} from '@/components/ui/Views'
|
||||||
import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
|
import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
|
||||||
import {formatDate} from '@/lib/formatDate'
|
import {formatDate} from '@/lib/formatDate'
|
||||||
|
import ArticleNav from '@/components/ui/ArticleNav'
|
||||||
|
|
||||||
type ArticleLayout = {
|
type ArticleLayout = {
|
||||||
title: string
|
title: string
|
||||||
@ -12,7 +13,6 @@ type ArticleLayout = {
|
|||||||
description: string
|
description: string
|
||||||
slug: string
|
slug: string
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
ogImage?: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const gradients = [
|
const gradients = [
|
||||||
@ -26,10 +26,8 @@ const gradients = [
|
|||||||
export function ArticleLayout({
|
export function ArticleLayout({
|
||||||
title,
|
title,
|
||||||
date,
|
date,
|
||||||
description,
|
|
||||||
slug,
|
slug,
|
||||||
children,
|
children,
|
||||||
ogImage
|
|
||||||
}: ArticleLayout) {
|
}: ArticleLayout) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -60,6 +58,7 @@ export function ArticleLayout({
|
|||||||
</header>
|
</header>
|
||||||
<Prose className="mt-8" data-mdx-content>{children}</Prose>
|
<Prose className="mt-8" data-mdx-content>{children}</Prose>
|
||||||
</article>
|
</article>
|
||||||
|
<ArticleNav slug={slug}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
86
components/ui/ArticleNav.tsx
Normal file
86
components/ui/ArticleNav.tsx
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, {ReactElement, useEffect, useState} from 'react'
|
||||||
|
import fetcher from '@/lib/fetcher'
|
||||||
|
import useSWR from 'swr'
|
||||||
|
import {Card} from '@/components/ui/Card'
|
||||||
|
|
||||||
|
|
||||||
|
type Article = {
|
||||||
|
slug: string
|
||||||
|
authors: string
|
||||||
|
title: string
|
||||||
|
date: string
|
||||||
|
description: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type FetchArticlesResponse = {
|
||||||
|
data: Article[]
|
||||||
|
error: string
|
||||||
|
isLoading: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type ArticleNavProps = {
|
||||||
|
slug: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type PaginationProps = {
|
||||||
|
next: Article | null
|
||||||
|
prev: Article | null
|
||||||
|
}
|
||||||
|
|
||||||
|
function useFetchArticles() {
|
||||||
|
const {data, error, isLoading} = useSWR(`/api/articles/`, fetcher) as FetchArticlesResponse
|
||||||
|
|
||||||
|
return {
|
||||||
|
articles: data,
|
||||||
|
isLoading,
|
||||||
|
isError: error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ArticleNav({slug}: ArticleNavProps): ReactElement | null {
|
||||||
|
const {articles, isLoading, isError} = useFetchArticles()
|
||||||
|
const [{next, prev}, setPagination]
|
||||||
|
= useState<PaginationProps>({next: null, prev: null})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const findAdjacentArticles = (articles: Article[], slug: string) => {
|
||||||
|
if (articles) {
|
||||||
|
const index = articles.findIndex(article => article.slug === slug)
|
||||||
|
const next = index > 0 ? articles[index - 1] : null
|
||||||
|
const prev = index < articles.length - 1 ? articles[index + 1] : null
|
||||||
|
|
||||||
|
setPagination({next, prev})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
findAdjacentArticles(articles, slug)
|
||||||
|
}, [articles, slug])
|
||||||
|
|
||||||
|
if (isError) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="mt-24">
|
||||||
|
<ul
|
||||||
|
role="list"
|
||||||
|
className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2"
|
||||||
|
>
|
||||||
|
{prev !== null &&
|
||||||
|
<Card as="li" key={prev.slug}>
|
||||||
|
<h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-100">
|
||||||
|
<Card.Link href={`/writing/${prev.slug}`}>{prev.title}</Card.Link>
|
||||||
|
</h2>
|
||||||
|
</Card>
|
||||||
|
}
|
||||||
|
{next !== null &&
|
||||||
|
<Card as="li" key={next.slug}>
|
||||||
|
<h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-100">
|
||||||
|
<Card.Link href={`/writing/${next.slug}`}>{next.title}</Card.Link>
|
||||||
|
</h2>
|
||||||
|
</Card>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user