Pagination of MD files

[serene rover]

Hey all I've managed to quite easily move a bunch of markdown files from my old Jekyll site to Astro, and I want to setup pagination. Where I am a bit stuck is understanding in the docs here - https://docs.astro.build/en/core-concepts/routing/#pagination

Are relevant to that or not? And if so, do the [].astro pages replace my layout file or supplement them? or can I also include pagination anywhere? For example in my MD layout file?

In short, does pagination work anywhere and can I use any data source? For example, my markdown files.

Thanks!

[subtle coyote]

Did you work this out at all? I have the exact same need. I want to paginate my .mdx files but I don't understand from the docs how I do it...

[serene rover]

Nope, haven't progressed at all @subtle coyote

[dark brook]

@serene rover i think it would be helpful if gave some more specifics to your setup/project, it's hard to help without more context.

Technically though, the answer to your question at the end is yes.

[serene rover]

@dark brook not sure how much more detail to give. I have a folder of markdown files and would like to know if it's possible to paginate through them using the pagination methods. Much like you can in Jekyll, for example

[dark brook]

Right. hm. Are your markdown files supposed to be pages themselves?

Like blog posts?

Maybe we could hop on a quick call and we could go over it together

Just let me know @serene rover , i'd be glad to help

[serene rover]

Currently blog posts, evening here, at a concert right now 😉

I'm sure I'll figure it out, it must be pretty normal to want to paginate a folder of files, I'd hope....

[dark brook]

im not so sure it supports it out of the box, i think they took a less opinionated approach

That being said - I think you could use fs package to read the files in the folder and use the results as a replacement for astronautPages in the pagination example in astro docs

[serene rover]

When I figure it out, I'll be sure to make a docs pr, feel like many coming from old school ssgs would want to do this

[dark brook]

I agree, definitely a very common use case.

Blog posts probably being the #1 case

Actually guess what

that made me think -

doesnt Astro have a blog template? and voila

https://github.com/Charca/astro-blog-template/blob/main/src/pages/blog/[slug].astro

This file shows exactly how to do what you need.

😄

Could still point to that in docs tho

[serene rover]

OK, will look later and make that PR!

[serene rover]

Hmm, no, these examples also don't seem to quite work as something transferable (or understandable) anyway, will keep digging…

[fossil storm]

I've been meaning to chime in here but have had limited time to be able to test/put together a comprehensive example, so let me just drop a few thoughts on what I think may be a feasible approach.

The 'Pagination' code example almost provides the functionality it appears you're looking for, which as I understand is to split a directory of say 100 MDX files into 10 pages of 10 MDX files-per-page.

However, instead of providing astronautPages as a JSON object, you need to dynamically glob your .MDX files like so:

---
import MyPostPreviewComponent from '../components/MyPostPreviewComponent.js';
import MyLayout from '../layouts/MyLayout.astro';

export async function getStaticPaths({ paginate }) {
  const posts = await Astro.glob('../../posts/*.mdx');
  // Generate pages from our array of posts, with 10 to a page
  return paginate(posts, { pageSize: 10 });
}
// All paginated data is passed on the "page" prop
const { page } = Astro.props;
---
<!--Display the current page number. Astro.params.page can also be used!-->
<MyLayout>
  <h1>Page {page.currentPage}</h1>
    <!-- Pass your post data into a custom component, or display it on the page -->
    {page.data.map(({ post }) => <MyPostPreviewComponent post={post}/>)}
</MyLayout>

The getStaticPaths() and paginate() functions help you to gather and split up your files into chunks (pages) and to generate the necessary URLs for those individual pages, but it's up to you to decide how you then display that data. You could import and use an Astro Layout to style the page, and you'll probably want to use a custom component to handle the creation of post preview cards / links if you don't plan to embed the full text of your MDX files directly in the page.

You'll also need to build your own pagination component, or use an existing implementation like the accessible-astro-components library: https://github.com/markteekman/accessible-astro-components#example-using-astros-dynamic-page

[fossil storm]

Here's a little demo repo on Stackblitz: https://stackblitz.com/edit/github-t1qyad-f9epwv?file=src/pages/blog/[page].astro

[fossil storm]

(Note that I used .MDX files, but this approach will also work just as well for .MD files -- you just need to be sure to change your Astro.glob statement so that it looks for the appropriate filetype.)

[serene rover]

OK, I will try this later. And then make that PR, I have thousands of old MD files, really need pagination 😆

[fossil storm]

This should do the trick 😉