Merge pull request #273 from NotionX/feature/embed-tweets

transitive-bullshit · web-flow · commit 9fcb19c4bb01 · 2022-04-19T21:17:06.000-04:00
diff --git a/examples/cra/src/index.tsx b/examples/cra/src/index.tsx
@@ -11,9 +11,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'
-
 import './index.css'
 
 ReactDOM.render(
diff --git a/examples/full/components/NotionPage.tsx b/examples/full/components/NotionPage.tsx
@@ -8,7 +8,7 @@ import { useRouter } from 'next/router'
 import { NotionRenderer } from 'react-notion-x'
 import { ExtendedRecordMap } from 'notion-types'
 import { getPageTitle } from 'notion-utils'
-import { Tweet, TwitterContextProvider } from 'react-static-tweets'
+import TweetEmbed from 'react-tweet-embed'
 
 import { Loading } from './Loading'
 
@@ -76,6 +76,10 @@ const Modal = dynamic(
   }
 )
 
+const Tweet = ({ id }: { id: string }) => {
+  return <TweetEmbed tweetId={id} />
+}
+
 export const NotionPage = ({
   recordMap,
   previewImagesEnabled,
@@ -114,15 +118,7 @@ export const NotionPage = ({
     'https://react-notion-x-demo.transitivebullsh.it/social.jpg'
 
   return (
-    <TwitterContextProvider
-      value={{
-        tweetAstMap: (recordMap as any).tweetAstMap || {},
-        swrOptions: {
-          fetcher: (id: string) =>
-            fetch(`/api/get-tweet-ast/${id}`).then((r) => r.json())
-        }
-      }}
-    >
+    <>
       <Head>
         {socialDescription && (
           <>
@@ -170,6 +166,6 @@ export const NotionPage = ({
         // NOTE: custom images will only take effect if previewImages is true and
         // if the image has a valid preview image defined in recordMap.preview_images[src]
       />
-    </TwitterContextProvider>
+    </>
   )
 }
diff --git a/examples/full/lib/config.ts b/examples/full/lib/config.ts
@@ -9,10 +9,6 @@ export const rootNotionSpaceId = 'fde5ac74-eea3-4527-8f00-4482710e1af3'
 // you cache the preview image results in a key-value database.
 export const previewImagesEnabled = true
 
-// whether we should enable static tweet embeds (requires fetching extra info at
-// build time)
-export const tweetEmbedsEnabled = true
-
 // Whether to use the official public Notion API or the unofficial private API.
 // Note that the official API doesn't expose formatting options for many blocks
 // and is currently not as well-supported.
diff --git a/examples/full/lib/notion.ts b/examples/full/lib/notion.ts
@@ -4,12 +4,7 @@ import { NotionAPI } from 'notion-client'
 import { ExtendedRecordMap, SearchParams, SearchResults } from 'notion-types'
 
 import { getPreviewImageMap } from './preview-images'
-import { getTweetAstMap } from './tweet-embeds'
-import {
-  useOfficialNotionAPI,
-  previewImagesEnabled,
-  tweetEmbedsEnabled
-} from './config'
+import { useOfficialNotionAPI, previewImagesEnabled } from './config'
 
 const notion = useOfficialNotionAPI
   ? new NotionCompatAPI(new Client({ auth: process.env.NOTION_TOKEN }))
@@ -29,11 +24,6 @@ export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
     ;(recordMap as any).preview_images = previewImageMap
   }
 
-  if (tweetEmbedsEnabled) {
-    const tweetAstMap = await getTweetAstMap(recordMap)
-    ;(recordMap as any).tweetAstMap = tweetAstMap
-  }
-
   return recordMap
 }
 
diff --git a/examples/full/lib/tweet-embeds.ts b/examples/full/lib/tweet-embeds.ts
diff --git a/examples/full/package.json b/examples/full/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@notionhq/client": "^1.0.4",
+    "classnames": "^2.3.1",
     "got": "^12.0.2",
     "lqip-modern": "^1.2.0",
     "next": "^12.1.0",
@@ -25,8 +26,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-notion-x": "^6.11.0",
-    "react-static-tweets": "^0.7.1",
-    "static-tweets": "^0.7.1"
+    "react-tweet-embed": "^2.0.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^12.1.0",
diff --git a/examples/full/pages/_app.tsx b/examples/full/pages/_app.tsx
@@ -11,9 +11,6 @@ import 'prismjs/themes/prism-tomorrow.css'
 // used for rendering equations (optional)
 import 'katex/dist/katex.min.css'
 
-// used for tweet embeds (optional)
-import 'react-static-tweets/styles.css'
-
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
diff --git a/examples/full/pages/api/get-tweet-ast/[tweetId].ts b/examples/full/pages/api/get-tweet-ast/[tweetId].ts
diff --git a/examples/full/readme.md b/examples/full/readme.md
@@ -14,7 +14,6 @@ This demo adds a few nice features:
 
 - Uses [next/image](https://nextjs.org/docs/api-reference/next/image) to serve optimal images
 - Uses preview images generated using [lqip-modern](https://github.com/transitive-bullshit/lqip-modern)
-- Embeds tweets via [react-static-tweets](https://github.com/transitive-bullshit/react-static-tweets)
 - Includes larger optional components via [next/dynamic](https://nextjs.org/docs/advanced-features/dynamic-import)
   - Collection, CollectionRow
   - Code
diff --git a/examples/minimal/pages/_app.tsx b/examples/minimal/pages/_app.tsx
@@ -11,9 +11,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'
-
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
diff --git a/packages/notion-client/src/notion-api.test.ts b/packages/notion-client/src/notion-api.test.ts
@@ -26,6 +26,8 @@ const pageIdFixturesFailure = [
 
 for (const pageId of pageIdFixturesSuccess) {
   test(`NotionAPI.getPage success ${pageId}`, async (t) => {
+    t.timeout(60000) // one minute timeout
+
     const api = new NotionAPI()
     const page = await api.getPage(pageId)
 
diff --git a/readme.md b/readme.md
@@ -82,9 +82,6 @@ import 'prismjs/themes/prism-tomorrow.css'
 
 // used for rendering equations (optional)
 import 'katex/dist/katex.min.css'
-
-// used for tweet embeds (optional)
-import 'react-static-tweets/styles.css'
 ```
 
 ## Optional Components
@@ -181,7 +178,6 @@ The full-featured demo adds a few nice features:
 
 - Uses [next/image](https://nextjs.org/docs/api-reference/next/image) to serve optimal images
 - Uses preview images generated via [lqip-modern](https://github.com/transitive-bullshit/lqip-modern)
-- Embeds tweets via [react-static-tweets](https://github.com/transitive-bullshit/react-static-tweets)
 - Lazily bundles larger optional components via [next/dynamic](https://nextjs.org/docs/advanced-features/dynamic-import)
   - Code
   - Equation
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -11,9 +11,6 @@ import 'prismjs/themes/prism-tomorrow.css'`
`11`	`11`	`// used for rendering equations (optional)`
`12`	`12`	`import 'katex/dist/katex.min.css'`
`13`	`13`
`14`		`-// used for tweet embeds (optional)`
`15`		`-import 'react-static-tweets/styles.css'`
`16`		`-`
`17`	`14`	`function MyApp({ Component, pageProps }) {`
`18`	`15`	`return <Component {...pageProps} />`
`19`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,9 +11,6 @@ import 'react-notion-x/src/styles.css'`
`11`	`11`	`// used for rendering equations (optional)`
`12`	`12`	`// import 'katex/dist/katex.min.css'`
`13`	`13`
`14`		`-// used for tweet embeds (optional)`
`15`		`-// import 'react-static-tweets/styles.css'`
`16`		`-`
`17`	`14`	`function MyApp({ Component, pageProps }) {`
`18`	`15`	`return <Component {...pageProps} />`
`19`	`16`	`}`