feat(page): support tweet embed rendering

components/NotionPage.js

@@ -4,6 +4,7 @@ import mediumZoom from '@fisch0920/medium-zoom'
 import React from 'react'
 import { isBrowser } from '@/lib/utils'
 import { Code } from 'react-notion-x/build/third-party/code'
+import TweetEmbed from 'react-tweet-embed'
 
 import 'katex/dist/katex.min.css'
 import { mapImgUrl } from '@/lib/notion/mapImage'
@@ -36,6 +37,10 @@ const Modal = dynamic(
   () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal), { ssr: false }
 )
 
+const Tweet = ({ id }) => {
+  return <TweetEmbed tweetId={id} />
+}
+
 const NotionPage = ({ post, className }) => {
   const zoom = isBrowser() && mediumZoom({
     container: '.notion-viewport',
@@ -89,7 +94,8 @@ const NotionPage = ({ post, className }) => {
         Collection,
         Equation,
         Modal,
-        Pdf
+        Pdf,
+        Tweet
       }} />
 
       <PrismMac />

package.json

@@ -52,6 +52,7 @@
     "react-messenger-customer-chat": "^0.8.0",
     "react-notion-x": "6.15.8",
     "react-share": "^4.4.0",
+    "react-tweet-embed": "~2.0.0",
     "smoothscroll-polyfill": "^0.4.4",
     "twikoo": "1.6.9",
     "typed.js": "^2.0.12",