feat: 🎸 make gist fit outer box

streamich · Apr 24, 2019 · b63d31e · b63d31e
1 parent 4ab3749
commit b63d31e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/__story__/gist.story.tsx b/src/__story__/gist.story.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import Embed from '..';
+import {Box} from './Box';
 
 storiesOf('gist', module)
   .add('Site link', () => <Embed url={'https://gist.github.com/derrickturk/156b06d3a8496cc15fcab587e7881073'} />)
@@ -11,3 +12,10 @@ storiesOf('gist', module)
       <Embed url={'https://gist.github.com/choco-bot/c588cdb67a420b21133f30f3e5645b22'} />
     </div>
   ))
+  .add('Fitted', () => {
+    return (
+      <Box>
+        <Embed url={'https://gist.github.com/derrickturk/156b06d3a8496cc15fcab587e7881073'} />
+      </Box>
+    );
+  })
diff --git a/src/blocks/gist/index.tsx b/src/blocks/gist/index.tsx
@@ -4,15 +4,20 @@
  */
 import * as React from 'react';
 
+const fontSize = 12;
+
 // TODO: Allow user to specify `file` prop as a hash in URL.
 
 export interface GistProps {
   id: string;
   file?: string;
 }
 
+let idCnt = 0;
+
 class Gist extends React.PureComponent<GistProps> {
   iframeNode: HTMLIFrameElement | null = null;
+  id = 'react-embed-gist-' + idCnt++;
 
   componentDidMount() {
     this._updateIframeContent();
@@ -31,8 +36,6 @@ class Gist extends React.PureComponent<GistProps> {
   }
 
   _updateIframeContent() {
-    const { id, file } = this.props;
-
     const iframe = this.iframeNode!;
 
     let doc = (iframe as any).document;
@@ -41,10 +44,9 @@ class Gist extends React.PureComponent<GistProps> {
 
     const gistLink = this._defineUrl()
     const gistScript = `<script type="text/javascript" src="${gistLink}"></script>`;
-    const styles = '<style>*{font-size:12px;}</style>';
-    const elementId = file ? `gist-${id}-${file}` : `gist-${id}`;
-    const resizeScript = `onload="parent.document.getElementById('${elementId}').style.height=document.body.scrollHeight + 'px'"`;
-    const iframeHtml = `<html><head><base target="_parent">${styles}</head><body ${resizeScript}>${gistScript}</body></html>`;
+    const styles = `<style>*{font-size:${fontSize}px;}</style>`;
+    const resizeScript = `onload="parent.document.getElementById('${this.id}').style.height=document.body.scrollHeight + 'px'"`;
+    const iframeHtml = `<html><head><base target="_parent">${styles}</head><body style="margin:0" ${resizeScript}>${gistScript}</body></html>`;
 
     doc.open();
     doc.writeln(iframeHtml);
@@ -56,10 +58,11 @@ class Gist extends React.PureComponent<GistProps> {
 
     return (
       <iframe
+        id={this.id}
         ref={(n) => { this.iframeNode = n; }}
         width="100%"
         frameBorder={0}
-        id={file ? `gist-${id}-${file}` : `gist-${id}`}
+        style={{margin: `0 0 -${fontSize}px`}}
       />
     );
   }