Skip to content

Commit

Permalink
Support embeds
Browse files Browse the repository at this point in the history
  • Loading branch information
johnholdun committed Nov 14, 2022
1 parent 66e55b2 commit a6a96e3
Show file tree
Hide file tree
Showing 9 changed files with 114 additions and 47 deletions.
1 change: 0 additions & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
19 changes: 13 additions & 6 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,20 @@
@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--embedded {
background: #fff;
margin: 0 auto;
max-width: 500px;
padding: 1rem 0;
}

.expression {
font-weight:bold;
color:#222;
font-weight: bold;
color: #222;
}
28 changes: 23 additions & 5 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,32 @@ const textVars = textFiles.reduce(
);

function App() {
let { page } = useParams();
if (!textVars[page]) return <Redirect to="/soda" />;
const { page } = useParams();
const embedded = new URLSearchParams(window.location.search).has('embed');

if (!textVars[page]) {
return <Redirect to="/soda" />;
}

const [ast, astState, rawText] = textVars[page];

return (
<div className="App">
<Nav textVars={textVars} />
<Section ast={ast} astState={astState} rawText={rawText} page={page} />
<div className={`App ${embedded ? 'App--embedded' : ''}`}>
{embedded ? null : <Nav textVars={textVars} />}
<Section ast={ast} astState={astState} rawText={rawText} page={page} embedded={embedded} />
<footer>
<span>
{embedded ? <>
This is{' '}
<a href="https://account.postlight.com" target="_blank">Account</a>, a
</> : 'A'}
{' '}
Labs project from your friends at
</span>
<a href="https://postlight.com/careers" target={embedded ? '_blank' : null}>
<img alt="Postlight, an NTT DATA Company" src="/postlight-logo.svg" width={embedded ? 63 : 125} height={embedded ? 16 : 32} />
</a>
</footer>
</div>
);
}
Expand Down
34 changes: 15 additions & 19 deletions src/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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{" "}
Expand Down
18 changes: 18 additions & 0 deletions src/Section.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ h1 {
margin: 0em 0 0.25em 0;
}

.App--embedded h1 {
text-align: left;
}

button {
align-items: center;
background: none;
Expand All @@ -24,6 +28,11 @@ button:hover {
#text {
padding: 0.25em 2em 0 2em;
color: #444;
min-height: calc(100vh - (2.25em + 32px));
}

.App--embedded #text {
min-height: 0;
}

.source {
Expand All @@ -32,6 +41,15 @@ button:hover {
overflow-y: scroll;
}

textarea.embed {
font: inherit;
font-family: monospace;
border: 1px solid slategray;
width: 100%;
max-height: 250px;
overflow-y: scroll;
}

.up-triangle {
border-bottom: 8px solid transparent;
border-left: 8px solid slategray;
Expand Down
41 changes: 30 additions & 11 deletions src/Section.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import Prism from "prismjs";
import "./Source.css";
import "./Section.css";

// TODO: Change this per env
const HOST = 'http://localhost:3000'

const template = Prism.languages.javascript["template-string"].inside;

Prism.languages.account = {
Expand All @@ -20,9 +23,10 @@ Prism.languages.account = {
},
};

function Section({ ast, astState, page, rawText }) {
const [viewSource, setViewSource] = useState();
const searchParams = useSearchParams("replace");
function Section({ ast, astState, page, rawText, embedded }) {
const [viewSource, setViewSource] = useState(false);
const [showEmbed, setShowEmbed] = useState(false);
const searchParams = useSearchParams('replace');
const state = useMemo(readFields, [astState, searchParams]);

function addField(k, v) {
Expand Down Expand Up @@ -83,20 +87,16 @@ function Section({ ast, astState, page, rawText }) {
}
}

useEffect(() => {
setViewSource(false);
}, [page]);

useEffect(() => {
if (viewSource) {
Prism.highlightAll();
}
}, [viewSource]);

return (
<div id="text">
<h1>{page}</h1>
{ast.map(toComponents)}
let postscript = null

if (!embedded) {
postscript = <>
<button onClick={() => setViewSource(!viewSource)}>
{viewSource ? (
<>
Expand All @@ -117,6 +117,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>
);
}
Expand Down
1 change: 0 additions & 1 deletion src/Source.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ pre[class*="language-"] {
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
z-index: -1;
}

/* Code blocks */
Expand Down
14 changes: 10 additions & 4 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ code {
monospace;
}

#root {
min-height: calc(100vh - (2em + 32px));
}

footer {
flex-shrink: 0;
display: flex;
Expand All @@ -26,6 +22,16 @@ footer {
padding: 1em 2em;
}

.App--embedded footer {
justify-content: flex-start;
}

footer a {
color: inherit;
text-decoration: none;
font-weight: bold;
}

footer img {
height: 32px;
display: inline-block;
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -8415,6 +8415,11 @@ pretty-format@^25.1.0:
ansi-styles "^4.0.0"
react-is "^16.12.0"

prismjs@^1.20.0:
version "1.29.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

private@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
Expand Down

0 comments on commit a6a96e3

Please sign in to comment.