fix : codeplayground metadata

hlx_statics/blocks/iframe/iframe.js

@@ -183,10 +183,10 @@ export default async function decorate(block) {
   }
 
   if (width) {
-    iframe.style.width = width;
+    iframe.style.setProperty('width', width, 'important');
   }
   if (height) {
-    iframe.style.height = height;
+    iframe.style.setProperty('height', height, 'important');
   }
 
   penpalScript.onload = () => {

hlx_statics/scripts/lib-helix.js

@@ -256,6 +256,26 @@ export async function hasContributorsJson() {
     .catch(() => false);
 }
 
+export async function getCodePlaygroundJsonPath() {
+  const metadata = await fetchSiteMetadata();
+  const metadataPath = metadata?.get('code-playground');
+  if (metadata && !metadataPath) return null;
+
+  const pathPrefix = getMetadata('pathprefix').replace(/^\/|\/$/g, '');
+  return metadataPath
+    ? `${window.location.origin}/${pathPrefix}/${metadataPath}`
+    : `${window.location.origin}/${pathPrefix}/code-playground.json`;
+
+}
+
+export async function hasCodePlaygroundJson() {
+  const path = await getCodePlaygroundJsonPath();
+  if (!path) return false;
+  return fetch(path)
+    .then(r => r.ok)
+    .catch(() => false);
+}
+
 /**
  * Retrieves the nav with the specified name from the config.
  * @param {string} name The nav name

hlx_statics/scripts/scripts.js

@@ -19,7 +19,9 @@ import {
   toCamelCase,
   toClassName,
   githubActionsBlock,
-  hasContributorsJson
+  hasContributorsJson,
+  hasCodePlaygroundJson,
+  getCodePlaygroundJsonPath
 } from './lib-helix.js';
 
 import {
@@ -834,7 +836,31 @@ function loadTitle() {
     }
 }
 
-function loadPrism(document) {
+async function loadPrism(document) {
+  const codePlaygroundData = {};
+
+  if (await hasCodePlaygroundJson()) {
+    const jsonPath = await getCodePlaygroundJsonPath();
+    if (jsonPath) {
+      const response = await fetch(jsonPath);
+      if (!response.ok) {
+        console.warn('Network response was not ok:', jsonPath);
+        return null;
+      } else {
+        const json = await response.json();
+        json.data.forEach((item) => {
+          codePlaygroundData[item.key] = item.value;
+        });
+      }
+    }
+    else {
+      return null;
+    }
+  }
+
+  const defaultPlaygroundStagingURL = codePlaygroundData['code-playground-staging-url'];
+  const defaultPlaygroundProductionURL = codePlaygroundData['code-playground-production-url'];
+
   const codeBlocks = document.querySelectorAll('code[class*="language-"], [class*="language-"] code');
   if (!codeBlocks.length) return;
 
@@ -864,9 +890,13 @@ function loadPrism(document) {
               const playgroundMode = pre?.getAttribute('data-playground-mode');
 
               const playgroundExecutionMode = pre?.getAttribute('data-playground-execution-mode');
+              const stagingFromPre = pre?.getAttribute('data-playground-url-stage');
+              const productionFromPre = pre?.getAttribute('data-playground-url');
+              const codePlaygroundStagingURL = stagingFromPre || defaultPlaygroundStagingURL;
+              const codePlaygroundProductionURL = productionFromPre || defaultPlaygroundProductionURL;
               const playgroundURL = isStageEnvironment(window.location.host, true) || isLocalHostEnvironment(window.location.host)
-                ? (pre?.getAttribute('data-playground-url-stage') || pre?.getAttribute('data-playground-url'))
-                : pre?.getAttribute('data-playground-url');
+                ? (codePlaygroundStagingURL || codePlaygroundProductionURL)
+                : (codePlaygroundProductionURL);
               if (!sessionId || !playgroundMode || !playgroundExecutionMode || !playgroundURL) return null;
               const btn = createTag('button', {
                 class: 'try-code-button',