Origami comics

Pagination

Use pagination to break up a long set of posts or articles into multiple cross-linked pages.

http://localhost:5000/pages/1.html

Living in this house has been an incredible experience. It’s small, but it has everything I need, and being so close to nature has been incredibly grounding. Every morning, I wake up to the sound of birds and the sight of the sun rising over the water. It’s a constant reminder of why I chose this path.

Building this house was one of the hardest things I’ve ever done, but also one of the most rewarding. If you’re thinking about pursuing a similar dream, my advice is to go for it.

Older posts   Newer posts

Pass any collection of items to the paginate function to get back the items in groups.

site.ori
{
  // Posts area has one page per post
  posts/ = Tree.map(markdown/, Origami.mdHtml)

  // Group the posts into pages of 3 posts each
  (grouped) = Tree.paginate(posts, 3)

  // Pages area renders each group as its own page
  pages/ = Tree.mapExtension(grouped, "→.html", groupPage.ori)
}

Each group includes some items and data about that group’s position in the sequence.

$ ori site.ori/grouped/1
items:
  2025-07-04.html:
    title: Hello from the pond!
    _body: |
      <p>Welcome to my very first blog post from my new home in the woods!</p>
  2025-07-07.html:
    title: Tiny home
    _body: >
      <p>When I first decided to move off-grid, I knew I wanted to build my own
      home.</p>
  2025-07-10.html:
    title: Cozy
    _body: >
      <p>The interior is cozy and functional, designed to make the most of the
      small space.</p>
nextPage: 2
pageCount: 5
pageNumber: 1
previousPage: null

You can write a template that links to the previous and next pages, displays a page number, etc.

groupPage.ori
// A page showing a group of multiple posts
(group) => Tree.indent`
  <h1>Page ${ group.pageNumber }</h1>
  ${
    Tree.map(group.items, postFragment.ori) // List all the posts
  }
  ${ group.nextPage ? Tree.indent`
    <a href="/pages/${ group.nextPage }.html">Older posts</a>
  ` : "" }
  ${ group.previousPage ? Tree.indent`
    <a href="/pages/${ group.previousPage }.html">Newer posts</a>
  ` : "" }
`

Read more: Origami Tree.paginate builtin function

  Comic index