Merge pull request transitive-bullshit#383 from transitive-bullshit/feature/update-deps

Author: transitive-bullshit

.github/workflows/build.yml

@@ -6,17 +6,17 @@ jobs:
   Build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: yarn
 
       - run: yarn install --frozen-lockfile
       - name: build
-#        TODO Enable those lines below if you use a Redis cache, you'll also need to configure GitHub Repository Secrets
-#        env:
-#          REDIS_HOST: ${{ secrets.REDIS_HOST }}
-#          REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
+        #        TODO Enable those lines below if you use a Redis cache, you'll also need to configure GitHub Repository Secrets
+        #        env:
+        #          REDIS_HOST: ${{ secrets.REDIS_HOST }}
+        #          REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
         run: yarn build

lib/config.ts

@@ -6,7 +6,7 @@
  */
 
 import { parsePageId } from 'notion-utils'
-import posthog from 'posthog-js'
+import type posthog from 'posthog-js'
 import { getEnv, getSiteConfig } from './get-config-value'
 import { NavigationLink } from './site-config'
 import {
@@ -125,12 +125,15 @@ export const redisNamespace: string | null = getEnv(
 export const isServer = typeof window === 'undefined'
 
 export const port = getEnv('PORT', '3000')
-export const host = isDev ? `http://localhost:${port}` : `https://${domain}`
+export const host = isDev
+  ? `http://localhost:${port}`
+  : `https://${process.env.VERCEL_URL || domain}`
 
 export const apiBaseUrl = `/api`
 
 export const api = {
   searchNotion: `${apiBaseUrl}/search-notion`,
+  getNotionPageInfo: `${apiBaseUrl}/notion-page-info`,
   getSocialImage: `${apiBaseUrl}/social-image`
 }
 

lib/fonts.ts

@@ -60,3 +60,13 @@ export interface PageUrlOverridesInverseMap {
   // (this overrides the built-in URL path generation for these pages)
   [pageId: string]: string
 }
+
+export interface NotionPageInfo {
+  pageId: string
+  title: string
+  image: string
+  imageObjectPosition: string
+  author: string
+  authorImage: string
+  detail: string
+}

lib/types.ts

@@ -7,7 +7,7 @@
   "repository": "transitive-bullshit/nextjs-notion-starter-kit",
   "license": "MIT",
   "engines": {
-    "node": ">=14.17"
+    "node": ">=16"
   },
   "scripts": {
     "dev": "next dev",
@@ -29,55 +29,45 @@
     "@keyvhq/core": "^1.6.9",
     "@keyvhq/redis": "^1.6.10",
     "@react-icons/all-files": "^4.1.0",
+    "@vercel/og": "^0.0.18",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "expiry-map": "^2.0.0",
     "fathom-client": "^3.4.1",
     "got": "^12.0.3",
     "isomorphic-unfetch": "^3.1.0",
     "lqip-modern": "^1.2.0",
-    "next": "^12.2.3",
-    "next-api-og-image": "^2.2.1",
-    "node-fetch": "^2.6.1",
-    "notion-client": "^6.12.6",
-    "notion-types": "^6.12.6",
-    "notion-utils": "^6.12.6",
+    "next": "^12.3.1",
+    "notion-client": "^6.13.11",
+    "notion-types": "^6.13.4",
+    "notion-utils": "^6.13.4",
     "p-map": "^5.3.0",
     "p-memoize": "^6.0.1",
     "posthog-js": "^1.20.2",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-body-classname": "^1.3.1",
-    "react-dom": "^17.0.2",
-    "react-notion-x": "^6.12.7",
+    "react-dom": "^18.2.0",
+    "react-notion-x": "^6.15.3",
     "react-tweet-embed": "^2.0.0",
     "react-use": "^17.3.2",
     "rss": "^1.2.2"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^12.1.0",
-    "@types/node": "^17.0.23",
-    "@types/node-fetch": "^3.0.3",
-    "@types/react": "^17.0.31",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
+    "@next/bundle-analyzer": "^12.3.1",
+    "@types/node": "^18.8.5",
+    "@types/react": "^18.0.21",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
     "cross-env": "^7.0.2",
-    "eslint": "^8.11.0",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
-    "typescript": "^4.4.4"
-  },
-  "resolutions": {
-    "next-api-og-image/chrome-aws-lambda": "6.0.0",
-    "next-api-og-image/puppeteer-core": "6.0.0"
+    "prettier": "^2.7.1",
+    "typescript": "^4.8.4"
   },
   "overrides": {
-    "next-api-og-image": {
-      "chrome-aws-lambda": "6.0.0",
-      "puppeteer-core": "6.0.0"
-    },
     "cacheable-request": {
       "keyv": "npm:@keyvhq/core@~1.6.6"
     }

package.json

@@ -6,7 +6,9 @@ import { resolveNotionPage } from 'lib/resolve-notion-page'
 import { PageProps, Params } from 'lib/types'
 import { NotionPage } from 'components'
 
-export const getStaticProps: GetStaticProps<PageProps, Params> = async (context) => {
+export const getStaticProps: GetStaticProps<PageProps, Params> = async (
+  context
+) => {
   const rawPageId = context.params.pageId as string
 
   try {

pages/[pageId].tsx

@@ -0,0 +1,113 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import {
+  getBlockTitle,
+  getBlockIcon,
+  getPageProperty,
+  isUrl,
+  parsePageId
+} from 'notion-utils'
+import { PageBlock } from 'notion-types'
+
+import { notion } from 'lib/notion-api'
+import { mapImageUrl } from 'lib/map-image-url'
+import { NotionPageInfo } from 'lib/types'
+import * as libConfig from 'lib/config'
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== 'POST') {
+    return res.status(405).send({ error: 'method not allowed' })
+  }
+
+  const pageId: string = parsePageId(req.body.pageId)
+  if (!pageId) {
+    throw new Error('Invalid notion page id')
+  }
+
+  const recordMap = await notion.getPage(pageId)
+
+  const keys = Object.keys(recordMap?.block || {})
+  const block = recordMap?.block?.[keys[0]]?.value
+
+  if (!block) {
+    throw new Error('Invalid recordMap for page')
+  }
+
+  const blockSpaceId = block.space_id
+
+  if (
+    blockSpaceId &&
+    libConfig.rootNotionSpaceId &&
+    blockSpaceId !== libConfig.rootNotionSpaceId
+  ) {
+    return res.status(400).send({
+      error: `Notion page "${pageId}" belongs to a different workspace.`
+    })
+  }
+
+  const isBlogPost =
+    block.type === 'page' && block.parent_table === 'collection'
+  const title = getBlockTitle(block, recordMap) || libConfig.name
+  const image = mapImageUrl(
+    getPageProperty<string>('Social Image', block, recordMap) ||
+      (block as PageBlock).format?.page_cover ||
+      libConfig.defaultPageCover,
+    block
+  )
+
+  const imageCoverPosition =
+    (block as PageBlock).format?.page_cover_position ??
+    libConfig.defaultPageCoverPosition
+  const imageObjectPosition = imageCoverPosition
+    ? `center ${(1 - imageCoverPosition) * 100}%`
+    : null
+
+  const blockIcon = getBlockIcon(block, recordMap)
+  const authorImage = mapImageUrl(
+    blockIcon && isUrl(blockIcon) ? blockIcon : libConfig.defaultPageIcon,
+    block
+  )
+
+  const author =
+    getPageProperty<string>('Author', block, recordMap) || libConfig.author
+
+  // const socialDescription =
+  //   getPageProperty<string>('Description', block, recordMap) ||
+  //   libConfig.description
+
+  // const lastUpdatedTime = getPageProperty<number>(
+  //   'Last Updated',
+  //   block,
+  //   recordMap
+  // )
+  const publishedTime = getPageProperty<number>('Published', block, recordMap)
+  const datePublished = publishedTime ? new Date(publishedTime) : undefined
+  // const dateUpdated = lastUpdatedTime
+  //   ? new Date(lastUpdatedTime)
+  //   : publishedTime
+  //   ? new Date(publishedTime)
+  //   : undefined
+  const date =
+    isBlogPost && datePublished
+      ? `${datePublished.toLocaleString('en-US', {
+          month: 'long'
+        })} ${datePublished.getFullYear()}`
+      : undefined
+  const detail = date || author || libConfig.domain
+
+  const pageInfo: NotionPageInfo = {
+    pageId,
+    title,
+    image,
+    imageObjectPosition,
+    author,
+    authorImage,
+    detail
+  }
+
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=30, max-age=30, stale-while-revalidate=30'
+  )
+  res.status(200).json(pageInfo)
+}