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 | - |
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/ |
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.