Skip to content

Commit 3b9f9e6

Browse files
johnholdunjohnholdun
committed
Support embeds
1 parent 8282321 commit 3b9f9e6

File tree

8 files changed

+107
-41
lines changed

8 files changed

+107
-41
lines changed

‎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
@@ -14,14 +14,32 @@ const textVars = Object.fromEntries(
1414
);
1515

1616
function App() {
17-
let { page } = useParams();
18-
if (!textVars[page]) return <Navigate to="/soda" />;
17+
const { page } = useParams();
18+
const embedded = new URLSearchParams(window.location.search).has('embed');
19+
20+
if (!textVars[page]) {
21+
return <Navigate to="/soda" />;
22+
}
23+
1924
const [ast, astState, rawText] = textVars[page];
2025

2126
return (
22-
<div className="App">
23-
<Nav textVars={textVars} />
24-
<Section key={page} ast={ast} astState={astState} rawText={rawText} page={page} />
27+
<div className={`App ${embedded ? 'App--embedded' : ''}`}>
28+
{embedded ? null : <Nav textVars={textVars} />}
29+
<Section key={page} ast={ast} astState={astState} rawText={rawText} page={page} embedded={embedded} />
30+
<footer>
31+
<span>
32+
{embedded ? <>
33+
This is{' '}
34+
<a href="https://account.postlight.com" target="_blank" rel="noreferrer">Account</a>, a
35+
</> : 'A'}
36+
{' '}
37+
Labs project from your friends at
38+
</span>
39+
<a href="https://postlight.com/careers" target={embedded ? '_blank' : null} rel={embedded ? 'noreferrer' : null}>
40+
<img alt="Postlight, an NTT DATA Company" src="/postlight-logo.svg" width={embedded ? 63 : 125} height={embedded ? 16 : 32} />
41+
</a>
42+
</footer>
2543
</div>
2644
);
2745
}

‎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: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import Prism from "prismjs";
88
import "./Source.css";
99
import "./Section.css";
1010

11+
// TODO: Change this per env
12+
const HOST = 'https://account.postlight.com'
13+
1114
const template = Prism.languages.javascript["template-string"].inside;
1215

1316
Prism.languages.account = {
@@ -18,8 +21,9 @@ Prism.languages.account = {
1821
},
1922
};
2023

21-
function Section({ ast, astState, page, rawText }) {
24+
function Section({ ast, astState, page, rawText, embedded }) {
2225
const [viewSource, setViewSource] = useState(false);
26+
const [showEmbed, setShowEmbed] = useState(false);
2327
const [state, setState] = useState(readFields());
2428
const [historyState, setHistoryState] =
2529
useState(new URLSearchParams(window.location.search).toString())
@@ -95,10 +99,10 @@ function Section({ ast, astState, page, rawText }) {
9599
}
96100
}, [viewSource]);
97101

98-
return (
99-
<div id="text">
100-
<h1>{page}</h1>
101-
{ast.map(toComponents)}
102+
let postscript = null
103+
104+
if (!embedded) {
105+
postscript = <>
102106
<button onClick={() => setViewSource(!viewSource)}>
103107
{viewSource ? (
104108
<>
@@ -119,6 +123,25 @@ function Section({ ast, astState, page, rawText }) {
119123
</pre>
120124
</div>
121125
)}
126+
<button onClick={() => setShowEmbed(!showEmbed)}>
127+
<span>
128+
{showEmbed ? 'Hide embed' : 'Show embed'}
129+
</span>
130+
<div className={showEmbed ? 'down-triangle' : 'up-triangle'} />
131+
</button>
132+
{showEmbed && (
133+
<textarea className="embed">
134+
{`<iframe title="${page} - Account" src="${HOST}/${page}${window.location.search}&embed=true" height="640px" width="100%" allowtransparency="true" frameborder="0"></iframe>`}
135+
</textarea>
136+
)}
137+
</>
138+
}
139+
140+
return (
141+
<div id="text">
142+
<h1>{page}</h1>
143+
{ast.map(toComponents)}
144+
{postscript}
122145
</div>
123146
);
124147
}

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

0 commit comments

Comments
 (0)