From 932fec2cd672e6450cfe3a70aefc48ed123530d5 Mon Sep 17 00:00:00 2001
From: Addison <addison@gitbook.com>
Date: Tue, 15 Oct 2024 15:11:00 +1100
Subject: [PATCH 1/2] Add optional aspect ratio to url parameters

---
 integrations/toucantoco/src/index.tsx | 15 +++++++++++++--
 integrations/toucantoco/src/toucan.ts |  7 ++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/integrations/toucantoco/src/index.tsx b/integrations/toucantoco/src/index.tsx
index 08a137635..86fe87780 100644
--- a/integrations/toucantoco/src/index.tsx
+++ b/integrations/toucantoco/src/index.tsx
@@ -18,6 +18,8 @@ type ToucanRuntimeContext = RuntimeContext<ToucanRuntimeEnvironment>;
 const embedBlock = createComponent<{
     toucanId?: string;
     url?: string;
+    height?: number;
+    width?: number;
 }>({
     componentId: 'embed',
 
@@ -41,7 +43,16 @@ const embedBlock = createComponent<{
 
     async render(element, context) {
         const { environment } = context;
-        const { toucanId, url } = element.props;
+        const { toucanId, url, height, width } = element.props;
+
+        function getAspectRatio(height?: number, width?: number): number {
+            if (height && width && height > 0 && width > 0) {
+                return width / height;
+            }
+            return 1;
+        }
+
+        const aspectRatio = getAspectRatio(height, width);
 
         if (!toucanId || !url) {
             return (
@@ -62,7 +73,7 @@ const embedBlock = createComponent<{
                                     source={{
                                         url: environment.integration.urls.icon,
                                     }}
-                                    aspectRatio={1}
+                                    aspectRatio={aspectRatio}
                                 />
                             ) : undefined
                         }
diff --git a/integrations/toucantoco/src/toucan.ts b/integrations/toucantoco/src/toucan.ts
index 8b75b85e4..3101abac2 100644
--- a/integrations/toucantoco/src/toucan.ts
+++ b/integrations/toucantoco/src/toucan.ts
@@ -5,14 +5,19 @@ export function extractToucanInfoFromURL(input: string):
     | undefined
     | {
           toucanId?: string;
+          height?: number;
+          width?: number;
       } {
     const url = new URL(input);
 
     // Ignore non-TT URLs
     const toucanId = url.searchParams.get('id');
+    let height = Number(url.searchParams.get('height')) || 100;
+    let width = Number(url.searchParams.get('width')) || 100;
+
     if (!toucanId || !url.hostname.endsWith('.toucantoco.com')) {
         return;
     }
 
-    return { toucanId };
+    return { toucanId, height, width };
 }

From 6db323bc0722416782364c2ca1d5ee38854f94a0 Mon Sep 17 00:00:00 2001
From: Addison <addison@gitbook.com>
Date: Sun, 20 Oct 2024 20:27:08 +0800
Subject: [PATCH 2/2] add aspect ratio calculation to webframe

---
 integrations/toucantoco/src/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/integrations/toucantoco/src/index.tsx b/integrations/toucantoco/src/index.tsx
index 86fe87780..8649d2a18 100644
--- a/integrations/toucantoco/src/index.tsx
+++ b/integrations/toucantoco/src/index.tsx
@@ -73,7 +73,7 @@ const embedBlock = createComponent<{
                                     source={{
                                         url: environment.integration.urls.icon,
                                     }}
-                                    aspectRatio={aspectRatio}
+                                    aspectRatio={1}
                                 />
                             ) : undefined
                         }
@@ -88,7 +88,7 @@ const embedBlock = createComponent<{
                     source={{
                         url,
                     }}
-                    aspectRatio={1}
+                    aspectRatio={aspectRatio}
                 />
             </block>
         );