feat: add support for social images

2026-05-13 15:09:47 +00:00 · 2022-04-05 18:32:44 -04:00
parent bc1fa1c619
commit 1dbf9756fc
10 changed files with 695 additions and 44 deletions
--- a/components/NotionPage.tsx
+++ b/components/NotionPage.tsx
@@ -15,10 +15,14 @@ import { Tweet, TwitterContextProvider } from 'react-static-tweets'
 import { NotionRenderer } from 'react-notion-x'

 // utils
-import { getBlockTitle } from 'notion-utils'
+import {
+  getBlockTitle,
+  getBlockIcon,
+  getPageProperty,
+  isUrl
+} from 'notion-utils'
 import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
 import { mapImageUrl } from 'lib/map-image-url'
-import { getPageDescription } from 'lib/get-page-description'
 import { getPageTweet } from 'lib/get-page-tweet'
 import { searchNotion } from 'lib/search-notion'
 import * as types from 'lib/types'
@@ -124,12 +128,41 @@ export const NotionPage: React.FC<types.PageProps> = ({
  const minTableOfContentsItems = 3

  const socialImage = mapImageUrl(
-    (block as PageBlock).format?.page_cover || config.defaultPageCover,
+    getPageProperty<string>('Social Image', block, recordMap) ||
+      (block as PageBlock).format?.page_cover ||
+      config.defaultPageCover,
    block
  )

+  const socialImageCoverPosition =
+    (block as PageBlock).format?.page_cover_position ??
+    config.defaultPageCoverPosition
+  const socialImageObjectPosition = socialImageCoverPosition
+    ? `center ${(1 - socialImageCoverPosition) * 100}%`
+    : null
+
+  const blockIcon = getBlockIcon(block, recordMap)
+  const socialAuthorImage = mapImageUrl(
+    blockIcon && isUrl(blockIcon) ? blockIcon : config.defaultPageIcon,
+    block
+  )
+
+  const socialAuthor =
+    getPageProperty<string>('Author', block, recordMap) || config.author
+
  const socialDescription =
-    getPageDescription(block, recordMap) ?? config.description
+    getPageProperty<string>('Description', block, recordMap) ||
+    config.description
+
+  const timePublished = getPageProperty<number>('Published', block, recordMap)
+  const datePublished = timePublished ? new Date(timePublished) : undefined
+  const socialDate =
+    isBlogPost && datePublished
+      ? `${datePublished.toLocaleString('en-US', {
+          month: 'long'
+        })} ${datePublished.getFullYear()}`
+      : undefined
+  const socialDetail = socialDate || site.domain

  let pageAside: React.ReactNode = null

@@ -158,6 +191,10 @@ export const NotionPage: React.FC<types.PageProps> = ({
        title={title}
        description={socialDescription}
        image={socialImage}
+        imageObjectPosition={socialImageObjectPosition}
+        author={socialAuthor}
+        authorImage={socialAuthorImage}
+        detail={socialDetail}
        url={canonicalPageUrl}
      />

--- a/components/PageHead.tsx
+++ b/components/PageHead.tsx
@@ -3,18 +3,42 @@ import React from 'react'

 import * as types from 'lib/types'
 import * as config from 'lib/config'
+import { getSocialImageUrl } from 'lib/get-social-image-url'

 export const PageHead: React.FC<
  types.PageProps & {
    title?: string
    description?: string
    image?: string
+    imageObjectPosition?: string
+    author?: string
+    authorImage?: string
+    detail?: string
    url?: string
  }
-> = ({ site, title, description, image, url }) => {
+> = ({
+  site,
+  title,
+  description,
+  image,
+  imageObjectPosition,
+  author,
+  authorImage,
+  detail,
+  url
+}) => {
  title = title ?? site?.name
  description = description ?? site?.description

+  const socialImageUrl = getSocialImageUrl({
+    title,
+    image,
+    imageObjectPosition,
+    author,
+    authorImage,
+    detail
+  })
+
  return (
    <Head>
      <meta charSet='utf-8' />
@@ -46,11 +70,11 @@ export const PageHead: React.FC<
        </>
      )}

-      {image ? (
+      {socialImageUrl ? (
        <>
          <meta name='twitter:card' content='summary_large_image' />
-          <meta name='twitter:image' content={image} />
-          <meta property='og:image' content={image} />
+          <meta name='twitter:image' content={socialImageUrl} />
+          <meta property='og:image' content={socialImageUrl} />
        </>
      ) : (
        <meta name='twitter:card' content='summary' />
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -115,7 +115,8 @@ export const host = isDev ? `http://localhost:${port}` : `https://${domain}`
 export const apiBaseUrl = `/api`

 export const api = {
-  searchNotion: `${apiBaseUrl}/search-notion`
+  searchNotion: `${apiBaseUrl}/search-notion`,
+  getSocialImage: `${apiBaseUrl}/social-image`
 }

 // ----------------------------------------------------------------------------
--- a/lib/fonts.ts
+++ b/lib/fonts.ts
--- a/lib/get-page-description.ts
+++ b/lib/get-page-description.ts
@@ -1,9 +0,0 @@
-import * as types from './types'
-import { getPageProperty } from 'notion-utils'
-
-export function getPageDescription(
-  block: types.Block,
-  recordMap: types.ExtendedRecordMap
-): string | null {
-  return getPageProperty('Description', block, recordMap)
-}
--- a/lib/get-social-image-url.ts
+++ b/lib/get-social-image-url.ts
@@ -0,0 +1,45 @@
+import { api, host } from './config'
+
+export function getSocialImageUrl({
+  title,
+  image,
+  imageObjectPosition,
+  author,
+  authorImage,
+  detail
+}: {
+  title: string
+  image?: string
+  imageObjectPosition?: string
+  author?: string
+  authorImage?: string
+  detail?: string
+}) {
+  const url = new URL(api.getSocialImage, host)
+
+  if (title) {
+    url.searchParams.set('title', title)
+  }
+
+  if (image) {
+    url.searchParams.set('image', image)
+  }
+
+  if (imageObjectPosition) {
+    url.searchParams.set('imageObjectPosition', imageObjectPosition)
+  }
+
+  if (author) {
+    url.searchParams.set('author', author)
+  }
+
+  if (authorImage) {
+    url.searchParams.set('authorImage', authorImage)
+  }
+
+  if (detail) {
+    url.searchParams.set('detail', detail)
+  }
+
+  return url.toString()
+}
--- a/package.json
+++ b/package.json
@@ -36,10 +36,11 @@
    "isomorphic-unfetch": "^3.1.0",
    "lqip-modern": "^1.2.0",
    "next": "^12.1.1",
+    "next-api-og-image": "^2.2.1",
    "node-fetch": "^2.6.1",
-    "notion-client": "^6.7.0-alpha.1",
+    "notion-client": "^6.7.0-alpha.2",
    "notion-types": "^6.7.0-alpha.0",
-    "notion-utils": "^6.7.0-alpha.1",
+    "notion-utils": "^6.7.0-alpha.2",
    "p-map": "^5.3.0",
    "p-memoize": "^6.0.1",
    "posthog-js": "^1.20.2",
@@ -47,7 +48,7 @@
    "react-body-classname": "^1.3.1",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
-    "react-notion-x": "^6.7.0-alpha.1",
+    "react-notion-x": "^6.7.0-alpha.2",
    "react-static-tweets": "^0.7.1",
    "react-use": "^17.3.2",
    "static-tweets": "^0.7.1"
--- a/pages/api/social-image.tsx
+++ b/pages/api/social-image.tsx
@@ -0,0 +1,184 @@
+import React from 'react'
+import { withOGImage } from 'next-api-og-image'
+import { interRegular } from '../../lib/fonts'
+
+/**
+ * Social image generation via headless chrome.
+ *
+ * Note: To debug social images, set `debugInspectHtml` to true and load a social
+ * image URL. Instead of returning the rendered image, it will return the raw HTML
+ * that would've been passed to puppeteer. This makes it much easier to develop
+ * and debug issues locally.
+ */
+const debugInspectHtml = false
+
+export default withOGImage<
+  'query',
+  | 'title'
+  | 'image'
+  | 'author'
+  | 'authorImage'
+  | 'detail'
+  | 'imageObjectPosition'
+>({
+  template: {
+    react: ({
+      title,
+      image,
+      author,
+      authorImage,
+      detail,
+      imageObjectPosition
+    }) => {
+      return (
+        <html>
+          <head>
+            <style dangerouslySetInnerHTML={{ __html: style }} />
+          </head>
+
+          <body>
+            <div className='container'>
+              <div className='horiz'>
+                <div className='lhs'>
+                  <div className='main'>
+                    <h1 className='title'>{title}</h1>
+                  </div>
+
+                  <div className='metadata'>
+                    {authorImage && (
+                      <div
+                        className='author-image'
+                        style={{ backgroundImage: `url(${authorImage})` }}
+                      />
+                    )}
+
+                    {(author || detail) && (
+                      <div className='metadata-rhs'>
+                        {author && <div className='author'>{author}</div>}
+                        {detail && <div className='detail'>{detail}</div>}
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {image && (
+                  <img
+                    src={image}
+                    className='rhs'
+                    style={{
+                      objectPosition: imageObjectPosition || undefined
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          </body>
+        </html>
+      )
+    }
+  },
+  cacheControl: 'max-age 86400, stale-while-revalidate=3600',
+  type: 'jpeg',
+  quality: 75,
+  dev: {
+    inspectHtml: debugInspectHtml
+  }
+})
+
+const style = `
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: normal;
+  src: url(data:font/woff2;charset=utf-8;base64,${interRegular}) format('woff2');
+}
+
+:root {
+  --padding: 8vmin;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  padding: 0;
+  margin: 0;
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: var(--padding);
+  background: #1F2027;
+  color: #fff;
+}
+
+.horiz {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--padding);
+  width: 100%;
+  height: 100%;
+}
+
+.lhs {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.rhs {
+  width: 35%;
+  height: 100%;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.title {
+  font-size: 3em;
+}
+
+.metadata {
+  color: #A9ACC0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--padding) * 0.7);
+  font-size: 1.5em;
+}
+
+.author {
+  font-size: 1.75em;
+}
+
+.author-image {
+  background-size: cover;
+  width: 20vmin;
+  min-width: 20vmin;
+  max-width: 20vmin;
+  height: 20vmin;
+  min-height: 20vmin;
+  max-height: 20vmin;
+  border-radius: 50%;
+  border: 1.5vmin solid #fff;
+}
+
+.metadata-rhs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5em;
+}
+
+.detail {
+  overflow-wrap: break-word;
+}
+`
--- a/styles/prism-theme.css
+++ b/styles/prism-theme.css
@@ -30,7 +30,7 @@

 .light-mode .notion .notion-inline-code {
  color: #ff4081;
-  background: rgba(55, 53, 47, 0.1) !important;
+  background: rgba(127, 122, 107, 0.1) !important;
  padding: 0.2em 0.4em !important;
 }

--- a/yarn.lock
+++ b/yarn.lock
@@ -591,6 +591,13 @@
  resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==

+"@types/yauzl@^2.9.1":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
+  integrity sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==
+  dependencies:
+    "@types/node" "*"
+
 "@typescript-eslint/eslint-plugin@^5.15.0":
  version "5.17.0"
  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.17.0.tgz"
@@ -708,6 +715,11 @@
  resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==

+"@yarnpkg/lockfile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
 "@zeit/dns-cached-resolve@^2.1.2":
  version "2.1.2"
  resolved "https://registry.npmjs.org/@zeit/dns-cached-resolve/-/dns-cached-resolve-2.1.2.tgz"
@@ -734,6 +746,13 @@ acorn@^8.0.4, acorn@^8.7.0:
  resolved "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz"
  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==

+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
 agentkeepalive@^4.2.1:
  version "4.2.1"
  resolved "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz"
@@ -916,7 +935,12 @@ braces@^3.0.2:
  dependencies:
    fill-range "^7.0.1"

-buffer@^5.5.0:
+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
+buffer@^5.2.1, buffer@^5.5.0:
  version "5.7.1"
  resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz"
  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -965,7 +989,7 @@ caniuse-lite@^1.0.30001283:
  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001322.tgz"
  integrity sha512-neRmrmIrCGuMnxGSoh+x7zYtQFFgnSY2jaomjU56sCkTA6JINqQrxutF459JpWcWRajvoyn95sOXq4Pqrnyjew==

-chalk@^2.4.1:
+chalk@^2.4.1, chalk@^2.4.2:
  version "2.4.2"
  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1026,6 +1050,18 @@ chownr@^1.1.1:
  resolved "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz"
  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==

+chrome-aws-lambda@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/chrome-aws-lambda/-/chrome-aws-lambda-10.1.0.tgz#ac43b4cdfc1fbb2275c62effada560858099501e"
+  integrity sha512-NZQVf+J4kqG4sVhRm3WNmOfzY0OtTSm+S8rg77pwePa9RCYHzhnzRs8YvNI6L9tALIW6RpmefWiPURt3vURXcw==
+  dependencies:
+    lambdafs "^2.0.3"
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
 classnames@^2.2.6, classnames@^2.3.1:
  version "2.3.1"
  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
@@ -1221,13 +1257,20 @@ date-fns@^2.28.0:
  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==

-debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
  version "4.3.4"
  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
  dependencies:
    ms "2.1.2"

+debug@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
+  dependencies:
+    ms "2.1.2"
+
 decompress-response@^4.2.0:
  version "4.2.1"
  resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz"
@@ -1252,6 +1295,11 @@ deep-is@^0.1.3:
  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==

+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 defer-to-connect@^2.0.0, defer-to-connect@^2.0.1:
  version "2.0.1"
  resolved "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz"
@@ -1294,6 +1342,11 @@ detect-node-es@^1.1.0:
  resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==

+devtools-protocol@0.0.901419:
+  version "0.0.901419"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.901419.tgz#79b5459c48fe7e1c5563c02bd72f8fec3e0cebcd"
+  integrity sha512-4INMPwNm9XRpBukhNbF7OB6fNTTCaI8pzy/fXg0xQzAy5h3zL1P8xT3QazgKqBrb/hAYwIBizqDBZ7GtJE74QQ==
+
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@@ -1600,6 +1653,17 @@ extend@^3.0.0:
  resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==

+extract-zip@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
+  dependencies:
+    debug "^4.1.1"
+    get-stream "^5.1.0"
+    yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -1648,6 +1712,13 @@ fathom-client@^3.4.1:
  resolved "https://registry.npmjs.org/fathom-client/-/fathom-client-3.4.1.tgz"
  integrity sha512-iQFKx9B9RDeGLzgNqsaXWg3Fvu7yfq1Z8GjpAG3DP8IoGoPRWOOktpM7DUKiUzoE3d37hdvDQvkqUHfNzVwimg==

+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
+  dependencies:
+    pend "~1.2.0"
+
 fflate@^0.4.1:
  version "0.4.8"
  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
@@ -1675,6 +1746,21 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-yarn-workspace-root@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
+  dependencies:
+    micromatch "^4.0.2"
+
 flat-cache@^3.0.4:
  version "3.0.4"
  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
@@ -1707,6 +1793,24 @@ fs-constants@^1.0.0:
  resolved "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz"
  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==

+fs-extra@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^8.0.1:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs.realpath@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
@@ -1861,6 +1965,11 @@ got@^12.0.3:
    p-cancelable "^3.0.0"
    responselike "^2.0.0"

+graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
 graceful-fs@^4.1.2:
  version "4.2.9"
  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz"
@@ -2039,6 +2148,14 @@ http2-wrapper@^2.1.10:
    quick-lru "^5.1.1"
    resolve-alpn "^1.2.0"

+https-proxy-agent@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
+  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 humanize-ms@^1.2.1:
  version "1.2.1"
  resolved "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz"
@@ -2193,6 +2310,13 @@ is-callable@^1.1.4, is-callable@^1.2.4:
  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==

+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
 is-core-module@^2.2.0, is-core-module@^2.8.1:
  version "2.8.1"
  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz"
@@ -2212,6 +2336,11 @@ is-decimal@^1.0.0:
  resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz"
  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==

+is-docker@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
 is-extglob@^2.1.1:
  version "2.1.1"
  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
@@ -2297,6 +2426,13 @@ is-weakref@^1.0.2:
  dependencies:
    call-bind "^1.0.2"

+is-wsl@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
 isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
@@ -2362,6 +2498,22 @@ json5@^2.1.2:
  resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==

+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonfile@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922"
+  integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==
+  dependencies:
+    universalify "^0.1.2"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0":
  version "3.2.1"
  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz"
@@ -2385,6 +2537,20 @@ keyv@^4.0.0:
    compress-brotli "^1.3.6"
    json-buffer "3.0.1"

+klaw-sync@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+
+lambdafs@^2.0.3:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/lambdafs/-/lambdafs-2.1.1.tgz#4bf8d3037b6c61bbb4a22ab05c73ee47964c25ed"
+  integrity sha512-x5k8JcoJWkWLvCVBzrl4pzvkEHSgSBqFjg3Dpsc4AcTMq7oUMym4cL/gRTZ6VM4mUMY+M0dIbQ+V1c1tsqqanQ==
+  dependencies:
+    tar-fs "^2.1.1"
+
 levn@^0.4.1:
  version "0.4.1"
  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
@@ -2412,6 +2578,13 @@ loader-utils@^2.0.0:
    emojis-list "^3.0.0"
    json5 "^2.1.2"

+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lodash.defaults@^4.2.0:
  version "4.2.0"
  resolved "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz"
@@ -2583,7 +2756,7 @@ micromark@~2.11.0:
    debug "^4.0.0"
    parse-entities "^2.0.0"

-micromatch@^4.0.4:
+micromatch@^4.0.2, micromatch@^4.0.4:
  version "4.0.5"
  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -2630,7 +2803,7 @@ minimatch@^3.0.4, minimatch@^3.1.2:
  dependencies:
    brace-expansion "^1.1.7"

-minimist@^1.2.0, minimist@^1.2.3:
+minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
  version "1.2.6"
  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -2640,6 +2813,13 @@ mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
  resolved "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz"
  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==

+mkdirp@^0.5.1:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
 mrmime@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/mrmime/-/mrmime-1.0.0.tgz"
@@ -2679,6 +2859,17 @@ natural-compare@^1.4.0:
  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=

+next-api-og-image@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/next-api-og-image/-/next-api-og-image-2.2.1.tgz#946102987fb557a6b2249fc39fe2631b48ae88db"
+  integrity sha512-cpxHkShMpQpivL/GEPxvxZ+jS2+HxAtRdpaqAcDbLZpeLdpnbZtZW7p6PUuAe6GGIdZdfjeOmuy0ivXdPobIQQ==
+  dependencies:
+    chrome-aws-lambda "^10.1.0"
+    deepmerge "^4.2.2"
+    patch-package "^6.4.7"
+    puppeteer-core "^10.4.0"
+    twemoji "^13.1.0"
+
 next@^12.1.1:
  version "12.1.3"
  resolved "https://registry.npmjs.org/next/-/next-12.1.3.tgz"
@@ -2726,6 +2917,11 @@ node-fetch@*, node-fetch@^2.6.1:
  dependencies:
    whatwg-url "^5.0.0"

+node-fetch@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 normalize-package-data@^2.3.2:
  version "2.5.0"
  resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
@@ -2746,14 +2942,14 @@ normalize-url@^7.0.3:
  resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-7.0.3.tgz"
  integrity sha512-RiCOdwdPnzvwcBFJE4iI1ss3dMVRIrEzFpn8ftje6iBfzBInqlnRrNhxcLwBEKjPPXQKzm1Ptlxtaiv9wdcj5w==

-notion-client@^6.7.0-alpha.1:
-  version "6.7.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/notion-client/-/notion-client-6.7.0-alpha.1.tgz#2cda44b1934b23dd513b2ef115c6cd6ca111aa67"
-  integrity sha512-w1UrTIZwlaEIylU65PHfiBM07404n1dGo4WswbCmFGxR4dCdeAzozAN8Finqr9STNS+qqVUXS31yt5BBJFP+CQ==
+notion-client@^6.7.0-alpha.2:
+  version "6.7.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/notion-client/-/notion-client-6.7.0-alpha.2.tgz#ef1f3ec4993be2843c38c8cd2b7ba796676d87f9"
+  integrity sha512-nWPx7SyHgR4k4Gu9vF3HKd6LSIH7jqly7dJmubGZ6UjAnqgVaus37+YKjF57+UMQ8csOtkcdfJaTH0rpANkT3A==
  dependencies:
    got "^11.8.1"
    notion-types "^6.7.0-alpha.0"
-    notion-utils "^6.7.0-alpha.1"
+    notion-utils "^6.7.0-alpha.2"
    p-map "^5.3.0"

 notion-types@^6.7.0-alpha.0:
@@ -2761,10 +2957,10 @@ notion-types@^6.7.0-alpha.0:
  resolved "https://registry.yarnpkg.com/notion-types/-/notion-types-6.7.0-alpha.0.tgz#81889eb1a9f2945555694db4e68446dfe423d0d8"
  integrity sha512-HuB+kq/qd+ZG9422ob/ar7JZaoa1FjmhjYopM6TwlRgFbBmByIRphk6luB/OUNKG3Un8jKaDUsfhGL/VZe5GwQ==

-notion-utils@^6.7.0-alpha.1:
-  version "6.7.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/notion-utils/-/notion-utils-6.7.0-alpha.1.tgz#8f63c80c7ada746127c4679540149fc45a871150"
-  integrity sha512-rsKo9x5nYBpyTeWbMC9HaOzpeQSO9o7z+H3FZBE/+G0oqOGCw1V9cYClEXbd1cT9Uzs3izpBIB9OC/jiqDDnoA==
+notion-utils@^6.7.0-alpha.2:
+  version "6.7.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/notion-utils/-/notion-utils-6.7.0-alpha.2.tgz#3413d6e95d3f9eaebe2069e0ad9d2e1184850bb2"
+  integrity sha512-jxehpnG8ZDzVkZBw7sXDt+M/cz7/Hd2jjrcIho3DvFY6njE6W3K1euUlxbXn65G/RAcugl5WKR+Ls7IDQLRxkw==
  dependencies:
    is-url-superb "^6.1.0"
    mem "^9.0.2"
@@ -2876,6 +3072,14 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
  dependencies:
    wrappy "1"

+open@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 opener@^1.5.2:
  version "1.5.2"
  resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
@@ -2893,6 +3097,11 @@ optionator@^0.9.1:
    type-check "^0.4.0"
    word-wrap "^1.2.3"

+os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
+
 p-cancelable@^2.0.0:
  version "2.1.1"
  resolved "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz"
@@ -2920,6 +3129,20 @@ p-finally@^1.0.0:
  resolved "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz"
  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=

+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-map@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz"
@@ -2961,6 +3184,11 @@ p-timeout@^5.0.2:
  resolved "https://registry.npmjs.org/p-timeout/-/p-timeout-5.0.2.tgz"
  integrity sha512-sEmji9Yaq+Tw+STwsGAE56hf7gMy9p0tQfJojIAamB7WHJYJKf1qlsg9jqBWG8q9VCxKPhZaP/AcXwEoBcYQhQ==

+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
 parent-module@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@@ -3000,6 +3228,30 @@ parse5@^6.0.0, parse5@^6.0.1:
  resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz"
  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==

+patch-package@^6.4.7:
+  version "6.4.7"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.4.7.tgz#2282d53c397909a0d9ef92dae3fdeb558382b148"
+  integrity sha512-S0vh/ZEafZ17hbhgqdnpunKDfzHQibQizx9g8yEf5dcVk3KOflOfdufRXQX8CSEkyOQwuM/bNz1GwKvFj54kaQ==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    chalk "^2.4.2"
+    cross-spawn "^6.0.5"
+    find-yarn-workspace-root "^2.0.0"
+    fs-extra "^7.0.1"
+    is-ci "^2.0.0"
+    klaw-sync "^6.0.0"
+    minimist "^1.2.0"
+    open "^7.4.2"
+    rimraf "^2.6.3"
+    semver "^5.6.0"
+    slash "^2.0.0"
+    tmp "^0.0.33"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
@@ -3037,6 +3289,11 @@ pdfjs-dist@2.12.313:
  resolved "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz"
  integrity sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==

+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
 picocolors@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
@@ -3057,6 +3314,13 @@ pify@^3.0.0:
  resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=

+pkg-dir@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
 postcss@8.4.5:
  version "8.4.5"
  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz"
@@ -3114,6 +3378,11 @@ process-nextick-args@~2.0.0:
  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==

+progress@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.1.tgz#c9242169342b1c29d275889c95734621b1952e31"
+  integrity sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==
+
 prop-types@^15.5.6, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
@@ -3130,6 +3399,11 @@ property-information@^5.0.0, property-information@^5.3.0:
  dependencies:
    xtend "^4.0.0"

+proxy-from-env@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 pump@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz"
@@ -3143,6 +3417,24 @@ punycode@^2.1.0:
  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

+puppeteer-core@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-10.4.0.tgz#4e2da57c52339b8c07cd9362922020eb3c3c95bf"
+  integrity sha512-KU8zyb7AIOqNjLCN3wkrFXxh+EVaG+zrs2P03ATNjc3iwSxHsu5/EvZiREpQ/IJiT9xfQbDVgKcsvRuzLCxglQ==
+  dependencies:
+    debug "4.3.1"
+    devtools-protocol "0.0.901419"
+    extract-zip "2.0.1"
+    https-proxy-agent "5.0.0"
+    node-fetch "2.6.1"
+    pkg-dir "4.2.0"
+    progress "2.0.1"
+    proxy-from-env "1.1.0"
+    rimraf "3.0.2"
+    tar-fs "2.0.0"
+    unbzip2-stream "1.3.3"
+    ws "7.4.6"
+
 queue-microtask@^1.2.2:
  version "1.2.3"
  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
@@ -3238,17 +3530,17 @@ react-modal@^3.14.3:
    react-lifecycles-compat "^3.0.0"
    warning "^4.0.3"

-react-notion-x@^6.7.0-alpha.1:
-  version "6.7.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.7.0-alpha.1.tgz#395292c452f0cac8d55132f3e95ff064ad42b6b9"
-  integrity sha512-U4nJCYYTAhzHiKxyOOYQjrkJXnyMMvxWHZ8F60QGgOhM5Zw6DQCDcpXwNccOuBfPM0YgfvqN9hgJRHUvebTXDw==
+react-notion-x@^6.7.0-alpha.2:
+  version "6.7.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.7.0-alpha.2.tgz#ede46bec478e4847a8c792f6de0fddb0b936f371"
+  integrity sha512-SDbN9w6y1sbG4IkqE83RQy0oaaOefVbsScRvaaXqafnYsHkUeg4WPCO1IbdEP7A/0huZ7LqkhUTjow7vzi3/jA==
  dependencies:
    "@matejmazur/react-katex" "^3.1.3"
    "@radix-ui/react-dropdown-menu" "^0.1.6"
    katex "^0.13.18"
    medium-zoom "^1.0.6"
    notion-types "^6.7.0-alpha.0"
-    notion-utils "^6.7.0-alpha.1"
+    notion-utils "^6.7.0-alpha.2"
    prismjs "^1.27.0"
    react-fast-compare "^3.2.0"
    react-hotkeys-hook "^3.0.3"
@@ -3508,13 +3800,20 @@ reusify@^1.0.4:
  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==

-rimraf@^3.0.2:
+rimraf@3.0.2, rimraf@^3.0.2:
  version "3.0.2"
  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
  dependencies:
    glob "^7.1.3"

+rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rrweb-snapshot@^1.1.7:
  version "1.1.14"
  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
@@ -3561,7 +3860,7 @@ screenfull@^5.1.0:
  resolved "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz"
  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==

-"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
  version "5.7.1"
  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -3675,6 +3974,11 @@ sirv@^1.0.7:
    mrmime "^1.0.0"
    totalist "^1.0.0"

+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
 slash@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -3906,6 +4210,16 @@ swr@^1.0.0-beta.5:
  resolved "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz"
  integrity sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==

+tar-fs@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.0.tgz#677700fc0c8b337a78bee3623fdc235f21d7afad"
+  integrity sha512-vaY0obB6Om/fso8a8vakQBzwholQ7v5+uy+tF3Ozvxv1KNezmVQAiWtcNmMHFSFPqL3dJA8ha6gdtFbfX9mcxA==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp "^0.5.1"
+    pump "^3.0.0"
+    tar-stream "^2.0.0"
+
 tar-fs@^2.0.0, tar-fs@^2.1.1:
  version "2.1.1"
  resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz"
@@ -3916,7 +4230,7 @@ tar-fs@^2.0.0, tar-fs@^2.1.1:
    pump "^3.0.0"
    tar-stream "^2.1.4"

-tar-stream@^2.1.4:
+tar-stream@^2.0.0, tar-stream@^2.1.4:
  version "2.2.0"
  resolved "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz"
  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
@@ -3937,6 +4251,11 @@ throttle-debounce@^3.0.1:
  resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz"
  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==

+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
 tiny-invariant@^1.0.0:
  version "1.2.0"
  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz"
@@ -3947,6 +4266,13 @@ tiny-warning@^1.0.0:
  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
 to-regex-range@^5.0.1:
  version "5.0.1"
  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
@@ -4003,6 +4329,21 @@ tunnel-agent@^0.6.0:
  dependencies:
    safe-buffer "^5.0.1"

+twemoji-parser@13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-13.1.0.tgz#65e7e449c59258791b22ac0b37077349127e3ea4"
+  integrity sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg==
+
+twemoji@^13.1.0:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-13.1.1.tgz#6e31409908bb5383cdb1d09c9c8e7856aa6e2e3b"
+  integrity sha512-IIIoq+n1lk1M1+evBKZD3DO0ud02fDQ4ssbgAv8rp3YBWUeNmskjlisFUPPDacQ50XS3bhrd4Kq9Q2gqhxb0dg==
+  dependencies:
+    fs-extra "^8.0.1"
+    jsonfile "^5.0.0"
+    twemoji-parser "13.1.0"
+    universalify "^0.1.2"
+
 type-check@^0.4.0, type-check@~0.4.0:
  version "0.4.0"
  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
@@ -4030,6 +4371,14 @@ unbox-primitive@^1.0.1:
    has-symbols "^1.0.2"
    which-boxed-primitive "^1.0.2"

+unbzip2-stream@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz#d156d205e670d8d8c393e1c02ebd506422873f6a"
+  integrity sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==
+  dependencies:
+    buffer "^5.2.1"
+    through "^2.3.8"
+
 unfetch@^4.2.0:
  version "4.2.0"
  resolved "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz"
@@ -4096,6 +4445,11 @@ unist-util-visit@^2.0.0, unist-util-visit@^2.0.2:
    unist-util-is "^4.0.0"
    unist-util-visit-parents "^3.0.0"

+universalify@^0.1.0, universalify@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
 uri-js@^4.2.2:
  version "4.4.1"
  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
@@ -4246,6 +4600,11 @@ wrappy@1:
  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=

+ws@7.4.6:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+
 ws@^7.3.1:
  version "7.5.7"
  resolved "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz"
@@ -4266,6 +4625,14 @@ yallist@^4.0.0:
  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
 zwitch@^1.0.0:
  version "1.0.5"
  resolved "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz"