Skip to content

Commit 0cb33f8

Browse files
typicodetypicode
committed
Update home
1 parent 0551bd0 commit 0cb33f8

File tree

5 files changed

+122
-80
lines changed

5 files changed

+122
-80
lines changed

‎routes.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"/api/": "/",
3+
"/blog/:resource/:id/show": "/:resource/:id",
4+
"/blog/:category": "/posts?category=:category"
5+
}

‎src/server/public/index.html‎

Lines changed: 44 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,58 @@
11
<html>
22
<head>
33
<title>JSON Server</title>
4+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
5+
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
46
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
57
<link rel="stylesheet" href="style.css">
68
</head>
79
<body>
8-
<header class="container">
9-
<h1>
10-
<a href="https://github.com/typicode/json-server" class="logo">
11-
json-server
10+
<header>
11+
<div class="container">
12+
<a href="https://github.com/typicode/json-server">
13+
<h3>JSON Server</h3>
1214
</a>
13-
</h1>
15+
</div>
1416
</header>
15-
<main class="container">
16-
<hr>
17-
<p>
18-
Congrats! {😊}<br>
19-
<em>You're successfully running JSON Server</em>
20-
</p>
21-
22-
<hr>
23-
24-
<p>
25-
Here are the resources that JSON Server has loaded:
26-
</p>
27-
<div id="resources">loading, please wait...</div>
28-
29-
<div id="custom-routes"></div>
30-
31-
<p>
32-
You can view database current state at any time:
33-
</p>
34-
<ul>
35-
<li>
36-
<a href="db">db</a>
37-
</li>
38-
</ul>
39-
40-
<p>
41-
You can use any HTTP verbs (GET, POST, PUT, PATCH and DELETE) and access your resources from anywhere
42-
using CORS or JSONP.
43-
</p>
44-
45-
<h4>Documentation</h4>
46-
<p>
47-
View
48-
<a href="https://github.com/typicode/json-server">README</a>
49-
on GitHub.
50-
</p>
51-
52-
<h4>Issues</h4>
53-
<p>Please go
54-
<a href="https://github.com/typicode/json-server/issues">here</a>.
55-
</p>
17+
<main>
18+
<div class="container">
19+
<p>
20+
<strong>Congrats!</strong><br>
21+
You're successfully running JSON Server 😄
22+
</p>
23+
24+
<div id="resources"></div>
25+
26+
<p>
27+
<em>
28+
To access and modify resources, you can use any HTTP method
29+
</em>
30+
<br>
31+
<code>GET</code>
32+
<code>POST</code>
33+
<code>PUT</code>
34+
<code>PATCH</code>
35+
<code>DELETE</code>
36+
<code>OPTIONS</code>
37+
</p>
38+
39+
<div id="custom-routes"></div>
40+
41+
<!-- <h4>Extra</h4>
42+
<p>
43+
44+
<br>
45+
</p> -->
46+
</div>
5647
</main>
5748

58-
<footer class="container">
59-
<hr>
60-
<p>
61-
To replace this page, create an index.html file in ./public, JSON Server will load it.
62-
</p>
49+
<footer>
50+
<div class="container">
51+
<p>
52+
<em>To replace this page, create a <code>./public</code> directory with an
53+
<code>index.html</code> file in it</em>.
54+
</p>
55+
</div>
6356
</footer>
6457

6558
<script src="https://unpkg.com/mithril/mithril.min.js"></script>

‎src/server/public/main.js‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,32 @@ m.mount(
1212
{
1313
view: function () {
1414
var keys = Object.keys(db)
15-
console.log(keys, db)
16-
return m('ul', keys.map(function (key) {
17-
return m('li', [
18-
m('a', { href: key }, key),
19-
m('span', Array.isArray(db[key])
20-
? '(' + db[key].length + ')'
21-
: '(1)'
22-
)
23-
])
24-
}))
15+
var resourceList = (
16+
m(
17+
'ul',
18+
keys
19+
.map(function (key) {
20+
return m('li', [
21+
m('a', { href: key }, '/' + key),
22+
m('sup', Array.isArray(db[key])
23+
? ' ' + db[key].length + 'x'
24+
: ' object'
25+
)
26+
])
27+
})
28+
.concat([
29+
m('a', { href: 'db' }, '/db'),
30+
m('sup', m('em', ' state'))
31+
])
32+
)
33+
)
34+
35+
return [
36+
m('h4', 'Resources'),
37+
keys.length
38+
? resourceList
39+
: m('p', 'No resources found')
40+
]
2541
}
2642
}
2743
)
@@ -40,11 +56,11 @@ m.mount(
4056
var rules = Object.keys(customRoutes)
4157
if (rules.length) {
4258
return [
43-
m('p', 'And the custom routes:'),
59+
m('h4', 'Custom routes'),
4460
m('table', rules.map(function (rule) {
4561
return m('tr', [
4662
m('td', rule),
47-
m('td', '⇢ ' + rules[rule])
63+
m('td', '⇢ ' + customRoutes[rule])
4864
])
4965
}))
5066
]

‎src/server/public/style.css‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,58 @@
1-
html {
2-
height: 100%;
3-
}
4-
51
body {
6-
min-height: 100%;
72
display: flex;
3+
min-height: 100vh;
84
flex-direction: column;
5+
padding:0;
6+
margin: 0;
7+
color: #333;
98
}
109

11-
a, a:hover {
12-
color: #1882BC;
13-
text-decoration: underline;
10+
header {
11+
padding-top: 2.0rem;
12+
border-bottom: 1px solid #EEE;
1413
}
1514

1615
header a {
1716
color: inherit;
18-
text-decoration: none;
1917
}
2018

2119
main {
2220
flex: 1;
23-
padding: 2rem 0;
21+
padding-top: 4rem;
22+
}
23+
24+
footer {
25+
padding-top: 2.5rem;
26+
border-top: 1px solid #EEE;
27+
}
28+
29+
h4 {
30+
margin-top: 4rem;
31+
letter-spacing: 0;
32+
}
33+
34+
a {
35+
color: #0275d8;
36+
}
37+
38+
a:hover {
39+
color: #014c8c;
40+
text-decoration: underline;
2441
}
2542

2643
table {
27-
margin-left: 30px;
44+
margin-left: 0;
2845
}
2946

3047
td {
3148
border: 0;
49+
padding: 0 1em .5em 0;
50+
color: #014c8c;
3251
}
3352

3453
td:first-child {
35-
width:1%;
36-
white-space:nowrap;
37-
color: #1882BC;
54+
width: 1%;
55+
white-space: nowrap;
3856
}
3957

4058
img {
@@ -44,9 +62,10 @@ img {
4462

4563
ul {
4664
list-style-position: inside;
47-
padding-left: 30px;
65+
padding-left: 0;
4866
}
4967

5068
li {
5169
list-style-type: none;
70+
margin-bottom: .2rem;
5271
}

‎test/server/plural.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -657,10 +657,19 @@ describe('Server', () => {
657657
})
658658
})
659659

660-
describe('GET /stylesheets/style.css', () => {
660+
describe('GET /main.js', () => {
661+
it('should respond with js', (done) => {
662+
request(server)
663+
.get('/main.js')
664+
.expect('Content-Type', /javascript/)
665+
.expect(200, done)
666+
})
667+
})
668+
669+
describe('GET /style.css', () => {
661670
it('should respond with css', (done) => {
662671
request(server)
663-
.get('/stylesheets/style.css')
672+
.get('/style.css')
664673
.expect('Content-Type', /css/)
665674
.expect(200, done)
666675
})

0 commit comments

Comments
 (0)