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.

Example

Take a look at the website built with rotion.

• Website built with rotion: https://rotion.linyo.ws
• Published pages on Notion: https://linyows.notion.site/rotion-6d6150cf068f4293a78b6fd9fa8d0181

Usage

Use API calls and components together. This is database list example:

import type { GetStaticProps, NextPage } from 'next'
import Link from 'next/link'
import { FetchDatabase, QueryDatabaseResponseEx, QueryDatabaseParameters } from 'rotion'
import { List } from 'rotion/ui'

type Props = {
  db: QueryDatabaseResponseEx
}

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  const db = await FetchDatabase({
    database_id: process.env.NOTION_DBID,
    filter: {
      property: 'Published',
      checkbox: {
        equals: true
      },
    },
    sorts: [
      {
        property: 'Date',
        direction: 'descending'
      },
    ]
  } as QueryDatabaseParameters)

  return {
    props: {
      db,
    }
  }
}

export default const DB: NextPage<Props> = ({ db }) => {
  return (
    <List keys={['Name', 'spacer', 'Tags', 'Date']} db={db} href="/animals/[id]" link={Link} />
  )
}

This is page example:

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

type Props = {
  blocks: ListBlockChildrenResponseEx
}

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  const blocks = await FetchBlocks({ block_id: process.env.NOTION_PAGEID })
  return {
    props: {
      blocks,
    }
  }
}

export default const Page: NextPage<Props> = ({ blocks }) => {
  return (
    <Page blocks={blocks} />
  )
}

Set the notion token as environment variable:

$ cat .env
NOTION_TOKEN=secret_vHVKhIeYm95ga1sjOv*************************
NOTION_PAGEID=23740912-d6ac-4018-ab76-c64e772a342a
NOTION_DBID=81781536-afc6-431d-a217-21177e7bf8e0

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

Env name	Description	Default
NOTION_TOKEN *requirement	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_WEBP_QUALITY	Quality for WebP converting	95
ROTION_DEBUG	Logging level to debug	-

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.

Components

This is the components available:

• Page Blocks
• Database List View
• Database Gallery View
• Database Table View
• Database Calendar View
• Database Timeline View

Storybook

Check the display of components in Storybook:

$ npm run story

Author

@linyows