Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
Code Issues Activity

Fix: Paginate adds unexpected trailing slash on index route (#6676)

Browse source 
* 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>
This commit is contained in:
Ben Holmes 2023-03-28 16:05:35 -04:00 committed by GitHub
parent 239b9a2fb8
commit 5e33c51a9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/eight-humans-push.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix next and previous links for index routes when using pagination

41
packages/astro/src/core/render/paginate.ts
View file

@ -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;
}

22
packages/astro/test/astro-pagination.test.js
View file

@ -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;
}
})
);
});

6
packages/astro/test/fixtures/astro-pagination/src/pages/posts/[slug]/[page].astro vendored
View file

@ -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>