From e81811146bd440f7ed890c53224b85a1dada042a Mon Sep 17 00:00:00 2001
From: YassinEldeeb <yassineldeeb94@gmail.com>
Date: Wed, 14 Feb 2024 01:06:23 +0200
Subject: [PATCH] fix: members iframe is not fully rendered

---
 package.json                     |  1 +
 src/pages/foundation/members.tsx | 20 ++++++++------------
 yarn.lock                        | 13 +++++++++++++
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 8f89e4e57b..e6e1020032 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/foundation/members.tsx b/src/pages/foundation/members.tsx
index c8acd5fe8d..e0f33a4964 100644
--- a/src/pages/foundation/members.tsx
+++ b/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>
   )
diff --git a/yarn.lock b/yarn.lock
index 52051c770a..df94ff3ab1 100644
--- a/yarn.lock
+++ b/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"