jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 04:45:22 -04:00
Code Issues

replace react-gist with custom iframe component

Browse Source
This commit is contained in:
Jake Jarvis 2023-10-09 19:39:20 -04:00
parent 1f1d13497c
commit bf979f440e
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
3 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/GistEmbed/GistEmbed.tsx
View File

@ -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;

2
package.json
View File

@ -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",

16
pnpm-lock.yaml generated
View File

@ -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):