Add query param for language in Arcade embed (#1114)

Add query param for language

Author: addisonschultz

.changeset/deep-spoons-throw.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/integration-arcade': minor
+---
+
+Add query param for language

integrations/arcade/src/arcade.ts

@@ -30,10 +30,11 @@ export async function fetchArcadeOEmbedData(flowId: string): Promise<ArcadeOEmbe
 }
 
 /**
- * Extract the Arcade flow ID from the embed URL.
+ * Extract the Arcade flow ID and language from the embed URL.
  */
 export function extractArcadeFlowFromURL(input: string): {
     flowId?: string;
+    language?: string;
 } {
     const url = new URL(input);
     if (!['app.arcade.software', 'demo.arcade.software'].includes(url.hostname)) {
@@ -45,5 +46,6 @@ export function extractArcadeFlowFromURL(input: string): {
         return {};
     }
 
-    return { flowId: parts[2] };
+    const language = url.searchParams.get('language') ?? undefined;
+    return { flowId: parts[2], ...(language && { language }) };
 }

integrations/arcade/src/index.tsx

@@ -18,6 +18,7 @@ type ArcadeRuntimeContext = RuntimeContext<ArcadeRuntimeEnvironment>;
 const embedBlock = createComponent<{
     flowId?: string;
     url?: string;
+    language?: string;
 }>({
     componentId: 'embed',
 
@@ -41,7 +42,7 @@ const embedBlock = createComponent<{
 
     async render(element, context) {
         const { environment } = context;
-        const { flowId, url } = element.props;
+        const { flowId, url, language } = element.props;
 
         if (!flowId) {
             return (
@@ -69,11 +70,12 @@ const embedBlock = createComponent<{
 
         const embedData = await fetchArcadeOEmbedData(flowId);
         const aspectRatio = embedData.width / embedData.height;
+        const embedUrl = `https://demo.arcade.software/${flowId}?embed${language ? `&language=${encodeURIComponent(language)}` : ''}`;
         return (
             <block>
                 <webframe
                     source={{
-                        url: `https://demo.arcade.software/${flowId}?embed`,
+                        url: embedUrl,
                     }}
                     aspectRatio={aspectRatio}
                 />