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:

• [x] Page Blocks
• [x] Database List View
• [x] Database Gallery View
• [x] Database Table View
• [ ] Database Calendar View
• [ ] Database Timeline View

Author

@linyows