@owngames/notion

🚧️ 🚧️ 🚧️ @owngames/notion 🚧️ 🚧️ 🚧️

Wrapper stuff for ygorluizgerald.com.

📝️ Please Note:

• 🧐 Very specific to an implementation I re-use a lot
• 😬 Lots of any types (currently)
• 🤔️ Would be good to build this out to be more generic

This is really a custom thing, so not sure how useful this would be for anyone else.

This will not be ready for production/OSS use until 3.0.0 at the earliest. I would imagine all attempts at documentation will wildy fluctuate.

Overview

Notion + Next.js + swr

The concept is kind of mapping databases from Notion to routeTypes in Next being kept in-sync post build via swr.

You will need a few values set up in Notion and identified in a configuration file within your repo provided to this package. (And by few, this is an understatement. [Good news! You can create all the values dynamically, howver, that is outside of this package currently.])

Quick

This API extends @notionhq/client so you will extend this one instead.

import { Client } from '@owngames/notion'

import { notionConfig as config } from '~config/websites'

const notion = new Client({ auth: process.env.NOTION_API_KEY, config })

You need to pass config which informs the package of all the wonderful Notion stuff you have. Will fill this out as I go (I hope haha).

(alias) const notionConfig: {
    DATABASES: Databases;
    NOTION: DatabaseInfo;
    PAGES__HOMEPAGE: string;
    PAGES: string[];
    ROUTE_META: any[];
    ROUTE_TYPES_BY_DATA_TYPES: Object;
    ROUTE_TYPES: any[];
}

• DATABASES: 🔑️ is uppercase (usually gripped by routeType)
• NOTION: 🔑️ is uppercase; 🛠️ configuration for DB
  • active: boolean
  • database_id: string
  • dataTypes: DataTypes[]
  • hasChild: string | null
  • infoType: any | null
  • isChild: string | null
  • isChildInfoType: any | null
  • name: string
  • page_id__seo: string
  • routeMeta: boolean
  • routeType: string
  • slug: string
  • ttl: number
• PAGES__HOMEPAGE: 🤕️ what Pages => slug is the homepage?
• PAGES: 🤕️ Only active routeTypes brought back
• ROUTE_META: 🤕️ up front share if we expect the route to have a meta (BLOG|EVENTS|PODCASTS)
• ROUTE_TYPES_BY_DATA_TYPES: For each DATA_TYPE determine which routeType are associated
• ROUTE_TYPES: 🤕️ Only active routeTypes brought back

Next

Will add an ./examples/next/... to show this with a public facing Notion at some point.

Custom setup to get pathVariables from next:

[...catchAll]:

export const getStaticProps = async ({ preview = false, ...props }) => {
  const { catchAll } = props.params
  // @todo(next)
  const clear = false
  const pathVariables = notion.custom.getPathVariables({ catchAll })
  /**
   * @cache
   * - pages = TRUE
   * - pages/api = FALSE
   */
  const cache = true
  const data = await getDataReturn({
    data: await getCatchAll({
      cache,
      catchAll,
      clear,
      pathVariables,
      preview,
    }),
    pathVariables,
  })
  return {
    props: { preview, ...data, ...pathVariables, ...props },
    revalidate,
  }
}

export const getStaticPaths = () => {
  return getStaticPathsCatchAll()
}

getCatchAll.ts:

• Checks against cache
• Based on the dataType from getPathVariables calls notion.dataTypes
• Sets data
• Checks if should use plaiceholder to generate images
• Creates cache if it should
• Send back

getStaticPathsCatchAll.ts:

• Create paths via hard-coded values from configuration for:
  • PAGES__HOMEPAGE => index.ts
  • PAGES => Until we can get a proper query to dynamically generate
• Create paths to generate via next based off of NOTION[#__database__#].databaseTypes:
  • LISTING
  • LISTING_BY_DATE
  • SLUG
  • SLUG_BY_ROUTE
• Customizations for date based routing for:
  • blog => ./blog/yyyy/mm/dd/blog-title
  • events => ./events/yyyy/mm/dd/events-title
  • episodes => ./podcasts/#__podcast-title__#/#__episode-title#

Cache

Currently set to json files within next build. This (currently) causes it to be generated every build.

For larger datasets this should move to a Key/Value Store that takes into account lastEdited from Notion for anything since the last build. (Or someting like that.)

Why

Next and Notion are awesome.

Before @notionhq/client this was really hacky (cough actually more than this, haha). And now that the API is public, figured I would move this out to keep myself honest and find ways to continually improve it since I had this as a private repo with no documentation (hence a lot of any types and a lack of a formal or even informal README).