Skip to content

Commit 641aa62

Browse files
Merge pull request #2 from blizet/main
replace blog-data.json with direct markdown file reading
2 parents e6fe31b + 4e5e49d commit 641aa62

6 files changed

Lines changed: 213 additions & 248 deletions

File tree

app/a/[slug]/page.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { BlogPost, getPostBySlug, getAllPosts } from "@/lib/blog"
1+
import { getPostBySlugServer } from "@/lib/blog-server"
22
import BlogPostPage from "./BlogPostClient"
33
import { notFound } from "next/navigation"
4+
import articlesIndex from '../../../public/articles/articles-index.json'
45

56
export async function generateStaticParams() {
6-
const posts = getAllPosts()
7-
return posts.map((post) => ({ slug: post.slug }))
7+
// Use articles-index.json directly for static generation
8+
return articlesIndex.articles.map((article) => ({ slug: article.slug }))
89
}
910

1011
export default async function Page(props: { params: { slug: string } }) {
11-
const { slug } = props.params
12-
const post = getPostBySlug(slug)
12+
const { slug } = await props.params
13+
const post = getPostBySlugServer(slug)
1314

1415
if (!post) {
1516
notFound()

components/pagination.tsx

Lines changed: 101 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
"use client"
22

33
import { ChevronLeft, ChevronRight } from "lucide-react"
4+
import Link from "next/link"
45

56
interface PaginationProps {
67
currentPage: number
78
totalPages: number
89
hasNextPage: boolean
910
hasPrevPage: boolean
10-
onPageChange: (page: number) => void
11+
onPageChange?: (page: number) => void
1112
}
1213

1314
export default function Pagination({
@@ -38,69 +39,120 @@ export default function Pagination({
3839
return pages
3940
}
4041

41-
const handlePageClick = (page: number) => {
42-
// Always call onPageChange, even if it's the same page (for consistency)
43-
onPageChange(page)
44-
}
42+
// If onPageChange is provided, use it for client-side navigation
43+
if (onPageChange) {
44+
return (
45+
<div className="flex items-center justify-center gap-2 mt-12">
46+
{/* Previous Button */}
47+
<button
48+
onClick={() => onPageChange(currentPage - 1)}
49+
disabled={!hasPrevPage || currentPage <= 1}
50+
className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${
51+
hasPrevPage && currentPage > 1
52+
? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
53+
: "bg-gray-100 text-gray-400 cursor-not-allowed"
54+
}`}
55+
>
56+
<ChevronLeft className="w-4 h-4" />
57+
Previous
58+
</button>
4559

46-
const handlePrevious = () => {
47-
if (hasPrevPage && currentPage > 1) {
48-
onPageChange(currentPage - 1)
49-
}
50-
}
60+
{/* Page Numbers */}
61+
<div className="flex items-center gap-1">
62+
{getPageNumbers().map((pageNum) => (
63+
<button
64+
key={pageNum}
65+
onClick={() => onPageChange(pageNum)}
66+
className={`px-4 py-2 transition-colors ${
67+
pageNum === currentPage
68+
? "bg-gradient-to-r from-[#228B22] to-[#91A511] text-white shadow-md cursor-default"
69+
: "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer"
70+
}`}
71+
>
72+
{pageNum}
73+
</button>
74+
))}
75+
</div>
5176

52-
const handleNext = () => {
53-
if (hasNextPage && currentPage < totalPages) {
54-
onPageChange(currentPage + 1)
55-
}
77+
{/* Next Button */}
78+
<button
79+
onClick={() => onPageChange(currentPage + 1)}
80+
disabled={!hasNextPage || currentPage >= totalPages}
81+
className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${
82+
hasNextPage && currentPage < totalPages
83+
? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
84+
: "bg-gray-100 text-gray-400 cursor-not-allowed"
85+
}`}
86+
>
87+
Next
88+
<ChevronRight className="w-4 h-4" />
89+
</button>
90+
</div>
91+
)
5692
}
5793

94+
// Otherwise, use Link for server-side navigation
5895
return (
5996
<div className="flex items-center justify-center gap-2 mt-12">
6097
{/* Previous Button */}
61-
<button
62-
onClick={handlePrevious}
63-
disabled={!hasPrevPage || currentPage <= 1}
64-
className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${
65-
hasPrevPage && currentPage > 1
66-
? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
67-
: "bg-gray-100 text-gray-400 cursor-not-allowed"
68-
}`}
69-
>
70-
<ChevronLeft className="w-4 h-4" />
71-
Previous
72-
</button>
98+
{hasPrevPage && currentPage > 1 ? (
99+
<Link
100+
href={`/?page=${currentPage - 1}`}
101+
className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
102+
>
103+
<ChevronLeft className="w-4 h-4" />
104+
Previous
105+
</Link>
106+
) : (
107+
<button
108+
disabled
109+
className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 text-gray-400 cursor-not-allowed"
110+
>
111+
<ChevronLeft className="w-4 h-4" />
112+
Previous
113+
</button>
114+
)}
73115

74116
{/* Page Numbers */}
75117
<div className="flex items-center gap-1">
76118
{getPageNumbers().map((pageNum) => (
77-
<button
78-
key={pageNum}
79-
onClick={() => handlePageClick(pageNum)}
80-
className={`px-4 py-2 transition-colors ${
81-
pageNum === currentPage
82-
? "bg-gradient-to-r from-[#228B22] to-[#91A511] text-white shadow-md cursor-default"
83-
: "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer"
84-
}`}
85-
>
86-
{pageNum}
87-
</button>
119+
pageNum === currentPage ? (
120+
<span
121+
key={pageNum}
122+
className="px-4 py-2 bg-gradient-to-r from-[#228B22] to-[#91A511] text-white shadow-md cursor-default"
123+
>
124+
{pageNum}
125+
</span>
126+
) : (
127+
<Link
128+
key={pageNum}
129+
href={`/?page=${pageNum}`}
130+
className="px-4 py-2 transition-colors bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer"
131+
>
132+
{pageNum}
133+
</Link>
134+
)
88135
))}
89136
</div>
90137

91138
{/* Next Button */}
92-
<button
93-
onClick={handleNext}
94-
disabled={!hasNextPage || currentPage >= totalPages}
95-
className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${
96-
hasNextPage && currentPage < totalPages
97-
? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
98-
: "bg-gray-100 text-gray-400 cursor-not-allowed"
99-
}`}
100-
>
101-
Next
102-
<ChevronRight className="w-4 h-4" />
103-
</button>
139+
{hasNextPage && currentPage < totalPages ? (
140+
<Link
141+
href={`/?page=${currentPage + 1}`}
142+
className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer"
143+
>
144+
Next
145+
<ChevronRight className="w-4 h-4" />
146+
</Link>
147+
) : (
148+
<button
149+
disabled
150+
className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 text-gray-400 cursor-not-allowed"
151+
>
152+
Next
153+
<ChevronRight className="w-4 h-4" />
154+
</button>
155+
)}
104156
</div>
105157
)
106158
}

0 commit comments

Comments
 (0)