Configure renderer

The contentlayer-source-notion uses @notion-render/client under the hood to transform your Rich text content (Rich Text properties and pages content) into HTML that you can then use and style in your app.

#Use own instance of the renderer

If you want to configure the renderer, you have to provide your own instance (by defaults one is generated for you).

#Install @notion-render/client

Run the following command to add @notion-render/client to your dependencies:

npm install @notion-render/client

#Pass the renderer to the source plugin

// contentlayer.config.js
import { makeSource } from 'contentlayer-source-notion'
import * as notion from '@notionhq/client'
import { NotionRenderer } from '@notion-render/client'

const client = new notion.Client({ auth: process.env.NOTION_TOKEN })
const renderer = new NotionRenderer({ client })

export default makeSource({
  client,
  renderer,
})

#Configure the renderer

Notion Rich Text is basically a list of blocks, each block has a type (e.g. image) and contains its configuration (e.g. the image url).

Each block has its own renderer called block renderer that takes in input the configuration and returns a string (the generated HTML).

You can find the list of block types on the Official Notion API documentation.

#Create block renderer

You can create a block renderer by using the createBlockRenderer function. The first parameter is the type of block, the second is the function used to render this type of block.

When a block has children, you can use the renderer instance to render them.

import { createBlockRenderer } from '@syneki/notion-render'

const paragraphRenderer = createBlockRenderer<ParagraphBlockObjectResponse>('paragraph', async (data, renderer) => {
  return `<p>${await renderer.render(...data.paragraph.rich_text)}</p>`
})

#Add the block renderer

You can add your block renderers directly in the constructor parameters or with the method addBlockRenderer.

import { NotionRenderer } from '@syneki/notion-render'

const renderer = new NotionRenderer({
  renderers: [paragraphRenderer],
})

// or
renderer.addBlockRenderer(paragraphRenderer)

---