Skip to content

Commit 5087aaa

Browse files
RomanMinkinRomanMinkin
committed
Merge pull request socketstream#427 from ignlg/css_formatters
feat(generate): Add CSS formatters (Less, Stylus, Plain CSS) Add CSS formatters (Less, Stylus, Plain CSS) to the example app generator Add test environment. Examples: `$ socketstream new app_name` (CSS) `$ socketstream new app_name -s` (Stylus) `$ socketstream new app_name -l` (Less)
2 parents 3370e7a + 9fc2981 commit 5087aaa

File tree

9 files changed

+286
-36
lines changed

9 files changed

+286
-36
lines changed

‎Makefile‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ If SEO is important to you, take a look at [Derby](http://www.derbyjs.com). If y
351351

352352
There are a number of [Mocha](http://visionmedia.github.com/mocha/) tests starting to appear for parts of the API which are unlikely to change. To run them type:
353353

354-
$ make test
354+
$ grunt test
355355

356356
More tests coming soon. Contributions very much appreciated.
357357

‎bin/socketstream‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ program
99
.option('-m, --minimal', 'minimal install (no chat demo)')
1010
.option('-c, --coffee', 'use CoffeeScript')
1111
.option('-j, --jade', 'use Jade for Views')
12-
// To be implemented...
13-
//.option('-s, --stylus', 'use Stylus for CSS')
14-
//.option('-l, --less', 'use Less for CSS')
12+
.option('-s, --stylus', 'use Stylus for CSS')
13+
.option('-l, --less', 'use Less for CSS')
1514
.option('-r, --repl', 'include Console Server / REPL')
1615
.parse(process.argv);
1716

‎lib/cli/generate.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ exports.generate = function(program) {
4242
name = program.args[1],
4343
source = path.join(__dirname, '../../new_project'),
4444
viewExtension = program.jade && 'jade' || 'html',
45+
styleExtension = '',
4546
mods = [],
4647
packagejs = '',
4748
clientFiles = {
@@ -87,11 +88,19 @@ exports.generate = function(program) {
8788
return log('Please provide a name for your application: $> socketstream new <MyAppName>');
8889
}
8990

90-
if (makeRootDirectory(name)) {
91-
92-
/* Force stylus for now */
93-
program.stylus = true;
91+
/* Select stylesheets language */
92+
if (program.less) {
93+
styleExtension = 'less';
94+
}
95+
else if (program.stylus) {
96+
styleExtension = 'styl';
97+
}
98+
else {
99+
styleExtension = 'css';
100+
}
94101

102+
/* Select formatters for file extensions */
103+
if (makeRootDirectory(name)) {
95104
['coffee', 'jade', 'less', 'stylus'].forEach(function(formatter) {
96105
if (program[formatter]) {
97106
return selectedFormatters.push(formatter);
@@ -127,23 +136,23 @@ exports.generate = function(program) {
127136
if (program.minimal) {
128137
cp('/client/views/app.minimal.' + viewExtension, '/client/views/app.' + viewExtension);
129138
cp('/client/code/app/app.minimal.' + codeExtension, '/client/code/app/app.' + codeExtension);
130-
cp('/client/css/app.minimal.styl', '/client/css/app.styl');
139+
cp('/client/css/app.minimal.' + styleExtension, '/client/css/app.' + styleExtension);
131140
cp('/server/rpc/.gitkeep');
132141
cp('/server/middleware/.gitkeep');
133142
cp('/client/templates/.gitkeep');
134-
clientFiles.css.push('app.styl');
143+
clientFiles.css.push('app.' + styleExtension);
135144
} else {
136145
cp('/client/static/images/logo.png');
137146
cp('/client/code/app/app.demo.' + codeExtension, '/client/code/app/app.' + codeExtension);
138147
cp('/server/middleware/example.' + codeExtension);
139148
cp('/server/rpc/demo.' + codeExtension);
140149
cp('/client/css/libs/reset.css');
141-
cp('/client/css/app.demo.styl', '/client/css/app.styl');
150+
cp('/client/css/app.demo.' + styleExtension, '/client/css/app.' + styleExtension);
142151
mkdir('/client/templates/chat');
143152
cp('/client/templates/chat/message.' + viewExtension);
144153
cp('/client/views/app.demo.' + viewExtension, '/client/views/app.' + viewExtension);
145154
clientFiles.css.push('libs/reset.css');
146-
clientFiles.css.push('app.styl');
155+
clientFiles.css.push('app.' + styleExtension);
147156
}
148157

149158
/* Generate app.js */
@@ -195,19 +204,13 @@ exports.generate = function(program) {
195204
} else {
196205
success('Plain HTML for views', '(-j if you prefer Jade)');
197206
}
198-
199-
/**
200-
* TODO
201-
*
202-
* To be implemented in the future. Contributions welcome
203-
*
204-
* if program.stylus
205-
* success("Stylus for CSS")
206-
* else if program.less
207-
* success("Less for CSS")
208-
* else
209-
* success("Plain CSS", "(-s if you prefer Stylus, -l for Less)")
210-
*/
207+
if (program.less) {
208+
success('Less for CSS');
209+
} else if (program.stylus) {
210+
success('Stylus for CSS')
211+
} else {
212+
success('Plain CSS', '(-s if you prefer Stylus, -l for Less)');
213+
}
211214

212215
/* Add the REPL if selected */
213216
if (program.repl) {

‎new_project/client/css/app.demo.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/* Example CSS file */
2+
3+
/* Main */
4+
5+
body,
6+
html {
7+
height: 100%;
8+
}
9+
body {
10+
font: normal 1em sans-serif;
11+
background: linear-gradient(top, #eeeeee, #ffffff);
12+
text-align: center;
13+
}
14+
p {
15+
margin-bottom: 1em;
16+
}
17+
a {
18+
color: #000a68;
19+
}
20+
h1 {
21+
font-size: 1.5em;
22+
font-weight: normal;
23+
margin: 1.5em;
24+
color: #333;
25+
text-shadow: 1px 1px 2px white;
26+
}
27+
#content {
28+
padding: 50px;
29+
}
30+
31+
/* Quick Chat Demo */
32+
33+
#demo {
34+
border: 1px solid #ccc;
35+
width: 700px;
36+
text-align: left;
37+
margin: 50px auto;
38+
padding: 15px;
39+
border-radius: 5px;
40+
}
41+
#demo h3 {
42+
font-size: 1.0em;
43+
font-weight: normal;
44+
}
45+
#demo h5 {
46+
padding: 5px 0;
47+
color: #666;
48+
font-weight: normal;
49+
font-size: 0.8em;
50+
}
51+
#demo #myMessage,
52+
#demo #chatlog {
53+
border: none;
54+
box-shadow: inset 0 0 2px #777;
55+
border-radius: 5px;
56+
}
57+
#demo #myMessage {
58+
width: 690px;
59+
padding: 5px;
60+
}
61+
#demo #chatlog {
62+
width: 700px;
63+
background-color: white;
64+
margin: 5px 0;
65+
}
66+
#demo #chatlog p {
67+
font-size: 0.9em;
68+
color: #000a68;
69+
padding: 3px 9px;
70+
margin: 0;
71+
}
72+
#demo #chatlog p:first-child {
73+
padding-top: 9px;
74+
}
75+
#demo #chatlog p:last-child {
76+
padding-bottom: 9px;
77+
}
78+
#demo #chatlog span.time {
79+
color: #666;
80+
float: right;
81+
width: 70px;
82+
text-align: right;
83+
font-size: 0.7em;
84+
}

‎new_project/client/css/app.demo.less‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
// Example Less file
2+
//
3+
// Less docs: http://lesscss.org/
4+
5+
// Main
6+
7+
body, html {
8+
height: 100%;
9+
}
10+
11+
body {
12+
font: normal 1em sans-serif;
13+
background: linear-gradient(top, #eee, #fff);
14+
text-align: center;
15+
}
16+
p {
17+
margin-bottom: 1em;
18+
}
19+
20+
a {
21+
color: #000a68;
22+
}
23+
24+
h1 {
25+
font-size: 1.5em;
26+
font-weight: normal;
27+
margin: 1.5em;
28+
color: #333;
29+
text-shadow: 1px 1px 2px white;
30+
}
31+
32+
#content {
33+
padding: 50px;
34+
}
35+
36+
// Quick Chat Demo
37+
38+
#demo {
39+
border: 1px solid #ccc;
40+
width: 700px;
41+
text-align: left;
42+
margin: 50px auto;
43+
padding: 15px;
44+
border-radius: 5px;
45+
h3 {
46+
font-size: 1.0em;
47+
font-weight: normal;
48+
}
49+
h5 {
50+
padding: 5px 0;
51+
color: #666;
52+
font-weight: normal;
53+
font-size: 0.8em;
54+
}
55+
#myMessage, #chatlog {
56+
border: none;
57+
box-shadow: inset 0 0 2px #777;
58+
border-radius: 5px;
59+
}
60+
#myMessage {
61+
width: 690px;
62+
padding: 5px;
63+
}
64+
#chatlog {
65+
width: 700px;
66+
background-color: white;
67+
margin: 5px 0;
68+
p {
69+
font-size: 0.9em;
70+
color: #000a68;
71+
padding: 3px 9px;
72+
margin: 0;
73+
&:first-child {
74+
padding-top: 9px;
75+
}
76+
&:last-child {
77+
padding-bottom: 9px;
78+
}
79+
}
80+
span.time {
81+
color: #666;
82+
float: right;
83+
width: 70px;
84+
text-align: right;
85+
font-size: 0.7em;
86+
}
87+
}
88+
}

‎new_project/client/css/app.minimal.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Example CSS file
2+
3+
body,
4+
html {
5+
height: 100%;
6+
}
7+
8+
body {
9+
font: normal 1em sans-serif;
10+
}

‎new_project/client/css/app.minimal.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Example Less file
2+
3+
body, html {
4+
height: 100%;
5+
}
6+
7+
body {
8+
font: normal 1em sans-serif;
9+
}

0 commit comments

Comments
 (0)