gist-iframe

Uses the postMessage method to set the height of the iframe dynamically.

⚙️ Terminology

• Renders a Gist on the /api/gist API route to aid same-origin policy.
• The API route uses window.postMessage() API to send the height of the Gist to the front-end dynamically.
• THe iframe's height is received on the front-end.

🪱 Regex

We construct a RegExp to extract the username and Gist ID from the URL.

Gist URL structure

https://gist.github.com/username/gistId

RegExp

/https?:\/\/gist\.github\.com\/([^\/\?\&]*\/[^\/\?\&]*)/

We use the group catched from the above RegExp and use our API route to render the Gist on the same origin.

/api/gist/username/gistId

✏️ Rendering the Gist

We render the Gist on the same origin, refer to this file.

💻 The Font-end

We use the useEffect React hook to set the iframe's height once we receive it from our API route.

React.useEffect(() => {
  function receiveMessage(event: MessageEvent): void {
    const frames = document.getElementsByTagName('iframe');

    for (let i = 0; i < frames.length; i += 1) {
      if (frames[i].contentWindow === event.source) {
        if (event.data && event.data.height) {
          frames[i].style.height = event.data.height;
        }
      }
    }
  }
  
  window.addEventListener('message', receiveMessage, false);

  return = () => {
    window.removeEventListener('message', receiveMessage, false);
  }
}, []);

🔗 Links

• GitHub Gist
• Next.js
• React
• postMessage API

📒 License

Apache License 2.0