Permalink
Browse files

Update home

  • Loading branch information...
typicode committed Mar 7, 2017
1 parent 0551bd0 commit 0cb33f837826f4e893c9313223c1475bd7e8c139
Showing with 122 additions and 80 deletions.
  1. +5 −0 routes.json
  2. +44 −51 src/server/public/index.html
  3. +28 −12 src/server/public/main.js
  4. +34 −15 src/server/public/style.css
  5. +11 −2 test/server/plural.js
View
@@ -0,0 +1,5 @@
{
"/api/": "/",
"/blog/:resource/:id/show": "/:resource/:id",
"/blog/:category": "/posts?category=:category"
}
@@ -1,65 +1,58 @@
<html>
<head>
<title>JSON Server</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="container">
<h1>
<a href="https://github.com/typicode/json-server" class="logo">
json-server
<header>
<div class="container">
<a href="https://github.com/typicode/json-server">
<h3>JSON Server</h3>
</a>
</h1>
</div>
</header>
<main class="container">
<hr>
<p>
Congrats! {😊}<br>
<em>You're successfully running JSON Server</em>
</p>
<hr>
<p>
Here are the resources that JSON Server has loaded:
</p>
<div id="resources">loading, please wait...</div>
<div id="custom-routes"></div>
<p>
You can view database current state at any time:
</p>
<ul>
<li>
<a href="db">db</a>
</li>
</ul>
<p>
You can use any HTTP verbs (GET, POST, PUT, PATCH and DELETE) and access your resources from anywhere
using CORS or JSONP.
</p>
<h4>Documentation</h4>
<p>
View
<a href="https://github.com/typicode/json-server">README</a>
on GitHub.
</p>
<h4>Issues</h4>
<p>Please go
<a href="https://github.com/typicode/json-server/issues">here</a>.
</p>
<main>
<div class="container">
<p>
<strong>Congrats!</strong><br>
You're successfully running JSON Server 😄
</p>
<div id="resources"></div>
<p>
<em>
To access and modify resources, you can use any HTTP method
</em>
<br>
<code>GET</code>
<code>POST</code>
<code>PUT</code>
<code>PATCH</code>
<code>DELETE</code>
<code>OPTIONS</code>
</p>
<div id="custom-routes"></div>
<!-- <h4>Extra</h4>
<p>
<br>
</p> -->
</div>
</main>
<footer class="container">
<hr>
<p>
To replace this page, create an index.html file in ./public, JSON Server will load it.
</p>
<footer>
<div class="container">
<p>
<em>To replace this page, create a <code>./public</code> directory with an
<code>index.html</code> file in it</em>.
</p>
</div>
</footer>
<script src="https://unpkg.com/mithril/mithril.min.js"></script>
View
@@ -12,16 +12,32 @@ m.mount(
{
view: function () {
var keys = Object.keys(db)
console.log(keys, db)
return m('ul', keys.map(function (key) {
return m('li', [
m('a', { href: key }, key),
m('span', Array.isArray(db[key])
? '(' + db[key].length + ')'
: '(1)'
)
])
}))
var resourceList = (
m(
'ul',
keys
.map(function (key) {
return m('li', [
m('a', { href: key }, '/' + key),
m('sup', Array.isArray(db[key])
? ' ' + db[key].length + 'x'
: ' object'
)
])
})
.concat([
m('a', { href: 'db' }, '/db'),
m('sup', m('em', ' state'))
])
)
)
return [
m('h4', 'Resources'),
keys.length
? resourceList
: m('p', 'No resources found')
]
}
}
)
@@ -40,11 +56,11 @@ m.mount(
var rules = Object.keys(customRoutes)
if (rules.length) {
return [
m('p', 'And the custom routes:'),
m('h4', 'Custom routes'),
m('table', rules.map(function (rule) {
return m('tr', [
m('td', rule),
m('td', '' + rules[rule])
m('td', '' + customRoutes[rule])
])
}))
]
@@ -1,40 +1,58 @@
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
min-height: 100vh;
flex-direction: column;
padding:0;
margin: 0;
color: #333;
}
a, a:hover {
color: #1882BC;
text-decoration: underline;
header {
padding-top: 2.0rem;
border-bottom: 1px solid #EEE;
}
header a {
color: inherit;
text-decoration: none;
}
main {
flex: 1;
padding: 2rem 0;
padding-top: 4rem;
}
footer {
padding-top: 2.5rem;
border-top: 1px solid #EEE;
}
h4 {
margin-top: 4rem;
letter-spacing: 0;
}
a {
color: #0275d8;
}
a:hover {
color: #014c8c;
text-decoration: underline;
}
table {
margin-left: 30px;
margin-left: 0;
}
td {
border: 0;
padding: 0 1em .5em 0;
color: #014c8c;
}
td:first-child {
width:1%;
white-space:nowrap;
color: #1882BC;
width: 1%;
white-space: nowrap;
}
img {
@@ -44,9 +62,10 @@ img {
ul {
list-style-position: inside;
padding-left: 30px;
padding-left: 0;
}
li {
list-style-type: none;
margin-bottom: .2rem;
}
View
@@ -657,10 +657,19 @@ describe('Server', () => {
})
})
describe('GET /stylesheets/style.css', () => {
describe('GET /main.js', () => {
it('should respond with js', (done) => {
request(server)
.get('/main.js')
.expect('Content-Type', /javascript/)
.expect(200, done)
})
})
describe('GET /style.css', () => {
it('should respond with css', (done) => {
request(server)
.get('/stylesheets/style.css')
.get('/style.css')
.expect('Content-Type', /css/)
.expect(200, done)
})

0 comments on commit 0cb33f8

Please sign in to comment.