Skip to content

Instantly share code, notes, and snippets.

@ghengeveld

ghengeveld/storybook-embed.html

Last active July 7, 2021 09:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ghengeveld/f35ccbe9555e579aa78a0191fa3c1788 to your computer and use it in GitHub Desktop.
Save ghengeveld/f35ccbe9555e579aa78a0191fa3c1788 to your computer and use it in GitHub Desktop.
Download ZIP
Storybook embed example
Raw
storybook-embed.html
<!DOCTYPE html>
<html>
<head>
<title>Storybook embed example</title>
<script>
window.addEventListener("message", (message) => {
try {
const data = JSON.parse(message.data)
if (!data || data.context !== "iframe.resize") return
const url = new URL(data.src)
for (const key of [...url.searchParams.keys()]) {
if (!["path", "id", "args"].includes(key)) url.searchParams.delete(key)
}
for (const el of document.querySelectorAll(`iframe[src^="${url.href}"]`)) {
el.style.height = `${data.height}px`
}
} catch (e) {}
}, false)
document.addEventListener("DOMContentLoaded", () => {
for (const el of document.querySelectorAll("[storybook-embed]")) {
const storyUrl = new URL(el.getAttribute("storybook-embed"))
const embedUrl = new URL(
`/oembed?url=${encodeURIComponent(storyUrl)}&format=json`,
`https://${storyUrl.host.replace(/^[^.]+/, "www")}`
)
fetch(embedUrl)
.then((res) => res.json())
.then((data) => {
el.setAttribute('title', data.title)
el.style.height = `${data.height}px`
el.innerHTML = data.html
})
}
})
</script>
</head>
<body>
<div
storybook-embed="https://5e294ce2f99ed20022e96617-vbpwwmaorp.staging-chromatic.com/?path=/story/components-window--default&args=muted:true"
></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment