replace react-gist with custom iframe component

2025-07-21 07:01:19 -04:00 · 2023-10-09 19:39:20 -04:00
parent 1f1d13497c
commit bf979f440e
3 changed files with 44 additions and 8 deletions
--- a/components/GistEmbed/GistEmbed.tsx
+++ b/components/GistEmbed/GistEmbed.tsx
@@ -1,3 +1,35 @@
-import GistEmbed from "react-gist";
+import Frame from "react-frame-component";
+import useHasMounted from "../../hooks/useHasMounted";
+
+export type GistEmbedProps = {
+  id: string;
+  file?: string;
+};
+
+const GistEmbed = ({ id, file }: GistEmbedProps) => {
+  const hasMounted = useHasMounted();
+
+  const scriptUrl = `https://gist.github.com/${id}.js${file ? `?file=${file}` : ""}`;
+  const iframeId = file ? `gist-${id}-${file}` : `gist-${id}`;
+  // https://github.com/tleunen/react-gist/blob/master/src/index.js#L29
+  const iframeHtml = `<html><head><base target="_parent"><style>*{font-size:12px;}</style></head><body onload="parent.document.getElementById('${iframeId}').style.height=document.body.scrollHeight + 'px'" style="margin:0;"><script type="text/javascript" src="${scriptUrl}"></script></body></html>`;
+
+  return (
+    <>
+      {hasMounted && (
+        <Frame
+          width="100%"
+          frameBorder={0}
+          scrolling="no"
+          id={iframeId}
+          initialContent={iframeHtml}
+          style={{ height: "0px", overflow: "hidden" }}
+        >
+          <></>
+        </Frame>
+      )}
+    </>
+  );
+};

 export default GistEmbed;