Open PxlSyl opened 9 months ago
timlrx
commented
9 months ago Yes, you could include a pagination component like ListLayout or implement some kind of infinite scrolling. Would be happy to take a look at your solution when you are done, but I don't think it's a critical feature that is really needed unless you are creating tags wth 100+ posts.
PxlSyl
commented
9 months ago Okay thanks, not done yet, will try with pagination (have an idea about how to do it)
P.S: If you want to have a look, I've added formsrpee support for email and contact
brohvis
commented
6 months ago Hey guys! I was just poking around to see if anyone had posted any issues I could help out with or see if there were any updates I could utilize, so excuse my Padawan level GitHub knowledge over here but I was able to add pagination and style it pretty well with the following code.
The included SVG's are from HeroIcons but I tend to cannibalize them right into my code for maximum control. Feel free to use or modify, I'm not quite done with my blog so I haven't added it to the readme just yet. Cheers!
interface PaginationProps {
totalPages: number
currentPage: number
}
interface ListLayoutProps {
posts: CoreContent<Blog>[]
title: string
initialDisplayPosts?: CoreContent<Blog>[]
pagination?: PaginationProps
}
function Pagination({ totalPages, currentPage }: PaginationProps) {
const pathname = usePathname()
const basePath = pathname.split('/')[1]
const prevPage = currentPage - 1 > 0
const nextPage = currentPage + 1 <= totalPages
const pageNumbers: number[] = [currentPage]
// @ts-ignore
if (currentPage > 1 && prevPage && currentPage - 1 != prevPage) {
pageNumbers.unshift(currentPage - 1)
}
if (nextPage && currentPage + 1 < totalPages) {
pageNumbers.push(currentPage + 1)
}
return (
<div className="space-y-2 pb-4 pt-2 md:space-y-5">
<nav aria-label="pagination" className="py-2">
<ul className="list-style-none flex justify-center">
{currentPage !== 1 ? (
<Link href={`/${basePath}/`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
clipRule="evenodd"
/>
</svg>
First
</div>
</Link>
) : (
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
{' '}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
clipRule="evenodd"
/>
</svg>
First
</div>
)}
{prevPage && (
<div>
{currentPage - 1 === 0 ? (
<Link href={`/${basePath}/page/${currentPage - 1}`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
clipRule="evenodd"
/>
</svg>
Back
</div>
</Link>
) : (
<Link href={`/${basePath}/page/${currentPage - 1}`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
clipRule="evenodd"
/>
</svg>
Back
</div>
</Link>
)}
</div>
)}
{!prevPage && (
<div>
{currentPage - 1 === 0 && (
<Link href={`/${basePath}/page/${currentPage - 1}`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
clipRule="evenodd"
/>
</svg>
Back
</div>
</Link>
)}
</div>
)}
{prevPage && (
<div>
{currentPage - 1 === 0 ? (
<Link href={`/${basePath}/page/${currentPage - 1}`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
clipRule="evenodd"
/>
</svg>
Back
</div>
</Link>
) : (
<Link href={`/${basePath}/page/${currentPage - 1}`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
{currentPage - 1}
</div>
</Link>
)}
</div>
)}
<div aria-current={currentPage === currentPage ? 'page' : undefined}>
<Link href={`${basePath}/page/${currentPage}`}>
<div
className={`relative block rounded bg-transparent px-3 py-1.5 text-xs ${'rounded-xl border border-primary-600 bg-neutral-100 font-bold text-primary-600 dark:bg-neutral-800'} transition-all duration-300`}
>
{currentPage} {/* Display the current page number */}
</div>
</Link>
</div>
{nextPage && (
<Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
<div
className={`relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white`}
>
{currentPage + 1}
</div>
</Link>
)}
{currentPage !== totalPages ? (
<Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
clipRule="evenodd"
/>
</svg>
Next
</div>
</Link>
) : (
<Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
clipRule="evenodd"
/>
</svg>
Next
</div>
</Link>
)}
{currentPage !== totalPages ? (
<Link href={`/${basePath}/page/${totalPages}`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
clipRule="evenodd"
/>
</svg>
Last
</div>
</Link>
) : (
<Link href={`/${basePath}/page/${totalPages}`}>
<div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
clipRule="evenodd"
/>
</svg>
Last
</div>
</Link>
)}
</ul>
</nav>
</div>
)
}
export default function ListLayoutWithTags({
posts,
title,
initialDisplayPosts = [],
pagination,
}: ListLayoutProps) {
const pathname = usePathname()
const tagCounts = tagData as Record<string, number>
const tagKeys = Object.keys(tagCounts)
const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a])
const displayPosts = initialDisplayPosts.length > 0 ? initialDisplayPosts : postsNot sure if this is dependent on the vast changes I've made at this point but my site currently loads ListLayout when I go to All Posts and the pagination loads ListLayoutWithTags when I switch pages, so I added pagination to both layouts and it meets my needs for now. Once I get the design working the way I want to and looking the way I intended I don't tend to go back and clean up my work so I'm sure this could be shortened or written better but I thought I'd share in case anyone can benefit.
PxlSyl
commented
4 months ago Hey guys! I was just poking around to see if anyone had posted any issues I could help out with or see if there were any updates I could utilize, so excuse my Padawan level GitHub knowledge over here but I was able to add pagination and style it pretty well with the following code.
The included SVG's are from HeroIcons but I tend to cannibalize them right into my code for maximum control. Feel free to use or modify, I'm not quite done with my blog so I haven't added it to the readme just yet. Cheers!
interface PaginationProps { totalPages: number currentPage: number } interface ListLayoutProps { posts: CoreContent<Blog>[] title: string initialDisplayPosts?: CoreContent<Blog>[] pagination?: PaginationProps } function Pagination({ totalPages, currentPage }: PaginationProps) { const pathname = usePathname() const basePath = pathname.split('/')[1] const prevPage = currentPage - 1 > 0 const nextPage = currentPage + 1 <= totalPages const pageNumbers: number[] = [currentPage] // @ts-ignore if (currentPage > 1 && prevPage && currentPage - 1 != prevPage) { pageNumbers.unshift(currentPage - 1) } if (nextPage && currentPage + 1 < totalPages) { pageNumbers.push(currentPage + 1) } return ( <div className="space-y-2 pb-4 pt-2 md:space-y-5"> <nav aria-label="pagination" className="py-2"> <ul className="list-style-none flex justify-center"> {currentPage !== 1 ? ( <Link href={`/${basePath}/`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z" clipRule="evenodd" /> <path fillRule="evenodd" d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z" clipRule="evenodd" /> </svg> First </div> </Link> ) : ( <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300"> {' '} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z" clipRule="evenodd" /> <path fillRule="evenodd" d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z" clipRule="evenodd" /> </svg> First </div> )} {prevPage && ( <div> {currentPage - 1 === 0 ? ( <Link href={`/${basePath}/page/${currentPage - 1}`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clipRule="evenodd" /> </svg> Back </div> </Link> ) : ( <Link href={`/${basePath}/page/${currentPage - 1}`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clipRule="evenodd" /> </svg> Back </div> </Link> )} </div> )} {!prevPage && ( <div> {currentPage - 1 === 0 && ( <Link href={`/${basePath}/page/${currentPage - 1}`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clipRule="evenodd" /> </svg> Back </div> </Link> )} </div> )} {prevPage && ( <div> {currentPage - 1 === 0 ? ( <Link href={`/${basePath}/page/${currentPage - 1}`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clipRule="evenodd" /> </svg> Back </div> </Link> ) : ( <Link href={`/${basePath}/page/${currentPage - 1}`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"> {currentPage - 1} </div> </Link> )} </div> )} <div aria-current={currentPage === currentPage ? 'page' : undefined}> <Link href={`${basePath}/page/${currentPage}`}> <div className={`relative block rounded bg-transparent px-3 py-1.5 text-xs ${'rounded-xl border border-primary-600 bg-neutral-100 font-bold text-primary-600 dark:bg-neutral-800'} transition-all duration-300`} > {currentPage} {/* Display the current page number */} </div> </Link> </div> {nextPage && ( <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next"> <div className={`relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white`} > {currentPage + 1} </div> </Link> )} {currentPage !== totalPages ? ( <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next"> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clipRule="evenodd" /> </svg> Next </div> </Link> ) : ( <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next"> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clipRule="evenodd" /> </svg> Next </div> </Link> )} {currentPage !== totalPages ? ( <Link href={`/${basePath}/page/${totalPages}`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clipRule="evenodd" /> <path fillRule="evenodd" d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clipRule="evenodd" /> </svg> Last </div> </Link> ) : ( <Link href={`/${basePath}/page/${totalPages}`}> <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5" > <path fillRule="evenodd" d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clipRule="evenodd" /> <path fillRule="evenodd" d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clipRule="evenodd" /> </svg> Last </div> </Link> )} </ul> </nav> </div> ) } export default function ListLayoutWithTags({ posts, title, initialDisplayPosts = [], pagination, }: ListLayoutProps) { const pathname = usePathname() const tagCounts = tagData as Record<string, number> const tagKeys = Object.keys(tagCounts) const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a]) const displayPosts = initialDisplayPosts.length > 0 ? initialDisplayPosts : postsNot sure if this is dependent on the vast changes I've made at this point but my site currently loads ListLayout when I go to All Posts and the pagination loads ListLayoutWithTags when I switch pages, so I added pagination to both layouts and it meets my needs for now. Once I get the design working the way I want to and looking the way I intended I don't tend to go back and clean up my work so I'm sure this could be shortened or written better but I thought I'd share in case anyone can benefit.
Hi man, very nice work! I did a very similar thing (almost the same in fact) for my own website. But for my i18n version of this template, I prefer to keep a bit of the original spirit and keep things relatively simple, so I finally put the pagination for the tags in place (adapted to my i18 version of course) I think that a more personalized or more complex component with 1st and last page should rather be set up by the users of the template :)
@timlrx If you want to have a look and implement it, feel free. And if you don't have time, let me know and I'll make a PR!
Hi!
I think the ListLayoutWithTags component is a very good idea.
That said, I think it should be improved, in fact, when a tag is selected, it displays the related posts. But what would happen if a tag is included in dozens of posts?
So the solution would be, either: to incorporate a pagination for the tags when they are selected , or to include a loader from a number of posts when the user scrolls down the page.
It's just a suggestion, I'll try to integrate it on my side on the i18n version, but I really think it's something that needs to be improved