From 523e399e9d4d6342a32462dbaa4adffd16820837 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 12 Jun 2023 18:02:29 +0800
Subject: [PATCH] Dont load the twitter SDK unless we have to

---
 packages/web/additional.d.ts                  |  8 ++++
 .../components/templates/article/Article.tsx  | 48 ++++++++++++++-----
 packages/web/package.json                     |  3 +-
 .../web/pages/[username]/[slug]/index.tsx     | 15 ++++++
 4 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/packages/web/additional.d.ts b/packages/web/additional.d.ts
index 06020b4f6..149b54e56 100644
--- a/packages/web/additional.d.ts
+++ b/packages/web/additional.d.ts
@@ -16,6 +16,7 @@ declare global {
     analytics?: Analytics
     AndroidWebKitMessenger?: AndroidWebKitMessenger
     themeKey?: string
+    twttr?: EmbedTweetWidget
   }
 }
 
@@ -43,3 +44,10 @@ interface IntercomSettings {
   vertical_padding: number
   custom_launcher_selector: string
 }
+
+export interface EmbedTweetWidget {
+  widgets: {
+    createTweet: (string, HTMLElement, unknown) => void
+  }
+  [key: string]: string | { createTweet: unknown }
+}
diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 411b43b84..a692d877b 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -8,11 +8,11 @@ import {
   useScrollWatcher,
 } from '../../../lib/hooks/useScrollWatcher'
 import { MutableRefObject, useEffect, useRef, useState } from 'react'
-import { Tweet } from 'react-twitter-widgets'
-import { render } from 'react-dom'
 import { isDarkTheme } from '../../../lib/themeUpdater'
 import { ArticleMutations } from '../../../lib/articleActions'
 
+import loadjs from 'loadjs'
+
 export type ArticleProps = {
   articleId: string
   content: string
@@ -141,22 +141,44 @@ export function Article(props: ArticleProps): JSX.Element {
       window.MathJax.typeset()
     }
 
-    const tweets = Array.from(
+    const tweetPlaceholders = Array.from(
       document.getElementsByClassName('tweet-placeholder')
     )
 
-    tweets.forEach((tweet) => {
-      render(
-        <Tweet
-          tweetId={tweet.getAttribute('data-tweet-id') || ''}
-          options={{
+    if (tweetPlaceholders.length > 0) {
+      ;(async () => {
+        const twScriptUrl = 'https://platform.twitter.com/widgets.js'
+        const twScriptWindowFieldName = 'twttr'
+        const twScriptName = twScriptWindowFieldName
+
+        await new Promise((resolve, reject) => {
+          if (!loadjs.isDefined(twScriptName)) {
+            loadjs(twScriptUrl, twScriptName)
+          }
+          loadjs.ready(twScriptName, {
+            success: () => {
+              if (window.twttr?.widgets) {
+                resolve(true)
+              } else {
+                resolve(false)
+              }
+            },
+            error: () =>
+              reject(new Error('Could not load remote twitter widgets js')),
+          })
+        })
+
+        tweetPlaceholders.forEach((tweetPlaceholder) => {
+          const tweetId = tweetPlaceholder.getAttribute('data-tweet-id')
+          if (!tweetId) return
+          window.twttr?.widgets?.createTweet(tweetId, tweetPlaceholder, {
             theme: isDarkTheme() ? 'dark' : 'light',
             align: 'center',
-          }}
-        />,
-        tweet
-      )
-    })
+            dnt: 'true',
+          })
+        })
+      })()
+    }
   }, [])
 
   useEffect(() => {
diff --git a/packages/web/package.json b/packages/web/package.json
index 92e83aef6..23545c72b 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -42,6 +42,7 @@
     "epubjs": "^0.3.93",
     "graphql-request": "^3.6.1",
     "kbar": "^0.1.0-beta.35",
+    "loadjs": "^4.3.0-rc1",
     "markdown-it": "^13.0.1",
     "nanoid": "^3.1.29",
     "next": "^12.1.0",
@@ -60,7 +61,6 @@
     "react-spinners": "^0.13.7",
     "react-super-responsive-table": "^5.2.1",
     "react-topbar-progress-indicator": "^4.1.1",
-    "react-twitter-widgets": "^1.10.0",
     "remark-gfm": "^3.0.1",
     "swr": "^1.0.1",
     "uuid": "^8.3.2"
@@ -82,6 +82,7 @@
     "@types/cookie": "^0.4.1",
     "@types/diff-match-patch": "^1.0.32",
     "@types/jest": "^27.0.2",
+    "@types/loadjs": "^4.0.1",
     "@types/lodash.debounce": "^4.0.6",
     "@types/markdown-it": "^12.2.3",
     "@types/react": "17.0.2",
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 63299b2e5..bf8318b5a 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -243,6 +243,21 @@ export default function Home(): JSX.Element {
           }
         },
       },
+      {
+        id: 'back_home_esc',
+        section: 'Article',
+        name: 'Back to library',
+        shortcut: ['escape'],
+        perform: () => {
+          const query = window.sessionStorage.getItem('q')
+          if (query) {
+            router.push(`/home?${query}`)
+            return
+          } else {
+            router.push(`/home`)
+          }
+        },
+      },
       {
         id: 'archive',
         section: 'Article',