From a8006177c3214a65b879784a725271a4e27e1c1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christoffer=20A=CC=8Ahrling?= Date: Fri, 28 Feb 2020 14:04:34 +0100 Subject: [PATCH 01/27] Load and display similar stories --- package.json | 1 + src/api/create-api-client.js | 4 ++++ src/api/create-api-server.js | 5 +++++ src/api/index.js | 15 +++++++++++++- src/components/Item.vue | 4 ++++ src/components/Similar.vue | 39 ++++++++++++++++++++++++++++++++++++ src/store/actions.js | 16 +++++++++++++-- src/views/ItemView.vue | 4 +++- 8 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 src/components/Similar.vue diff --git a/package.json b/package.json index b8c7a74c8..be36d771e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "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", diff --git a/src/api/create-api-client.js b/src/api/create-api-client.js index 1a92e7415..e823dc9a3 100644 --- a/src/api/create-api-client.js +++ b/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); +} diff --git a/src/api/create-api-server.js b/src/api/create-api-server.js index f7bb7d1fc..18745226a 100644 --- a/src/api/create-api-server.js +++ b/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); +} diff --git a/src/api/index.js b/src/api/index.js index 46ccc77fc..a650f01a4 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,5 +1,5 @@ // this is aliased in webpack config based on server/client build -import { createAPI } from 'create-api' +import { createAPI, fetchData } from 'create-api' const logRequests = !!process.env.DEBUG_API @@ -74,3 +74,16 @@ export function watchList (type, cb) { ref.off('value', handler) } } + +export function fetchSimilarStories(story) { + return fetchData('https://textsimilarity.research.peltarion.com/query', { + method: 'POST', + body: JSON.stringify({ + query: story.title, + dataset: 'hn-sbert', + top_n: 5 + }) + }) + .then(resp => resp.json()) + .then(json => json.entries); +} diff --git a/src/components/Item.vue b/src/components/Item.vue index 156a68390..bca4d1ce8 100644 --- a/src/components/Item.vue +++ b/src/components/Item.vue @@ -22,15 +22,19 @@ | {{ item.descendants }} comments +
+ {{ item.type }} + + diff --git a/src/store/actions.js b/src/store/actions.js index 258dcfbda..08c2d6107 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -1,7 +1,8 @@ import { fetchUser, fetchItems, - fetchIdsByType + fetchIdsByType, + fetchSimilarStories } from '../api' export default { @@ -35,7 +36,18 @@ export default { return false }) if (ids.length) { - return fetchItems(ids).then(items => commit('SET_ITEMS', { items })) + return fetchItems(ids) + .then(items => { + if (items.every(item => item.type === 'story')) { + return Promise.all(items.map(i => fetchSimilarStories(i))) + .then(similar => items.map((item, idx) => { + item.similar = similar[idx]; + return item; + })) + } + return items; + }) + .then(items => commit('SET_ITEMS', { items })) } else { return Promise.resolve() } diff --git a/src/views/ItemView.vue b/src/views/ItemView.vue index bc6a09794..69e8837b2 100644 --- a/src/views/ItemView.vue +++ b/src/views/ItemView.vue @@ -13,6 +13,7 @@ | by {{ item.by }} {{ item.time | timeAgo }} ago

+

@@ -30,10 +31,11 @@ From 22060e72d7ca95e2fe0dc32dafff9688931c8bb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christoffer=20A=CC=8Ahrling?= Date: Fri, 20 Mar 2020 16:38:09 +0100 Subject: [PATCH 06/27] fetch similar posts and not only the score --- src/components/Similar.vue | 4 ++-- src/store/actions.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/Similar.vue b/src/components/Similar.vue index 37072dff5..2e82f8537 100644 --- a/src/components/Similar.vue +++ b/src/components/Similar.vue @@ -4,8 +4,8 @@ Similar:

diff --git a/src/store/actions.js b/src/store/actions.js index 1f3e055fa..fc1ef2691 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -45,6 +45,20 @@ export default { item.similar = similar[idx]; return item; })) + // Start fetching similar posts (potential performance issue...) + .then((items) => { + return fetchItems(items.map(i => i.similar).flat().map(sim => sim.id)) + .then(similarItems => { + items.forEach(item => { + item.similar = item.similar.map(sim => { + const simItem = similarItems.find(si => si.id === sim.id); + return Object.assign({ similarity_score: sim.score }, simItem); + }); + }); + return items; + }); + }); + // Stop fetching similar posts (potential performance issue...) } return items; }) From 0333fd67bcee310508ff3de8ac824070d8e198b9 Mon Sep 17 00:00:00 2001 From: philipp-eisen <8607233+philipp-eisen@users.noreply.github.com> Date: Fri, 20 Mar 2020 17:05:35 +0100 Subject: [PATCH 07/27] Add Dockerfile --- Dockerfile | 7 +++++++ package.json | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 Dockerfile diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..ebc14d509 --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/package.json b/package.json index be36d771e..8a298435a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "vue-hackernews-2.0", + "name": "nostalgia-hn", "description": "A Vue.js project", "author": "Evan You ", "private": true, @@ -55,4 +55,4 @@ "webpack-merge": "^4.2.1", "webpack-node-externals": "^1.7.2" } -} +} \ No newline at end of file From 28d0a9b8326ecfa08d9d55a7e241d3fc5b53ed25 Mon Sep 17 00:00:00 2001 From: Philipp Eisen Date: Sun, 29 Mar 2020 18:28:34 +0200 Subject: [PATCH 08/27] Change page titles to Nostalgia HN --- manifest.json | 56 +++++++++++++++++++++++------------------------ server.js | 8 +++---- src/util/title.js | 10 ++++----- 3 files changed, 37 insertions(+), 37 deletions(-) diff --git a/manifest.json b/manifest.json index 5e30b54cb..aed32646b 100644 --- a/manifest.json +++ b/manifest.json @@ -1,37 +1,37 @@ { - "name": "Vue Hackernews 2.0", - "short_name": "Vue HN", + "name": "Nostalgia HN", + "short_name": "N7a 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" -} +} \ No newline at end of file diff --git a/server.js b/server.js index f7b7330b5..de2301188 100644 --- a/server.js +++ b/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: 'Nostalgia HN', // default title url: req.url } renderer.renderToString(context, (err, html) => { diff --git a/src/util/title.js b/src/util/title.js index 664e0594c..172636527 100644 --- a/src/util/title.js +++ b/src/util/title.js @@ -1,4 +1,4 @@ -function getTitle (vm) { +function getTitle(vm) { const { title } = vm.$options if (title) { return typeof title === 'function' @@ -8,19 +8,19 @@ function getTitle (vm) { } const serverTitleMixin = { - created () { + created() { const title = getTitle(this) if (title) { - this.$ssrContext.title = `Vue HN 2.0 | ${title}` + this.$ssrContext.title = `Nostalgia HN | ${title}` } } } const clientTitleMixin = { - mounted () { + mounted() { const title = getTitle(this) if (title) { - document.title = `Vue HN 2.0 | ${title}` + document.title = `Nostalgia HN | ${title}` } } } From 111e6facee2602fb6592140a8d1dd0e0d07f3c8c Mon Sep 17 00:00:00 2001 From: Philipp Eisen Date: Sat, 25 Apr 2020 13:31:21 +0200 Subject: [PATCH 09/27] Add footer with credits --- src/App.vue | 220 +++++++++++++++++++++++++--------------- src/index.template.html | 53 ++++++---- src/views/ItemList.vue | 211 ++++++++++++++++++++------------------ src/views/ItemView.vue | 157 ++++++++++++++++------------ 4 files changed, 378 insertions(+), 263 deletions(-) diff --git a/src/App.vue b/src/App.vue index ff8643cab..3298f726c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,100 +3,158 @@
+ +
diff --git a/src/index.template.html b/src/index.template.html index 56fdcec30..98287a7f4 100644 --- a/src/index.template.html +++ b/src/index.template.html @@ -1,23 +1,38 @@ - - {{ title }} - - - - - - - - - - - - + + + {{ title }} + + + + + + + + + + + + + - - + + + \ No newline at end of file diff --git a/src/views/ItemList.vue b/src/views/ItemList.vue index 063113d08..efc888c19 100644 --- a/src/views/ItemList.vue +++ b/src/views/ItemList.vue @@ -10,8 +10,7 @@
- - +
@@ -19,11 +18,11 @@ diff --git a/src/views/ItemView.vue b/src/views/ItemView.vue index 69e8837b2..f8f013890 100644 --- a/src/views/ItemView.vue +++ b/src/views/ItemView.vue @@ -5,12 +5,11 @@

{{ item.title }}

 - - ({{ item.url | host }}) - + ({{ item.url | host }})

{{ item.score }} points - | by {{ item.by }} + | by + {{ item.by }} {{ item.time | timeAgo }} ago

@@ -29,12 +28,12 @@ From 269e7d1834dddd1464be3ace380927a02125b9ee Mon Sep 17 00:00:00 2001 From: Philipp Eisen Date: Sat, 25 Apr 2020 13:36:37 +0200 Subject: [PATCH 10/27] Add shadow to top of footer --- src/App.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3298f726c..300cb5f57 100644 --- a/src/App.vue +++ b/src/App.vue @@ -31,7 +31,7 @@ href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank" rel="noopener" - >Vue.js and + >Vue.js Date: Sat, 25 Apr 2020 14:08:37 +0200 Subject: [PATCH 11/27] Fix footer line --- src/App.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.vue b/src/App.vue index 300cb5f57..cd0605550 100644 --- a/src/App.vue +++ b/src/App.vue @@ -31,7 +31,7 @@ href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank" rel="noopener" - >Vue.js + >Vue.js and Date: Fri, 1 May 2020 15:58:17 +0200 Subject: [PATCH 12/27] Add star ranking to similar items (#2) --- .dockerignore | 3 ++ package.json | 4 +- src/api/index.js | 37 ++++++++++--- src/components/Similar.vue | 105 +++++++++++++++++++++++++------------ 4 files changed, 108 insertions(+), 41 deletions(-) create mode 100644 .dockerignore diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 000000000..849f9d151 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,3 @@ +dist/ +.vscode/ +node_modules/ \ No newline at end of file diff --git a/package.json b/package.json index 8a298435a..643d42f2a 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,10 @@ "route-cache": "0.4.3", "serve-favicon": "^2.4.5", "vue": "^2.5.22", + "vue-client-only": "^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" }, @@ -55,4 +57,4 @@ "webpack-merge": "^4.2.1", "webpack-node-externals": "^1.7.2" } -} \ No newline at end of file +} diff --git a/src/api/index.js b/src/api/index.js index c5122f0e8..45188b05b 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -16,12 +16,12 @@ if (api.onServer) { warmCache() } -function warmCache () { +function warmCache() { fetchItems((api.cachedIds.top || []).slice(0, 30)) setTimeout(warmCache, 1000 * 60 * 15) } -function fetch (child) { +function fetch(child) { logRequests && console.log(`fetching ${child}...`) const cache = api.cachedItems if (cache && cache.has(child)) { @@ -41,25 +41,25 @@ function fetch (child) { } } -export function fetchIdsByType (type) { +export function fetchIdsByType(type) { return api.cachedIds && api.cachedIds[type] ? Promise.resolve(api.cachedIds[type]) : fetch(`${type}stories`) } -export function fetchItem (id) { +export function fetchItem(id) { return fetch(`item/${id}`) } -export function fetchItems (ids) { +export function fetchItems(ids) { return Promise.all(ids.map(id => fetchItem(id))) } -export function fetchUser (id) { +export function fetchUser(id) { return fetch(`user/${id}`) } -export function watchList (type, cb) { +export function watchList(type, cb) { let first = true const ref = api.child(`${type}stories`) const handler = snapshot => { @@ -87,3 +87,26 @@ export function fetchSimilar(queries) { .then(resp => resp.json()) .then(json => json.rankings.map(i => i.entries)); } + +function uuidv4() { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); + return v.toString(16); + }); +} + +export default function sendFeedBack(query, result, rating) { + if (document.sessionId === undefined) { + document.sessionId = uuidv4() + } + return fetchData('https://textsimilarity.research.peltarion.com/feedback', { + method: 'POST', + body: JSON.stringify({ + query: query, + result: result, + rating: rating, + dataset: 'hn-sbert', + sessionId: document.sessionId + }) + }) +} diff --git a/src/components/Similar.vue b/src/components/Similar.vue index 2e82f8537..92d8377bf 100644 --- a/src/components/Similar.vue +++ b/src/components/Similar.vue @@ -1,66 +1,105 @@ From ae143ee5aac11f8de3b476cbe9e581fc6ab37197 Mon Sep 17 00:00:00 2001 From: Philipp Eisen Date: Sat, 2 May 2020 15:26:52 +0200 Subject: [PATCH 13/27] Some redesign --- src/App.vue | 8 ++- src/api/index.js | 2 +- src/components/Comment.vue | 109 +++++++++++++++++++++-------------- src/components/Item.vue | 83 +++++++++++++------------- src/components/Similar.vue | 22 +++++-- src/components/Spinner.vue | 115 ++++++++++++++++++++++++------------- src/views/ItemList.vue | 7 ++- 7 files changed, 210 insertions(+), 136 deletions(-) diff --git a/src/App.vue b/src/App.vue index cd0605550..953674540 100644 --- a/src/App.vue +++ b/src/App.vue @@ -47,8 +47,12 @@ diff --git a/src/components/Item.vue b/src/components/Item.vue index bca4d1ce8..8b9966aae 100644 --- a/src/components/Item.vue +++ b/src/components/Item.vue @@ -1,71 +1,70 @@ diff --git a/src/components/Similar.vue b/src/components/Similar.vue index 92d8377bf..dc17ef597 100644 --- a/src/components/Similar.vue +++ b/src/components/Similar.vue @@ -1,7 +1,7 @@