fix file names

components/comment.vue

+<template>
+  <li v-if="comment" class="comment">
+    <div class="by">
+      <router-link :to="'/user/' + comment.user">{{ comment.user }}</router-link>
+      {{ comment.time | timeAgo }} ago
+    </div>
+    <div class="text" v-html="comment.content" />
+    <div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
+      <a @click="open = !open">{{ open ? '[-]' : '[+] ' + pluralize(comment.comments.length) + ' collapsed' }}
+      </a>
+    </div>
+    <ul v-show="open" class="comment-children">
+      <comment v-for="childComment in comment.comments" :key="childComment.id" :comment="childComment" />
+    </ul>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "Comment",
+  props: {
+    comment: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      open: true
+    }
+  },
+  methods: {
+    pluralize: n => n + (n === 1 ? " reply" : " replies")
+  }
+}
+</script>
+
+<style lang="stylus">
+.comment-children {
+  .comment-children {
+    margin-left: 1.5em;
+  }
+}
+
+.comment {
+  border-top: 1px solid #eee;
+  position: relative;
+
+  .by, .text, .toggle {
+    font-size: 0.9em;
+    margin: 1em 0;
+  }
+
+  .by {
+    color: #828282;
+
+    a {
+      color: #828282;
+      text-decoration: underline;
+    }
+  }
+
+  .text {
+    overflow-wrap: break-word;
+
+    a:hover {
+      color: #ff6600;
+    }
+
+    pre {
+      white-space: pre-wrap;
+    }
+  }
+
+  .toggle {
+    background-color: #fffbf2;
+    padding: 0.3em 0.5em;
+    border-radius: 4px;
+
+    a {
+      color: #828282;
+      cursor: pointer;
+    }
+
+    &.open {
+      padding: 0;
+      background-color: transparent;
+      margin-bottom: -0.5em;
+    }
+  }
+}
+</style>

components/item.vue

+<template>
+  <li class="news-item">
+    <span class="score">{{ item.points }}</span>
+    <span class="title">
+      <template v-if="item.url">
+        <a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
+        <span class="host"> ({{ item.url | host }})</span>
+      </template>
+      <template v-else>
+        <router-link :to="'/item/' + item.id">{{ 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>
+      </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.descendants }} comments</router-link>
+      </span>
+    </span>
+    <span v-if="item.type !== 'story'" class="label" >{{ item.type }}</span>
+  </li>
+</template>
+
+<script>
+import { timeAgo } from "~/plugins/filters"
+
+export default {
+  name: "NewsItem",
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  // http://ssr.vuejs.org/en/caching.html#component-level-caching
+  serverCacheKey: ({ item: { id, __lastUpdated, time } }) => {
+    return `${id}::${__lastUpdated}::${timeAgo(time)}`
+  }
+}
+</script>
+
+<style lang="stylus">
+.news-item {
+  background-color: #fff;
+  padding: 20px 30px 20px 80px;
+  border-bottom: 1px solid #eee;
+  position: relative;
+  line-height: 20px;
+
+  .score {
+    color: #C75000;
+    font-size: 1.1em;
+    font-weight: 700;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 80px;
+    text-align: center;
+    margin-top: -10px;
+  }
+
+  .meta, .host {
+    font-size: 0.85em;
+    color: #595959;
+
+    a {
+      color: #595959;
+      text-decoration: underline;
+
+      &:hover {
+        color: #C75000;
+      }
+    }
+  }
+}
+</style>

components/spinner.vue

+<template>
+  <transition>
+    <svg v-show="show" :class="{ show: show }" class="spinner" width="44px" height="44px" viewBox="0 0 44 44">
+      <circle class="path" fill="none" stroke-width="4" stroke-linecap="round" cx="22" cy="22" r="20"/>
+    </svg>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "Spinner",
+  props: {
+    show: {
+      type: Boolean,
+      required: true
+    }
+  },
+  serverCacheKey: props => props.show
+}
+</script>
+
+<style lang="stylus">
+$offset = 126;
+$duration = 1.4s;
+
+.spinner {
+  transition: opacity 0.15s ease;
+  animation: rotator $duration linear infinite;
+  animation-play-state: paused;
+
+  &.show {
+    animation-play-state: running;
+  }
+
+  &.v-enter, &.v-leave-active {
+    opacity: 0;
+  }
+
+  &.v-enter-active, &.v-leave {
+    opacity: 1;
+  }
+}
+
+@keyframes rotator {
+  0% {
+    transform: scale(0.5) rotate(0deg);
+  }
+
+  100% {
+    transform: scale(0.5) rotate(270deg);
+  }
+}
+
+.spinner .path {
+  stroke: #ff6600;
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash $duration ease-in-out infinite;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: $offset;
+  }
+
+  50% {
+    stroke-dashoffset: ($offset / 2);
+    transform: rotate(135deg);
+  }
+
+  100% {
+    stroke-dashoffset: $offset;
+    transform: rotate(450deg);
+  }
+}
+</style>