Skip to content

Commit 2f16f93

Browse files
wdavidwwdavidw
committed
fix(website): commonjs imports in homepage
1 parent e89b2f4 commit 2f16f93

File tree

1 file changed

+100
-88
lines changed

1 file changed

+100
-88
lines changed

‎docs/src/pages/index.js‎

Lines changed: 100 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,70 @@
1-
import React from "react"
2-
import { Link } from "gatsby"
1+
import React from "react";
2+
import { Link } from "gatsby";
33
import {
44
MIN_TABLET_MEDIA_QUERY,
55
TABLET_MEDIA_QUERY,
6-
} from 'typography-breakpoint-constants'
7-
import Layout from "../components/Layout"
8-
import Seo from "../components/Seo"
9-
import Banner from "../components/Banner"
10-
import Section from "../components/Section"
6+
} from "typography-breakpoint-constants";
7+
import Layout from "../components/Layout";
8+
import Seo from "../components/Seo";
9+
import Banner from "../components/Banner";
10+
import Section from "../components/Section";
1111

1212
// Syntax
13-
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
14-
import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'
15-
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/coffeescript'
16-
import tomorrow from 'react-syntax-highlighter/dist/esm/styles/prism/tomorrow'
17-
SyntaxHighlighter.registerLanguage('javascript', js);
18-
SyntaxHighlighter.registerLanguage('bash', bash);
19-
13+
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
14+
import js from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
15+
import bash from "react-syntax-highlighter/dist/esm/languages/prism/coffeescript";
16+
import tomorrow from "react-syntax-highlighter/dist/esm/styles/prism/tomorrow";
17+
SyntaxHighlighter.registerLanguage("javascript", js);
18+
SyntaxHighlighter.registerLanguage("bash", bash);
2019

2120
const codeString1 = `
2221
npm install shell
23-
`.trim()
22+
`.trim();
2423

2524
const codeString2 = `
2625
git clone http://github.com/adaltas/node-shell.git
27-
`.trim()
26+
`.trim();
2827

2928
const feature1 = `
30-
const shell = require("shell")
29+
const { shell } = require("shell");
3130
const app = shell({
3231
name: "myapp",
3332
description: "My CLI application",
3433
options: {
35-
"config": {
34+
config: {
3635
shortcut: "c",
37-
description: "Some option"
38-
}
36+
description: "Some option",
37+
},
3938
},
4039
commands: {
41-
"start": {
42-
description: "Start something"
43-
}
44-
}
45-
})
46-
`.trim()
40+
start: {
41+
description: "Start something",
42+
},
43+
},
44+
});
45+
`.trim();
4746

4847
const feature2 = `
4948
/* ... */
50-
const args = app.parse()
51-
console.log(args)
49+
const args = app.parse();
50+
console.log(args);
5251
5352
// Run \`node myapp -c value start\`
54-
{ command: [ 'start' ], config: 'value' }
55-
`.trim()
53+
// { command: [ 'start' ], config: 'value' }
54+
`.trim();
5655

5756
const feature3 = `
58-
const shell = require("shell")
57+
const shell = require("shell");
5958
const app = shell({
6059
/* ... */
61-
commands: { "start":
62-
{
60+
commands: {
61+
start: {
6362
/* ... */
64-
route: './routes/start.js'
65-
}
66-
}
67-
})
68-
app.route()
63+
route: "./routes/start.js",
64+
},
65+
},
66+
});
67+
app.route();
6968
7069
/* The project structure:
7170
|-- /node-modules
@@ -75,10 +74,10 @@ app.route()
7574
|-- package.json
7675
|-- package-lock.json
7776
*/
78-
`.trim()
77+
`.trim();
7978

8079
const feature4 = `
81-
// Run \`node myapp help\`
80+
// Run \`node myapp help\`
8281
NAME
8382
myapp - My CLI application
8483
@@ -96,78 +95,82 @@ COMMANDS
9695
EXAMPLES
9796
myapp --help Show this message
9897
myapp help Show this message
99-
`.trim()
100-
98+
`.trim();
10199

102100
const styles = {
103101
descContainer: {
104-
maxWidth: '800px',
105-
margin: '0 auto',
106-
textAlign: 'center',
107-
marginBottom: '2rem',
102+
maxWidth: "800px",
103+
margin: "0 auto",
104+
textAlign: "center",
105+
marginBottom: "2rem",
108106
},
109107
section: {
110-
'& h2': {
108+
"& h2": {
111109
textAlign: "center",
112110
},
113-
'> div > div': {
114-
display: 'flex',
115-
justifyContent: 'space-between',
116-
marginBottom: '2rem',
117-
'& p': {
118-
margin: '1.2rem 0',
119-
'&:last-child': {
120-
textAlign: 'center',
121-
}
111+
"> div > div": {
112+
display: "flex",
113+
justifyContent: "space-between",
114+
marginBottom: "2rem",
115+
"& p": {
116+
margin: "1.2rem 0",
117+
"&:last-child": {
118+
textAlign: "center",
119+
},
122120
},
123121
[TABLET_MEDIA_QUERY]: {
124-
flexDirection: 'column',
125-
marginBottom: '3rem',
126-
'& h3': {
127-
textAlign: 'center',
122+
flexDirection: "column",
123+
marginBottom: "3rem",
124+
"& h3": {
125+
textAlign: "center",
128126
},
129127
},
130128
[MIN_TABLET_MEDIA_QUERY]: {
131-
'h3': {
132-
marginTop: '.5rem',
129+
h3: {
130+
marginTop: ".5rem",
133131
},
134-
'&:nth-of-type(odd)': {
135-
'& > div:nth-of-type(odd)': {
132+
"&:nth-of-type(odd)": {
133+
"& > div:nth-of-type(odd)": {
136134
width: "43%",
137135
order: 2,
138136
},
139-
'& > div:nth-of-type(even)': {
137+
"& > div:nth-of-type(even)": {
140138
width: "53%",
141139
order: 1,
142140
},
143141
},
144-
}
142+
},
145143
},
146144
},
147145
button: {
148-
border: '1px solid #fff',
149-
color: '#fff',
150-
padding: '10px 30px',
151-
borderRadius: '3px',
152-
textDecoration: 'none',
153-
'&:hover': {
154-
background: 'rgba(255,255,255,.05)',
155-
}
156-
}
157-
}
146+
border: "1px solid #fff",
147+
color: "#fff",
148+
padding: "10px 30px",
149+
borderRadius: "3px",
150+
textDecoration: "none",
151+
"&:hover": {
152+
background: "rgba(255,255,255,.05)",
153+
},
154+
},
155+
};
158156

159157
const IndexPage = () => (
160158
<Layout isHome={true}>
161159
<Seo
162160
title="Shell.js - argument parsing for Node.js CLI applications"
163161
keywords={[
164-
'shell', 'cli', 'arguments', 'parameters',
165-
'router', 'parse', 'stringify',
162+
"shell",
163+
"cli",
164+
"arguments",
165+
"parameters",
166+
"router",
167+
"parse",
168+
"stringify",
166169
]}
167170
/>
168171
<Banner />
169172
<div css={styles.homePage}>
170-
<Section classes={{root: styles.section}}>
173+
<Section classes={{ root: styles.section }}>
171174
<h2>Why Shell.js?</h2>
172175
<div>
173176
<div>
@@ -180,7 +183,7 @@ const IndexPage = () => (
180183
commands and to generate help screens.
181184
</p>
182185
<p>
183-
<Link to='/config/' css={styles.button}>
186+
<Link to="/config/" css={styles.button}>
184187
Read more
185188
</Link>
186189
</p>
@@ -196,9 +199,12 @@ const IndexPage = () => (
196199
<div>
197200
<h3>Parse arguments</h3>
198201
<div>
199-
<p>For the handling and adding the functionality to the application operate with the `args` object returned with the method `parse`.</p>
200202
<p>
201-
<Link to='/api/parse/' css={styles.button}>
203+
For the handling and adding the functionality to the application
204+
operate with the `args` object returned with the method `parse`.
205+
</p>
206+
<p>
207+
<Link to="/api/parse/" css={styles.button}>
202208
Read more
203209
</Link>
204210
</p>
@@ -214,9 +220,11 @@ const IndexPage = () => (
214220
<div>
215221
<h3>Organize the code with routing</h3>
216222
<div>
217-
<p>Load and configure the router in a separate top-level module.</p>
218223
<p>
219-
<Link to='/usage/routing/' css={styles.button}>
224+
Load and configure the router in a separate top-level module.
225+
</p>
226+
<p>
227+
<Link to="/usage/routing/" css={styles.button}>
220228
Read more
221229
</Link>
222230
</p>
@@ -232,9 +240,13 @@ const IndexPage = () => (
232240
<div>
233241
<h3>Auto generate help</h3>
234242
<div>
235-
<p>Shell.js convert the configuration object into a readable documentation string about how to use the CLI application or one of its commands.</p>
236243
<p>
237-
<Link to='/api/help/' css={styles.button}>
244+
Shell.js convert the configuration object into a readable
245+
documentation string about how to use the CLI application or one
246+
of its commands.
247+
</p>
248+
<p>
249+
<Link to="/api/help/" css={styles.button}>
238250
Read more
239251
</Link>
240252
</p>
@@ -269,6 +281,6 @@ const IndexPage = () => (
269281
</Section>
270282
</div>
271283
</Layout>
272-
)
284+
);
273285

274-
export default IndexPage
286+
export default IndexPage;

0 commit comments

Comments
 (0)