⚠️ Alpha test • 🎲 Features • 🚀 Get started • 🔧 Configure • ✍ Contribute

Contentlayer Source Notion is a Contentlayer plugin to use Notion.so as a content source.

This plugin is actually under heavy-development, use it at your own risks or for testing purposes only.

You can contribute to this project by listing bugs and giving ideas in the issues of this repository.

Do not report bugs related to contentlayer-source-notion in the official repository.

• Generate your content from Notion Databases
• Automatically infer the type of your properties
• Render HTML from your Rich Text properties and pages content (@notion-render/client)
• Filter and sorts pages queried from your databases
• Use Rollup and Relation properties with ease
• Recompute values to create new fields (computed fields)
• Iteration and cache system to work safely with ton of pages

$ npm install contentlayer contentlayer-source-notion @notionhq/client
$ yarn add contentlayer contentlayer-source-notion @notionhq/client

Save your database ID, it should be available in the url: /myworkspace/fe26b972ec3f4b32a1882230915fe111?v=b56e97ee99a74f3f8c3ee80543fe22c6

To interact with Notion you need to create an integration and give it the correct permissions. Create a new integration by heading to the following link.

You should then have your Notion Token, also called Internal Integration Token.

By default, your integration does not have any permissions. On each databases you want to query, click on the ••• in the top right corner.

Click on Add connection and select your Integration. Your token should now have access to your database.

You can configure your content source in the contentlayer.config.js file and then run contentlayer build.

import { makeSource, defineDatabase } from 'contentlayer-source-notion'
import * as notion from '@notionhq/client'

const client = new notion.Client({
  auth: '<notion_token>',
})

const Post = defineDatabase(() => ({
  name: 'Post',
  databaseId: '<database_id>',
}))

export default makeSource({
  client,
  databaseTypes: [Category, Post],
})

ℹ Read more on how to configure contentlayer-source-notion here

Contentlayer will generate your content and typings in the .contentlayer folder.

import { allPosts } from './.contentlayer/generated/index.mjs'

const postIds = allPosts.map((post) => post._id)

import { makeSource } from 'contentlayer-source-notion'

export default makeSource({
  client,
  renderer,
  databaseTypes: [],
})

The PluginOptions supports the following parameters. Thoses options are defined when using makeSource.

import { defineDatabase } from 'contentlayer-source-notion'

const Post = defineDatabase(() => ({
  name: 'Post',
  databaseId: '<database_id>',
  importContent: false,
  automaticImport: true,
  properties: {
    email: {
      name: 'Email',
      description: 'The author email',
      isRequired: true,
    },
  },
}))

The DatabaseTypeDef supports the following parameters. Thoses options are defined when using defineDatabase.

The DatabasePropertyTypeDef supports the following parameters. Thoses options are defined when using defineDatabase.

This plugin depends on the official Notion JS SDK, you can find more information on how to configure it on the following repository.

import { makeSource, defineDatabase } from 'contentlayer-source-notion'
import * as notion from '@notionhq/client'

const client = new notion.Client({
  auth: '<notion_token>',
})

export default makeSource({
  client,
  renderer,
  databaseTypes: [],
})

Rich text properties and your pages content must be renderer, you can find more information on how to configure it on the following repository.

import { makeSource, defineDatabase } from 'contentlayer-source-notion'
import { NotionRenderer } from '@notion-render/client'
import * as notion from '@notionhq/client'

const client = new notion.Client({
  auth: '<notion_token>',
})

const renderer = new NotionRenderer({ client })

export default makeSource({
  client,
  renderer,
  databaseTypes: [],
})

Wether it is a bug report, new feature, correction, or additional documentation, we greatly value feedback and contributions from the community.

You can :

• Report Bugs/Reafture Requests directly in the issues.
• Contribute via Pull Requests

If you have any questions, feel free to join the Official Contentlayer Discord.