Rotion

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.

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.

Database

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

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
-

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

API

This is the API available:

  • FetchDatabase: Returns page list and properties in database
  • FetchPage: Returns page title and properties
  • FetchBlocks: Returns blocks that is the content of the page.
  • FetchBreadcrumbs: Returns title and icons for breadcrums

Images are saved in ROTION_IMAGEDIR locally.

Storybook

Check the display of components in Storybook:

$ npm run story

Features

We are adding features in sequence. If there is a feature you need, please create an Issue. Also, telling me about use cases will motivate my development.

Create cache dir
Remove fetch api
Site deployment
Unit testing
Not override same images
Support Equation
Add stories for Storybook
Import CSS in tsx
Support dark mode
Support responsible images
Support app router
Support Comments