Change look

.dockerignore

@@ -0,0 +1,3 @@
+dist/
+.vscode/
+node_modules/

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:13.10.1-buster
+
+COPY . /app/src
+WORKDIR /app/src
+RUN npm i && \
+    npm run build 
+CMD ["npm", "run", "start"]

manifest.json

@@ -1,37 +1,37 @@
 {
-  "name": "Vue Hackernews 2.0",
-  "short_name": "Vue HN",
+  "name": "HN Time-Machine",
+  "short_name": "HN ⏳",
   "icons": [{
-      "src": "/public/logo-120.png",
-      "sizes": "120x120",
-      "type": "image/png"
-    }, {
-      "src": "/public/logo-144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    }, {
-      "src": "/public/logo-152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    }, {
-      "src": "/public/logo-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    }, {
-      "src": "/public/logo-256.png",
-      "sizes": "256x256",
-      "type": "image/png"
-    }, {
-      "src": "/public/logo-384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    }, {
+    "src": "/public/logo-120.png",
+    "sizes": "120x120",
+    "type": "image/png"
+  }, {
+    "src": "/public/logo-144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "/public/logo-152.png",
+    "sizes": "152x152",
+    "type": "image/png"
+  }, {
+    "src": "/public/logo-192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }, {
+    "src": "/public/logo-256.png",
+    "sizes": "256x256",
+    "type": "image/png"
+  }, {
+    "src": "/public/logo-384.png",
+    "sizes": "384x384",
+    "type": "image/png"
+  }, {
     "src": "/public/logo-512.png",
     "sizes": "512x512",
     "type": "image/png"
-    }],
+  }],
   "start_url": "/",
   "background_color": "#f2f3f5",
   "display": "standalone",
   "theme_color": "#f60"
-}
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue-hackernews-2.0",
+  "name": "nostalgia-hn",
   "description": "A Vue.js project",
   "author": "Evan You <[email protected]>",
   "private": true,
@@ -23,11 +23,15 @@
     "extract-text-webpack-plugin": "^3.0.2",
     "firebase": "4.6.2",
     "lru-cache": "^4.1.1",
+    "node-fetch": "^2.6.0",
     "route-cache": "0.4.3",
     "serve-favicon": "^2.4.5",
     "vue": "^2.5.22",
+    "vue-client-only": "^2.0.0",
+    "vue-collapsible": "^2.0.0",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.22",
+    "vue-star-rating": "^1.6.1",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"
   },

server.js

@@ -16,7 +16,7 @@ const serverInfo =
 
 const app = express()
 
-function createRenderer (bundle, options) {
+function createRenderer(bundle, options) {
   // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
   return createBundleRenderer(bundle, Object.assign(options, {
     // for component caching
@@ -78,7 +78,7 @@ app.use('/service-worker.js', serve('./dist/service-worker.js'))
 // https://www.nginx.com/blog/benefits-of-microcaching-nginx/
 app.use(microcache.cacheSeconds(1, req => useMicroCache && req.originalUrl))
 
-function render (req, res) {
+function render(req, res) {
   const s = Date.now()
 
   res.setHeader("Content-Type", "text/html")
@@ -87,7 +87,7 @@ function render (req, res) {
   const handleError = err => {
     if (err.url) {
       res.redirect(err.url)
-    } else if(err.code === 404) {
+    } else if (err.code === 404) {
       res.status(404).send('404 | Page Not Found')
     } else {
       // Render Error Page or Redirect
@@ -98,7 +98,7 @@ function render (req, res) {
   }
 
   const context = {
-    title: 'Vue HN 2.0', // default title
+    title: 'HN Time-Machine', // default title
     url: req.url
   }
   renderer.renderToString(context, (err, html) => {

src/App.vue

@@ -2,17 +2,14 @@
   <div id="app">
     <header class="header">
       <nav class="inner">
-        <router-link to="/" exact>
-          <img class="logo" src="~public/logo-48.png" alt="logo">
-        </router-link>
+        <a href="https://peltarion.com">
+          <img class="logo" src="~public/logo-48.png" alt="logo" />
+        </a>
         <router-link to="/top">Top</router-link>
         <router-link to="/new">New</router-link>
         <router-link to="/show">Show</router-link>
         <router-link to="/ask">Ask</router-link>
         <router-link to="/job">Jobs</router-link>
-        <a class="github" href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank" rel="noopener">
-          Built with Vue.js
-        </a>
       </nav>
     </header>
     <transition name="fade" mode="out-in">
@@ -22,81 +19,114 @@
 </template>
 
 <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-top 55px
-  color #34495e
-  overflow-y scroll
-
-a
-  color #34495e
-  text-decoration none
-
-.header
-  background-color #ff6600
-  position fixed
-  z-index 999
-  height 55px
-  top 0
-  left 0
-  right 0
-  .inner
-    max-width 800px
-    box-sizing border-box
-    margin 0px auto
-    padding 15px 5px
-  a
-    color rgba(255, 255, 255, .8)
-    line-height 24px
-    transition color .15s ease
-    display inline-block
-    vertical-align middle
-    font-weight 300
-    letter-spacing .075em
-    margin-right 1.8em
-    &:hover
-      color #fff
-    &.router-link-active
-      color #fff
-      font-weight 400
-    &:nth-child(6)
-      margin-right 0
-  .github
-    color #fff
-    font-size .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
-
-.fade-enter-active, .fade-leave-active
-  transition all .2s ease
-
-.fade-enter, .fade-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
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 22px;
+  font-size: 15px;
+  background-color: #fff;
+  margin: 0;
+  padding-top: 55px;
+  color: #34495e;
+  overflow-y: scroll;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #fff;
+  height: 40x;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.external-link {
+  text-decoration: underline;
+}
+
+a {
+  color: #34495e;
+  text-decoration: none;
+}
+
+.header {
+  background-color: #F7955B;
+  position: fixed;
+  z-index: 999;
+  height: 55px;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  .inner {
+    max-width: 800px;
+    box-sizing: border-box;
+    margin: 0px auto;
+    padding: 15px 5px;
+  }
+
+  a {
+    color: #111F27;
+    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 {
+      color: #fff;
+    }
+
+    &:nth-child(6) {
+      margin-right: 0;
+    }
+  }
+}
+
+.logo {
+  width: 24px;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.view {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter, .fade-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;
+    }
+  }
+}
 </style>

src/api/create-api-client.js

@@ -5,3 +5,7 @@ export function createAPI ({ config, version }) {
   Firebase.initializeApp(config)
   return Firebase.database().ref(version)
 }
+
+export function fetchData(...params) {
+  return window.fetch(...params);
+}

src/api/create-api-server.js

@@ -1,5 +1,6 @@
 import Firebase from 'firebase'
 import LRU from 'lru-cache'
+import fetch from 'node-fetch';
 
 export function createAPI ({ config, version }) {
   let api
@@ -29,3 +30,7 @@ export function createAPI ({ config, version }) {
   }
   return api
 }
+
+export function fetchData(...params) {
+  return fetch(...params);
+}