Nicely Pruned Marigolds

    @jeromefitz/notion
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.0 • Public • Published

    🚧️ 🚧️ 🚧️ @jeromefitz/notion 🚧️ 🚧️ 🚧️

    Wrapper stuff for jeromefitzgerald.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 '@jeromefitz/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).

    Install

    npm i @jeromefitz/notion

    DownloadsWeekly Downloads

    25

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    777 kB

    Total Files

    114

    Last publish

    Collaborators

    • jeromefitz