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.

#Install @notion-render/client

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

npm install @notion-render/client

#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 { makeSource } from 'contentlayer-source-notion'

// or
renderer.addBlockRenderer(paragraphRenderer)

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

---