Fix: Paginate adds unexpected trailing slash on index route (withastr…

…o#6676) * fix: remove unexpected trailing / on paginate * test: next and prev href * chore: changesset * fix: correct empty string to '/' for index route * edit: and typo Co-authored-by: Happydev <[email protected]> * fix: tests not running! --------- Co-authored-by: Happydev <[email protected]>
cOtomoo · Mar 28, 2023 · 5e33c51 · 5e33c51
1 parent 239b9a2
commit 5e33c51
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 20 deletions.
diff --git a/.changeset/eight-humans-push.md b/.changeset/eight-humans-push.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix next and previous links for index routes when using pagination
diff --git a/packages/astro/src/core/render/paginate.ts b/packages/astro/src/core/render/paginate.ts
@@ -39,6 +39,21 @@ export function generatePaginateFunction(routeMatch: RouteData): PaginateFunctio
 				...additionalParams,
 				[paramName]: includesFirstPageNumber || pageNum > 1 ? String(pageNum) : undefined,
 			};
+			const current = correctIndexRoute(routeMatch.generate({ ...params }));
+			const next =
+				pageNum === lastPage
+					? undefined
+					: correctIndexRoute(routeMatch.generate({ ...params, page: String(pageNum + 1) }));
+			const prev =
+				pageNum === 1
+					? undefined
+					: correctIndexRoute(
+							routeMatch.generate({
+								...params,
+								page:
+									!includesFirstPageNumber && pageNum - 1 === 1 ? undefined : String(pageNum - 1),
+							})
+					  );
 			return {
 				params,
 				props: {
@@ -51,25 +66,21 @@ export function generatePaginateFunction(routeMatch: RouteData): PaginateFunctio
 						total: data.length,
 						currentPage: pageNum,
 						lastPage: lastPage,
-						url: {
-							current: routeMatch.generate({ ...params }),
-							next:
-								pageNum === lastPage
-									? undefined
-									: routeMatch.generate({ ...params, page: String(pageNum + 1) }),
-							prev:
-								pageNum === 1
-									? undefined
-									: routeMatch.generate({
-											...params,
-											page:
-												!includesFirstPageNumber && pageNum - 1 === 1 ? '' : String(pageNum - 1),
-									  }),
-						},
+						url: { current, next, prev },
 					} as Page,
 				},
 			};
 		});
 		return result;
 	};
 }
+
+function correctIndexRoute(route: string) {
+	// `routeMatch.generate` avoids appending `/`
+	// unless `trailingSlash: 'always'` is configured.
+	// This means an empty string is possible for the index route.
+	if (route === '') {
+		return '/';
+	}
+	return route;
+}
diff --git a/packages/astro/test/astro-pagination.test.js b/packages/astro/test/astro-pagination.test.js
@@ -41,12 +41,28 @@ describe('Pagination', () => {
 			{ color: 'blue', p: '2' },
 		];
 		await Promise.all(
-			params.map(async ({ color, p }) => {
+			params.map(async ({ color, p }, idx) => {
 				const html = await fixture.readFile(`/posts/${color}/${p}/index.html`);
 				const $ = cheerio.load(html);
-				expect($('#page-a').text()).to.equal(p);
-				expect($('#page-b').text()).to.equal(p);
+				expect($('#page-param').text()).to.equal(p);
+				expect($('#currentPage').text()).to.equal(p);
 				expect($('#filter').text()).to.equal(color);
+
+				const prevHref = $('#prev').attr('href');
+				const nextHref = $('#next').attr('href');
+
+				if (color === 'red') {
+					expect(prevHref).to.be.undefined;
+					expect(nextHref).to.be.undefined;
+				}
+				if (color === 'blue' && p === '1') {
+					expect(prevHref).to.be.undefined;
+					expect(nextHref).to.equal('/posts/blue/2');
+				}
+				if (color === 'blue' && p === '2') {
+					expect(prevHref).to.equal('/posts/blue/1');
+					expect(nextHref).to.be.undefined;
+				}
 			})
 		);
 	});

diff --git a/packages/astro/test/fixtures/astro-pagination/src/pages/posts/[slug]/[page].astro b/packages/astro/test/fixtures/astro-pagination/src/pages/posts/[slug]/[page].astro
@@ -21,8 +21,10 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <link rel="canonical" href={canonicalURL.href} />
   </head>
   <body>
-    <div id="page-a">{params.page}</div>
-    <div id="page-b">{page.currentPage}</div>
+    <div id="page-param">{params.page}</div>
+    <div id="currentPage">{page.currentPage}</div>
     <div id="filter">{filter}</div>
+		<a href={page.url.prev} id="prev">Previous</a>
+		<a href={page.url.next} id="next">Next</a>
   </body>
 </html>