feat: update react-notion-x

Author: transitive-bullshit

components/NotionPage.tsx

@@ -41,7 +41,7 @@ import styles from './styles.module.css'
 // -----------------------------------------------------------------------------
 
 const Code = dynamic(() =>
-  import('react-notion-x/build/third-party/code').then(async (m) => {
+  import('react-notion-x/third-party/code').then(async (m) => {
     // add / remove any prism syntaxes here
     await Promise.allSettled([
       // @ts-expect-error Ignore prisma types
@@ -112,22 +112,20 @@ const Code = dynamic(() =>
 )
 
 const Collection = dynamic(() =>
-  import('react-notion-x/build/third-party/collection').then(
-    (m) => m.Collection
-  )
+  import('react-notion-x/third-party/collection').then((m) => m.Collection)
 )
 const Equation = dynamic(() =>
-  import('react-notion-x/build/third-party/equation').then((m) => m.Equation)
+  import('react-notion-x/third-party/equation').then((m) => m.Equation)
 )
 const Pdf = dynamic(
-  () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
+  () => import('react-notion-x/third-party/pdf').then((m) => m.Pdf),
   {
     ssr: false
   }
 )
 const Modal = dynamic(
   () =>
-    import('react-notion-x/build/third-party/modal').then((m) => {
+    import('react-notion-x/third-party/modal').then((m) => {
       m.Modal.setAppElement('.notion-viewport')
       return m.Modal
     }),
@@ -188,6 +186,21 @@ const propertyTextValue = (
   return defaultFn()
 }
 
+const notionRendererComponents: Partial<NotionComponents> = {
+  nextLegacyImage: Image,
+  nextLink: Link,
+  Code,
+  Collection,
+  Equation,
+  Pdf,
+  Modal,
+  Tweet,
+  Header: NotionPageHeader,
+  propertyLastEditedTimeValue,
+  propertyTextValue,
+  propertyDateValue
+}
+
 export function NotionPage({
   site,
   recordMap,
@@ -197,24 +210,6 @@ export function NotionPage({
   const router = useRouter()
   const lite = useSearchParam('lite')
 
-  const components = React.useMemo<Partial<NotionComponents>>(
-    () => ({
-      nextLegacyImage: Image,
-      nextLink: Link,
-      Code,
-      Collection,
-      Equation,
-      Pdf,
-      Modal,
-      Tweet,
-      Header: NotionPageHeader,
-      propertyLastEditedTimeValue,
-      propertyTextValue,
-      propertyDateValue
-    }),
-    []
-  )
-
   // lite mode is for oembed
   const isLiteMode = lite === 'true'
 
@@ -250,8 +245,6 @@ export function NotionPage({
     [block, recordMap, isBlogPost]
   )
 
-  const footer = React.useMemo(() => <Footer />, [])
-
   if (router.isFallback) {
     return <Loading />
   }
@@ -314,7 +307,7 @@ export function NotionPage({
           pageId === site.rootNotionPageId && 'index-page'
         )}
         darkMode={isDarkMode}
-        components={components}
+        components={notionRendererComponents}
         recordMap={recordMap}
         rootPageId={site.rootNotionPageId}
         rootDomain={site.domain}
@@ -330,7 +323,7 @@ export function NotionPage({
         mapImageUrl={mapImageUrl}
         searchNotion={config.isSearchEnabled ? searchNotion : undefined}
         pageAside={pageAside}
-        footer={footer}
+        footer={<Footer />}
       />
 
       <GitHubShareButton />

lib/acl.ts

@@ -1,6 +1,6 @@
 import { getBlockValue } from 'notion-utils'
 
-import { type PageProps } from './types'
+import type { PageProps } from './types'
 
 export async function pageAcl({
   site,

lib/get-tweets.ts

@@ -2,7 +2,7 @@ import { type ExtendedRecordMap } from 'notion-types'
 import { getPageTweetIds } from 'notion-utils'
 import pMap from 'p-map'
 import pMemoize from 'p-memoize'
-import { getTweet as getTweetData } from 'react-tweet/api'
+import { getTweet as getTweetData, type Tweet } from 'react-tweet/api'
 
 import type { ExtendedTweetRecordMap } from './types'
 import { db } from './db'
@@ -27,7 +27,7 @@ export async function getTweetsMap(
   ;(recordMap as ExtendedTweetRecordMap).tweets = tweetsMap
 }
 
-async function getTweetImpl(tweetId: string): Promise<any> {
+async function getTweetImpl(tweetId: string): Promise<Tweet | null> {
   if (!tweetId) return null
 
   const cacheKey = `tweet:${tweetId}`

lib/icons/moon.tsx

@@ -6,7 +6,7 @@ export function MoonIcon() {
       width='1em'
       height='1em'
       viewBox='0 0 512 512'
-      stroke-width='0'
+      strokeWidth='0'
     >
       <path d='M152.62 126.77c0-33 4.85-66.35 17.23-94.77C87.54 67.83 32 151.89 32 247.38 32 375.85 136.15 480 264.62 480c95.49 0 179.55-55.54 215.38-137.85-28.42 12.38-61.8 17.23-94.77 17.23-128.47 0-232.61-104.14-232.61-232.61z'></path>
     </svg>

lib/icons/sun.tsx

@@ -10,19 +10,19 @@ export function SunIcon() {
     >
       <path
         fill='none'
-        stroke-linecap='round'
-        stroke-miterlimit='10'
-        stroke-width='32'
+        strokeLinecap='round'
+        strokeMiterlimit='10'
+        strokeWidth='32'
         d='M256 48v48m0 320v48m147.08-355.08l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48m-320 0H48m355.08 147.08l-33.94-33.94M142.86 142.86l-33.94-33.94'
       />
       <circle
         cx='256'
         cy='256'
         r='80'
         fill='none'
-        stroke-linecap='round'
-        stroke-miterlimit='10'
-        stroke-width='32'
+        strokeLinecap='round'
+        strokeMiterlimit='10'
+        strokeWidth='32'
       />
     </svg>
   )

package.json

@@ -37,25 +37,25 @@
     "katex": "^0.16.28",
     "ky": "^1.14.3",
     "lqip-modern": "^2.2.1",
-    "next": "^16.1.6",
-    "notion-client": "^7.8.1",
-    "notion-types": "^7.8.1",
-    "notion-utils": "^7.8.1",
+    "next": "^16.2.0",
+    "notion-client": "^7.10.0",
+    "notion-types": "^7.10.0",
+    "notion-utils": "^7.10.0",
     "p-map": "^7.0.4",
     "p-memoize": "^8.0.0",
-    "posthog-js": "^1.249.4",
+    "posthog-js": "^1.362.0",
     "prismjs": "^1.30.0",
     "react": "^19.2.4",
     "react-body-classname": "^1.3.1",
     "react-dom": "^19.2.4",
-    "react-notion-x": "^7.8.1",
+    "react-notion-x": "^7.10.0",
     "react-tweet": "^3.3.0",
     "react-use": "^17.6.0",
     "rss": "^1.2.2"
   },
   "devDependencies": {
     "@fisch0920/config": "^1.4.0",
-    "@types/node": "^25.2.3",
+    "@types/node": "^25.5.0",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.2.14",
     "@types/react-body-classname": "^1.1.10",

pages/_app.tsx

@@ -3,7 +3,7 @@ import 'katex/dist/katex.min.css'
 // used for code syntax highlighting (optional)
 import 'prismjs/themes/prism-coy.css'
 // core styles shared by all of react-notion-x (required)
-import 'react-notion-x/src/styles.css'
+import 'react-notion-x/styles.css'
 // global styles shared across the entire site
 import 'styles/global.css'
 // this might be better for dark mode