Rotion makes it easy to generate a Static Website using React and the Notion API. Therefore, images and other necessary files are stored locally. Basically, it is designed to use Next.js, but it will work with other frameworks as well. https://www.npmjs.com/package/rotion

https://github.com/linyows/rotion

Usage

Use API calls and components together. This is a example for page component:

import type { GetStaticProps, InferGetStaticPropsType } from 'next'
import { FetchBlocks, ListBlockChildrenResponseEx } from 'rotion'
import { Page } from 'rotion/ui'

type Props = { blocks: ListBlockChildrenResponseEx }

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  // The block_id specifies the page ID.
  // The Notion page ID is the 32 alpha-numeric characters found at the end of the page URI.
  const blocks = await FetchBlocks({ block_id: process.env.PAGE_ID as string })
  return { props: { blocks } }
}

export default function Home ({ blocks }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <Page blocks={blocks} />
}

When using the Table Component, it's like this:

import type { GetStaticProps, InferGetStaticPropsType } from 'next'
import { FetchDatabase, FetchDatabaseRes } from 'rotion'
import { Table } from 'rotion/ui'

type Props = { db: FetchDatabaseRes }

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  // The database_id specifies the database ID.
  // The Notion database ID is the 32 alpha-numeric characters found at the end of the page URI.
  const db = await FetchDatabase({ database_id: process.env.DB_ID as string })
  return { props: { db } }
}

export default function Home ({ db }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <Table keys={['Name', 'Tags', 'Date']} db={db} />
}

Supported Components

This is the components available:

Blocks

https://developers.notion.com/reference/block

Blocks are used as components of Page Components. So, it's not common to call them directly.

Bookmarks

Breadcrumb

Bulleted list item

Button

Callout

Child database

Child page

Code

Column

Divider

Embed

Equation

File

Headings

Image

Link Preview

Mention

Numbered list item

Paragraph

PDF

Quote

Rich Text

Video

Synced block

Table

Table of Contents

To do

Toggle

Database

https://developers.notion.com/reference/database

List view

Table view

Gallery view

Calendar view (not yet)

Timeline view (not yet)

Environment variables

Set the token for Notion as environment variable. List of all environment variables:

Env name Description Default
NOTION_TOKEN *required Read permission is required in notion's credentials -
ROTION_CACHEDIR Cache directory name .cache
ROTION_DOCROOT Web server root directory public
ROTION_IMAGEDIR Web server image directory images
ROTION_INCREMENTAL_CACHE Enable incremental cache false
ROTION_WAITTIME milliseconds to wait right after api request due to ratelimit 0
ROTION_LIMITED_WAITTIME milliseconds to wait before backoff after ratelimit limit 60sec
ROTION_CACHE_AVAILABLE_DURATION Cache file available duration in milliseconds 120sec
ROTION_WEBP_QUALITY Quality for WebP converting 95
ROTION_DEBUG Logging level to debug -
GOOGLEMAP_KEY For Google Map Embed API -
ROTION_MAX_REDIRECTS The maximum number of redirects when making an external HTTP request 5
ROTION_UA The user agent name when making an external HTTP request rotion/<version>

Notion ID is UUIDv4 format: 8-4-4-4-12.