Metadata for collections of pages (blogs etc.)

Is your feature request related to a problem? Please describe.

I would like to be able to display a collection of pages (e.g. my latest blog posts or an alphabetized list of API docs). VuePress has $site.pages, but VitePress does not ship metadata about all pages, which is great except when I need that data for certain pages.

Describe the solution you’d like

I would like to specify collections of pages that I need metadata for in config.js, for example:

module.exports = {
  title: "My Tech Blog",
  collections: [
    {
      name: 'blog',
      directory: '_posts/',
      layout: 'BlogPostLayout',
    },
    {
      name: 'api',
      directory: 'guide/api/',
      layout: 'TechDocLayout',
    }
  ],
};

This would produce an array of metadata for pages inside the _posts directory could then be accessed via $site.collections.blog

I’ve also included a layout option that could be used to define a default layout for pages in that collection. That’s a separate idea, but the point is that collections could have additional benefits.

You could possibly specify which metadata you need - e.g. you may or may not need the frontmatter for every page in the collection.

I’ve borrowed the term “collections” from NetlifyCMS, which I use with VuePress currently.

Describe alternatives you’ve considered

Alternatively, you could simply have a config option to ship metadata for all pages, but that would be all or nothing.

Additional context

Here’s an example of how I’ve implemented collections in a VuePress theme: themeConfig.js, PostList.vue, GlobalLayout.vue

[brc-dd]

I just tested writing a blog with VitePress. It was quite easy actually. I was able to write a short script that generated a json file for all articles:

import fs from 'node:fs/promises'
import matter from 'gray-matter'
import removeMd from 'remove-markdown'

const articles = await fs.readdir('./blog/')

const data = await Promise.all(
  articles.map(async (article) => {
    const file = matter.read(`./blog/${article}`, {
      excerpt: true,
      excerpt_separator: '<!-- more -->'
    })

    const { data, excerpt, path } = file
    const contents = removeMd(excerpt).trim().split(/\r\n|\n|\r/)

    return {
      ...data,
      title: contents[0].replace(/\s{2,}/g, '').trim(),
      path: path.replace(/\.md$/, '.html'),
      excerpt: contents.slice(1).join('').replace(/\s{2,}/g, '').trim()
    }
  })
)

await fs.writeFile('./data.json', JSON.stringify(data), 'utf-8')

Here is the complete repo: https://github.com/brc-dd/vitepress-blog-demo

Final result (didn’t do any styling):

I guess this feature is less likely to be supported officially. It will be better if someone can write a Vite plugin to auto-generate that data before build.

Something like this can also be done: https://github.com/vuejs/blog/blob/master/.vitepress/posts.data.js

[jivane-perich]

Seems possible with a customMetadata (as shown here in vuejs blog : https://github.com/vuejs/blog/blob/master/.vitepress/config.js )