diff --git a/.env.example b/.env.example
index 04dfc9a..bca6ff5 100644
--- a/.env.example
+++ b/.env.example
@@ -18,7 +18,7 @@
 
 # Optional (for persisting preview images to redis)
 # NOTE: if you want to enable redis, only REDIS_HOST and REDIS_PASSWORD are required
-# NOTE: don't forget to set isRedisEnabled to true in the site.config.js file
+# NOTE: don't forget to set isRedisEnabled to true in the site.config.ts file
 #REDIS_HOST=
 #REDIS_PASSWORD=
 #REDIS_USER='default'
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 2e30556..f5fcffe 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import useDarkMode from '@fisch0920/use-dark-mode'
 import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
 import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
 import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
@@ -13,17 +14,16 @@ import styles from './styles.module.css'
 
 const year = new Date().getFullYear()
 
-export const Footer: React.FC<{
-  isDarkMode: boolean
-  toggleDarkMode: () => void
-}> = ({ isDarkMode, toggleDarkMode }) => {
+export const FooterImpl: React.FC = () => {
   const [hasMounted, setHasMounted] = React.useState(false)
-  const toggleDarkModeCb = React.useCallback(
+  const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
+
+  const onToggleDarkMode = React.useCallback(
     (e) => {
       e.preventDefault()
-      toggleDarkMode()
+      darkMode.toggle()
     },
-    [toggleDarkMode]
+    [darkMode]
   )
 
   React.useEffect(() => {
@@ -34,18 +34,18 @@ export const Footer: React.FC<{
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright {year} {config.author}</div>
 
-      {hasMounted ? (
-        <div className={styles.settings}>
+      <div className={styles.settings}>
+        {hasMounted && (
           <a
             className={styles.toggleDarkMode}
             href='#'
-            onClick={toggleDarkModeCb}
-            title='Toggle dark mode'
+            role='button'
+            onClick={onToggleDarkMode}
           >
-            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
+            {darkMode.value ? <IoMoonSharp /> : <IoSunnyOutline />}
           </a>
-        </div>
-      ) : null}
+        )}
+      </div>
 
       <div className={styles.social}>
         {config.twitter && (
@@ -99,3 +99,5 @@ export const Footer: React.FC<{
     </footer>
   )
 }
+
+export const Footer = React.memo(FooterImpl)
diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx
index 2f118d0..90be33d 100644
--- a/components/NotionPage.tsx
+++ b/components/NotionPage.tsx
@@ -15,12 +15,7 @@ import { Tweet, TwitterContextProvider } from 'react-static-tweets'
 import { NotionRenderer } from 'react-notion-x'
 
 // utils
-import {
-  getBlockTitle,
-  getBlockIcon,
-  getPageProperty,
-  isUrl
-} from 'notion-utils'
+import { getBlockTitle, getPageProperty } from 'notion-utils'
 import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
 import { mapImageUrl } from 'lib/map-image-url'
 import { getPageTweet } from 'lib/get-page-tweet'
@@ -37,6 +32,8 @@ import { PageActions } from './PageActions'
 import { Footer } from './Footer'
 import { PageSocial } from './PageSocial'
 const ReactGiscus = dynamic(() => import('./ReactGiscus'))
+import { NotionPageHeader } from './NotionPageHeader'
+import { GitHubShareButton } from './GitHubShareButton'
 
 import styles from './styles.module.css'
 
@@ -62,7 +59,11 @@ const Pdf = dynamic(
   }
 )
 const Modal = dynamic(
-  () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
+  () =>
+    import('react-notion-x/build/third-party/modal').then((m) => {
+      m.Modal.setAppElement('.notion-viewport')
+      return m.Modal
+    }),
   {
     ssr: false
   }
@@ -77,15 +78,48 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const router = useRouter()
   const lite = useSearchParam('lite')
 
-  const params: any = {}
-  if (lite) params.lite = lite
+  const components = React.useMemo(
+    () => ({
+      nextImage: Image,
+      nextLink: Link,
+      Code,
+      Collection,
+      Equation,
+      Pdf,
+      Modal,
+      Tweet,
+      Header: NotionPageHeader
+    }),
+    []
+  )
+
+  const twitterContextValue = React.useMemo(() => {
+    if (!recordMap) {
+      return null
+    }
+
+    return {
+      tweetAstMap: (recordMap as any).tweetAstMap || {},
+      swrOptions: {
+        fetcher: (id: string) =>
+          fetch(`/api/get-tweet-ast/${id}`).then((r) => r.json())
+      }
+    }
+  }, [recordMap])
 
   // lite mode is for oembed
   const isLiteMode = lite === 'true'
-  const searchParams = new URLSearchParams(params)
 
   const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
 
+  const siteMapPageUrl = React.useMemo(() => {
+    const params: any = {}
+    if (lite) params.lite = lite
+
+    const searchParams = new URLSearchParams(params)
+    return mapPageUrl(site, recordMap, searchParams)
+  }, [site, recordMap, lite])
+
   if (router.isFallback) {
     return <Loading />
   }
@@ -107,8 +141,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
     g.block = block
   }
 
-  const siteMapPageUrl = mapPageUrl(site, recordMap, searchParams)
-
   const canonicalPageUrl =
     !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
 
@@ -121,41 +153,15 @@ export const NotionPage: React.FC<types.PageProps> = ({
 
   const socialImage = mapImageUrl(
     getPageProperty<string>('Social Image', block, recordMap) ||
-      (block as PageBlock).format?.page_cover ||
-      config.defaultPageCover,
+    (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 =
     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 comments: React.ReactNode = null
   let pageAside: React.ReactNode = null
 
@@ -165,7 +171,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
       comments = (
         <ReactGiscus darkMode={darkMode.value} />
       )
-    } 
+    }
     const tweet = getPageTweet(block, recordMap)
     if (tweet) {
       pageAside = <PageActions tweet={tweet} />
@@ -175,24 +181,13 @@ export const NotionPage: React.FC<types.PageProps> = ({
   }
 
   return (
-    <TwitterContextProvider
-      value={{
-        tweetAstMap: (recordMap as any).tweetAstMap || {},
-        swrOptions: {
-          fetcher: (id) =>
-            fetch(`/api/get-tweet-ast/${id}`).then((r) => r.json())
-        }
-      }}
-    >
+    <TwitterContextProvider value={twitterContextValue}>
       <PageHead
+        pageId={pageId}
         site={site}
         title={title}
         description={socialDescription}
         image={socialImage}
-        imageObjectPosition={socialImageObjectPosition}
-        author={socialAuthor}
-        authorImage={socialAuthorImage}
-        detail={socialDetail}
         url={canonicalPageUrl}
       />
 
@@ -205,16 +200,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
           styles.notion,
           pageId === site.rootNotionPageId && 'index-page'
         )}
-        components={{
-          nextImage: Image,
-          nextLink: Link,
-          Code,
-          Collection,
-          Equation,
-          Pdf,
-          Modal,
-          Tweet
-        }}
+        components={components}
         recordMap={recordMap}
         rootPageId={site.rootNotionPageId}
         rootDomain={site.domain}
@@ -229,15 +215,10 @@ export const NotionPage: React.FC<types.PageProps> = ({
         defaultPageCoverPosition={config.defaultPageCoverPosition}
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapImageUrl}
-        searchNotion={searchNotion}
         pageFooter={comments}
+        searchNotion={config.isSearchEnabled ? searchNotion : null}
         pageAside={pageAside}
-        footer={
-          <Footer
-            isDarkMode={darkMode.value}
-            toggleDarkMode={darkMode.toggle}
-          />
-        }
+        footer={<Footer />}
       />
 
     </TwitterContextProvider>
diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx
new file mode 100644
index 0000000..4ec4d39
--- /dev/null
+++ b/components/NotionPageHeader.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import cs from 'classnames'
+import useDarkMode from '@fisch0920/use-dark-mode'
+import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
+
+import { Header, Breadcrumbs, Search, useNotionContext } from 'react-notion-x'
+
+import * as types from 'lib/types'
+import { navigationStyle, navigationLinks, isSearchEnabled } from 'lib/config'
+
+import styles from './styles.module.css'
+
+export const NotionPageHeader: React.FC<{
+  block: types.CollectionViewPageBlock | types.PageBlock
+}> = ({ block }) => {
+  const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
+  const [hasMounted, setHasMounted] = React.useState(false)
+  const { components, mapPageUrl } = useNotionContext()
+
+  React.useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (navigationStyle === 'default') {
+    return <Header block={block} />
+  }
+
+  return (
+    <header className='notion-header'>
+      <div className='notion-nav-header'>
+        <Breadcrumbs block={block} rootOnly={true} />
+
+        <div className='notion-nav-header-rhs breadcrumbs'>
+          {navigationLinks
+            ?.map((link, index) => {
+              if (!link.pageId && !link.url) {
+                return null
+              }
+
+              if (link.pageId) {
+                return (
+                  <components.PageLink
+                    href={mapPageUrl(link.pageId)}
+                    key={index}
+                    className={cs(styles.navLink, 'breadcrumb', 'button')}
+                  >
+                    {link.title}
+                  </components.PageLink>
+                )
+              } else {
+                return (
+                  <components.Link
+                    href={link.url}
+                    key={index}
+                    className={cs(styles.navLink, 'breadcrumb', 'button')}
+                  >
+                    {link.title}
+                  </components.Link>
+                )
+              }
+            })
+            .filter(Boolean)}
+
+          <div
+            className={cs('breadcrumb', 'button')}
+            role='button'
+            onClick={darkMode.toggle}
+          >
+            {hasMounted && darkMode.value ? (
+              <IoMoonSharp />
+            ) : (
+              <IoSunnyOutline />
+            )}
+          </div>
+
+          {isSearchEnabled && <Search block={block} title={null} />}
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/components/PageHead.tsx b/components/PageHead.tsx
index 92aa213..643461f 100644
--- a/components/PageHead.tsx
+++ b/components/PageHead.tsx
@@ -10,34 +10,13 @@ export const PageHead: React.FC<
     title?: string
     description?: string
     image?: string
-    imageObjectPosition?: string
-    author?: string
-    authorImage?: string
-    detail?: string
     url?: string
   }
-> = ({
-  site,
-  title,
-  description,
-  image,
-  imageObjectPosition,
-  author,
-  authorImage,
-  detail,
-  url
-}) => {
+> = ({ site, title, description, pageId, image, url }) => {
   title = title ?? site?.name
   description = description ?? site?.description
 
-  const socialImageUrl = getSocialImageUrl({
-    title,
-    image,
-    imageObjectPosition,
-    author,
-    authorImage,
-    detail
-  })
+  const socialImageUrl = getSocialImageUrl(pageId) || image
 
   return (
     <Head>
diff --git a/lib/config.ts b/lib/config.ts
index 4597674..ff6e0fe 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -1,7 +1,7 @@
 /**
  * Site-wide app configuration.
  *
- * This file pulls from the root "site.config.js" as well as environment variables
+ * This file pulls from the root "site.config.ts" as well as environment variables
  * for optional depenencies.
  */
 
@@ -9,8 +9,12 @@ import { parsePageId } from 'notion-utils'
 import { GiscusProps } from '@giscus/react'
 import posthog from 'posthog-js'
 import { getEnv, getSiteConfig } from './get-config-value'
-import { PageUrlOverridesMap, PageUrlOverridesInverseMap } from './types'
-import Config = posthog.Config
+import { NavigationLink } from './site-config'
+import {
+  PageUrlOverridesInverseMap,
+  PageUrlOverridesMap,
+  NavigationStyle
+} from './types'
 
 export const environment = process.env.NODE_ENV || 'development'
 export const isDev = environment === 'development'
@@ -57,9 +61,9 @@ export const description: string = getSiteConfig('description', 'Notion Blog')
 
 // social accounts
 export const twitter: string | null = getSiteConfig('twitter', null)
-export const zhihu: string | null = getSiteConfig('zhihu', null)
 export const github: string | null = getSiteConfig('github', null)
 export const linkedin: string | null = getSiteConfig('linkedin', null)
+export const zhihu: string | null = getSiteConfig('zhihu', null)
 
 // default notion values for site-wide consistency (optional; may be overridden on a per-page basis)
 export const defaultPageIcon: string | null = getSiteConfig(
@@ -87,12 +91,25 @@ export const isTweetEmbedSupportEnabled: boolean = getSiteConfig(
   true
 )
 
-// where it all starts -- the site's root Notion page
+// Optional whether or not to include the Notion ID in page URLs or just use slugs
 export const includeNotionIdInUrls: boolean = getSiteConfig(
   'includeNotionIdInUrls',
   !!isDev
 )
 
+export const navigationStyle: NavigationStyle = getSiteConfig(
+  'navigationStyle',
+  'default'
+)
+
+export const navigationLinks: Array<NavigationLink | null> = getSiteConfig(
+  'navigationLinks',
+  null
+)
+
+// Optional site search
+export const isSearchEnabled: boolean = getSiteConfig('isSearchEnabled', true)
+
 // ----------------------------------------------------------------------------
 
 // Optional redis instance for persisting preview images
@@ -137,16 +154,9 @@ export const fathomConfig = fathomId
   : undefined
 
 export const googleAnalyticsID = isDev ? null : process.env.NEXT_PUBLIC_GA_ID
-
-// PostHog automatically filters events coming from localhost
-export const postHogId = process.env.NEXT_PUBLIC_POSTHOG_ID
-export const postHogConfig: Config = {
-  // See https://posthog.com/docs/integrate/client/js#config
-  api_host: 'https://app.posthog.com',
-  loaded: (posthog_instance) => {
-    console.debug(`PostHog loaded`, posthog_instance)
-    // posthog_instance.identify(unique user id)
-  }
+export const posthogId = process.env.NEXT_PUBLIC_POSTHOG_ID
+export const posthogConfig: posthog.Config = {
+  api_host: 'https://app.posthog.com'
 }
 
 function cleanPageUrlMap(
diff --git a/lib/get-all-pages.ts b/lib/get-all-pages.ts
index aa639ee..ee6bac8 100644
--- a/lib/get-all-pages.ts
+++ b/lib/get-all-pages.ts
@@ -3,7 +3,7 @@ import { getAllPagesInSpace, getPageProperty, getBlockTitle } from 'notion-utils
 
 import * as types from './types'
 import { includeNotionIdInUrls, overrideCreatedTime, overrideLastEditedTime } from './config'
-import { notion } from './notion'
+import { notion } from './notion-api'
 import { getCanonicalPageId } from './get-canonical-page-id'
 
 const uuid = !!includeNotionIdInUrls
diff --git a/lib/get-config-value.ts b/lib/get-config-value.ts
index a702150..c3b9b7a 100644
--- a/lib/get-config-value.ts
+++ b/lib/get-config-value.ts
@@ -1,11 +1,12 @@
 import rawSiteConfig from '../site.config'
+import { SiteConfig } from './site-config'
 
 if (!rawSiteConfig) {
-  throw new Error(`Config error: invalid site.config.js`)
+  throw new Error(`Config error: invalid site.config.ts`)
 }
 
-// TODO: allow environment variables to override site.config.js
-let siteConfigOverrides
+// allow environment variables to override site.config.ts
+let siteConfigOverrides: SiteConfig
 
 try {
   if (process.env.NEXT_PUBLIC_SITE_CONFIG) {
@@ -16,7 +17,7 @@ try {
   throw err
 }
 
-const siteConfig = {
+const siteConfig: SiteConfig = {
   ...rawSiteConfig,
   ...siteConfigOverrides
 }
diff --git a/lib/get-social-image-url.ts b/lib/get-social-image-url.ts
index f2ab9d0..3ee20da 100644
--- a/lib/get-social-image-url.ts
+++ b/lib/get-social-image-url.ts
@@ -1,45 +1,16 @@
 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)
+export function getSocialImageUrl(pageId: string) {
+  try {
+    const url = new URL(api.getSocialImage, host)
+
+    if (pageId) {
+      url.searchParams.set('id', pageId)
+      return url.toString()
+    }
+  } catch (err) {
+    console.warn('error invalid social image url', pageId, err.message)
   }
 
-  return url.toString()
+  return null
 }
diff --git a/lib/map-page-url.ts b/lib/map-page-url.ts
index ba1e195..1c8973a 100644
--- a/lib/map-page-url.ts
+++ b/lib/map-page-url.ts
@@ -12,11 +12,13 @@ const uuid = !!includeNotionIdInUrls
 export const mapPageUrl =
   (site: Site, recordMap: ExtendedRecordMap, searchParams: URLSearchParams) =>
   (pageId = '') => {
-    if (uuidToId(pageId) === site.rootNotionPageId) {
+    const pageUuid = parsePageId(pageId, { uuid: true })
+
+    if (uuidToId(pageUuid) === site.rootNotionPageId) {
       return createUrl('/', searchParams)
     } else {
       return createUrl(
-        `/${getCanonicalPageId(pageId, recordMap, { uuid })}`,
+        `/${getCanonicalPageId(pageUuid, recordMap, { uuid })}`,
         searchParams
       )
     }
diff --git a/lib/notion-api.ts b/lib/notion-api.ts
new file mode 100644
index 0000000..d429403
--- /dev/null
+++ b/lib/notion-api.ts
@@ -0,0 +1,5 @@
+import { NotionAPI } from 'notion-client'
+
+export const notion = new NotionAPI({
+  apiBaseUrl: process.env.NOTION_API_BASE_URL
+})
diff --git a/lib/notion.ts b/lib/notion.ts
index f59d7cb..b404849 100644
--- a/lib/notion.ts
+++ b/lib/notion.ts
@@ -1,19 +1,66 @@
-import { NotionAPI } from 'notion-client'
+import pMap from 'p-map'
+import pMemoize from 'p-memoize'
 import { ExtendedRecordMap, SearchParams, SearchResults } from 'notion-types'
+import { mergeRecordMaps } from 'notion-utils'
 
+import { notion } from './notion-api'
 import { getPreviewImageMap } from './preview-images'
 import { getTweetAstMap } from './tweet-embeds'
 import {
   isPreviewImageSupportEnabled,
-  isTweetEmbedSupportEnabled
+  isTweetEmbedSupportEnabled,
+  navigationStyle,
+  navigationLinks
 } from './config'
 
-export const notion = new NotionAPI({
-  apiBaseUrl: process.env.NOTION_API_BASE_URL
-})
+const getNavigationLinkPages = pMemoize(
+  async (): Promise<ExtendedRecordMap[]> => {
+    const navigationLinkPageIds = (navigationLinks || [])
+      .map((link) => link.pageId)
+      .filter(Boolean)
+
+    if (navigationStyle !== 'default' && navigationLinkPageIds.length) {
+      return pMap(
+        navigationLinkPageIds,
+        async (navigationLinkPageId) =>
+          notion.getPage(navigationLinkPageId, {
+            chunkLimit: 1,
+            fetchMissingBlocks: false,
+            fetchCollections: false,
+            signFileUrls: false
+          }),
+        {
+          concurrency: 4
+        }
+      )
+    }
+
+    return []
+  }
+)
 
 export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
-  const recordMap = await notion.getPage(pageId)
+  let recordMap = await notion.getPage(pageId)
+
+  if (navigationStyle !== 'default') {
+    // ensure that any pages linked to in the custom navigation header have
+    // their block info fully resolved in the page record map so we know
+    // the page title, slug, etc.
+    const navigationLinkRecordMaps = await getNavigationLinkPages()
+
+    const preLength = Object.keys(recordMap.block).length
+    if (navigationLinkRecordMaps?.length) {
+      recordMap = navigationLinkRecordMaps.reduce(
+        (map, navigationLinkRecordMap) =>
+          mergeRecordMaps(map, navigationLinkRecordMap),
+        recordMap
+      )
+
+      const postLength = Object.keys(recordMap.block).length
+
+      console.log('BLOCKS', { preLength, postLength })
+    }
+  }
 
   if (isPreviewImageSupportEnabled) {
     const previewImageMap = await getPreviewImageMap(recordMap)
diff --git a/lib/preview-images.ts b/lib/preview-images.ts
index cccbf89..a8b36aa 100644
--- a/lib/preview-images.ts
+++ b/lib/preview-images.ts
@@ -9,12 +9,6 @@ import { defaultPageIcon, defaultPageCover } from './config'
 import { db } from './db'
 import { mapImageUrl } from './map-image-url'
 
-// NOTE: this is just an example of how to pre-compute preview images.
-// Depending on how many images you're working with, this can potentially be
-// very expensive to recompute, so in production we recommend that you cache
-// the preview image results in a key-value database of your choosing.
-// If you're not sure where to start, check out https://github.com/jaredwray/keyv
-
 export async function getPreviewImageMap(
   recordMap: ExtendedRecordMap
 ): Promise<PreviewImageMap> {
diff --git a/lib/site-config.ts b/lib/site-config.ts
new file mode 100644
index 0000000..4dd8bfe
--- /dev/null
+++ b/lib/site-config.ts
@@ -0,0 +1,42 @@
+import * as types from './types'
+
+export interface SiteConfig {
+  rootNotionPageId: string
+  rootNotionSpaceId?: string
+
+  name: string
+  domain: string
+  author: string
+  description?: string
+
+  twitter?: string
+  github?: string
+  linkedin?: string
+  zhihu?: string
+
+  defaultPageIcon?: string | null
+  defaultPageCover?: string | null
+  defaultPageCoverPosition?: number | null
+
+  isPreviewImageSupportEnabled?: boolean
+  isTweetEmbedSupportEnabled?: boolean
+  isRedisEnabled?: boolean
+  isSearchEnabled?: boolean
+
+  includeNotionIdInUrls?: boolean
+  pageUrlOverrides?: types.PageUrlOverridesMap
+  pageUrlAdditions?: types.PageUrlOverridesMap
+
+  navigationStyle?: types.NavigationStyle
+  navigationLinks?: Array<NavigationLink>
+}
+
+export interface NavigationLink {
+  title: string
+  pageId?: string
+  url?: string
+}
+
+export const siteConfig = (config: SiteConfig): SiteConfig => {
+  return config
+}
diff --git a/lib/types.ts b/lib/types.ts
index 1736893..6058334 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -2,6 +2,8 @@ import { ExtendedRecordMap, PageMap } from 'notion-types'
 
 export * from 'notion-types'
 
+export type NavigationStyle = 'default' | 'custom'
+
 export interface PageError {
   message?: string
   statusCode: number
@@ -73,20 +75,3 @@ export interface PageUrlOverridesInverseMap {
   // (this overrides the built-in URL path generation for these pages)
   [pageId: string]: string
 }
-
-export interface PreviewImage {
-  url: string
-  originalWidth: number
-  originalHeight: number
-  width: number
-  height: number
-  type: string
-  dataURIBase64: string
-
-  error?: string
-  statusCode?: number
-}
-
-export interface PreviewImageMap {
-  [url: string]: PreviewImage
-}
diff --git a/package.json b/package.json
index 5bd3129..18d8c9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-notion-starter-kit",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "private": true,
   "description": "The perfect starter kit for building beautiful websites with Next.js and Notion.",
   "author": "Travis Fischer <travis@transitivebullsh.it>",
@@ -41,20 +41,20 @@
     "nextjs-sitemap-generator": "^1.3.1",
     "next-api-og-image": "^2.2.1",
     "node-fetch": "^2.6.1",
-    "notion-client": "^6.7.0-alpha.2",
-    "notion-types": "^6.7.0-alpha.0",
-    "notion-utils": "^6.7.0-alpha.2",
+    "notion-client": "^6.8.3",
+    "notion-types": "^6.7.0",
+    "notion-utils": "^6.8.3",
     "p-map": "^5.3.0",
     "p-memoize": "^6.0.1",
     "posthog-js": "^1.20.2",
     "react": "^17.0.2",
     "react-body-classname": "^1.3.1",
     "react-dom": "^17.0.2",
-    "react-notion-x": "^6.7.0-alpha.2",
-    "react-static-tweets": "^0.7.1",
+    "react-notion-x": "^6.8.4",
+    "react-static-tweets": "^0.7.2",
     "react-use": "^17.3.2",
+    "static-tweets": "^0.7.2",
     "rss": "^1.2.2",
-    "static-tweets": "^0.7.1",
     "@giscus/react": "^1.1.2"
   },
   "devDependencies": {
@@ -77,6 +77,10 @@
     "tailwindcss": "^2.2.4",
     "typescript": "^4.4.4"
   },
+  "resolutions": {
+    "next-api-og-image/chrome-aws-lambda": "6.0.0",
+    "next-api-og-image/puppeteer-core": "6.0.0"
+  },
   "overrides": {
     "cacheable-request": {
       "keyv": "npm:@keyvhq/core@~1.6.6"
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4f8411c..9966c02 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -29,12 +29,12 @@ import 'styles/prism-theme.css'
 import React from 'react'
 import { useRouter } from 'next/router'
 import Script from 'next/script'
-import { bootstrap } from 'lib/bootstrap-client'
-import { fathomId, fathomConfig, googleAnalyticsID } from 'lib/config'
-import { postHogId, postHogConfig } from 'lib/config'
 import * as Fathom from 'fathom-client'
 import posthog from 'posthog-js'
 
+import { bootstrap } from 'lib/bootstrap-client'
+import { fathomId, fathomConfig, posthogId, posthogConfig, googleAnalyticsID } from 'lib/config'
+
 if (typeof window !== 'undefined') {
   bootstrap()
 }
@@ -47,7 +47,8 @@ export default function App({ Component, pageProps }) {
       if (fathomId) {
         Fathom.trackPageview()
       }
-      if (postHogId) {
+
+      if (posthogId) {
         posthog.capture('$pageview')
       }
     }
@@ -55,11 +56,9 @@ export default function App({ Component, pageProps }) {
     if (fathomId) {
       Fathom.load(fathomId, fathomConfig)
     }
-    if (postHogId) {
-      posthog.init(postHogId, postHogConfig)
-    }
-    if(!fathomId && !postHogId) {
-      console.debug('No Analytics id provided.')
+
+    if (posthogId) {
+      posthog.init(posthogId, posthogConfig)
     }
 
     router.events.on('routeChangeComplete', onRouteChangeComplete)
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 96ca237..b4641b3 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -8,30 +8,12 @@ export default class MyDocument extends Document {
       <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
         <Html lang='en'>
           <Head>
-            <link rel='shortcut icon' href='/favicon.png' />
-
-            <link
-              rel='apple-touch-icon'
-              sizes='180x180'
-              href='/apple-touch-icon.png'
-            />
-            <link
-              rel='icon'
-              type='image/png'
-              sizes='96x96'
-              href='/favicon-96x96.png'
-            />
+            <link rel='shortcut icon' href='/favicon.ico' />
             <link
               rel='icon'
               type='image/png'
               sizes='32x32'
-              href='/favicon-32x32.png'
-            />
-            <link
-              rel='icon'
-              type='image/png'
-              sizes='16x16'
-              href='/favicon-16x16.png'
+              href='favicon.png'
             />
 
             <link rel='manifest' href='/manifest.json' />
diff --git a/pages/api/social-image.tsx b/pages/api/social-image.tsx
index a3e2d21..074491e 100644
--- a/pages/api/social-image.tsx
+++ b/pages/api/social-image.tsx
@@ -1,6 +1,20 @@
 import React from 'react'
 import { withOGImage } from 'next-api-og-image'
-import { interRegular } from '../../lib/fonts'
+
+import {
+  getBlockTitle,
+  getBlockIcon,
+  getPageProperty,
+  isUrl,
+  parsePageId
+} from 'notion-utils'
+import { PageBlock } from 'notion-types'
+
+import { notion } from 'lib/notion-api'
+import { getSiteForDomain } from 'lib/get-site-for-domain'
+import { mapImageUrl } from 'lib/map-image-url'
+import * as config from 'lib/config'
+import { interRegular } from 'lib/fonts'
 
 /**
  * Social image generation via headless chrome.
@@ -12,24 +26,69 @@ import { interRegular } from '../../lib/fonts'
  */
 const debugInspectHtml = false
 
-export default withOGImage<
-  'query',
-  | 'title'
-  | 'image'
-  | 'author'
-  | 'authorImage'
-  | 'detail'
-  | 'imageObjectPosition'
->({
+export default withOGImage<'query', 'id'>({
   template: {
-    react: ({
-      title,
-      image,
-      author,
-      authorImage,
-      detail,
-      imageObjectPosition
-    }) => {
+    react: async ({ id }) => {
+      const pageId = parsePageId(id)
+
+      if (!pageId) {
+        throw new Error('Invalid notion page id')
+      }
+
+      const site = await getSiteForDomain(config.domain)
+      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 isBlogPost =
+        block.type === 'page' && block.parent_table === 'collection'
+      const title = getBlockTitle(block, recordMap) || site.name
+      const image = mapImageUrl(
+        getPageProperty<string>('Social Image', block, recordMap) ||
+          (block as PageBlock).format?.page_cover ||
+          config.defaultPageCover,
+        block
+      )
+
+      const imageCoverPosition =
+        (block as PageBlock).format?.page_cover_position ??
+        config.defaultPageCoverPosition
+      const imageObjectPosition = imageCoverPosition
+        ? `center ${(1 - imageCoverPosition) * 100}%`
+        : null
+
+      const blockIcon = getBlockIcon(block, recordMap)
+      const authorImage = mapImageUrl(
+        blockIcon && isUrl(blockIcon) ? blockIcon : config.defaultPageIcon,
+        block
+      )
+
+      const author =
+        getPageProperty<string>('Author', block, recordMap) || config.author
+
+      // const socialDescription =
+      //   getPageProperty<string>('Description', block, recordMap) ||
+      //   config.description
+
+      const timePublished = getPageProperty<number>(
+        'Published',
+        block,
+        recordMap
+      )
+      const datePublished = timePublished ? new Date(timePublished) : undefined
+      const date =
+        isBlogPost && datePublished
+          ? `${datePublished.toLocaleString('en-US', {
+              month: 'long'
+            })} ${datePublished.getFullYear()}`
+          : undefined
+      const detail = date || site.domain
+
       return (
         <html>
           <head>
@@ -142,7 +201,8 @@ body {
 }
 
 .title {
-  font-size: 3em;
+  font-size: 3.2em;
+  line-height: 1.3;
 }
 
 .metadata {
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
deleted file mode 100644
index fc533f3..0000000
Binary files a/public/android-chrome-192x192.png and /dev/null differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
deleted file mode 100644
index 4aaac5a..0000000
Binary files a/public/android-chrome-512x512.png and /dev/null differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
deleted file mode 100644
index 1a73052..0000000
Binary files a/public/apple-touch-icon.png and /dev/null differ
diff --git a/public/favicon-128x128.png b/public/favicon-128x128.png
new file mode 100644
index 0000000..8be6cf3
Binary files /dev/null and b/public/favicon-128x128.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
deleted file mode 100644
index b0c7d81..0000000
Binary files a/public/favicon-16x16.png and /dev/null differ
diff --git a/public/favicon-192x192.png b/public/favicon-192x192.png
new file mode 100644
index 0000000..a53861f
Binary files /dev/null and b/public/favicon-192x192.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
deleted file mode 100644
index 8835f7f..0000000
Binary files a/public/favicon-32x32.png and /dev/null differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 569e98a..72e7501 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/manifest.json b/public/manifest.json
index d4eb10e..f961a3c 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,32 +1,24 @@
 {
-  "name": "FKYnJYQ",
-  "short_name": "FKY",
+  "name": "Next.js Notion Starter Kit",
+  "short_name": "Starter Kit",
   "icons": [
     {
-      "src": "/favicon-16x16.png",
-      "type": "image/png",
-      "sizes": "16x16"
-    },
-    {
-      "src": "/favicon-32x32.png",
+      "src": "/favicon.png",
       "type": "image/png",
       "sizes": "32x32"
     },
     {
-      "src": "/apple-touch-icon.png",
+      "src": "/favicon-128x128.png",
       "type": "image/png",
-      "sizes": "180x180"
+      "sizes": "128x128"
     },
     {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
+      "src": "/favicon-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
     }
   ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
   "display": "standalone"
 }
diff --git a/readme.md b/readme.md
index bd519dd..61bc574 100644
--- a/readme.md
+++ b/readme.md
@@ -14,15 +14,16 @@
 
 This repo is what I use to power my personal blog and portfolio site [transitivebullsh.it](https://transitivebullsh.it).
 
-It uses Notion as a CMS, [react-notion-x](https://github.com/NotionX/react-notion-x), [Next.js](https://nextjs.org/), and [Vercel](http://vercel.com).
+It uses Notion as a CMS, [react-notion-x](https://github.com/NotionX/react-notion-x), [Next.js](https://nextjs.org/), and [Vercel](https://vercel.com).
 
 ## Features
 
-- Setup only takes a few minutes ([single config file](./site.config.js)) 💪
+- Setup only takes a few minutes ([single config file](./site.config.ts)) 💪
 - Robust support for Notion content via [react-notion-x](https://github.com/NotionX/react-notion-x)
-- Next.js / TS / React / Notion
+- Built using Next.js, TS, and React
 - Excellent page speeds
 - Smooth image previews
+- Automatic social images
 - Automatic pretty URLs
 - Automatic table of contents
 - Full support for dark mode
@@ -37,36 +38,25 @@ It uses Notion as a CMS, [react-notion-x](https://github.com/NotionX/react-notio
 
 ## Setup
 
-**All config is defined in [site.config.js](./site.config.js).**
+**All config is defined in [site.config.ts](./site.config.ts).**
 
 This project requires a recent version of Node.js (>= 14.17).
 
 1. Fork / clone this repo
-2. Change a few values in [site.config.js](./site.config.js)
+2. Change a few values in [site.config.ts](./site.config.ts)
 3. `npm install`
 4. `npm run dev` to test locally
 5. `npm run deploy` to deploy to vercel 💪
 
-I tried to make configuration as easy as possible.
+I tried to make configuration as easy as possible — All you really need to do to get started is edit `rootNotionPageId`.
 
-All you really need to do to get started is edit `rootNotionPageId`. It defaults to rendering my site's public notion page [78fc5a4b88d74b0e824e29407e9f1ec1](https://notion.so/78fc5a4b88d74b0e824e29407e9f1ec1).
+We recommend duplicating the [default page](https://notion.so/7875426197cf461698809def95960ebf) as a starting point, but you can use any public notion page you want.
 
-You'll want to make your root Notion page **public** and then copy the link to your clipboard. Then extract the last part of the URL that looks like `d1b5dcf8b9ff425b8aef5ce6f0730202`, which is your page's Notion iD.
+Make sure your root Notion page is **public** and then copy the link to your clipboard. Extract the last part of the URL that looks like `7875426197cf461698809def95960ebf`, which is your page's Notion ID.
 
 In order to find your Notion workspace ID (optional), just load any of your site's pages into your browser and open up the developer console. There will be a global variable that you can access called `block` which is the Notion data for the current page. If you enter `block.space_id`, it will print out your page's workspace ID.
 
-I recommend setting up a collection on your home page (optional; I use an inline gallery [here](https://notion.so/78fc5a4b88d74b0e824e29407e9f1ec1)) that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you would normally in Notion.
-
-## Production setup
-
-When deploying to Vercel, you'll need to set up a few things.
-
-### Vercel environment variables
-
-Vercel is not aware of the environment variables defined in the `.env` file.
-
-Therefore, those variable must be defined in Vercel, too. Once defined, they'll be available on the next builds.
-See [their documentation](https://vercel.com/docs/concepts/projects/environment-variables) for more details.
+I recommend setting up a collection on your home page that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you normally would in Notion.
 
 ## URL Paths
 
@@ -80,6 +70,8 @@ The mapping of Notion ID to slugified page titles is done automatically as part
 
 See [mapPageUrl](./lib/map-page-url.ts) and [getCanonicalPageId](https://github.com/NotionX/react-notion-x/blob/master/packages/notion-utils/src/get-canonical-page-id.ts) for more details.
 
+You can override the default slug generation on a per-page basis by adding a `Slug` text property to your database. Any page which has a `Slug` property will use that as its slug.
+
 NOTE: if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames.
 
 ## Preview Images
@@ -90,9 +82,11 @@ NOTE: if you have multiple pages in your workspace with the same slugified name,
 
 We use [next/image](https://nextjs.org/docs/api-reference/next/image) to serve images efficiently, with preview images optionally generated via [lqip-modern](https://github.com/transitive-bullshit/lqip-modern). This gives us extremely optimized image support for sexy smooth images.
 
-Preview images are **enabled by default**, but they can be slow to generate, so if you want to disable them, set `isPreviewImageSupportEnabled` to `false` in `site.config.js`.
+Preview images are **enabled by default**, but they can be slow to generate, so if you want to disable them, set `isPreviewImageSupportEnabled` to `false` in `site.config.ts`.
 
-If you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external [Redis](https://redis.io) data store. To enable redis caching, set `isRedisEnabled` to `true` in `site.config.js` and then set `REDIS_HOST` and `REDIS_PASSWORD` environment variables to point to your redis instance.
+### Redis
+
+If you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external [Redis](https://redis.io) data store. To enable redis caching, set `isRedisEnabled` to `true` in `site.config.ts` and then set `REDIS_HOST` and `REDIS_PASSWORD` environment variables to point to your redis instance.
 
 You can do this locally by adding a `.env` file:
 
@@ -101,20 +95,9 @@ REDIS_HOST='TODO'
 REDIS_PASSWORD='TODO'
 ```
 
-Note that preview images and redis caching are both optional features. If you’d rather not deal with them, just disable them in your site config.
-
-### Configuring GitHub Actions
-
-By default, the workflow "[Build](https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/main/.github/workflows/build.yml)" runs when commits are pushed to the repository.
-
-If you have defined a Redis instance, you will need to slightly change the configuration, for GitHub Actions to be aware of those environment variables.
-[Here is an example](https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/transitive-bullshit/.github/workflows/build.yml#L17-L21)
-
-Additionally, you'll need to configure the [GitHub secrets](https://docs.github.com/en/codespaces/managing-codespaces-for-your-organization/managing-encrypted-secrets-for-your-repository-and-organization-for-codespaces) for `REDIS_HOST` and `REDIS_PASSWORD`.
+If you're not sure which Redis provider to use, we recommend [Redis Labs](https://redis.com), which provides a free plan.
 
-### Redis provider
-
-If you want to use redis caching, you can use [Redis Labs](https://app.redislabs.com/), which provides a free plan.
+Note that preview images and redis caching are both optional features. If you’d rather not deal with them, just disable them in your site config.
 
 ## Styles
 
@@ -138,6 +121,18 @@ Every notion block gets its own unique classname, so you can target individual b
 
 Dark mode is fully supported and can be toggled via the sun / moon icon in the footer.
 
+## Automatic Social Images
+
+<p align="center">
+  <img alt="Example social image" src="https://user-images.githubusercontent.com/552829/162001133-34d4cf24-123a-4569-a540-f683b22830d1.jpeg" width="600">
+</p>
+
+All Open Graph and social meta tags are generated from your Notion content, which makes social sharing look professional by default.
+
+Social images are generated automatically using headless chrome. You can tweak the default React template for social images by editing [api/social-images.tsx](./pages/api/social-image.tsx).
+
+You can view an example social image live in production [here](https://transitivebullsh.it/api/social-image?id=dfc7f709-ae3e-42c6-9292-f6543d5586f0).
+
 ## Automatic Table of Contents
 
 <p align="center">
@@ -158,21 +153,27 @@ This table of contents uses the same logic that Notion uses for its built-in Tab
 
 All pages are designed to be responsive across common device sizes.
 
-## Fathom Analytics
+## Analytics
+
+Analytics are an optional feature that are easy to enable if you want.
+
+### Fathom Analytics
 
 [Fathom](https://usefathom.com/ref/42TFOZ) provides a lightweight alternative to Google Analytics.
 
-To enable analytics, just add a `NEXT_PUBLIC_FATHOM_ID` environment variable, which will only be used in production.
+To enable, just add a `NEXT_PUBLIC_FATHOM_ID` environment variable, which will only be used in production.
+
+### PostHog Analytics
 
-Note that this feature is completely optional.
+[PostHog](https://posthog.com/) provides a lightweight, **open source** alternative to Google Analytics.
 
-## PostHog Analytics
+To enable, just add a `NEXT_PUBLIC_POSTHOG_ID` environment variable, which will only be used in production.
 
-[PostHog](https://posthog.com/) provides a lightweight **and open source** alternative to Google Analytics.
+## Environment Variables
 
-To enable analytics, just add a `NEXT_PUBLIC_POSTHOG_ID` environment variable, which will only be used in production.
+If you're using Redis, analytics, or any other feature which requires environment variables, then you'll need to [add them to your Vercel project](https://vercel.com/docs/concepts/projects/environment-variables).
 
-Note that this feature is completely optional.
+If you want to test your redis builds with GitHub Actions, then you'll need to edit the [default build action](./.github/workflows/build.yml) to add `REDIS_HOST` and `REDIS_PASSWORD`. Here is an [example from my personal branch](https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/transitive-bullshit/.github/workflows/build.yml#L17-L21). You'll also need to add these environment variables to your GitHub repo as [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets).
 
 ## Contributing
 
diff --git a/site.config.js b/site.config.ts
similarity index 85%
rename from site.config.js
rename to site.config.ts
index f5e8ba4..4ab76f9 100644
--- a/site.config.js
+++ b/site.config.ts
@@ -1,4 +1,6 @@
-module.exports = {
+import { siteConfig } from './lib/site-config'
+
+export default siteConfig({
   // the site's root Notion page (required)
   rootNotionPageId: '616010038b314232972ce9f23ccecc97',
 
@@ -76,4 +78,19 @@ module.exports = {
   // These metadata will be used when generating RSS, Sitemap, etc.
   OverrideCreatedTime: null,
   OverrideLastEditedTime: null,
-}
+
+  // whether to use the default notion navigation style or a custom one with links to
+  // important pages
+  navigationStyle: 'default'
+  // navigationStyle: 'custom',
+  // navigationLinks: [
+  //   {
+  //     title: 'About',
+  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
+  //   },
+  //   {
+  //     title: 'Contact',
+  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
+  //   }
+  // ]
+})
diff --git a/styles/global.css b/styles/global.css
index 8c102ff..4c3c2e2 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -3,10 +3,9 @@
 @tailwind utilities;
 
 :root {
-  --base-font-family: Roboto Slab, -apple-system, BlinkMacSystemFont, Segoe UI,
-    Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc,
-    sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji,
-    Segoe UI Emoji;
+  --base-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', 'Noto Sans', sans-serif;
   --title-font-family: noto sans, -apple-system, BlinkMacSystemFont, Segoe UI,
     Helvetica, Arial, Source Han Sans SC, Noto Sans CJK SC, Sarasa Gothic SC,
     Microsoft YaHei, sans-serif, Apple Color Emoji, Segoe UI Emoji;
@@ -25,7 +24,8 @@ a {
 
 body,
 html {
-  font-family: var(--base-font-family);
+  padding: 0;
+  margin: 0;
 }
 
 body {
diff --git a/styles/notion.css b/styles/notion.css
index 00c373e..65c6786 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -45,11 +45,15 @@
   width: 100% !important;
 }
 
-.notion-header .nav-header {
+.notion-header .notion-nav-header {
   max-width: 1100px;
   margin: 0 auto;
 }
 
+.notion-nav-header-rhs {
+  gap: 0.5rem;
+}
+
 .notion-gallery-grid {
   /* grid-template-columns: repeat(auto-fill, minmax(720, 1fr)); */
 
@@ -140,6 +144,10 @@
   margin-top: 10px;
 }
 
+.notion-collection-card-body {
+  padding: 10px;
+}
+
 /* only target safari */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   _::-webkit-full-page-media,
diff --git a/tsconfig.json b/tsconfig.json
index 1fc4cb5..73d6662 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,5 +19,5 @@
     "incremental": true
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "site.config.ts"]
 }
diff --git a/yarn.lock b/yarn.lock
index 15fba0e..68b36f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,9 +15,9 @@
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
 "@babel/highlight@^7.16.7":
-  version "7.16.10"
-  resolved "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
-  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
+  version "7.17.9"
+  resolved "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
+  integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
   dependencies:
     "@babel/helper-validator-identifier" "^7.16.7"
     chalk "^2.0.0"
@@ -1192,12 +1192,12 @@ 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==
+chrome-aws-lambda@6.0.0, chrome-aws-lambda@^10.1.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/chrome-aws-lambda/-/chrome-aws-lambda-6.0.0.tgz#e0966a5759e6b57c24584c2511fb72738b6209ff"
+  integrity sha512-XnFo6AaE5ZYpHYmOmMoj1yCYFeRTx6uFCpJnVuDREWzXevzZvo3gzkyQ6qSKsPW91VGWeQI7wQgnOpW50e+Dzg==
   dependencies:
-    lambdafs "^2.0.3"
+    lambdafs "^2.0.2"
 
 ci-info@^2.0.0:
   version "2.0.0"
@@ -1440,13 +1440,6 @@ debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, d
   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"
@@ -1532,10 +1525,10 @@ detective@^5.2.0:
     defined "^1.0.0"
     minimist "^1.1.1"
 
-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==
+devtools-protocol@0.0.842839:
+  version "0.0.842839"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.842839.tgz#dfdb49a74fabe80256b91e878e561a1ad2a24352"
+  integrity sha512-iI3v9uuGUW02vPUXTvxl4ijnCPL/RGRVR9I+U8s7+9OG9An/bvExjQ0KrXE9V0QBLra7wANhZctB00FKBSn1gw==
 
 didyoumean@^1.2.2:
   version "1.2.2"
@@ -1604,9 +1597,9 @@ duplexer@^0.1.2:
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
 electron-to-chromium@^1.4.84:
-  version "1.4.104"
-  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz#60973b0a7d398efa877196e8ccb0c93d48b918d8"
-  integrity sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ==
+  version "1.4.106"
+  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz#e7a3bfa9d745dd9b9e597616cb17283cc349781a"
+  integrity sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -1863,7 +1856,7 @@ 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:
+extract-zip@^2.0.0:
   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==
@@ -2357,9 +2350,9 @@ hsla-regex@^1.0.0:
   integrity sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==
 
 html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmmirror.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+  version "3.2.0"
+  resolved "https://registry.npmmirror.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
+  integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
 
 html-void-elements@^1.0.0:
   version "1.0.5"
@@ -2397,7 +2390,7 @@ http2-wrapper@^2.1.10:
     quick-lru "^5.1.1"
     resolve-alpn "^1.2.0"
 
-https-proxy-agent@5.0.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==
@@ -2826,7 +2819,7 @@ klaw-sync@^6.0.0:
   dependencies:
     graceful-fs "^4.1.11"
 
-lambdafs@^2.0.3:
+lambdafs@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/lambdafs/-/lambdafs-2.1.1.tgz#4bf8d3037b6c61bbb4a22ab05c73ee47964c25ed"
   integrity sha512-x5k8JcoJWkWLvCVBzrl4pzvkEHSgSBqFjg3Dpsc4AcTMq7oUMym4cL/gRTZ6VM4mUMY+M0dIbQ+V1c1tsqqanQ==
@@ -3112,7 +3105,7 @@ minimatch@^3.0.4, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.3:
   version "1.2.6"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -3122,13 +3115,6 @@ 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"
-
 modern-normalize@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
@@ -3250,11 +3236,6 @@ 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==
-
 node-releases@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
@@ -3290,30 +3271,30 @@ 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.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==
+notion-client@^6.8.3:
+  version "6.8.3"
+  resolved "https://registry.yarnpkg.com/notion-client/-/notion-client-6.8.3.tgz#855f999fdddd0c69940b96ecf4045557bfdcecc1"
+  integrity sha512-o6ZJxn3N/cGqwxV9+3BY4cEIFsyb6zBbI5/GT2Xtj6+ZL7hBCK7OuJhOOhz3WyhIepQDUCt4z/YNwvWTdiBDyA==
   dependencies:
     got "^11.8.1"
-    notion-types "^6.7.0-alpha.0"
-    notion-utils "^6.7.0-alpha.2"
+    notion-types "^6.7.0"
+    notion-utils "^6.8.3"
     p-map "^5.3.0"
 
-notion-types@^6.7.0-alpha.0:
-  version "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-types@^6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/notion-types/-/notion-types-6.7.0.tgz#f5ccb8ef701389b2bf52e5561bd31bc60c49ccdf"
+  integrity sha512-j7O6juQDOPgAinELMMpvVn0c8Vgr+Dhqm7UTTnhILnBhbOtQKaIYPCNKA4AJw/OPzzy1iEJ6KrthTEkPbQYEeg==
 
-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==
+notion-utils@^6.8.3:
+  version "6.8.3"
+  resolved "https://registry.yarnpkg.com/notion-utils/-/notion-utils-6.8.3.tgz#efc5973722517efa3e8cc915978996d689d84663"
+  integrity sha512-Nwqw19txK8WTHT5BhJLJ9BCqRkz7b1LdbCR3LeQuIhfs2zOHd56gWENT6jh5mmKrQn3PlinVjWo2pl3HwGKd3A==
   dependencies:
     is-url-superb "^6.1.0"
     mem "^9.0.2"
     normalize-url "^7.0.3"
-    notion-types "^6.7.0-alpha.0"
+    notion-types "^6.7.0"
     p-queue "^7.2.0"
 
 npm-run-all@^4.1.5:
@@ -3677,7 +3658,7 @@ 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:
+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==
@@ -3796,10 +3777,10 @@ 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==
+progress@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
 prop-types@^15.5.6, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
@@ -3817,7 +3798,7 @@ property-information@^5.0.0, property-information@^5.3.0:
   dependencies:
     xtend "^4.0.0"
 
-proxy-from-env@1.1.0:
+proxy-from-env@^1.0.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==
@@ -3835,23 +3816,23 @@ 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"
+puppeteer-core@6.0.0, puppeteer-core@^10.4.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-6.0.0.tgz#16fea8229ee4053f208194cd17718318ea6e69a7"
+  integrity sha512-Mm4lVSM8CJUrHSLt2zHjlW9B2D5B3JRbkbmxzGaGTauaB9gTrM+r7gk88xfRWuaBy81pRG+nTtCBdMPzO7pjqg==
+  dependencies:
+    debug "^4.1.0"
+    devtools-protocol "0.0.842839"
+    extract-zip "^2.0.0"
+    https-proxy-agent "^5.0.0"
+    node-fetch "^2.6.1"
+    pkg-dir "^4.2.0"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^3.0.2"
+    tar-fs "^2.0.0"
+    unbzip2-stream "^1.3.3"
+    ws "^7.2.3"
 
 purgecss@^4.0.3:
   version "4.1.3"
@@ -3953,17 +3934,17 @@ react-modal@^3.14.3:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-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==
+react-notion-x@^6.8.4:
+  version "6.8.4"
+  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.8.4.tgz#5ef6ae3ac4ee5cd320fbcca7cd2e1f6aa47c1123"
+  integrity sha512-a3C2mApZrfUuoqjfM6xfSYL5dsHlgOp6smcfgFLHYDbdmg/XBih2/hBgw1CGhKcRa7L5EBVbwuOUkA0z2GDpLg==
   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.2"
+    notion-types "^6.7.0"
+    notion-utils "^6.8.3"
     prismjs "^1.27.0"
     react-fast-compare "^3.2.0"
     react-hotkeys-hook "^3.0.3"
@@ -4013,10 +3994,10 @@ react-remove-scroll@^2.4.0:
   resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz"
   integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
 
-react-static-tweets@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.npmjs.org/react-static-tweets/-/react-static-tweets-0.7.1.tgz"
-  integrity sha512-PWimW6Wcz1KEVPLVu7selfjmC2bOSucJlNDS3L3CdoUsvtbFj+4crv/4c+lu1QcktRZRAQplkCeEBRsRjoXrjA==
+react-static-tweets@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/react-static-tweets/-/react-static-tweets-0.7.2.tgz#295c15ff5d5c1dc0039505d06986a7c49722506f"
+  integrity sha512-aHXGnMs+NVf6vW51HEee0h84iAShE3lfmTBPnYrse9uVU3QcDe+Vf8EBgCs6tmrnxl4vrGC2+1T4IKiIad9L+w==
   dependencies:
     classnames "^2.2.6"
     swr "^1.0.0-beta.5"
@@ -4248,13 +4229,6 @@ rgba-regex@^1.0.0:
   resolved "https://registry.npmmirror.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==
 
-rimraf@3.0.2, rimraf@^3.0.0, 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"
@@ -4262,6 +4236,13 @@ rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.0, 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"
+
 rrweb-snapshot@^1.1.7:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
@@ -4525,10 +4506,10 @@ standard-as-callback@^2.1.0:
   resolved "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz"
   integrity sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==
 
-static-tweets@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.npmjs.org/static-tweets/-/static-tweets-0.7.1.tgz"
-  integrity sha512-Jk9pmTXZOd+tibLvQxuQKX4txhwJIoYofco+R7v6wEctwIFFWxvwP5WpQdPRLWCRb4/l8EuWPiXqTt5TxbYRAg==
+static-tweets@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/static-tweets/-/static-tweets-0.7.2.tgz#d0bb8262856be600775562c05fd10ea3aedbbe9f"
+  integrity sha512-AyZOOOyAZ8UInonVsaOImQ5zcUfrFOhhV/UpnaecJ2joG7clG7I9Y5Uj9fJeYFE+QZaWQfsJQdJCUFaabzfQjQ==
   dependencies:
     "@mapbox/rehype-prism" "^0.5.0"
     "@vercel/fetch" "^6.1.0"
@@ -4704,19 +4685,9 @@ tailwindcss@^2.2.4:
     resolve "^1.20.0"
     tmp "^0.2.1"
 
-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"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
   integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
   dependencies:
     chownr "^1.1.1"
@@ -4724,7 +4695,7 @@ tar-fs@^2.0.0, tar-fs@^2.1.1:
     pump "^3.0.0"
     tar-stream "^2.1.4"
 
-tar-stream@^2.0.0, tar-stream@^2.1.4:
+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==
@@ -4872,10 +4843,10 @@ 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==
+unbzip2-stream@^1.3.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
+  integrity sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==
   dependencies:
     buffer "^5.2.1"
     through "^2.3.8"
@@ -5106,14 +5077,9 @@ 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:
+ws@^7.2.3, ws@^7.3.1:
   version "7.5.7"
-  resolved "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
 
 xml@1.0.1: