From bf979f440e42ad159084f8d4693bc9dbb91ba249 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Mon, 9 Oct 2023 19:39:20 -0400 Subject: [PATCH] replace `react-gist` with custom iframe component --- components/GistEmbed/GistEmbed.tsx | 34 +++++++++++++++++++++++++++++- package.json | 2 +- pnpm-lock.yaml | 16 ++++++++------ 3 files changed, 44 insertions(+), 8 deletions(-) diff --git a/components/GistEmbed/GistEmbed.tsx b/components/GistEmbed/GistEmbed.tsx index 5c22e142..b1ecb9b6 100644 --- 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 = ``; + + return ( + <> + {hasMounted && ( + + <> + + )} + + ); +}; export default GistEmbed; diff --git a/package.json b/package.json index f1a1f0ef..13b1dba6 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-error-boundary": "^4.0.11", - "react-gist": "^1.2.4", + "react-frame-component": "^5.2.6", "react-icons": "^4.11.0", "react-innertext": "^1.1.5", "react-intersection-observer": "^9.5.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4001297f..99736e53 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,9 +95,9 @@ dependencies: react-error-boundary: specifier: ^4.0.11 version: 4.0.11(react@18.2.0) - react-gist: - specifier: ^1.2.4 - version: 1.2.4(react@18.2.0) + react-frame-component: + specifier: ^5.2.6 + version: 5.2.6(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0) react-icons: specifier: ^4.11.0 version: 4.11.0(react@18.2.0) @@ -4524,12 +4524,16 @@ packages: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} dev: false - /react-gist@1.2.4(react@18.2.0): - resolution: {integrity: sha512-uDgPJ08IJsl/7auK3CS53JKGC1P/X7tNCzo9k0r6D/5l+ilsxE1+SAaylJCh0aeyZoJOoxQikKU+MHsAvA9iFw==} + /react-frame-component@5.2.6(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-CwkEM5VSt6nFwZ1Op8hi3JB5rPseZlmnp5CGiismVTauE6S4Jsc4TNMlT0O7Cts4WgIC3ZBAQ2p1Mm9XgLbj+w==} peerDependencies: - react: 0.14.x || ^15.0.0-rc || ^16.0.0-rc || ^17.0.0-rc + prop-types: ^15.5.9 + react: '>= 16.3' + react-dom: '>= 16.3' dependencies: + prop-types: 15.8.1 react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) dev: false /react-icons@4.11.0(react@18.2.0):