Feb 28, 2020 · Mar 2, 2020 · Mar 2, 2020 · Mar 20, 2020 · Mar 20, 2020 · Mar 20, 2020
diff --git a/.dockerignore b/.dockerignore
 dist/
 .vscode/
 node_modules/
diff --git a/Dockerfile b/Dockerfile
 FROM node:13.10.1-buster

 COPY . /app/src
 WORKDIR /app/src
 RUN npm i && \
    npm run build
 CMD ["npm", "run", "start"]
diff --git a/manifest.json b/manifest.json
 {
  "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"
 }
 }
diff --git a/package.json b/package.json
 {
  "name": "vue-hackernews-2.0",
  "name": "nostalgia-hn",
  "description": "A Vue.js project",
  "author": "Evan You <yyx990803@gmail.com>",
  "private": true,
    "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"
  },
diff --git a/public/logo-120.png b/public/logo-120.png
diff --git a/public/logo-144.png b/public/logo-144.png
diff --git a/public/logo-152.png b/public/logo-152.png
diff --git a/public/logo-192.png b/public/logo-192.png
diff --git a/public/logo-256.png b/public/logo-256.png
diff --git a/public/logo-384.png b/public/logo-384.png
diff --git a/public/logo-48.png b/public/logo-48.png
diff --git a/public/logo-512.png b/public/logo-512.png
diff --git a/server.js b/server.js

 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
 // 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")
  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
  }

  const context = {
    title: 'VueHN2.0', // default title
    title: 'HNTime-Machine', // default title
    url: req.url
  }
  renderer.renderToString(context, (err, html) => {
diff --git a/src/App.vue b/src/App.vue
  <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">
 </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>
diff --git a/src/api/create-api-client.js b/src/api/create-api-client.js
  Firebase.initializeApp(config)
  return Firebase.database().ref(version)
 }

 export function fetchData(...params) {
  return window.fetch(...params);
 }
diff --git a/src/api/create-api-server.js b/src/api/create-api-server.js
 import Firebase from 'firebase'
 import LRU from 'lru-cache'
 import fetch from 'node-fetch';

 export function createAPI ({ config, version }) {
  let api
  }
  return api
 }

 export function fetchData(...params) {
  return fetch(...params);
 }
Original file line number	Diff line number	Diff line change
		@@ -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"]
Original file line number	Diff line number	Diff line change
		@@ -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"
		}
		}
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		{
		"name": "vue-hackernews-2.0",
		"name": "nostalgia-hn",
		"description": "A Vue.js project",
		"author": "Evan You <yyx990803@gmail.com>",
		"private": true,
Expand All		@@ -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"
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand DownExpand Up		@@ -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")
Expand All		@@ -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
Expand All		@@ -98,7 +98,7 @@ function render (req, res) {
		}

		const context = {
		title: 'VueHN2.0', // default title
		title: 'HNTime-Machine', // default title
		url: req.url
		}
		renderer.renderToString(context, (err, html) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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">
Expand All		@@ -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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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);
		}
Original file line number	Diff line number	Diff line change
		@@ -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
Expand DownExpand Up		@@ -29,3 +30,7 @@ export function createAPI ({ config, version }) {
		}
		return api
		}

		export function fetchData(...params) {
		return fetch(...params);
		}