Support embeds

postlight · Nov 14, 2022 · d7295ca · d7295ca
1 parent 8282321
commit d7295ca
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 46 deletions.
diff --git a/public/embed-test.html b/public/embed-test.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>embed test</title>
+  <style>
+    body {
+      background: #ccc;
+    }
+  </style>
+</head>
+<body>
+  <iframe title="fire - Account" src="/fire?monthlyexpenses=3230&embed=true" height="640px" width="100%" allowtransparency="true" frameborder="0"></iframe>
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -39,6 +39,5 @@
   <body>
     <noscript>You need to enable JavaScript to run this app. I'm so sorry.</noscript>
     <div id="root"></div>
-    <footer>A Labs project from your friends at <a href="https://postlight.com/careers"><img alt="Postlight, an NTT DATA Company" src="/postlight-logo.svg" width="125" height="32"></a></footer>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -2,13 +2,27 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@200;400;700&display=swap');
 
 body {
-    font-size:1.5em;
-    line-height:2em;
-    font-family: 'IBM Plex Sans', sans-serif;
-    color:#444;
+  font-size: 1.5em;
+  line-height: 2em;
+  font-family: 'IBM Plex Sans', sans-serif;
+  color: #444;
+}
+
+.App {
+  padding: 1rem 2rem;
+}
+
+.App--embedded {
+  background: #fff;
+  margin: 0 auto;
+  max-width: 500px;
+  border: 1px solid #ccc;
+  border-radius: 1rem;
+  height: 100%;
+  overflow-y: hidden;
 }
 
 .expression {
-    font-weight:bold;
-    color:#222;
+  font-weight: bold;
+  color: #222;
 }
diff --git a/src/App.js b/src/App.js
@@ -14,14 +14,32 @@ const textVars = Object.fromEntries(
 );
 
 function App() {
-  let { page } = useParams();
-  if (!textVars[page]) return <Navigate to="/soda" />;
+  const { page } = useParams();
+  const embedded = new URLSearchParams(window.location.search).has('embed');
+
+  if (!textVars[page]) {
+    return <Navigate to="/soda" />;
+  }
+
   const [ast, astState, rawText] = textVars[page];
 
   return (
-    <div className="App">
-      <Nav textVars={textVars} />
-      <Section key={page} ast={ast} astState={astState} rawText={rawText} page={page} />
+    <div className={`App ${embedded ? 'App--embedded' : ''}`}>
+      {embedded ? null : <Nav textVars={textVars} />}
+      <Section key={page} ast={ast} astState={astState} rawText={rawText} page={page} embedded={embedded} />
+      <footer>
+        <span>
+          {embedded ? <>
+            This is{' '}
+            <a href="https://account.postlight.com" target="_blank" rel="noreferrer">Account</a>, a
+          </> : 'A'}
+          {' '}
+          Labs project from your friends at
+        </span>
+        <a href="https://postlight.com/careers" {...(embedded ? { target: '_blank', re: 'noreferrer' } : {})}>
+          <img alt="Postlight, an NTT DATA Company" src="/postlight-logo.svg" width={embedded ? 63 : 125} height={embedded ? 16 : 32} />
+        </a>
+      </footer>
     </div>
   );
 }

diff --git a/src/Nav.js b/src/Nav.js
@@ -6,28 +6,12 @@ import { Link } from "react-router-dom";
 function Nav(props) {
   const [hamburgerOpen, setHamburgerOpen] = useState(false);
 
-  function makeLink(k, i) {
-    return (
-      <div className="navEl" key={i}>
-        <Link
-          to={"/" + k}
-          onClick={() => {
-            setHamburgerOpen(false);
-          }}
-          className="navEl"
-        >
-          {k}
-        </Link>
-      </div>
-    );
-  }
-
   return (
     <>
       <div className="burger">
         <HamburgerMenu
           isOpen={hamburgerOpen}
-          menuClicked={() => setHamburgerOpen(hamburgerOpen ? false : true)}
+          menuClicked={() => setHamburgerOpen(!hamburgerOpen)}
           width={30}
           height={25}
           strokeWidth={4}
@@ -38,8 +22,20 @@ function Nav(props) {
           color="slategray"
         />
       </div>
-      <div id="nav" key="nav" className={"hamburger-" + hamburgerOpen}>
-        <div id="inner-nav">{[Object.keys(props.textVars).map(makeLink)]}</div>
+      <div id="nav" key="nav" className={`hamburger-${hamburgerOpen}`}>
+        <div id="inner-nav">
+          {Object.keys(props.textVars).map((key) => (
+            <div className="navEl" key={key}>
+              <Link
+                to={`/${key}`}
+                onClick={() => { setHamburgerOpen(false); }}
+                className="navEl"
+              >
+                {key}
+              </Link>
+            </div>
+          ))}
+        </div>
         <div id="footer">
           <p>
             This is{" "}

diff --git a/src/Section.css b/src/Section.css
@@ -6,6 +6,10 @@ h1 {
   margin: 0em 0 0.25em 0;
 }
 
+.App--embedded h1 {
+  text-align: left;
+}
+
 button {
   align-items: center;
   background: none;
@@ -15,15 +19,17 @@ button {
   font-size: 0.7em;
   font-weight: bold;
   margin: 20px 0;
-}
-
-button:hover {
   cursor: pointer;
+  padding: 0;
 }
 
 #text {
-  padding: 0.25em 2em 0 2em;
   color: #444;
+  min-height: calc(100vh - (2.25em + 32px));
+}
+
+.App--embedded #text {
+  min-height: 0;
 }
 
 .source {
@@ -32,6 +38,19 @@ button:hover {
   overflow-y: scroll;
 }
 
+textarea.embed {
+  padding: .9375rem .5rem;
+  font: inherit;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: .875rem;
+  line-height: 1.5rem;
+  border: 1px solid slategray;
+  width: 100%;
+  max-height: 250px;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
 .up-triangle {
   border-bottom: 8px solid transparent;
   border-left: 8px solid slategray;

diff --git a/src/Section.js b/src/Section.js
@@ -8,6 +8,9 @@ import Prism from "prismjs";
 import "./Source.css";
 import "./Section.css";
 
+// TODO: Change this per env
+const HOST = 'https://account.postlight.com'
+
 const template = Prism.languages.javascript["template-string"].inside;
 
 Prism.languages.account = {
@@ -18,8 +21,9 @@ Prism.languages.account = {
   },
 };
 
-function Section({ ast, astState, page, rawText }) {
+function Section({ ast, astState, page, rawText, embedded }) {
   const [viewSource, setViewSource] = useState(false);
+  const [showEmbed, setShowEmbed] = useState(false);
   const [state, setState] = useState(readFields());
   const [historyState, setHistoryState] =
     useState(new URLSearchParams(window.location.search).toString())
@@ -95,10 +99,10 @@ function Section({ ast, astState, page, rawText }) {
     }
   }, [viewSource]);
 
-  return (
-    <div id="text">
-      <h1>{page}</h1>
-      {ast.map(toComponents)}
+  let postscript = null
+
+  if (!embedded) {
+    postscript = <>
       <button onClick={() => setViewSource(!viewSource)}>
         {viewSource ? (
           <>
@@ -119,6 +123,25 @@ function Section({ ast, astState, page, rawText }) {
           </pre>
         </div>
       )}
+      <button onClick={() => setShowEmbed(!showEmbed)}>
+        <span>
+          {showEmbed ? 'Hide embed' : 'Show embed'}
+        </span>
+        <div className={showEmbed ? 'down-triangle' : 'up-triangle'} />
+      </button>
+      {showEmbed && (
+        <textarea className="embed">
+          {`<iframe title="${page} - Account" src="${HOST}/${page}${window.location.search}&embed=true" height="640px" width="100%" allowtransparency="true" frameborder="0"></iframe>`}
+        </textarea>
+      )}
+    </>
+  }
+
+  return (
+    <div id="text">
+      <h1>{page}</h1>
+      {ast.map(toComponents)}
+      {postscript}
     </div>
   );
 }

diff --git a/src/Source.css b/src/Source.css
@@ -27,7 +27,6 @@ pre[class*="language-"] {
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
-  z-index: -1;
 }
 
 /* Code blocks */

diff --git a/src/index.css b/src/index.css
@@ -12,18 +12,24 @@ code {
     monospace;
 }
 
-#root {
-  min-height: calc(100vh - (2em + 32px));
-}
-
 footer {
   flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
   font-size: 14px;
   line-height: 24px;
   align-items: top;
-  padding: 1em 2em;
+  padding-top: 1rem;
+}
+
+.App--embedded footer {
+  justify-content: flex-start;
+}
+
+footer a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: bold;
 }
 
 footer img {