pagination working, but not params on blog index

src/components/TemplateComponents/Pagination.astro

@@ -0,0 +1,101 @@
+---
+
+const { prevUrl, currPage, nextUrl } = Astro.props;
+---
+
+{
+  (prevUrl || nextUrl) && (
+    <section class="pagination--links">
+
+      {prevUrl && (
+        // @ts-ignore
+        <a
+          href={prevUrl}
+
+        >
+          Prev
+        </a>
+      )}
+
+      <span class="pagination--current">{currPage.toString()}</span>
+
+      {nextUrl && (
+        // @ts-ignore
+        <a
+
+          href={nextUrl}
+
+        >
+          Next
+        </a>
+      )}
+    </section>
+  )
+}
+
+<style lang="less">
+  a {
+    text-decoration: none;
+    width: 5rem;
+    height: 2rem;
+    background-color: var(--bodyTextColorWhite);;
+    color: var(var(--bodyTextColor););
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+  }
+  .pagination--links {
+    width: 100%;
+    margin: 2em 0;
+    display: grid;
+		grid-template-columns: 1fr;
+    justify-items: center;
+    align-items: center;
+    gap: 1em;
+  }
+
+  [rel="next"] {
+      flex-direction: row-reverse;
+    }
+
+  .pagination--current {
+    padding: 1rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    justify-self: center;
+  }
+
+
+  [data-icon="mdi--arrow-left"],
+  [data-icon="mdi--arrow-right"] {
+    transition: 0.3s;
+  }
+
+  [rel="next"]:not(.disabled) {
+    &:hover {
+      [data-icon="mdi--arrow-right"] {
+        transform: translateX(0.5em);
+      }
+    }
+  }
+
+  [rel="prev"]:not(.disabled) {
+    &:hover {
+      [data-icon="mdi--arrow-left"] {
+        transform: translateX(-0.5em);
+      }
+    }
+  }
+
+  @media only screen and (min-width: 64em) {
+    .pagination--links {
+      grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+
+    }
+
+    .pagination--button {
+      min-width: 10rem;
+    }
+  }
+</style>

src/content.config.ts

@@ -15,7 +15,6 @@ const blogsCollection = defineCollection({
 			image: image(),
 			imageAlt: z.string(),
 			defaultLocaleVersion: reference("blog").optional(),
-
 		}),
 });
 

src/content/blog/en/fourth-post-in-english.md

@@ -0,0 +1,51 @@
+---
+title: Fourth blog post in English
+description: Lorem markdownum Talia. Carinae equis.
+author: Code Stitch
+date: 2023-06-08T15:27:34.591Z
+image: "@assets/images/blog/blog-cover.jpg"
+imageAlt: Kitchen
+tags: ["post"]
+---
+## Sucos Creatoi
+
+Lorem markdownum trabeati dicere [deus](http://www.aetatis.org/pugnacem.html) traxit certus Scythiam certum, illi mulces. Et nihil dolores? Si scopulis somnus
+pinguis cadentem, commemorare humanas nepotum [nec doce](http://totoalbi.com/suisfactis), Aiax ipsum! Gente conatur committere esse _efficiens_ fuerat, armis
+male simulasse, Libys polo.
+
+> Cuperet factus translucet imbres in est templa sua tulit post degener, et quas regia tantus credas graves. Nunc recusat tum moenia per utque deprendi
+> auxiliare quamvis maius tepidae nervos, ultima laqueo! Facto matris, pars saepe loco meosque cuspide.
+
+Equos quod edendo haud, exclamant sum mortale deseret meminisse signat umente. Non fovi lacrimosa mendaci. In ursi, sed removere sequar tamque.
+
+Fera vident; me que adfixa ama mota venabula fertur pectore totoque perculit meosque; placidissime Pergama in. Coeunt _monstri_; dixit sic poma tela, tam eandem
+flamma auras Rhodopen ultorem in mensae novis numeri. Scelerataque nec decorem modo _silvis medio spoliata_ index **nec chaos Iuno**. Et velis tamquam
+vulnificus studiisque petunt, expulsumque ille iuncturas ferre feliciter resoluta Euboicam sine, Bellona quem.
+
+1. Bidentum relatus ilice
+2. Pes sibila
+3. Tamen in est
+4. Studiosus foret
+5. Sub facit prohibente mihi est
+
+## Portibus Quirino
+
+Enim altam tamen cur magis admiratur [tegebat](http://nepotum-sequantur.org/) Iuppiter forma _perdere possit_. Aniles illum deos longoque, quae si venit
+tetigit. Huc ferae **refugit**, proles, suggerit videt reliquit, et.
+
+-   Dixit videt sustineat
+-   Deduxit et genu
+-   Uti contentus sub pater habet arboribus ut
+-   Dixit facibusque illas sigillis petitus
+
+Ubi aequoreae, vult huic, transibant dederat, liceret: vidi sacra o securi turaque. Superat hebeti, contortam honoris, di tibi. Vertex exsiluere.
+
+Et patriaeque cum differt tenet [cupies](http://contendere.net/datque.html) contra sic et locuta Aegides opusque. Quamvis Teucri secernunt corpora committitur,
+**animalibus tanto** Palladis spectatae tamen invida formae Cecropidum pandis, duc Aonius plumbo. Poplitibus stipite fugiebant et rapuere missa iaculabile
+adunco. Fui caerula territa; latus non reddita, si tecum placet, sepulcrum. Anaxaretes terga patet, figit aulaea nunc quaerentes equo Oebalio Triptolemus
+exilium tamen preces, vidi alma domestica.
+
+Aere mater potuisse, et _tendit_ alter ferre deseruere _apulus_. Suis _ignis undas_ inops decus scrutantur nymphe, facite latis, si Onetor **ibi**, deme
+[succincta tinnitibus](http://www.patriae.org/quorumaberant).
+
+Pennis mens restabat sublime iuvenis, _non pariter_ armis. Umbras sed traxit dei latoque petit [triplici ultima](http://etplenum.net/), corpore.

src/content/blog/fr/quatrieme-article-en-francais.md

@@ -0,0 +1,52 @@
+---
+defaultLocaleVersion: en/fourth-post-in-english
+title: Quatrieme article de blog en français
+description: Lorem markdownum Talia. Carinae equis.
+author: Code Stitch
+date: 2023-06-08T15:27:34.591Z
+image: "@assets/images/blog/blog-cover.jpg"
+imageAlt: Cuisine
+tags: ["post"]
+---
+## Sucos Creatoi
+
+Lorem markdownum trabeati dicere [deus](http://www.aetatis.org/pugnacem.html) traxit certus Scythiam certum, illi mulces. Et nihil dolores? Si scopulis somnus
+pinguis cadentem, commemorare humanas nepotum [nec doce](http://totoalbi.com/suisfactis), Aiax ipsum! Gente conatur committere esse _efficiens_ fuerat, armis
+male simulasse, Libys polo.
+
+> Cuperet factus translucet imbres in est templa sua tulit post degener, et quas regia tantus credas graves. Nunc recusat tum moenia per utque deprendi
+> auxiliare quamvis maius tepidae nervos, ultima laqueo! Facto matris, pars saepe loco meosque cuspide.
+
+Equos quod edendo haud, exclamant sum mortale deseret meminisse signat umente. Non fovi lacrimosa mendaci. In ursi, sed removere sequar tamque.
+
+Fera vident; me que adfixa ama mota venabula fertur pectore totoque perculit meosque; placidissime Pergama in. Coeunt _monstri_; dixit sic poma tela, tam eandem
+flamma auras Rhodopen ultorem in mensae novis numeri. Scelerataque nec decorem modo _silvis medio spoliata_ index **nec chaos Iuno**. Et velis tamquam
+vulnificus studiisque petunt, expulsumque ille iuncturas ferre feliciter resoluta Euboicam sine, Bellona quem.
+
+1. Bidentum relatus ilice
+2. Pes sibila
+3. Tamen in est
+4. Studiosus foret
+5. Sub facit prohibente mihi est
+
+## Portibus Quirino
+
+Enim altam tamen cur magis admiratur [tegebat](http://nepotum-sequantur.org/) Iuppiter forma _perdere possit_. Aniles illum deos longoque, quae si venit
+tetigit. Huc ferae **refugit**, proles, suggerit videt reliquit, et.
+
+-   Dixit videt sustineat
+-   Deduxit et genu
+-   Uti contentus sub pater habet arboribus ut
+-   Dixit facibusque illas sigillis petitus
+
+Ubi aequoreae, vult huic, transibant dederat, liceret: vidi sacra o securi turaque. Superat hebeti, contortam honoris, di tibi. Vertex exsiluere.
+
+Et patriaeque cum differt tenet [cupies](http://contendere.net/datque.html) contra sic et locuta Aegides opusque. Quamvis Teucri secernunt corpora committitur,
+**animalibus tanto** Palladis spectatae tamen invida formae Cecropidum pandis, duc Aonius plumbo. Poplitibus stipite fugiebant et rapuere missa iaculabile
+adunco. Fui caerula territa; latus non reddita, si tecum placet, sepulcrum. Anaxaretes terga patet, figit aulaea nunc quaerentes equo Oebalio Triptolemus
+exilium tamen preces, vidi alma domestica.
+
+Aere mater potuisse, et _tendit_ alter ferre deseruere _apulus_. Suis _ignis undas_ inops decus scrutantur nymphe, facite latis, si Onetor **ibi**, deme
+[succincta tinnitibus](http://www.patriae.org/quorumaberant).
+
+Pennis mens restabat sublime iuvenis, _non pariter_ armis. Umbras sed traxit dei latoque petit [triplici ultima](http://etplenum.net/), corpore.

src/routes/blog.astro → src/routes/blog/[...page].astro

@@ -6,19 +6,44 @@ import BlogPreview from "@components/BlogPreview.astro";
 import { getLocale, t } from "i18n:astro";
 import { getCollection } from "astro:content";
 
-const locale = getLocale();
 
-// Filters blog entries by locale
-const posts = await getCollection("blog", ({ id }) => {
-    return id.startsWith(locale);
-});
-posts.sort(
+// // Filters blog entries by locale
+// const posts = await getCollection("blog", ({ id }) => {
+//     return id.startsWith(locale);
+// });
+// posts.sort(
+//     (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
+// );
+
+
+export const getStaticPaths = (async ({ paginate }) => {
+  // https://astro-i18n.netlify.app/reference/content-collections/collection-filters/
+  const locale = getLocalePlaceholder();
+  const posts = await getCollection("blog", (post: CollectionEntry<"blog">) =>
+    collectionFilters.byLocale(post, { locale })
+  );
+
+  const sortedPosts = posts.sort(
     (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
 );
 
+
+  // paginates with options - https://docs.astro.build/en/reference/api-reference/#paginate
+  return paginate(sortedPosts, {
+    pageSize: 3,
+  });
+}) satisfies GetStaticPaths;
+
+const { page } = Astro.props as { page: Page };
+
 // Optimize our landing image and pass it as props to the BaseLayout (for preloading) and Landing (for rendering)
 import {getOptimizedImage} from "@utils/utils"
 import landingImage from "@assets/images/landing.jpg" // <-- THE PATH TO THE ASSET YOU WANT TO PRELOAD - The asset must live in src
+import type { GetStaticPaths, Page } from "astro";
+import type { CollectionEntry } from "astro:content";
+import { collectionFilters } from "@astrolicious/i18n/content-collections";
+import { getLocalePlaceholder } from "i18n:astro";
+import Pagination from "@components/TemplateComponents/Pagination.astro";
 const optimizedImage = await getOptimizedImage(landingImage)
 ---
 
@@ -46,9 +71,15 @@ const optimizedImage = await getOptimizedImage(landingImage)
                 </div>
             </div>
             <ul class="cs-card-group">
-                {posts.length === 0 && <h2>No Recent Posts</h2>}
-                {posts.map((post: any) => <BlogPreview post={post} />)}
-            </ul>
+                {page.data.map((post) => <BlogPreview post={post} />)}
+              </ul>
+              <!-- Pagination -->
+              <Pagination
+                prevUrl={page.url.prev}
+                currPage={page.currentPage}
+                nextUrl={page.url.next}
+                lastPage={page.size}
+              />
         </div>
     </section>
 

src/routes/blog/[slug].astro

@@ -31,7 +31,7 @@ export const getStaticPaths = (async () => {
 					defaultLocale,
 				}),
 			);
-
+        console.log(equivalentPosts)
 			const dynamicParams = equivalentPosts.map((entry) => {
 				const { locale, slug } = handleI18nSlug(entry.id);