notionate

Notionate: This is React components that uses the Notion API to display the Notion's database and page.

Example

• Notionate: https://notionate.linyo.ws
• Original: https://linyows.notion.site/Notionate-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 {
  QueryDatabaseResponseEx,
  FetchDatabase,
  QueryDatabaseParameters,
  Link as NLink,
} from 'notionate'
import { DBList } from 'notionate/dist/components'
import 'notionate/dist/styles/notionate.css'
// Import when enable dark-mode
import 'notionate/dist/styles/notionate-dark.css'

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="/database/[id]"
        link={Link as NLink} />
    </>
  )
}

This is page example:

import type { GetStaticProps, NextPage } from 'next'
import { FetchBlocks, ListBlockChildrenResponseEx } from 'notionate'
import { Blocks } from 'notionate/dist/components'
import 'notionate/dist/styles/notionate.css'
// Import when enable dark-mode
import 'notionate/dist/styles/notionate-dark.css'

type Props = {
  blocks: ListBlockChildrenResponseEx
}

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

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

Set the notion token as environment variable:

$ cat .env
NOTION_TOKEN=secret_vHVKhIeYm95ga1sjOv*************************
NOTION_PAGEID=23740912d6ac4018ab76c64e772a342a
NOTION_DBID=81781536afc6431da21721177e7bf8e0

Env name	Description	Default
NOTION_TOKEN	Read permission is required in notion's credentials	-
NOTIONATE_CACHEDIR	Cache directory name	.cache
NOTIONATE_DOCROOT	Web server root directory	public
NOTIONATE_IMAGEDIR	Web server image directory	images
NOTIONATE_INCREMENTAL_CACHE	Enable incremental cache	false
NOTIONATE_WAITTIME	milliseconds to wait right after api request due to ratelimit	0
NOTIONATE_LIMITED_WAITTIME	milliseconds to wait before backoff after ratelimit limit	60sec
NOTIONATE_WEBP_QUALITY	Quality for WebP converting	95

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.

Images are saved in NOTIONATE_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