feat(amp): Support google AMP

components/Comment.vue

@@ -1,7 +1,7 @@
 <template>
   <li v-if="comment && comment.user" class="comment">
     <div class="by">
-      <router-link :to="'/user/' + comment.user">
+      <router-link :to="userLink">
         {{ comment.user }}
       </router-link>
       {{ comment.time | timeAgo }} ago
@@ -31,6 +31,11 @@ export default {
       open: true
     }
   },
+  computed: {
+    userLink() {
+      return (this.$isAMP ? '/amp/user/' : '/user/') + this.comment.user
+    }
+  },
   methods: {
     pluralize: n => n + (n === 1 ? ' reply' : ' replies')
   }

components/Item.vue

@@ -7,21 +7,21 @@
         <span class="host"> ({{ item.url | host }})</span>
       </template>
       <template v-else>
-        <router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
+        <router-link :to="itemLink">{{ item.title }}</router-link>
       </template>
     </span>
     <br>
     <span class="meta">
       <span v-if="item.type !== 'job'" class="by">
         by
-        <router-link :to="'/user/' + item.user">{{ item.user }}</router-link>
+        <router-link :to="userLink">{{ item.user }}</router-link>
       </span>
       <span class="time">
         {{ item.time | timeAgo }} ago
       </span>
       <span v-if="item.type !== 'job'" class="comments-link">
         |
-        <router-link :to="'/item/' + item.id">{{ item.comments_count }} comments</router-link>
+        <router-link :to="itemLink">{{ item.comments_count }} comments</router-link>
       </span>
     </span>
   </li>
@@ -38,6 +38,14 @@ export default {
       required: true
     }
   },
+  computed: {
+    itemLink() {
+      return (this.$isAMP ? '/amp/item/' : '/item/') + this.item.id
+    },
+    userLink() {
+      return (this.$isAMP ? '/amp/user/' : '/user/') + this.item.user
+    }
+  },
   methods: {
     isAbsolute(url) {
       return /^https?:\/\//.test(url)

components/ItemListNav.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="news-list-nav">
-    <router-link v-if="page > 1" :to="`/${feed}/${page - 1}`">
+    <router-link v-if="page > 1" :to="prevLink">
       &lt; prev
     </router-link>
     <a v-else class="disabled">&lt; prev</a>
     <span>{{ page }}/{{ maxPage }}</span>
-    <router-link v-if="hasMore" :to="`/${feed}/${page + 1}`">
+    <router-link v-if="hasMore" :to="nextLink">
       more &gt;
     </router-link>
     <a v-else class="disabled">more &gt;</a>
@@ -31,6 +31,12 @@ export default {
   computed: {
     hasMore() {
       return this.page < this.maxPage
+    },
+    nextLink() {
+      return (this.$isAMP ? '/amp' : '') + `/${this.feed}/${this.page + 1}`
+    },
+    prevLink() {
+      return (this.$isAMP ? '/amp' : '') + `/${this.feed}/${this.page - 1}`
     }
   }
 }

layouts/default.amp.vue

@@ -0,0 +1,160 @@
+<template>
+  <div id="app">
+    <header class="header">
+      <nav class="inner" role="navigation">
+        <router-link to="/amp" exact>
+          <amp-img
+            class="logo"
+            :src="AMPLogo"
+            alt="logo"
+            width="24px"
+            height="18px"
+          />
+        </router-link>
+        <router-link v-for="(list, key) in feeds" :key="key" :to="`/amp/${key}`">
+          {{ list.title }}
+        </router-link>
+        <a class="github" href="https://github.com/nuxt/hackernews" target="_blank" rel="noopener banner">
+          Built with Nuxt.js
+        </a>
+      </nav>
+    </header>
+    <nuxt nuxt-child-key="none" role="main" />
+  </div>
+</template>
+
+<script>
+import { feeds } from '~/common/api'
+import AMPLogo from '~/assets/logo.svg'
+
+export default {
+  head() {
+    const host = process.server
+      ? this.$ssrContext.req.headers.host
+      : window.location.host
+
+    return {
+      link: [
+        // We use $route.path since we don't use query parameters
+        { hid: 'canonical', rel: 'canonical', href: `https://${host}${this.$route.path}` }
+      ]
+    }
+  },
+  data() {
+    return {
+      AMPLogo
+    }
+  },
+  computed: {
+    feeds: () => feeds
+  }
+}
+</script>
+
+<style lang="stylus">
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  background-color: lighten(#eceef1, 30%);
+  margin: 0;
+  padding: 0;
+  color: #2E495E;
+  overflow-y: scroll;
+}
+
+a {
+  color: #2E495E;
+  text-decoration: none;
+}
+
+.header {
+  background-color: #2E495E;
+  z-index: 999;
+  height: 55px;
+
+  .inner {
+    max-width: 800px;
+    box-sizing: border-box;
+    margin: 0px auto;
+    padding: 15px 5px;
+  }
+
+  a {
+    color: #fff;
+    line-height: 24px;
+    transition: color 0.15s ease;
+    display: inline-block;
+    vertical-align: middle;
+    font-weight: 300;
+    letter-spacing: 0.075em;
+    margin-right: 1.8em;
+
+    &:hover {
+      color: #fff;
+    }
+
+    &.router-link-active, &.nuxt-link-active {
+      color: #fff;
+      font-weight: 600;
+    }
+
+    &:nth-child(6) {
+      margin-right: 0;
+    }
+  }
+
+  .github {
+    color: #fff;
+    font-size: 0.9em;
+    margin: 0;
+    float: right;
+  }
+}
+
+.logo {
+  width: 24px;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.view {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.appear-active {
+  transition: opacity 0.4s ease;
+}
+
+.page-enter-active, .page-leave-active {
+  transition: all 0.2s ease;
+}
+
+.appear, .page-enter, .page-leave-active {
+  opacity: 0;
+}
+
+@media (max-width: 860px) {
+  .header .inner {
+    padding: 15px 30px;
+  }
+}
+
+@media (max-width: 600px) {
+  .header {
+    .inner {
+      padding: 15px;
+    }
+
+    a {
+      margin-right: 1em;
+    }
+
+    .github {
+      display: none;
+    }
+  }
+}
+</style>

nuxt.config.js

@@ -25,6 +25,16 @@ export default {
     start_url: '/news'
   },
 
+  router: {
+    middleware: [
+      'amp'
+    ]
+  },
+
+  modules: [
+    '@nuxtjs/amp'
+  ],
+
   devModules: [
     '@nuxtjs/pwa',
     '@nuxtjs/axios'

package.json

@@ -29,12 +29,13 @@
     "node": ">=8.0"
   },
   "dependencies": {
+    "@nuxtjs/amp": "^0.1.0",
     "@nuxtjs/axios": "^5.5.3",
     "nuxt": "^2.8.0"
   },
   "devDependencies": {
-    "@nuxtjs/pwa": "3.0.0-beta.8",
     "@nuxtjs/eslint-config": "^0.0.1",
+    "@nuxtjs/pwa": "3.0.0-beta.8",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",

pages/item/_id.vue

@@ -10,7 +10,7 @@
       </template>
       <p class="meta">
         {{ item.points }} points | by
-        <router-link :to="'/user/' + item.user">
+        <router-link :to="userLink">
           {{ item.user }}
         </router-link>
         {{ item.time | timeAgo }} ago
@@ -49,6 +49,12 @@ export default {
     },
     item() {
       return this.$store.state.items[this.id]
+    },
+    itemLink() {
+      return (this.$isAMP ? '/amp/item/' : '/item/') + this.item.id
+    },
+    userLink() {
+      return (this.$isAMP ? '/amp/user/' : '/user/') + this.item.user
     }
   },