Skip to content

Commit a6a96e3

Browse files
johnholdunjohnholdun
committed
Support embeds
1 parent 66e55b2 commit a6a96e3

9 files changed

Lines changed: 114 additions & 47 deletions

File tree

‎public/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,5 @@
3939
<body>
4040
<noscript>You need to enable JavaScript to run this app. I'm so sorry.</noscript>
4141
<div id="root"></div>
42-
<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>
4342
</body>
4443
</html>

‎src/App.css‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@
22
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@200;400;700&display=swap');
33

44
body {
5-
font-size:1.5em;
6-
line-height:2em;
7-
font-family: 'IBM Plex Sans', sans-serif;
8-
color:#444;
5+
font-size: 1.5em;
6+
line-height: 2em;
7+
font-family: 'IBM Plex Sans', sans-serif;
8+
color: #444;
9+
}
10+
11+
.App--embedded {
12+
background: #fff;
13+
margin: 0 auto;
14+
max-width: 500px;
15+
padding: 1rem 0;
916
}
1017

1118
.expression {
12-
font-weight:bold;
13-
color:#222;
19+
font-weight: bold;
20+
color: #222;
1421
}

‎src/App.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,32 @@ const textVars = textFiles.reduce(
3636
);
3737

3838
function App() {
39-
let { page } = useParams();
40-
if (!textVars[page]) return <Redirect to="/soda" />;
39+
const { page } = useParams();
40+
const embedded = new URLSearchParams(window.location.search).has('embed');
41+
42+
if (!textVars[page]) {
43+
return <Redirect to="/soda" />;
44+
}
45+
4146
const [ast, astState, rawText] = textVars[page];
4247

4348
return (
44-
<div className="App">
45-
<Nav textVars={textVars} />
46-
<Section ast={ast} astState={astState} rawText={rawText} page={page} />
49+
<div className={`App ${embedded ? 'App--embedded' : ''}`}>
50+
{embedded ? null : <Nav textVars={textVars} />}
51+
<Section ast={ast} astState={astState} rawText={rawText} page={page} embedded={embedded} />
52+
<footer>
53+
<span>
54+
{embedded ? <>
55+
This is{' '}
56+
<a href="https://account.postlight.com" target="_blank">Account</a>, a
57+
</> : 'A'}
58+
{' '}
59+
Labs project from your friends at
60+
</span>
61+
<a href="https://postlight.com/careers" target={embedded ? '_blank' : null}>
62+
<img alt="Postlight, an NTT DATA Company" src="/postlight-logo.svg" width={embedded ? 63 : 125} height={embedded ? 16 : 32} />
63+
</a>
64+
</footer>
4765
</div>
4866
);
4967
}

‎src/Nav.js‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,12 @@ import { Link } from "react-router-dom";
66
function Nav(props) {
77
const [hamburgerOpen, setHamburgerOpen] = useState(false);
88

9-
function makeLink(k, i) {
10-
return (
11-
<div className="navEl" key={i}>
12-
<Link
13-
to={"/" + k}
14-
onClick={() => {
15-
setHamburgerOpen(false);
16-
}}
17-
className="navEl"
18-
>
19-
{k}
20-
</Link>
21-
</div>
22-
);
23-
}
24-
259
return (
2610
<>
2711
<div className="burger">
2812
<HamburgerMenu
2913
isOpen={hamburgerOpen}
30-
menuClicked={() => setHamburgerOpen(hamburgerOpen ? false : true)}
14+
menuClicked={() => setHamburgerOpen(!hamburgerOpen)}
3115
width={30}
3216
height={25}
3317
strokeWidth={4}
@@ -38,8 +22,20 @@ function Nav(props) {
3822
color="slategray"
3923
/>
4024
</div>
41-
<div id="nav" key="nav" className={"hamburger-" + hamburgerOpen}>
42-
<div id="inner-nav">{[Object.keys(props.textVars).map(makeLink)]}</div>
25+
<div id="nav" key="nav" className={`hamburger-${hamburgerOpen}`}>
26+
<div id="inner-nav">
27+
{Object.keys(props.textVars).map((key) => (
28+
<div className="navEl" key={key}>
29+
<Link
30+
to={`/${key}`}
31+
onClick={() => { setHamburgerOpen(false); }}
32+
className="navEl"
33+
>
34+
{key}
35+
</Link>
36+
</div>
37+
))}
38+
</div>
4339
<div id="footer">
4440
<p>
4541
This is{" "}

‎src/Section.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ h1 {
66
margin: 0em 0 0.25em 0;
77
}
88

9+
.App--embedded h1 {
10+
text-align: left;
11+
}
12+
913
button {
1014
align-items: center;
1115
background: none;
@@ -24,6 +28,11 @@ button:hover {
2428
#text {
2529
padding: 0.25em 2em 0 2em;
2630
color: #444;
31+
min-height: calc(100vh - (2.25em + 32px));
32+
}
33+
34+
.App--embedded #text {
35+
min-height: 0;
2736
}
2837

2938
.source {
@@ -32,6 +41,15 @@ button:hover {
3241
overflow-y: scroll;
3342
}
3443

44+
textarea.embed {
45+
font: inherit;
46+
font-family: monospace;
47+
border: 1px solid slategray;
48+
width: 100%;
49+
max-height: 250px;
50+
overflow-y: scroll;
51+
}
52+
3553
.up-triangle {
3654
border-bottom: 8px solid transparent;
3755
border-left: 8px solid slategray;

‎src/Section.js‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import Prism from "prismjs";
1010
import "./Source.css";
1111
import "./Section.css";
1212

13+
// TODO: Change this per env
14+
const HOST = 'http://localhost:3000'
15+
1316
const template = Prism.languages.javascript["template-string"].inside;
1417

1518
Prism.languages.account = {
@@ -20,9 +23,10 @@ Prism.languages.account = {
2023
},
2124
};
2225

23-
function Section({ ast, astState, page, rawText }) {
24-
const [viewSource, setViewSource] = useState();
25-
const searchParams = useSearchParams("replace");
26+
function Section({ ast, astState, page, rawText, embedded }) {
27+
const [viewSource, setViewSource] = useState(false);
28+
const [showEmbed, setShowEmbed] = useState(false);
29+
const searchParams = useSearchParams('replace');
2630
const state = useMemo(readFields, [astState, searchParams]);
2731

2832
function addField(k, v) {
@@ -83,20 +87,16 @@ function Section({ ast, astState, page, rawText }) {
8387
}
8488
}
8589

86-
useEffect(() => {
87-
setViewSource(false);
88-
}, [page]);
89-
9090
useEffect(() => {
9191
if (viewSource) {
9292
Prism.highlightAll();
9393
}
9494
}, [viewSource]);
9595

96-
return (
97-
<div id="text">
98-
<h1>{page}</h1>
99-
{ast.map(toComponents)}
96+
let postscript = null
97+
98+
if (!embedded) {
99+
postscript = <>
100100
<button onClick={() => setViewSource(!viewSource)}>
101101
{viewSource ? (
102102
<>
@@ -117,6 +117,25 @@ function Section({ ast, astState, page, rawText }) {
117117
</pre>
118118
</div>
119119
)}
120+
<button onClick={() => setShowEmbed(!showEmbed)}>
121+
<span>
122+
{showEmbed ? 'Hide embed' : 'Show embed'}
123+
</span>
124+
<div className={showEmbed ? 'down-triangle' : 'up-triangle'} />
125+
</button>
126+
{showEmbed && (
127+
<textarea className="embed">
128+
{`<iframe title="${page} - Account" src="${HOST}/${page}${window.location.search}&embed=true" height="640px" width="100%" allowtransparency="true" frameborder="0"></iframe>`}
129+
</textarea>
130+
)}
131+
</>
132+
}
133+
134+
return (
135+
<div id="text">
136+
<h1>{page}</h1>
137+
{ast.map(toComponents)}
138+
{postscript}
120139
</div>
121140
);
122141
}

‎src/Source.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ pre[class*="language-"] {
2727
-moz-hyphens: none;
2828
-ms-hyphens: none;
2929
hyphens: none;
30-
z-index: -1;
3130
}
3231

3332
/* Code blocks */

‎src/index.css‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@ code {
1212
monospace;
1313
}
1414

15-
#root {
16-
min-height: calc(100vh - (2em + 32px));
17-
}
18-
1915
footer {
2016
flex-shrink: 0;
2117
display: flex;
@@ -26,6 +22,16 @@ footer {
2622
padding: 1em 2em;
2723
}
2824

25+
.App--embedded footer {
26+
justify-content: flex-start;
27+
}
28+
29+
footer a {
30+
color: inherit;
31+
text-decoration: none;
32+
font-weight: bold;
33+
}
34+
2935
footer img {
3036
height: 32px;
3137
display: inline-block;

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8415,6 +8415,11 @@ pretty-format@^25.1.0:
84158415
ansi-styles "^4.0.0"
84168416
react-is "^16.12.0"
84178417

8418+
prismjs@^1.20.0:
8419+
version "1.29.0"
8420+
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
8421+
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
8422+
84188423
private@^0.1.8:
84198424
version "0.1.8"
84208425
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"

0 commit comments

Comments
 (0)