Skip to content

Instantly share code, notes, and snippets.

@ghengeveld

ghengeveld/storybook-embed.html

Last active July 7, 2021 09:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ghengeveld/f35ccbe9555e579aa78a0191fa3c1788 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ghengeveld/f35ccbe9555e579aa78a0191fa3c1788 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ghengeveld revised this gist Jul 7, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions storybook-embed.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,11 +20,11 @@
    document.addEventListener("DOMContentLoaded", () => {
    for (const el of document.querySelectorAll("[storybook-embed]")) {
    const storyUrl = new URL(el.getAttribute("storybook-embed"))
    const oembedUrl = new URL(
    const embedUrl = new URL(
    `/oembed?url=${encodeURIComponent(storyUrl)}&format=json`,
    `https://${storyUrl.host.replace(/^[^.]+/, "www")}`
    )
    fetch(oembedUrl)
    fetch(embedUrl)
    .then((res) => res.json())
    .then((data) => {
    el.setAttribute('title', data.title)
  2. ghengeveld created this gist Jul 7, 2021.
    43 changes: 43 additions & 0 deletions storybook-embed.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    <!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 oembedUrl = new URL(
    `/oembed?url=${encodeURIComponent(storyUrl)}&format=json`,
    `https://${storyUrl.host.replace(/^[^.]+/, "www")}`
    )
    fetch(oembedUrl)
    .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>