Reusable Pagination Logic in ContentLoader

[dalezak]

The vitepress site I'm building has several different areas like projects, posts, tweets, videos, etc. I currently have createContentLoader for each area like such

import { createContentLoader } from 'vitepress';

export default createContentLoader('posts/*.md', {
  transform(data) {
    return data
      .map(({ url, frontmatter }) => ({
        url,
        date: frontmatter.date,
        title: frontmatter.title,
        description: frontmatter.description,
        keywords: frontmatter.keywords,
      }))
      .sort((a, b) => b.date - a.date)
  }
})

However wondering if it's possible to have a generic loader that accepts as path as argument so it can be reused in other areas. Also areas will be lots of markdowns, so would like pagination, something like this:

import { genericLoader } from '../data/genericLoader.js';
const { data as posts } = genericLoader('posts/*.md', limit: 12, offset: 0);

However when I try to use createContentLoader when it's not in a file like posts.data.js I get this error.

'/node_modules/vitepress/dist/client/index.js?v=c61b2fd6' does not provide an export named 'createContentLoader'.

Has anyone else ran into this same problem? Any ideas how to make createContentLoader more reusable?

[dalezak]

So I found a solution, wanted to share in case it helps others.

.vitepress/loaders/loader.data.js

import { createContentLoader } from 'vitepress';
import { sortBy } from '../sorters/sort-by.js';

export default function contentLoader(path, order = "title", dir = "asc") {
  return createContentLoader(path, {
    transform(data) {
      return data.map(({ url, frontmatter }) => ({
        id: frontmatter.id,
        slug: frontmatter.slug,
        url: frontmatter.slug && frontmatter.slug.length > 0 ? url : null,
        date: frontmatter.date,
        title: frontmatter.title,
        subtitle: frontmatter.subtitle,
        description: frontmatter.description,
        image: frontmatter.image,
        images: frontmatter.images,
        thumbnail: frontmatter.thumbnail
      })).sort(sortBy(order, dir));
    }
  });
}

.vitepress/loaders/books.data.js

import contentLoader from './loader.data.js';
export default contentLoader('books/*.md', "rating", "desc");

.vitepress/loaders/topics.data.js

import contentLoader from './loader.data.js';
export default contentLoader('topics/*.md', "title", "asc");

.vitepress/sorters/sort-by.js

function sortBy(order, dir = "asc") {
  if (order === "date") {
    return sortByDate("date", dir);
  }
  else if (order === "published") {
    return sortByDate("published", dir);
  }
  else if (order === "title") {
    return sortByString("title", dir);
  }
  else if (order === "rating") {
    return sortByInteger("rating", dir);
  }
  else {
    return sortByInteger(order, dir);
  }
}

function sortByDate(order, dir = "asc") {
  return (a, b) => {
    return dir === "desc" 
      ? new Date(b[order]) - new Date(a[order]) 
      : new Date(a[order]) - new Date(b[order]);
  }
}

function sortByString(order, dir = "asc") {
  return (a, b) => {
    return dir === "desc" 
      ? b[order].localeCompare(a[order]) 
      : a[order].localeCompare(b[order]);
  }
}

function sortByInteger(order, dir = "asc") {
  return (a, b) => {
    return dir === "desc" 
      ? b[order] - a[order] 
      : a[order] - b[order];
  }
}

export { sortBy, sortByDate, sortByString, sortByInteger };

.vitepress/components/book-cards.vue

<template>
  <grid-cards :cards="cards">
    <template #card="{ card }">
      <book-card :book="card"></book-card>
    </template>
  </grid-cards>
</template>
<script setup>
import { defineProps, computed } from 'vue';
import { data as books } from '../loaders/books.data.js';
</script>