loadData.js

/**
 * loadData.js
 *
 * An utility file adapted from https://github.com/vuejs/blog/blob/master/.vitepress/getPosts.js
 *
 * Main change : reload posts if a change has been detected on a watched directory.
 *
 * The update is triggered by using 'touch' the config.js file
 *
 * Note : this file is located in a `utils` subfolder of the `.vitepress` folder, change the path to conform to your setup.
 */

const fs = require('fs')
const path = require('path')
const matter = require('gray-matter')

exports.getPosts = function getPosts(asFeed = false) {
  return loadDataFromDirectory('posts', asFeed)
}

exports.getTalks = function getTalks(asFeed = false) {
  return loadDataFromDirectory('talks', asFeed)
}

function loadDataFromDirectory(directory, asFeed) {
  const currentDir = path.resolve(__dirname, `../../${directory}`)
  fs.watch(currentDir, (eventType, filename) => {
    console.log(`Directory changed : ${directory} - ${filename}`)
    const configFilePath = path.resolve(__dirname, '../config.js')
    const time = new Date()

    try {
      fs.utimesSync(configFilePath, time, time)
    } catch (err) {
      fs.closeSync(fs.openSync(filename, 'w'))
    }
  })
  return loadArticlesFromDirectory(currentDir, asFeed)
}

function loadArticlesFromDirectory(currentDir, asFeed = false) {
  return fs
    .readdirSync(currentDir)
    .map((file) => {
      const src = fs.readFileSync(path.join(currentDir, file), 'utf-8')
      const { data, excerpt, tags } = matter(src, { excerpt: true })
      const post = {
        title: data.title,
        href: `/posts/${file.replace(/\.md$/, '.html')}`,
        date: formatDate(data.date),
        excerpt,
        tags
      }
      if (asFeed) {
        // only attach these when building the RSS feed to avoid bloating the
        // client bundle size
        post.data = data
      }
      return post
    })
    .sort((a, b) => b.date.time - a.date.time)
}

function formatDate(date) {
  if (!(date instanceof Date)) {
    date = new Date(date)
  }
  date.setUTCHours(12)
  return {
    time: +date,
    string: date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  }
}

I have updated with my current version.

I'm using this gist to load data from 2 folders (posts / talks). For each file, I'm reading the frontmatter header, and extracting several informations like tags.

Syntax example :

---
title: A vitepress powered blog
date: 2021-01-25
author: Jivane Perich
avatar: logo.jpeg
tags:
  - Vitepress
  - Vue.js
  - Tailwind CSS
---

My goal is to have a basic version of the vuepress blog theme in vitepress (load posts dynamically, browse articles lists by categories / tags and search).
I don't have a lot of time at the moment, but my next problem is the "tag" list page. I will need to search a bit for this one (this is impacting the router)

That's a good intent! May be it could then be available as a vitepress addon for any theme to incorporate?

https://gist.github.com/jivane-perich/1eb2574d0e32afc0aadc0bcb507e12ce#file-loaddata-js-L49 — you need to change the url according to the folder too.

No promise there :) I'm hoping to create a new theme, but I don't have the time at the moment.

If I have something usable, I will share it.

No pressure ) I think the concept is rather straightforward and it'll eventually be there for sure)