From 5e33c51a9c3c3b731a33f2c4a020a36d1471b78b Mon Sep 17 00:00:00 2001
From: Ben Holmes <hey@bholmes.dev>
Date: Tue, 28 Mar 2023 16:05:35 -0400
Subject: [PATCH] Fix: Paginate adds unexpected trailing slash on index route
 (#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 <81974850+MoustaphaDev@users.noreply.github.com>

* fix: tests not running!

---------

Co-authored-by: Happydev <81974850+MoustaphaDev@users.noreply.github.com>
---
 .changeset/eight-humans-push.md               |  5 +++
 packages/astro/src/core/render/paginate.ts    | 41 ++++++++++++-------
 packages/astro/test/astro-pagination.test.js  | 22 ++++++++--
 .../src/pages/posts/[slug]/[page].astro       |  6 ++-
 4 files changed, 54 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/eight-humans-push.md

diff --git a/.changeset/eight-humans-push.md b/.changeset/eight-humans-push.md
new file mode 100644
index 0000000000..bb37e6a3ae
--- /dev/null
+++ 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
index 7c9d06e0de..dffabe1782 100644
--- 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,21 +66,7 @@ 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,
 				},
 			};
@@ -73,3 +74,13 @@ export function generatePaginateFunction(routeMatch: RouteData): PaginateFunctio
 		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
index 563b66492e..994f8e0ac9 100644
--- 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
index 49a2f702e9..c4cc397390 100644
--- 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>