Skip to content
This repository was archived by the owner on Feb 15, 2022. It is now read-only.

Commit 6a06387

Browse files
sdglucksdgluck
committed
wip
1 parent 1edd916 commit 6a06387

File tree

4 files changed

+303
-75
lines changed

4 files changed

+303
-75
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"normalize.css": "^8.0.1",
88
"react": "^16.8.4",
99
"react-dom": "^16.8.4",
10-
"react-scripts": "2.1.8"
10+
"react-scripts": "2.1.8",
11+
"react-syntax-highlighter": "^10.2.0"
1112
},
1213
"scripts": {
1314
"start": "react-scripts start",

‎src/App.js

Lines changed: 135 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
/* eslint-disable react/jsx-no-comment-textnodes */
22
import React, { Component, useState } from "react";
3+
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
34
import copyToClipboard from "clipboard-copy";
5+
import SyntaxHighlighter from "react-syntax-highlighter";
46

57
import "normalize.css/normalize.css";
68
import "./index.css";
@@ -44,6 +46,35 @@ function readInDirectives() {
4446
}
4547
}
4648

49+
const libraryCode = {
50+
express: directives => {
51+
let setHeaderCode = "res.set('Cache-Control', '";
52+
for (let i = 0; i < directives.length; i++) {
53+
const directive = directives[i];
54+
setHeaderCode +=
55+
directive.name +
56+
(directive.args && directive.args.length
57+
? " " + directive.args.join(" ")
58+
: "");
59+
if (directives.length > 1 && i !== directives.length - 1) {
60+
setHeaderCode += ", ";
61+
}
62+
}
63+
setHeaderCode += "');";
64+
let code = "// for all responses\n";
65+
code += "app.use((req, res, next) => {\n";
66+
code += " " + setHeaderCode + "\n";
67+
code += " next();\n";
68+
code += "});\n\n";
69+
code += "// for single response\n";
70+
code += setHeaderCode;
71+
return code;
72+
},
73+
koa: directives => {
74+
return "";
75+
}
76+
};
77+
4778
function Directive({ name, args = [] }) {
4879
return (
4980
<span className="HeaderDirective">
@@ -54,7 +85,7 @@ function Directive({ name, args = [] }) {
5485
);
5586
}
5687

57-
function Fieldset({ title, description, active, fields }) {
88+
function Fieldset({ title, description, active, fields = () => {} }) {
5889
const [open, setOpen] = useState(initialOpenDirectives.includes(title));
5990

6091
return (
@@ -73,6 +104,8 @@ function Fieldset({ title, description, active, fields }) {
73104

74105
export default class App extends Component {
75106
state = {
107+
showLibraryCode: true,
108+
codeLibrary: "express",
76109
directives: readInDirectives()
77110
};
78111

@@ -128,6 +161,7 @@ export default class App extends Component {
128161
<ul className="Menu">
129162
<li className="Menu__item">
130163
<a
164+
title="Copy a shareable link for this header configuration"
131165
href={shareUrl}
132166
onClick={evt => {
133167
evt.preventDefault();
@@ -139,6 +173,7 @@ export default class App extends Component {
139173
</li>
140174
<li className="Menu__item">
141175
<a
176+
title="Copy the header text to your clipboard"
142177
href="#"
143178
onClick={evt => {
144179
evt.preventDefault();
@@ -368,90 +403,135 @@ export default class App extends Component {
368403
</label>
369404
]}
370405
/>
371-
<fieldset>
372-
<legend>no-cache</legend>
373-
<div>
406+
<Fieldset
407+
title={Directives["no-cache"]}
408+
description={
374409
<p>
375410
Forces caches to submit the request to the origin server for
376411
validation before releasing a cached copy.
377412
</p>
378-
</div>
379-
</fieldset>
380-
<fieldset>
381-
<legend>only-if-cached</legend>
382-
<div>
413+
}
414+
/>
415+
<Fieldset
416+
title={Directives["only-if-cached"]}
417+
description={
383418
<p>
384419
Indicates to not retrieve new data. This being the case, the
385420
server wishes the client to obtain a response only once and
386421
then cache. From this moment the client should keep releasing
387422
a cached copy and avoid contacting the origin-server to see if
388423
a newer copy exists.
389424
</p>
390-
</div>
391-
</fieldset>
392-
<fieldset>
393-
<legend>must-revalidate</legend>
394-
<div>
395-
<p>
396-
Where no-cache will immediately revalidate with the server,
397-
and only use a cached copy if the server says it may,
398-
must-revalidate is like no-cache with a grace period.
399-
</p>
400-
<p>
401-
must-revalidate needs an associated max-age directive; above,
402-
we’ve set it to ten minutes.
403-
</p>
404-
</div>
405-
</fieldset>
406-
<fieldset>
407-
<legend>proxy-revalidate</legend>
408-
<div>
425+
}
426+
/>
427+
<Fieldset
428+
title={Directives["must-revalidate"]}
429+
description={
430+
<>
431+
<p>
432+
Where no-cache will immediately revalidate with the server,
433+
and only use a cached copy if the server says it may,
434+
must-revalidate is like no-cache with a grace period.
435+
</p>
436+
<p>
437+
must-revalidate needs an associated max-age directive;
438+
above, we’ve set it to ten minutes.
439+
</p>
440+
</>
441+
}
442+
/>
443+
<Fieldset
444+
title={Directives["proxy-revalidate"]}
445+
description={
409446
<p>
410447
In a similar vein to s-maxage, proxy-revalidate is the
411448
public-cache specific version of must-revalidate. It is simply
412449
ignored by private caches.
413450
</p>
414-
</div>
415-
</fieldset>
416-
<fieldset>
417-
<legend>immutable</legend>
418-
<div>
451+
}
452+
/>
453+
<Fieldset
454+
title={Directives["immutable"]}
455+
description={
419456
<p>
420457
immutable is a way of telling the browser that a file will
421458
never change—it’s immutable—and therefore never to bother
422459
revalidating it. We can completely cut out the overhead of a
423460
roundtrip of latency.
424461
</p>
425-
</div>
426-
</fieldset>
427-
<fieldset>
428-
<legend>stale-while-revalidate</legend>
429-
<div>
462+
}
463+
/>
464+
<Fieldset
465+
title={Directives["stale-while-revalidate"]}
466+
description={
430467
<p>
431468
Indicates that the client is willing to accept a stale
432469
response while asynchronously checking in the background for a
433470
fresh one. The seconds value indicates for how long the client
434471
is willing to accept a stale response.
435472
</p>
436-
</div>
437-
</fieldset>
473+
}
474+
/>
438475
</form>
439476
<div className="Result" onClick={() => this.copyToClipboard()}>
440-
<pre className="Result__header">
441-
Cache-Control:{`\n`}
442-
{this.state.directives.map(directive => {
443-
return <Directive key={directive.name} {...directive} />;
444-
})}
445-
{!this.state.directives.length ? (
446-
<span className="Result__placeholder">
447-
{" "}// configure directives
448-
<br />
449-
{" "}// using the panel
450-
<br />
451-
{" "}// on the left
452-
</span>
453-
) : null}
454-
</pre>
477+
<div className="ResultHeader">
478+
<pre className="ResultHeader__header">
479+
Cache-Control:{`\n`}
480+
{this.state.directives.map(directive => {
481+
return <Directive key={directive.name} {...directive} />;
482+
})}
483+
{!this.state.directives.length ? (
484+
<span className="ResultHeader__placeholder">
485+
{" "}// configure directives
486+
<br />
487+
{" "}// using the panel
488+
<br />
489+
{" "}// on the left
490+
</span>
491+
) : null}
492+
</pre>
493+
</div>
494+
<div className="ResultCode">
495+
<div className="ResultCode__header">
496+
<div
497+
className="ResultCode__header-toggle"
498+
onClick={() =>
499+
this.setState({
500+
showLibraryCode: !this.state.showLibraryCode
501+
})
502+
}
503+
>
504+
Library Code{" "}
505+
<span>({this.state.showLibraryCode ? "hide" : "show"})</span>
506+
</div>
507+
<div>
508+
<select
509+
className="ResultCode__header-select"
510+
value={this.state.codeLibrary}
511+
onChange={evt => {
512+
evt.preventDefault();
513+
this.setState({
514+
showLibraryCode: true,
515+
codeLibrary: evt.target.value
516+
});
517+
}}
518+
>
519+
{Object.keys(libraryCode).map(lib => {
520+
return <option key={lib}>{lib}</option>;
521+
})}
522+
</select>
523+
</div>
524+
</div>
525+
<div style={styles.hide(!this.state.showLibraryCode)}>
526+
<SyntaxHighlighter
527+
className="ResultCode__code"
528+
language="javascript"
529+
style={docco}
530+
>
531+
{libraryCode[this.state.codeLibrary](this.state.directives)}
532+
</SyntaxHighlighter>
533+
</div>
534+
</div>
455535
</div>
456536
</main>
457537
<footer className="Footer">

‎src/index.css

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -126,20 +126,24 @@ a:hover {
126126

127127
.Result {
128128
grid-area: result;
129-
padding: 5px;
129+
display: grid;
130+
grid-template-rows: 2fr auto;
131+
grid-template-areas: "result_header" "result_code";
130132
background-color: var(--colour-grey);
131-
color: pink;
132-
display: flex;
133-
align-items: center;
134-
justify-content: center;
135-
font-size: 3rem;
136133
}
137134

138-
.Result__header {
135+
.ResultHeader {
136+
padding: 5px;
137+
grid-area: result_header;
139138
margin-top: -40px;
139+
color: pink;
140+
font-size: 3rem;
141+
align-items: center;
142+
justify-content: center;
143+
display: flex;
140144
}
141145

142-
.Result__placeholder {
146+
.ResultHeader__placeholder {
143147
color: grey;
144148
}
145149

@@ -152,6 +156,41 @@ a:hover {
152156
content: ",";
153157
}
154158

159+
.ResultCode {
160+
grid-area: result_code;
161+
}
162+
163+
.ResultCode__header {
164+
height: 40px;
165+
background-color: orange;
166+
color: white;
167+
width: 100%;
168+
display: flex;
169+
align-items: center;
170+
padding: 0 10px;
171+
font-weight: bold;
172+
justify-content: space-between;
173+
}
174+
175+
.ResultCode__header-toggle {
176+
cursor: pointer;
177+
}
178+
179+
.ResultCode__header-toggle span {
180+
border-bottom: 1px dotted white;
181+
}
182+
183+
.ResultCode__header-select {
184+
border: 0;
185+
border-radius: 5px;
186+
padding: 3px 5px;
187+
}
188+
189+
.ResultCode__code {
190+
background-color: white;
191+
margin: 0;
192+
}
193+
155194
.Footer {
156195
display: flex;
157196
align-items: center;

0 commit comments

Comments
 (0)