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) => {
const block_id = process.env.PAGEID as string
const blocks = await FetchBlocks({ block_id })
return { props: { blocks } }
}
export default function Home({blocks }:
InferGetStaticPropsType<typeof getStaticProps>) {
return <Page blocks={blocks} />
}Supported Components
This is the components available:
Blocks
https://developers.notion.com/reference/block
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 storyFeatures
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.