The Notion CMS Workflow

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.

Features:

• Basic CMS functionality
• Route generation for Static Site Generation
• Content caching
• Tag grouping and filtering
• Plugin system and core plugins
• Handling arbitrary Notion properties
• Optimized content caching (in progress)

Basic Usage:

// 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']

Advanced Usage:

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.