Skip to content

Commit f55df1a

Browse files
marcusgadbemmarcusgadbem
committed
Redesigned the app to support azk 2 steps 'getting started' guide
* Changed views system to Handlebars * Added a simple locale to support 'en' and 'pt_BR' languages * Redesigned the views to support 2 steps for extending application
1 parent 5d6d65a commit f55df1a

16 files changed

+523
-33
lines changed

‎config/index.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
var path = require('path');
2+
var express = require('express');
3+
var exphbs = require('express-handlebars');
4+
var locale = require('locale');
5+
var supported = new locale.Locales(["pt_BR", "en", "en_US"]);
6+
var AZK_UID = process.env.AZK_UID;
7+
8+
// App Config
9+
function Config(app) {
10+
11+
// Creating express-handlebars instance with step's partials already registered
12+
var hbs = exphbs.create({partialsDir: ['./views/steps/']});
13+
14+
// Create simple logger middleware
15+
app.use(function(req, res, next){
16+
console.log('%s: %s %s', AZK_UID, req.method, req.url);
17+
next();
18+
});
19+
20+
// Supports en_US and pt_BR
21+
app.use(locale(supported));
22+
23+
// Setup views with handlebars engine
24+
app.engine('handlebars', hbs.engine);
25+
app.set('view engine', 'handlebars');
26+
27+
// Config static path for assets middleware
28+
app.use('/static', express.static(path.join(__dirname, '../public')));
29+
}
30+
31+
module.exports = Config;

‎index.js

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
var express = require('express');
2-
var fs = require('fs');
3-
var url = require('url');
1+
var express = require('express');
2+
var url = require('url');
43

54
// Configs
6-
var PORT = process.env.HTTP_PORT || 3000;
7-
var AZK_UID = process.env.AZK_UID;
5+
var PORT = process.env.HTTP_PORT || 3000;
6+
var AZK_UID = process.env.AZK_UID;
7+
var azkInstanceData = {
8+
seq: null, // instance sequence
9+
uid: AZK_UID // instance ID
10+
};
811

912
// Database is configured
1013
var client;
@@ -14,45 +17,47 @@ if (process.env.DATABASE_URL) {
1417
client = redis.createClient(options.port, options.hostname);
1518
}
1619

17-
function render(counter) {
18-
var body = '';
19-
body += '<center>';
20-
body += ' <img src="/static/logo.png" />';
21-
body += ' <h2>instance id: ' + AZK_UID + '</h2>';
22-
23-
if (counter) {
24-
body += ' <h3>Redis connected!!!</h3>';
25-
body += ' <h4>Views: ' + counter + '</h4>';
26-
}
20+
// Create Express app
21+
var app = express();
2722

28-
body += '</center>';
29-
return body;
30-
}
23+
// Config app with simple logger middleware,
24+
// simples locale, view engine and static assets
25+
require('./config')(app);
3126

32-
// App
33-
var app = express();
27+
// Which layout handlebars will render
28+
var layout;
3429

35-
// simple logger
36-
app.use(function(req, res, next){
37-
console.log('%s: %s %s', AZK_UID, req.method, req.url);
38-
next();
39-
});
30+
// Route
31+
app.get('/', function(req, res) {
32+
layout = (req.locale == 'pt_BR') ? 'index_pt_br' : 'index_en';
4033

41-
app.use("/static", express.static(__dirname + '/public'));
34+
// fill `seq` with the container that processed the request
35+
azkInstanceData.seq = process.env.AZK_SEQ;
4236

43-
app.get('/', function (req, res) {
44-
// Render with counter
4537
if (client) {
46-
client.get("counter", function(err, counter) {
38+
// if database is plugged
39+
client.get('counter', function(err, counter) {
4740
if (err) console.error(err);
4841
counter = parseInt(counter || 0) + 1;
4942
client.set('counter', counter, function(err) {
5043
if (err) console.error(err);
51-
res.send(render(counter));
44+
res.render(layout, {
45+
client: true,
46+
counter: counter,
47+
azkData: azkInstanceData,
48+
step: 'commands'
49+
});
5250
})
5351
});
5452
} else {
55-
res.send(render());
53+
// database is missing
54+
res.render(layout, {
55+
azkData: azkInstanceData,
56+
client: false,
57+
counter: false,
58+
step: 'database'
59+
});
60+
5661
}
5762
});
5863

‎package.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,21 @@
33
"version": "0.0.1",
44
"description": "azk getting started application",
55
"author": "Everton Ribeiro <[email protected]>",
6+
"contributors": [{
7+
"name" : "Marcus Gadbem",
8+
"email" : "[email protected]"
9+
}],
610
"scripts": {
7-
"start": "node index.js"
11+
"start": "nodemon ./index.js"
812
},
913
"dependencies": {
10-
"express": "3.4.4"
14+
"express": "3.4.4",
15+
"express-handlebars": "^2.0.1",
16+
"locale": "0.0.20",
17+
"redis": "^0.12.1"
18+
},
19+
"devDependencies": {
20+
"nodemon": "^1.3.7"
1121
},
1222
"license": "BSD"
1323
}

‎public/assets/css/style.css

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
* { }
2+
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
font-family: Helvetica, Arial, sans-serif;
7+
font-size: 14px;
8+
letter-spacing: 0.2px;
9+
line-height: 24px;
10+
color: #585858;
11+
}
12+
13+
a {
14+
color: #31b4ce;
15+
text-decoration: none;
16+
}
17+
18+
a:hover {
19+
text-decoration: underline;
20+
}
21+
22+
a:visited {
23+
color: #282a37;
24+
}
25+
26+
pre.request {
27+
color: silver;
28+
}
29+
30+
.instance-id,
31+
.counter,
32+
.visitor {
33+
color: #31b4ce;
34+
}
35+
36+
/* steps */
37+
38+
ol.steps {
39+
margin: 40px 0 60px;
40+
padding:0;
41+
text-align: center;
42+
}
43+
44+
ol.steps li {
45+
list-style-type: none;
46+
display: inline-block;
47+
}
48+
49+
.step-btn {
50+
display: block;
51+
border: 1px solid #38bcd4;
52+
color: #38bcd4;
53+
font-size: 26px;
54+
font-weight: 100;
55+
padding: 12px;
56+
margin-right:15px;
57+
margin-bottom:15px;
58+
border-radius: 4px;
59+
}
60+
61+
.step-btn--active {
62+
background: #38bcd4;
63+
color: #ffffff;
64+
}
65+
66+
.step-btn--disabled {
67+
color: rgba(56,188,212,.4);
68+
border: 1px solid rgba(56,188,212,.4);
69+
}
70+
71+
.h-line {
72+
border-bottom: 1px solid #ccc;
73+
height: 0;
74+
margin: 20px 0;
75+
}
76+
77+
.cmd-line {
78+
margin-top: 20px;
79+
}
80+
81+
.cmd-line li {
82+
margin: 0;
83+
padding: 0;
84+
}
85+
86+
.cmd-line li pre {
87+
background-color: #f7f7f7;
88+
border-radius: 3px;
89+
padding: 10px;
90+
}
91+
92+
.cmd-line--symbol {
93+
color: #31b4ce;
94+
}
95+
96+
.cmd-line--option {
97+
color: gray;
98+
}
99+
100+
.container {
101+
margin: 0 auto;
102+
margin-top: 45px;
103+
max-width: 560px;
104+
}
105+
106+
.sidebar {
107+
position: fixed;
108+
top: 30px; left: 30px;
109+
}
110+
111+
.logo {
112+
margin: 0 auto;
113+
width: 122px;
114+
}
115+
116+
.azk-name {
117+
background: #31b4ce;
118+
border-top-left-radius: 999em;
119+
border-top-right-radius: 999em;
120+
border-bottom-right-radius: 999em;
121+
border-bottom-left-radius: 999em;
122+
color: #fff;
123+
display:inline-block;
124+
font-family: Helvetica, Arial, sans-serif;
125+
font-size: 14px;
126+
font-weight: bold;
127+
padding: 5px;
128+
text-transform: lowercase;
129+
}
130+
131+
.footer {
132+
margin-top:40px;
133+
text-align: center;
134+
}
135+
136+
p.copyright {
137+
margin:30px auto;
138+
color: grey;
139+
text-align: center;
140+
}
141+
142+
.azuki {
143+
display:inline-block;
144+
padding:12px 4px 6px;
145+
background: #3c4959;
146+
color: #fff;
147+
font-weight: bold;
148+
text-transform: lowercase;
149+
margin-bottom:15px;
150+
}
151+
152+
.social-medias { padding-left: 27px; }
153+
154+
.social-medias li { list-style: none; }
155+
156+
.icon {
157+
background: url('/static/assets/images/sprite-social-media.png');
158+
background-size: 300px 107px;
159+
display:block;
160+
width: 50px;
161+
height: 50px;
162+
margin: 10px;
163+
}
164+
165+
.icon--circle {
166+
/*border: 1px solid #929294;*/
167+
border: 1px solid rgba(146,146,148,.3);
168+
border-top-left-radius: 999em;
169+
border-top-right-radius: 999em;
170+
border-bottom-right-radius: 999em;
171+
border-bottom-left-radius: 999em;
172+
}
173+
174+
.icon--link { background-position: -8px 0px; }
175+
.icon--github { background-position: -162px 0px; }
176+
.icon--facebook { background-position: -85px 0px; }
177+
.icon--twitter { background-position: -540px 0px; }
178+
179+
.icon--link:hover { border-color: #3c4959; background-position: -8px -50px; }
180+
.icon--github:hover { border-color: #000000; background-position: -162px -50px; }
181+
.icon--facebook:hover { border-color: #425f9b; background-position: -85px -50px; }
182+
.icon--twitter:hover { border-color: #55acef; background-position: -540px -50px; }
183+
184+
/* Media Queries */
185+
186+
@media (max-width: 900px) {
187+
.logo {
188+
width: 90px;
189+
}
190+
191+
.social-medias { padding-left: 17px; }
192+
193+
.icon {
194+
width: 40px;
195+
height: 40px;
196+
margin: 7px;
197+
}
198+
199+
.icon--link { background-position: -14px -6px; }
200+
.icon--github { background-position: -167px -6px; }
201+
.icon--facebook { background-position: -89px -7px; }
202+
.icon--twitter { background-position: -545px -7px; }
203+
204+
.icon--link:hover { background-position: -14px -56px; }
205+
.icon--github:hover { background-position: -167px -56px; }
206+
.icon--facebook:hover { background-position: -89px -58px; }
207+
.icon--twitter:hover { background-position: -545px -58px; }
208+
209+
}
210+
211+
@media (max-width: 800px) {
212+
.logo {
213+
width: 150px;
214+
}
215+
.sidebar {
216+
margin-top:30px;
217+
text-align:center;
218+
position: inherit;
219+
}
220+
ul.social-medias { display: none; }
221+
}
222+

‎public/assets/images/azk-link.png

1.96 KB
Loading

‎public/assets/images/github.png

2.67 KB
Loading

‎public/assets/images/logo.png

115 KB
Loading

‎public/assets/images/sprite-social-media.png

7.91 KB
Loading

‎public/assets/images/twitter.png

2.14 KB
Loading

‎public/logo.png

-62.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)