fix: members iframe is not fully rendered (graphql#1621)

Author: YassinEldeeb

package.json

@@ -41,6 +41,7 @@
     "gatsby-transformer-remark": "6.10.0",
     "glob": "10.2.6",
     "graphql": "16.6.0",
+    "iframe-resizer-react": "^1.1.0",
     "marked": "5.0.2",
     "numbro": "2.3.6",
     "parser-front-matter": "1.6.4",

src/pages/foundation/members.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import type { PageProps } from "gatsby"
 import Layout from "../../components/Layout"
 import Seo from "../../components/Seo"
+import IframeResizer from "iframe-resizer-react"
 
 export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
   return (
@@ -29,20 +30,15 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
           </p>
         </div>
 
-        <iframe
-          frameBorder="0"
-          id="landscape"
-          scrolling="no"
-          style={{ width: "1px", minWidth: "100%" }}
+        <IframeResizer
           src="https://landscape.graphql.org/card-mode?category=graph-ql-foundation-member&grouping=category&embed=yes&style=borderless"
-          onLoad={() => {
-            const scriptElem = document.createElement("script")
-            scriptElem.type = "text/javascript"
-            scriptElem.src = "https://landscape.cncf.io/iframeResizer.js"
-            scriptElem.onload = () => (window as any)["iFrameResize"]()
-            document.body.appendChild(scriptElem)
+          style={{
+            width: "1px",
+            minWidth: "100%",
           }}
-        ></iframe>
+          heightCalculationMethod="lowestElement"
+          checkOrigin={false}
+        />
       </section>
     </Layout>
   )

yarn.lock

@@ -7493,6 +7493,19 @@ ieee754@^1.1.13, ieee754@^1.2.1:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+iframe-resizer-react@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/iframe-resizer-react/-/iframe-resizer-react-1.1.0.tgz#5009e019b7a5c7f1c009bff5bcdf0dbf33557465"
+  integrity sha512-FrytSq91AIJaDgE+6uK/Vdd6IR8CrwLoZ6eGmL2qQMPTzF0xlSV2jaSzRRUh5V2fttD7vzl21jvBl97bV40eBw==
+  dependencies:
+    iframe-resizer "^4.3.0"
+    warning "^4.0.3"
+
+iframe-resizer@^4.3.0:
+  version "4.3.9"
+  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.9.tgz#a2fcdb0f35a2eba1b3a3984c883193a849e1a6ce"
+  integrity sha512-MCt+V/THB4a9OcAdrWo5NsI2CRpeMM4ijhTfiLtsdgDJXWYXf62Ve8yO8rKGmYNs991zty/EolYOxActlkfU+A==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"