Update home

notPlancha · Mar 7, 2017 · 0cb33f8 · 0cb33f8
1 parent 0551bd0
commit 0cb33f8
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 80 deletions.
diff --git a/routes.json b/routes.json
@@ -0,0 +1,5 @@
+{
+  "/api/": "/",
+  "/blog/:resource/:id/show": "/:resource/:id",
+  "/blog/:category": "/posts?category=:category"
+}
diff --git a/src/server/public/index.html b/src/server/public/index.html
@@ -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>

diff --git a/src/server/public/main.js b/src/server/public/main.js
@@ -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])
             ])
           }))
         ]

diff --git a/src/server/public/style.css b/src/server/public/style.css
@@ -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;
 }
diff --git a/test/server/plural.js b/test/server/plural.js
@@ -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)
       })