Productivity
Turn Notion into a full-fledged Headless CMS with this utility set. The Notion CMS npm (scoped) workflow npm GitHub commit activity provides a collection-based CMS tree by leveraging database sub-items. It is geared for Static Site Generation with Notion markdown to HTML output, offering content caching for fast builds. The workflow is plugin-ready and includes powerful core plugins.
Notion excels at managing content and offers a great API and SDK. However, leveraging Notion as a CMS in production can be challenging due to limitations such as the lack of support for sub-pages and slow response times. NotionCMS addresses these issues to provide an excellent developer experience.
In order to use NotionCMS, you need to subscribe to a specific database structure. This generic design accommodates basic sites while allowing flexibility for various types of content beyond standard web pages or blog posts.
// initialize
const myCoolCMS = new NotionCMS({
databaseId: 'e4fcd5b3-1d6a-4afd-b951-10d56ce436ad',
notionAPIKey: process.env.NOTION,
// Other options
})
// Pull down all Notion content
await myCoolCMS.fetch()
// Access the routes here:
console.log(myCoolCMS.routes)
// Access the page content here:
console.log(myCoolCMS.data)
// Access paths like this:
const postA = myCoolCMS.data['/posts']
const postB = myCoolCMS.data['/posts']
const customPlugin = () => {
return {
name: 'my-custom-plugin',
hook: 'pre-parse', // other option is 'post-parse'
exec: (blocksOrHtml) => {
// do some transformations,
const transformedBlocksOrHtml = someXform(blocksOrHtml)
return transformedBlocksOrHtml
}
}
}
const myAdvancedCMS = new NotionCMS({
databaseId: 'e4fcd5b3-1d6a-4afd-b951-10d56ce436ad',
notionAPIKey: process.env.NOTION,
rootUrl: 'https://mycoolsite.com',
localCacheDirectory: ${process.cwd()}/localcache/,
refreshTimeout: 1000 * 60 * 60,
plugins: [customPlugin()],
})
await myAdvancedCMS.fetch()
For more in-depth examples and helper methods, please refer to the documentation on the GitHub repository.