feat: revert to using official twitter embedding sdk; bump deps

components/NotionPage.tsx

@@ -9,7 +9,7 @@ import BodyClassName from 'react-body-classname'
 import { useTheme } from 'next-themes'
 import { PageBlock } from 'notion-types'
 
-import { Tweet, TwitterContextProvider } from 'react-static-tweets'
+import TweetEmbed from 'react-tweet-embed'
 
 // core notion renderer
 import { NotionRenderer } from 'react-notion-x'
@@ -104,6 +104,10 @@ const Modal = dynamic(
   }
 )
 
+const Tweet = ({ id }: { id: string }) => {
+  return <TweetEmbed tweetId={id} />
+}
+
 const propertyLastEditedTimeValue = (
   { block, pageHeader },
   defaultFn: () => React.ReactNode
@@ -172,20 +176,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
     []
   )
 
-  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'
 
@@ -262,7 +252,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
   }
 
   return (
-    <TwitterContextProvider value={twitterContextValue}>
+    <>
       <PageHead
         pageId={pageId}
         site={site}
@@ -300,6 +290,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
       />
 
       <GitHubShareButton />
-    </TwitterContextProvider>
+    </>
   )
 }

lib/config.ts

@@ -77,12 +77,6 @@ export const isPreviewImageSupportEnabled: boolean = getSiteConfig(
   false
 )
 
-// Optional whether or not to enable support for LQIP preview images
-export const isTweetEmbedSupportEnabled: boolean = getSiteConfig(
-  'isTweetEmbedSupportEnabled',
-  true
-)
-
 // Optional whether or not to include the Notion ID in page URLs or just use slugs
 export const includeNotionIdInUrls: boolean = getSiteConfig(
   'includeNotionIdInUrls',

lib/notion.ts

@@ -5,10 +5,8 @@ import { mergeRecordMaps } from 'notion-utils'
 
 import { notion } from './notion-api'
 import { getPreviewImageMap } from './preview-images'
-import { getTweetAstMap } from './tweet-embeds'
 import {
   isPreviewImageSupportEnabled,
-  isTweetEmbedSupportEnabled,
   navigationStyle,
   navigationLinks
 } from './config'
@@ -62,11 +60,6 @@ export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
     ;(recordMap as any).preview_images = previewImageMap
   }
 
-  if (isTweetEmbedSupportEnabled) {
-    const tweetAstMap = await getTweetAstMap(recordMap)
-    ;(recordMap as any).tweetAstMap = tweetAstMap
-  }
-
   return recordMap
 }
 

lib/tweet-embeds.ts

@@ -1,55 +0,0 @@
-import { ExtendedRecordMap } from 'notion-types'
-import { fetchTweetAst } from 'static-tweets'
-import pMap from 'p-map'
-
-export async function getTweetAstMap(recordMap: ExtendedRecordMap) {
-  const blockIds = Object.keys(recordMap.block)
-  const tweetIds: string[] = blockIds
-    .map((blockId) => {
-      const block = recordMap.block[blockId]?.value
-
-      if (block) {
-        if (block.type === 'tweet') {
-          const src = block.properties?.source?.[0]?.[0]
-
-          if (src) {
-            const id = src.split('?')[0].split('/').pop()
-            if (id) return id
-          }
-        }
-      }
-
-      return null
-    })
-    .filter(Boolean)
-
-  const tweetAsts = await pMap(
-    tweetIds,
-    async (tweetId) => {
-      try {
-        return {
-          tweetId,
-          tweetAst: await fetchTweetAst(tweetId)
-        }
-      } catch (err) {
-        console.error('error fetching tweet info', tweetId, err)
-      }
-    },
-    {
-      concurrency: 4
-    }
-  )
-
-  const tweetAstMap = tweetAsts.reduce((acc, { tweetId, tweetAst }) => {
-    if (tweetAst) {
-      return {
-        ...acc,
-        [tweetId]: tweetAst
-      }
-    } else {
-      return acc
-    }
-  }, {})
-
-  return tweetAstMap
-}

package.json

@@ -39,7 +39,7 @@
     "next-api-og-image": "^2.2.1",
     "next-themes": "^0.1.1",
     "node-fetch": "^2.6.1",
-    "notion-client": "^6.11.0",
+    "notion-client": "^6.12.0",
     "notion-types": "^6.11.0",
     "notion-utils": "^6.11.0",
     "p-map": "^5.3.0",
@@ -49,9 +49,8 @@
     "react-body-classname": "^1.3.1",
     "react-dom": "^17.0.2",
     "react-notion-x": "^6.11.0",
-    "react-static-tweets": "^0.7.2",
-    "react-use": "^17.3.2",
-    "static-tweets": "^0.7.2"
+    "react-tweet-embed": "^2.0.0",
+    "react-use": "^17.3.2"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^12.1.0",

pages/_app.tsx

@@ -7,9 +7,6 @@ import 'react-notion-x/src/styles.css'
 // used for rendering equations (optional)
 import 'katex/dist/katex.min.css'
 
-// used for tweet embeds (optional)
-import 'react-static-tweets/styles.css'
-
 // used for code syntax highlighting (optional)
 import 'prismjs/themes/prism-coy.css'
 

pages/api/get-tweet-ast/[tweetId].ts

@@ -1,25 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { fetchTweetAst } from 'static-tweets'
-
-export default async (
-  req: NextApiRequest,
-  res: NextApiResponse
-): Promise<void> => {
-  if (req.method !== 'GET') {
-    return res.status(405).send({ error: 'method not allowed' })
-  }
-
-  const tweetId = req.query.tweetId as string
-
-  if (!tweetId) {
-    return res
-      .status(400)
-      .send({ error: 'missing required parameter "tweetId"' })
-  }
-
-  console.log('getTweetAst', tweetId)
-  const tweetAst = await fetchTweetAst(tweetId)
-  console.log('tweetAst', tweetId, tweetAst)
-
-  res.status(200).json(tweetAst)
-}