├── .editorconfig
├── .gitignore
├── .travis.yml
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Homepage.vue
    │   └── Navbar.vue
    ├── main.js
    ├── router.js
    ├── store
    │   ├── actions.js
    │   ├── index.js
    │   └── mutations.js
    └── views
    │   ├── About.vue
    │   ├── Home.vue
    │   ├── Item.vue
    │   ├── New.vue
    │   └── Single.vue
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - "10"
 5 | 
 6 |   before_script:
 7 | - npm install
 8 | 
 9 | script:
10 | - npm run build
11 | 
12 | # deploy:
13 | #   provider: s3
14 | #   access_key_id:
15 | #   secret_access_key:
16 | #     secure:
17 | #   bucket: my-bucket-name
18 | #   local-dir: dist
19 | #   skip_cleanup: true
20 | #   region: eu-west-1
21 | #   acl: public_read
22 | #   on:
23 | #     repo: elliotforbes/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hn-clone
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | yarn run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | yarn run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hn-clone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.18.0",
12 |     "vue": "^2.5.22",
13 |     "vue-router": "^3.0.1",
14 |     "vuex": "^3.1.0"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^3.4.0",
18 |     "@vue/cli-plugin-eslint": "^3.4.0",
19 |     "@vue/cli-service": "^3.4.0",
20 |     "babel-eslint": "^10.0.1",
21 |     "eslint": "^5.8.0",
22 |     "eslint-plugin-vue": "^5.0.0",
23 |     "vue-template-compiler": "^2.5.21"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "rules": {},
35 |     "parserOptions": {
36 |       "parser": "babel-eslint"
37 |     }
38 |   },
39 |   "postcss": {
40 |     "plugins": {
41 |       "autoprefixer": {}
42 |     }
43 |   },
44 |   "browserslist": [
45 |     "> 1%",
46 |     "last 2 versions",
47 |     "not ie <= 8"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elliotforbes/hackernews-vuejs/888447828a58251ecd514cdc014245099c69103f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
 9 |     <title>hn-clone</title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but hn-clone doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <navbar></navbar>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Navbar from '@/components/Navbar'
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     Navbar
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | body {
20 |     background-color: #f0f2fa;
21 |   font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
22 |   color: #555f77;
23 |   -webkit-font-smoothing: antialiased;
24 | }
25 | 
26 | .container {
27 |     padding-right: 15px;
28 |     padding-left: 15px;
29 |     margin-right: auto;
30 |     margin-left: auto;
31 |   }
32 |   @media (min-width: 768px) {
33 |     .container {
34 |       width: 750px;
35 |     }
36 |   }
37 |   @media (min-width: 992px) {
38 |     .container {
39 |       width: 970px;
40 |     }
41 |   }
42 |   @media (min-width: 1200px) {
43 |     .container {
44 |       width: 1170px;
45 |     }
46 |   }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elliotforbes/hackernews-vuejs/888447828a58251ecd514cdc014245099c69103f/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Homepage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h2>Homepage</h2>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Homepage'
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="pure-menu pure-menu-horizontal">
 3 |         <div class="container">
 4 |         <router-link :to="{ path: '/' }" class="pure-menu-heading pure-menu-link">Home</router-link>
 5 |         <ul class="pure-menu-list">
 6 |             <li class="pure-menu-item"><router-link :to="{ path: '/new' }" class="pure-menu-link">New</router-link></li>
 7 |         </ul>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: 'Navbar'
15 | }
16 | </script>
17 | 
18 | <style scoped>
19 | .pure-menu {
20 |     background-color: #E17842;
21 | }
22 | .pure-menu a {
23 |     color: white;
24 | }
25 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import store from './store/index.js'
 4 | import router from './router'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   router,
10 |   store: store,
11 |   render: h => h(App)
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | import Single from './views/Single.vue'
 5 | import New from './views/New.vue'
 6 | 
 7 | Vue.use(Router)
 8 | 
 9 | export default new Router({
10 |   mode: 'history',
11 |   base: process.env.BASE_URL,
12 |   routes: [
13 |     {
14 |       path: '/',
15 |       name: 'home',
16 |       component: Home
17 |     },
18 |     {
19 |       path: '/story/:id',
20 |       name: 'Single',
21 |       component: Single,
22 |     },
23 |     {
24 |       path: '/new',
25 |       name: 'New',
26 |       component: New,
27 |     },
28 |   ]
29 | })
30 | 


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default {
 4 |   fetch_top_stories: ({ commit }) => {
 5 |     axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
 6 |       .then(resp => {
 7 |         let results = resp.data.slice(0, 25)
 8 |         results.forEach(element => {
 9 |           axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
10 |             .then((result) => {
11 |               commit('APPEND_TOP_STORY', result)
12 |             })
13 |             .catch((err) => {
14 |               /* eslint-disable */ 
15 |               console.log(err)
16 |             })
17 |         })
18 |       })
19 |       .catch(err => {
20 |         /* eslint-disable */ 
21 |         console.log(err)
22 |       })
23 |   },
24 |   fetch_new_stories: ({ commit }) => {
25 |     axios.get('https://hacker-news.firebaseio.com/v0/newstories.json')
26 |       .then(resp => {
27 |         let results = resp.data.slice(0, 25)
28 |         results.forEach(element => {
29 |           axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
30 |             .then((result) => {
31 |               commit('APPEND_NEW_STORY', result)
32 |             })
33 |             .catch((err) => {
34 |               console.log(err)
35 |             })
36 |         })
37 |       })
38 |       .catch(err => {
39 |         /* eslint-disable */ 
40 |         console.log(err)
41 |       })
42 |   }
43 | }


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex'
 2 | import Vue from 'vue'
 3 | import actions from './actions.js'
 4 | import mutations from './mutations.js'
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | export default new Vuex.Store({
 9 |   state: {
10 |     topStories: [],
11 |     newStories: []
12 |   },
13 |   mutations,
14 |   actions
15 | })


--------------------------------------------------------------------------------
/src/store/mutations.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     APPEND_TOP_STORY: (state, article) => {
3 |       state.topStories.push(article)
4 |     },
5 |     APPEND_NEW_STORY: (state, article) => {
6 |       state.newStories.push(article)
7 |     }
8 |   }


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <item v-for="story in stories" :key="story.data.id" :story="story"></item>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Item from '@/views/Item.vue'
 9 | 
10 | export default {
11 |   name: 'home',
12 |   components: {
13 |     'item': Item
14 |   },
15 |   data: function () {
16 |     return {
17 |       err: '',
18 |       stories: this.$store.state.topStories
19 |     }
20 |   },
21 |   created: function () {
22 |     if (this.$store.state.topStories.length === 0) this.$store.dispatch('fetch_top_stories')
23 |   }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/views/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="story">
 3 |     <span class="score">{{ story.data.score }}</span>
 4 |     <router-link :to="{ path: '/story/' + story.data.id }">{{ story.data.title }}<span>{{ story.data.url | host }}</span></router-link><br/>
 5 |     <span class="meta">
 6 |     by {{ story.data.by }} | {{ story.data.time }} Ago | {{ story.data.descendants }} comments
 7 |     </span>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'Item',
14 |   props: [
15 |     'story'
16 |   ]
17 | }
18 | </script>
19 | 
20 | <style scoped>
21 | .story {
22 |   background-color: #fff;
23 |   padding: 20px 30px 20px 80px;
24 |   border-bottom: 1px solid #eee;
25 |   position: relative;
26 |   line-height: 20px;
27 | }
28 | .score{
29 |   color: #f60;
30 |   font-size: 1.1em;
31 |   font-weight: 700;
32 |   position: absolute;
33 |   top: 50%;
34 |   left: 0;
35 |   width: 80px;
36 |   text-align: center;
37 |   margin-top: -10px;
38 | }
39 | .story a {
40 |   color: #34495e;
41 |   font-weight: 600;
42 |   text-decoration: none;
43 | }
44 | .story a span {
45 |   font-size: .85em;
46 |   margin-left: 10px;
47 |   color: #828282;
48 | }
49 | .story .meta {
50 |   font-size: .85em;
51 |   color: #828282;
52 | }
53 | </style>


--------------------------------------------------------------------------------
/src/views/New.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <item v-for="story in stories" :key="story.data.id" :story="story"></item>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Item from '@/views/Item.vue'
 9 | 
10 | export default {
11 |   name: 'New',
12 |   components: {
13 |     'item': Item
14 |   },
15 |   data: function () {
16 |     return {
17 |         err: '',
18 |         stories: this.$store.state.newStories
19 |     }
20 |   },
21 |   created: function () {
22 |     if (this.$store.state.newStories.length === 0) this.$store.dispatch('fetch_new_stories')
23 |   }
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/views/Single.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container">
  3 |         <h2>{{ story.title }}</h2>
  4 |         <p>Score: {{ story.score }}</p>
  5 |         <p>{{ story.url }}</p>
  6 |         <div v-for="comment in comments" :key="comment">
  7 |           <div class="comment-wrap">
  8 |                 <div class="comment-block">
  9 |                     <p class="comment-text">{{ comment.text }}</p>
 10 |                     <div class="bottom-comment">
 11 |                         <div class="comment-author">{{ comment.by }}</div>
 12 |                         <div class="comment-date">{{ comment.time }}</div>
 13 |                     </div>
 14 |                 </div>
 15 |             </div>
 16 | 
 17 |         </div>
 18 |     </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import axios from 'axios'
 23 | export default {
 24 |   name: 'Single',
 25 |   data: function () {
 26 |     return {
 27 |       story: {},
 28 |       comments: []
 29 |     }
 30 |   },
 31 |   created: function () {
 32 |     axios.get('https://hacker-news.firebaseio.com/v0/item/' + this.$route.params.id + '.json')
 33 |       .then((res) => {
 34 |         this.story = res.data
 35 |         this.story.comments = []
 36 |         this.story.kids.forEach(id => {
 37 |           axios.get('https://hacker-news.firebaseio.com/v0/item/' + id + '.json')
 38 |             .then((res) => {
 39 |               this.$nextTick(() => {
 40 |                 this.comments.push(res.data)
 41 |               })
 42 |             })
 43 |             .catch((err) => {
 44 |               /* eslint-disable */
 45 |               console.log(err)
 46 |             })
 47 |         })
 48 |       })
 49 |       .catch((err) => {
 50 |         /* eslint-disable */
 51 |         console.log(err)
 52 |       })
 53 |   }
 54 | }
 55 | </script>
 56 | 
 57 | <style scoped>
 58 | 
 59 | .comment-wrap {
 60 |   margin-bottom: 1.25rem;
 61 |   display: table;
 62 |   width: 100%;
 63 |   min-height: 5.3125rem;
 64 | }
 65 | 
 66 | .photo {
 67 |   padding-top: 0.625rem;
 68 |   display: table-cell;
 69 |   width: 3.5rem;
 70 | }
 71 | .photo .avatar {
 72 |   height: 2.25rem;
 73 |   width: 2.25rem;
 74 |   border-radius: 50%;
 75 |   background-size: contain;
 76 | }
 77 | 
 78 | .comment-block {
 79 |   padding: 1rem;
 80 |   background-color: #fff;
 81 |   display: table-cell;
 82 |   vertical-align: top;
 83 |   border-radius: 0.1875rem;
 84 |   -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 85 |           box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 86 | }
 87 | .comment-block textarea {
 88 |   width: 100%;
 89 |   resize: none;
 90 | }
 91 | 
 92 | .comment-text {
 93 |   margin-bottom: 1.25rem;
 94 | }
 95 | 
 96 | .bottom-comment {
 97 |   color: #acb4c2;
 98 |   font-size: 0.875rem;
 99 | }
100 | 
101 | .comment-date {
102 |   float: left;
103 | }
104 | 
105 | .comment-actions {
106 |   float: right;
107 | }
108 | .comment-actions li {
109 |   display: inline;
110 |   margin: -2px;
111 |   cursor: pointer;
112 | }
113 | .comment-actions li.complain {
114 |   padding-right: 0.75rem;
115 |   border-right: 1px solid #e1e5eb;
116 | }
117 | .comment-actions li.reply {
118 |   padding-left: 0.75rem;
119 |   padding-right: 0.125rem;
120 | }
121 | .comment-actions li:hover {
122 |   color: #0095ff;
123 | }
124 | </style>


--------------------------------------------------------------------------------