{"id":16527172,"url":"https://github.com/zignis/gist-iframe","last_synced_at":"2025-10-14T01:41:32.967Z","repository":{"id":140762679,"uuid":"444100372","full_name":"zignis/gist-iframe","owner":"zignis","description":"Embed GitHub Gists to your website using iFrames, with proper height","archived":false,"fork":false,"pushed_at":"2022-09-14T12:46:32.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T05:34:23.265Z","etag":null,"topics":["gist","iframe"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zignis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-03T14:59:51.000Z","updated_at":"2022-02-07T04:29:31.000Z","dependencies_parsed_at":"2024-09-03T04:01:41.535Z","dependency_job_id":null,"html_url":"https://github.com/zignis/gist-iframe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zignis/gist-iframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zignis%2Fgist-iframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zignis%2Fgist-iframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zignis%2Fgist-iframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zignis%2Fgist-iframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zignis","download_url":"https://codeload.github.com/zignis/gist-iframe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zignis%2Fgist-iframe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017499,"owners_count":26086085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gist","iframe"],"created_at":"2024-10-11T17:33:53.546Z","updated_at":"2025-10-14T01:41:32.950Z","avatar_url":"https://github.com/zignis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gist-iframe\n\n![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white) \n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n\nUses the `postMessage` method to set the height of the iframe dynamically.\n\n## ⚙️ Terminology\n- Renders a Gist on the `/api/gist` API route to aid same-origin policy.\n- The API route uses `window.postMessage()` API to send the height of the Gist to the front-end dynamically. \n- THe iframe's height is received on the front-end. \n\n## 🪱 Regex\nWe construct a RegExp to extract the `username` and `Gist ID` from the URL.\n\n### Gist URL structure\n```\nhttps://gist.github.com/username/gistId\n```\n\n### RegExp\n```\n/https?:\\/\\/gist\\.github\\.com\\/([^\\/\\?\\\u0026]*\\/[^\\/\\?\\\u0026]*)/\n```\nWe use the group catched from the above RegExp and use our API route to render the Gist on the same origin.\n```\n/api/gist/username/gistId\n```\n\n## ✏️ Rendering the Gist\nWe render the Gist on the same origin, refer to [this file](https://github.com/HexM7/gist-iframe/blob/main/api/gist/%5B...slug%5D/index.js).\n\n## 💻 The Font-end\nWe use the `useEffect` React hook to set the iframe's height once we receive it from our API route.\n```ts\nReact.useEffect(() =\u003e {\n  function receiveMessage(event: MessageEvent): void {\n    const frames = document.getElementsByTagName('iframe');\n\n    for (let i = 0; i \u003c frames.length; i += 1) {\n      if (frames[i].contentWindow === event.source) {\n        if (event.data \u0026\u0026 event.data.height) {\n          frames[i].style.height = event.data.height;\n        }\n      }\n    }\n  }\n  \n  window.addEventListener('message', receiveMessage, false);\n\n  return = () =\u003e {\n    window.removeEventListener('message', receiveMessage, false);\n  }\n}, []);\n```\n\n## :link: Links\n- [GitHub Gist](https://gist.github.com/)\n- [Next.js](https://nextjs.org/)\n- [React](https://reactjs.org/)\n- [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)\n\n## :ledger: License\n[Apache License 2.0](https://github.com/HexM7/gist-iframe/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzignis%2Fgist-iframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzignis%2Fgist-iframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzignis%2Fgist-iframe/lists"}