From 6ade1bfda7bb9791866369c86d431af3a7113820 Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Wed, 25 Mar 2026 13:36:59 +0530 Subject: [PATCH 1/3] fix : codeplayground metadata --- hlx_statics/scripts/scripts.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/hlx_statics/scripts/scripts.js b/hlx_statics/scripts/scripts.js index abf4dacf..4ab7c308 100644 --- a/hlx_statics/scripts/scripts.js +++ b/hlx_statics/scripts/scripts.js @@ -19,7 +19,8 @@ import { toCamelCase, toClassName, githubActionsBlock, - hasContributorsJson + hasContributorsJson, + fetchSiteMetadata } from './lib-helix.js'; import { @@ -834,7 +835,12 @@ function loadTitle() { } } -function loadPrism(document) { +async function loadPrism(document) { + + const metadata = await fetchSiteMetadata(); + const codePlaygroundStagingURL = metadata?.get('code-playground-staging-url'); + const codePlaygroundProductionURL = metadata?.get('code-playground-production-url'); + const codeBlocks = document.querySelectorAll('code[class*="language-"], [class*="language-"] code'); if (!codeBlocks.length) return; @@ -865,8 +871,8 @@ function loadPrism(document) { const playgroundExecutionMode = pre?.getAttribute('data-playground-execution-mode'); 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', From 848c3633eb30bb9b2fdcb46e0cbe18a64de40d28 Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Wed, 25 Mar 2026 19:23:43 +0530 Subject: [PATCH 2/3] update : code playground script --- hlx_statics/scripts/lib-helix.js | 20 ++++++++++++++++++++ hlx_statics/scripts/scripts.js | 27 +++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/hlx_statics/scripts/lib-helix.js b/hlx_statics/scripts/lib-helix.js index 06aef770..a6437eec 100644 --- a/hlx_statics/scripts/lib-helix.js +++ b/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 diff --git a/hlx_statics/scripts/scripts.js b/hlx_statics/scripts/scripts.js index 4ab7c308..93e80619 100644 --- a/hlx_statics/scripts/scripts.js +++ b/hlx_statics/scripts/scripts.js @@ -20,7 +20,8 @@ import { toClassName, githubActionsBlock, hasContributorsJson, - fetchSiteMetadata + hasCodePlaygroundJson, + getCodePlaygroundJsonPath } from './lib-helix.js'; import { @@ -837,9 +838,27 @@ function loadTitle() { async function loadPrism(document) { - const metadata = await fetchSiteMetadata(); - const codePlaygroundStagingURL = metadata?.get('code-playground-staging-url'); - const codePlaygroundProductionURL = metadata?.get('code-playground-production-url'); + const hasCodePlayground = await hasCodePlaygroundJson(); + const codePlaygroundData = {}; + if (!hasCodePlayground) return; + else { + const jsonPath = await getCodePlaygroundJsonPath(); + if (!jsonPath) return null; + + const response = await fetch(jsonPath); + if (!response.ok) { + console.warn('Network response was not ok:', jsonPath); + return null; + } + + const json = await response.json(); + json.data.forEach((item) => { + codePlaygroundData[item.key] = item.value; + }); + } + + const codePlaygroundStagingURL = codePlaygroundData['code-playground-staging-url']; + const codePlaygroundProductionURL = codePlaygroundData['code-playground-production-url']; const codeBlocks = document.querySelectorAll('code[class*="language-"], [class*="language-"] code'); if (!codeBlocks.length) return; From 26ad3bd09ba6cb376b527e80aac59f80e1ddbc95 Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Thu, 26 Mar 2026 15:52:14 +0530 Subject: [PATCH 3/3] update : codeplayground-metadata --- hlx_statics/blocks/iframe/iframe.js | 4 ++-- hlx_statics/scripts/scripts.js | 37 ++++++++++++++++------------- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/hlx_statics/blocks/iframe/iframe.js b/hlx_statics/blocks/iframe/iframe.js index 7ba375de..bfdeec4d 100644 --- a/hlx_statics/blocks/iframe/iframe.js +++ b/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 = () => { diff --git a/hlx_statics/scripts/scripts.js b/hlx_statics/scripts/scripts.js index 93e80619..61c32ae4 100644 --- a/hlx_statics/scripts/scripts.js +++ b/hlx_statics/scripts/scripts.js @@ -837,28 +837,29 @@ function loadTitle() { } async function loadPrism(document) { - - const hasCodePlayground = await hasCodePlaygroundJson(); const codePlaygroundData = {}; - if (!hasCodePlayground) return; - else { - const jsonPath = await getCodePlaygroundJsonPath(); - if (!jsonPath) return null; - const response = await fetch(jsonPath); - if (!response.ok) { - console.warn('Network response was not ok:', jsonPath); + 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 json = await response.json(); - json.data.forEach((item) => { - codePlaygroundData[item.key] = item.value; - }); } - const codePlaygroundStagingURL = codePlaygroundData['code-playground-staging-url']; - const codePlaygroundProductionURL = codePlaygroundData['code-playground-production-url']; + 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; @@ -889,6 +890,10 @@ async 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) ? (codePlaygroundStagingURL || codePlaygroundProductionURL) : (codePlaygroundProductionURL);