chore(UI): Lifting

assets/logo.svg

+<svg width="96" height="72" viewBox="0 0 96 72" version="1" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z"/>
+    <path d="M29 69v-1-2H6L40 6l11 20 3-6L44 3s-2-3-4-3-3 1-5 3L1 63c0 1-2 3 0 6 0 1 2 2 5 2h28c-3 0-4-1-5-2z" fill="#00C58E"/>
+    <path d="M95 63L67 14c0-1-2-3-5-3-1 0-3 0-4 3l-4 6 3 6 5-9 28 49H79a5 5 0 0 1 0 3c-2 2-5 2-5 2h16c1 0 4 0 5-2 1-1 2-3 0-6z" fill="#108775"/>
+    <path d="M79 69v-1-2-3L57 26l-3-6-3 6-21 37-1 3a5 5 0 0 0 0 3c1 1 2 2 5 2h40s3 0 5-2zM54 31l19 35H35l19-35z" fill="#FFF" fill-rule="nonzero"/>
+  </g>
+</svg>

components/item.vue

@@ -2,7 +2,7 @@
   <li class="news-item">
     <span class="score">{{ item.points }}</span>
     <span class="title">
-      <template v-if="item.url">
+      <template v-if="isAbsolute(item.url)">
         <a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
         <span class="host"> ({{ item.url | host }})</span>
       </template>
@@ -24,7 +24,6 @@
         <router-link :to="'/item/' + item.id">{{ item.comments_count }} comments</router-link>
       </span>
     </span>
-    <span v-if="item.type !== 'link'" class="label">{{ item.type }}</span>
   </li>
 </template>
 
@@ -38,6 +37,11 @@ export default {
       type: Object,
       required: true
     }
+  },
+  methods: {
+    isAbsolute(url) {
+      return /^https?:\/\//.test(url)
+    }
   }
 }
 </script>
@@ -51,7 +55,7 @@ export default {
   line-height: 20px;
 
   .score {
-    color: #C75000;
+    color: #00C48D;
     font-size: 1.1em;
     font-weight: 700;
     position: absolute;
@@ -71,7 +75,7 @@ export default {
       text-decoration: underline;
 
       &:hover {
-        color: #C75000;
+        color: #00C48D;
       }
     }
   }

layouts/default.vue

@@ -3,7 +3,7 @@
     <header class="header">
       <nav class="inner" role="navigation">
         <router-link to="/" exact>
-          <img class="logo" src="~assets/logo.png" alt="logo">
+          <img class="logo" src="~/assets/logo.svg" alt="logo">
         </router-link>
         <router-link v-for="(list, key) in feeds" :key="key" :to="`/${key}`">
           {{ list.title }}
@@ -46,17 +46,17 @@ body {
   background-color: lighten(#eceef1, 30%);
   margin: 0;
   padding: 0;
-  color: #34495e;
+  color: #2E495E;
   overflow-y: scroll;
 }
 
 a {
-  color: #34495e;
+  color: #2E495E;
   text-decoration: none;
 }
 
 .header {
-  background-color: #188269;
+  background-color: #2E495E;
   z-index: 999;
   height: 55px;
 
@@ -83,7 +83,7 @@ a {
 
     &.router-link-active, &.nuxt-link-active {
       color: #fff;
-      font-weight: 400;
+      font-weight: 600;
     }
 
     &:nth-child(6) {

nuxt.config.js

@@ -14,7 +14,7 @@ export default {
   },
 
   loading: {
-    color: '#59cc93'
+    color: '#00C48D'
   },
 
   manifest: {

package.json

@@ -29,19 +29,19 @@
     "node": ">=8.0"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.3.0",
-    "nuxt-edge": "^2.5.0-25848007.21b1b865"
+    "@nuxtjs/axios": "^5.5.0",
+    "nuxt": "^2.7.1"
   },
   "devDependencies": {
     "@nuxtjs/pwa": "3.0.0-beta.8",
     "@nuxtjs/eslint-config": "^0.0.1",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.14.1",
+    "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.3.0",
-    "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-jest": "^22.6.4",
+    "eslint-plugin-node": "^9.0.1",
+    "eslint-plugin-promise": "^4.1.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.2",
     "stylus": "^0.54.5",

pages/_feed/_page.vue

@@ -65,6 +65,7 @@ export default {
   },
 
   fetch({ store, params: { feed, page = 1 } }) {
+    page = Number(page) || 1
     return store.dispatch('FETCH_FEED', { feed, page })
   },
 
@@ -80,7 +81,7 @@ export default {
 
   methods: {
     pageChanged(to, from = -1) {
-      if (to < 0 || to > this.maxPage) {
+      if (to <= 0 || to > this.maxPage) {
         this.$router.replace(`/${this.feed}/1`)
         return
       }

pages/item/_id.vue

@@ -44,14 +44,14 @@ export default {
 
   computed: {
     id() {
-      return this.$route.query.id
+      return this.$route.params.id
     },
     item() {
       return this.$store.state.items[this.id]
     }
   },
 
-  fetch({ store, query: { id } }) {
+  fetch({ store, params: { id } }) {
     return store.dispatch('FETCH_ITEM', { id })
   }
 }
@@ -73,6 +73,9 @@ export default {
   .host, .meta, .meta a {
     color: #595959;
   }
+  .meta a:hover {
+    color: #00C48D;
+  }
 
   .meta a {
     text-decoration: underline;

plugins/filters.js

 import Vue from 'vue'
 
 export function host(url) {
-  const host = url.replace(/^https?:\/\//, '').replace(/\/.*$/, '')
+  const host = url.replace(/^https?:\/\//, '').replace(/\/.*$/, '').replace('?id=', '/')
   const parts = host.split('.').slice(-3)
   if (parts[0] === 'www') parts.shift()
   return parts.join('.')