/rotion

○ Rotion makes it easy to generate a Static Website using React and the Notion API.

Primary LanguageTypeScriptMIT LicenseMIT



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.

Actions NPM

Example

Take a look at the website built with rotion.

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

Author

@linyows