@presta/source-filesystem

Source and watch local files, rebuilding pages on change.

Usage

First, set up the plugin in your config file:

import sourceFs from '@presta/source-filesystem'

export const plugins = [sourceFs()]

Then source files using globs in your individual pages:

import { source } from '@presta/source-filesystem'

const posts = source('blog/*.md', __filename)

__filename here is important — it tells this library where to resolve globs from and ensures that adding and removing sourced files is picked up by the file watcher.

source returns an array of tuples [filepath, content]. You can use these to generate static paths, or render in a serverless function.

import path from 'path'
import { source } from '@presta/source-filesystem'

const posts = source('blog/*.md', __filename)

const routes = posts.map((post) => {
  const filename = path.basename(post[0], '.md')
  return {
    [`/blog/${filename}`]: post[1],
  }
})

export function getStaticPaths() {
  return Object.keys(routes)
}

export function handler({ path }) {
  const post = routes[path]
  return markdown(post) // render markdown as needed
}

Other file types

It also works with other natively supported extensions like .js and .json, as well as those supported by esbuild like .jsx, .ts and .tsx.

Instead of returning the file content as a string, it will be read as a normal node module, so the tuple will be [filepath, module].

Multiple source

You can also source multiple globs or even call source more than once.

const jsons = source('configs/*.json', __filename)
const markdowns = source(['blog/*.md', 'docs/**/*.md'], __filename)

License

MIT License © Sure Thing