├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── components
    ├── fans.vue
    ├── footer.vue
    ├── header.vue
    ├── hero.vue
    ├── ranking.vue
    ├── statsbar.vue
    └── tabs.vue
├── layouts
    └── default.vue
├── now.json
├── nuxt.config.js
├── nuxt_schems.jpeg
├── package.json
├── pages
    ├── _slug.vue
    ├── choose.vue
    └── index.vue
├── plugins
    ├── auth.js
    └── sockets.js
├── server-middleware
    ├── github-callback.js
    └── logout.js
├── static
    ├── aquaman.jpg
    ├── batman.jpg
    ├── black-widow.jpg
    ├── captain-america.jpg
    ├── cyborg.jpg
    ├── dc.svg
    ├── doctor-strange.jpg
    ├── favicon.ico
    ├── flash.jpg
    ├── hulk.jpg
    ├── icon.png
    ├── iron-man.jpg
    ├── marvel.svg
    ├── superman.jpg
    ├── thor.jpg
    └── wonder-woman.jpg
├── store
    ├── auth.js
    ├── heroes.js
    └── index.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential',
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | yarn-error.log
 7 | 
 8 | # PWA
 9 | sw.*
10 | 
11 | # Nuxt build
12 | .nuxt
13 | 
14 | # Nuxt generate
15 | dist
16 | 
17 | # Coverage
18 | coverage
19 | .nyc_output
20 | 
21 | # Editors
22 | .vscode
23 | .idea
24 | 
25 | # Misc
26 | .DS_Store
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![marvel-vs-dc](https://user-images.githubusercontent.com/904724/38923201-5649f35e-42fa-11e8-890a-30eec5a8e4ba.png)
 2 | 
 3 | # nuxt-heroes
 4 | 
 5 | > Marvel vs Avengers Heroes demo (for JS Heroes).
 6 | 
 7 | ## Setup
 8 | 
 9 | > You need to run [nuxt-heroes-api](https://github.com/Atinux/nuxt-heroes-api) before running the Nuxt app
10 | 
11 | ```bash
12 | yarn # or npm install
13 | yarn dev # or npm run dev
14 | ```
15 | 
16 | ### Deployment
17 | 
18 | ```bash
19 | npm run build
20 | npm start
21 | ```
22 | 
23 | Please run `npm start` with the following envs:
24 | 
25 | ```
26 | HEROES_API=<URL_OF_API>
27 | GITHUB_CLIENT_ID=<YOUR_OAUTH_GITHUB_CLIENT_ID>
28 | ```
29 | 
30 | 


--------------------------------------------------------------------------------
/components/fans.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="Fans">
 3 |     <li class="Fans__Item" v-for="fan in fans" :key="fan.githubId">
 4 |       <a :href="`https://github.com/${fan.username}`" target="_blank" rel="noopener">
 5 |         <img :src="`${avatar(fan.githubId)}?s=48`" :srcset="`${avatar(fan.githubId)}?s=96 2x`" width="48" height="48" :alt="fan.username"/> {{ fan.username }}
 6 |       </a>
 7 |     </li>
 8 |   </ul>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props:{
14 |     fans: {
15 |       type: Array,
16 |       required: true
17 |     }
18 |   },
19 |   methods: {
20 |     avatar(githubId) {
21 |       return `https://avatars0.githubusercontent.com/u/${githubId}`
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style lang="scss">
28 | .Fans {
29 |   list-style: none;
30 |   margin: 0;
31 |   padding: 10px;
32 |   display: flex;
33 |   flex-wrap: wrap;
34 |   justify-content: space-evenly;
35 |   &__Item {
36 |     a {
37 |       color: #fff;
38 |       display: flex;
39 |       padding: 10px;
40 |       align-items: center;
41 |       text-decoration: none;
42 |     }
43 |     img {
44 |       margin-right: 10px;
45 |       border-radius: 48px;
46 |     }
47 |   }
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/components/footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer>
 3 |     <div class="Footer">
 4 |       Credits:
 5 |       <a href="https://www.instagram.com/aniketjatav/" target="_blank" rel="noopener">Images</a>
 6 |     </div>
 7 |     <div class="Footer">
 8 |       <a href="https://github.com/Atinux/nuxt-heroes" target="_blank" rel="noopener">Source code</a>
 9 |     </div>
10 |   </footer>
11 | </template>
12 | 
13 | <style lang="scss">
14 | .Footer {
15 |   display: flex;
16 |   padding: 20px;
17 |   color: #fff;
18 |   font-size: 16px;
19 |   justify-content: center;
20 |   border-top: 1px solid #333;
21 |   a {
22 |     text-decoration: none;
23 |     color: #aaa;
24 |     margin-left: 5px;
25 |     &:hover {
26 |       color: #fff;
27 |     }
28 |   }
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/components/header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="Header">
 3 |     <nuxt-link to="/">
 4 |       Home
 5 |     </nuxt-link>
 6 |     <h1>London Heroes</h1>
 7 |     <a v-if="connected" href="#" @click.prevent="logout">
 8 |       <img :src="`${avatar(user.githubId)}?s=24`" :srcset="`${avatar(user.githubId)}?s=48 2x`" width="24" height="24" :alt="user.username"/>
 9 |       Logout
10 |     </a>
11 |     <a v-else :href="oauthUrl">
12 |       Login
13 |     </a>
14 |   </header>
15 | </template>
16 | 
17 | <script>
18 | import { mapState, mapGetters } from 'vuex'
19 | 
20 | export default {
21 |   computed: {
22 |     ...mapState('auth', ['user']),
23 |     ...mapGetters(['oauthUrl']),
24 |     ...mapGetters('auth', ['connected'])
25 |   },
26 |   methods: {
27 |     async logout() {
28 |       await this.$store.dispatch('auth/logout')
29 |       this.$router.push('/')
30 |     },
31 |     avatar(githubId) {
32 |       return `https://avatars0.githubusercontent.com/u/${githubId}`
33 |     }
34 |   }
35 | }
36 | </script>
37 | 
38 | <style lang="scss">
39 | .Header {
40 |   display: flex;
41 |   padding: 20px;
42 |   justify-content: space-between;
43 |   border-bottom: 1px solid #333;
44 |   a {
45 |     color: #aaa;
46 |     font-size: 18px;
47 |     text-decoration: none;
48 |     &:hover {
49 |       color: #fff;
50 |     }
51 |   }
52 |   h1 {
53 |     color: #fff;
54 |     font-size: 22px;
55 |     margin: 0;
56 |     padding: 0;
57 |   }
58 |   img {
59 |     float: left;
60 |     margin-right: 10px;
61 |     border-radius: 50%;
62 |   }
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/components/hero.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Hero">
 3 |     <img :src="cloudinary(hero.image, 120)" :alt="hero.name" class="Hero__Img"/>
 4 |     <div class="Hero__Infos">
 5 |       <h3>{{ '#' + (rank + 1) + ' - ' +hero.name }}</h3>
 6 |       <img :src="(hero.group === 'dc' ? '/dc.svg' : '/marvel.svg')" :alt="hero.group"/>
 7 |       <p>{{ hero.nbFans }} Fan{{ hero.nbFans > 1 ? 's' : ''}}</p>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import { mapState } from 'vuex'
14 | 
15 | export default {
16 |   props:{
17 |     hero: {
18 |       type: Object,
19 |       required: true
20 |     }
21 |   },
22 |   computed: {
23 |     ...mapState('heroes', ['heroes']),
24 |     rank () {
25 |       return this.heroes.findIndex((hero) => hero.slug === this.hero.slug)
26 |     }
27 |   },
28 |   methods: {
29 |     cloudinary (slug, size = 128) {
30 |       return `https://res.cloudinary.com/wikeo/image/upload/${slug}`
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style lang="scss">
37 | .Hero {
38 |   display: flex;
39 |   padding: 20px;
40 |   color: #fff;
41 |   justify-content: center;
42 |   border-bottom: 1px solid #333;
43 |   &__Img {
44 |     height: 120px;
45 |     margin-right: 20px;
46 |     border-radius: 60px;
47 |   }
48 |   &__Infos {
49 |     h3 {
50 |       padding: 5px 0;
51 |     }
52 |     img {
53 |       height: 20px;
54 |       margin-top: 10px;
55 |     }
56 |     p {
57 |       padding-top: 10px;
58 |     }
59 |   }
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/components/ranking.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition-group class="Ranking" tag="div" name="hero-item">
 3 |     <nuxt-link v-for="(hero, i) in heroes" :key="hero.slug" :to="hero.slug" class="Ranking__Hero" :class="{'Ranking__Hero--choosen': user && user.hero === hero.slug}">
 4 |       <img :src="cloudinary(hero.image, 128)" :alt="hero.name" class="Ranking__Hero__Img"/>
 5 |       <div class="Ranking__Hero__Infos">
 6 |         <h3>{{ '#' + (i + 1) + ' - ' +hero.name }}</h3>
 7 |         <img :src="(hero.group === 'dc' ? '/dc.svg' : '/marvel.svg')" :alt="hero.group"/>
 8 |         <p>{{ hero.nbFans }} Fan{{ hero.nbFans > 1 ? 's' : ''}}</p>
 9 |       </div>
10 |     </nuxt-link>
11 |   </transition-group>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props: {
17 |     heroes: {
18 |       type: Array,
19 |       required: true
20 |     },
21 |     user: Object
22 |   },
23 |   methods: {
24 |     cloudinary (slug, size = 128) {
25 |       return `https://res.cloudinary.com/wikeo/image/upload/${slug}`
26 |     }
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="scss">
32 | .hero-item-move {
33 |   transition: transform 1s;
34 | }
35 | .Ranking {
36 |   display: flex;
37 |   padding: 10px;
38 |   flex-wrap: wrap;
39 |   justify-content: space-evenly;
40 |   &__Hero {
41 |     padding: 10px;
42 |     color: #aaa;
43 |     display: flex;
44 |     width: 100%;
45 |     text-decoration: none;
46 |     @media (min-width: 768px) {
47 |       width: 50%;
48 |     }
49 |     @media (min-width: 1200px) {
50 |       width: 33%;
51 |     }
52 |     &--choosen {
53 |       color: #fff;
54 |       background-color: #333;
55 |       img {
56 |         opacity: 1;
57 |       }
58 |     }
59 |     &__Img {
60 |       height: 128px;
61 |       margin-right: 20px;
62 |       opacity: 0.75;
63 |       border-radius: 50%;
64 |     }
65 |     &__Infos {
66 |       h3 {
67 |         padding: 5px 0;
68 |       }
69 |       img {
70 |         height: 20px;
71 |         opacity: 0.75;
72 |         margin-top: 10px;
73 |       }
74 |       p {
75 |         padding-top: 10px;
76 |       }
77 |     }
78 |     &:hover {
79 |       color: #fff;
80 |       img {
81 |         opacity: 1;
82 |       }
83 |     }
84 |   }
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/components/statsbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Groups">
 3 |     <div class="Groups__Stats">
 4 |       <div class="Groups__Stats--DC" :style="stats.dc">
 5 |         <img :src="cloudinary('v1524136834/dc.svg', 24)" alt="DC"/>
 6 |       </div>
 7 |       <div class="Groups__Stats--Marvel" :style="stats.marvel">
 8 |         <img :src="cloudinary('v1524136836/marvel.svg', 24)" alt="Marvel"/>
 9 |       </div>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props: {
17 |     heroes: {
18 |       type: Array,
19 |       required: true
20 |     }
21 |   },
22 |   computed: {
23 |     stats () {
24 |       let s = { dc: 0, marvel: 0 }
25 |       this.heroes.forEach(hero => { s[hero.group] += hero.nbFans })
26 |       if (s.dc + s.marvel) {
27 |         return {
28 |           dc: { width: (s.dc / (s.dc + s.marvel) * 100) + '%' },
29 |           marvel: { width: (s.marvel / (s.dc + s.marvel) * 100) + '%' }
30 |         }
31 |       } else {
32 |         return {
33 |           dc: { width: '50%' },
34 |           marvel: { width: '50%' }
35 |         }
36 |       }
37 |     }
38 |   },
39 |   methods: {
40 |     cloudinary (slug, size = 128) {
41 |       return `https://res.cloudinary.com/wikeo/image/upload/${slug}`
42 |     }
43 |   }
44 | }
45 | </script>
46 | 
47 | <style lang="scss">
48 | .Groups {
49 |   padding: 20px 10px;
50 |   &__Stats {
51 |     height: 48px;
52 |     display: flex;
53 |     align-items: stretch;
54 |     &--DC {
55 |       display: flex;
56 |       overflow: hidden;
57 |       align-items: center;
58 |       background-color: #266BB0;
59 |       transition: width 0.5s linear;
60 |       img {
61 |         height: 24px;
62 |         margin-left: 20px;
63 |       }
64 |     }
65 |     &--Marvel {
66 |       display: flex;
67 |       overflow: hidden;
68 |       align-items: center;
69 |       justify-content: flex-end;
70 |       background-color: #941112;
71 |       transition: width 0.5s linear;
72 |       img {
73 |         height: 24px;
74 |         margin-right: 20px;
75 |       }
76 |     }
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/components/tabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="Tabs">
 3 |     <a class="Tabs__Link Tabs__Link--DC" :class="{'Tabs__Link--DC--active': group === 'dc' }" href="#" @click.prevent="$emit('update:group', 'dc')">
 4 |       <img :src="cloudinary('v1524136834/dc.svg', 48)" alt="DC"/>
 5 |     </a>
 6 |     <a class="Tabs__Link Tabs__Link--Marvel" :class="{'Tabs__Link--Marvel--active': group === 'marvel' }" href="#" @click.prevent="$emit('update:group', 'marvel')">
 7 |       <img :src="cloudinary('v1524136836/marvel.svg', 48)" alt="Marvel"/>
 8 |     </a>
 9 |   </nav>
10 | </template>
11 | 
12 | <script>
13 | 
14 | export default {
15 |   props: {
16 |     group: {
17 |       type: String,
18 |       required: true
19 |     }
20 |   },
21 |   methods: {
22 |     cloudinary (slug, size = 128) {
23 |       return `https://res.cloudinary.com/wikeo/image/upload/${slug}`
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="scss">
30 | .Tabs {
31 |   display: flex;
32 |   &__Link {
33 |     width: 50%;
34 |     padding: 20px;
35 |     text-align: center;
36 |     background-color: #333;
37 |     &--DC {
38 |       &:hover, &--active {
39 |         background-color: #266BB0;
40 |       }
41 |     }
42 |     &--Marvel {
43 |       &:hover, &--active {
44 |         background-color: #941112;
45 |       }
46 |     }
47 |     img {
48 |       height: 48px;
49 |       display: inline-block;
50 |     }
51 |   }
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h-header/>
 4 |     <nuxt/>
 5 |     <h-footer/>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import hHeader from '@/components/header'
11 | import hFooter from '@/components/footer'
12 | 
13 | export default {
14 |   components: {
15 |     hHeader,
16 |     hFooter
17 |   }
18 | }
19 | </script>
20 | 
21 | <style lang="scss">
22 | html
23 | {
24 |   font-family: "Impact", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
25 |   font-size: 18px;
26 |   word-spacing: 1px;
27 |   -ms-text-size-adjust: 100%;
28 |   -webkit-text-size-adjust: 100%;
29 |   -moz-osx-font-smoothing: grayscale;
30 |   -webkit-font-smoothing: antialiased;
31 |   box-sizing: border-box;
32 |   background-color: #000;
33 | }
34 | *, *:before, *:after
35 | {
36 |   box-sizing: border-box;
37 |   margin: 0;
38 | }
39 | .Title {
40 |   text-align: center;
41 |   text-transform: uppercase;
42 |   padding: 40px 20px;
43 |   color: #fff;
44 |   font-size: 48px;
45 | }
46 | .SubTitle {
47 |   text-align: center;
48 |   text-transform: uppercase;
49 |   padding: 20px;
50 |   color: #fff;
51 |   font-size: 24px;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 |   "alias": "heroes.nuxtjs.org",
3 |   "env": {
4 |     "GITHUB_CLIENT_ID": "55440d3936ba0961241e",
5 |     "HEROES_API": "https://api.heroes.nuxtjs.org"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | process.env.HEROES_API = process.env.HEROES_API || 'https://api.heroes.nuxtjs.org'
 2 | process.env.GITHUB_CLIENT_ID = process.env.GITHUB_CLIENT_ID || '55440d3936ba0961241e'
 3 | 
 4 | export default {
 5 |   mode: 'universal', // server-side rendering activated
 6 |   /*
 7 |   ** Headers of the page
 8 |   */
 9 |   head: {
10 |     htmlAttrs: { lang: 'en' },
11 |     title: 'Heroes: Marvel vs DC',
12 |     meta: [
13 |       { charset: 'utf-8' },
14 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
15 |       { hid: 'description', name: 'description', content: 'Marvel vs DC Heroes demo' },
16 |       { 'http-equiv': 'Content-Language', content: 'en' },
17 |       { property: 'og:type', content: 'website' },
18 |       { property: 'og:image', content: 'https://user-images.githubusercontent.com/904724/38987861-88525af8-43d1-11e8-84eb-cb69962594e2.png' }
19 |     ],
20 |     link: [
21 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
22 |     ]
23 |   },
24 | 
25 |   /*
26 |   ** Customize the progress-bar color
27 |   */
28 |   loading: { color: '#000000' },
29 | 
30 |   /*
31 |   ** Plugins to load before mounting the App
32 |   */
33 |   plugins: [
34 |     '~/plugins/auth',
35 |     { src: '~/plugins/sockets', ssr: false }
36 |   ],
37 |   /*
38 |   ** Env
39 |   */
40 |   env: {
41 |     api: process.env.HEROES_API,
42 |     github: {
43 |       oauthUrl: `https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_CLIENT_ID}`
44 |     }
45 |   },
46 |   /*
47 |   ** Server middleware
48 |   */
49 |   serverMiddleware: [
50 |     '~/server-middleware/github-callback',
51 |     '~/server-middleware/logout'
52 |   ],
53 |   /*
54 |   ** Nuxt.js modules
55 |   */
56 |   modules: [
57 |     // Doc: https://axios.nuxtjs.org/usage.html
58 |     '@nuxtjs/axios'
59 |   ],
60 |   /*
61 |   ** modules configuration
62 |   */
63 |   axios: {
64 |     // See https://axios.nuxtjs.org/options.html
65 |     proxy: true,
66 |     proxyHeaders: false
67 |   },
68 |   proxy: {
69 |     '/api': {
70 |       target: process.env.HEROES_API,
71 |       pathRewrite: {
72 |         '^/api/': '/'
73 |       }
74 |     }
75 |   },
76 |   /*
77 |   ** Build configuration
78 |   */
79 |   build: {
80 |     /*
81 |     ** You can extend webpack config here
82 |     */
83 |     extend(config, ctx) {
84 |       // Run ESLint on save
85 |       if (ctx.isDev && ctx.isClient) {
86 |         config.module.rules.push({
87 |           enforce: 'pre',
88 |           test: /\.(js|vue)$/,
89 |           loader: 'eslint-loader',
90 |           exclude: /(node_modules)/
91 |         })
92 |       }
93 |     }
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/nuxt_schems.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/nuxt_schems.jpeg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "heroes",
 3 |   "version": "1.0.0",
 4 |   "description": "Marvel vs DC Heroes",
 5 |   "author": "Chopin brothers",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint"
14 |   },
15 |   "dependencies": {
16 |     "@nuxtjs/axios": "^5.0.0",
17 |     "cookies": "^0.7.1",
18 |     "nuxt-edge": "^2.0.0-25621351.88c9bae",
19 |     "socket.io-client": "^2.1.0"
20 |   },
21 |   "devDependencies": {
22 |     "babel-eslint": "^8.2.1",
23 |     "cross-env": "^5.0.1",
24 |     "eslint": "^4.15.0",
25 |     "eslint-loader": "^2.0.0",
26 |     "eslint-plugin-vue": "^4.0.0",
27 |     "node-sass": "^4.8.3",
28 |     "sass-loader": "^7.0.1"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/pages/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h-hero :hero="hero"/>
 4 |     <h-fans :fans="hero.fans" v-if="hero.nbFans > 0"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import hHero from '@/components/hero'
10 | import hFans from '@/components/fans'
11 | 
12 | export default {
13 |   components: {
14 |     hHero,
15 |     hFans
16 |   },
17 |   head() {
18 |     return {
19 |       title: `Heroes: ${this.hero.name}`
20 |     }
21 |   },
22 |   asyncData ({ store, error, params }) {
23 |     const hero = store.state.heroes.heroes.find((h) => h.slug === params.slug)
24 |     if (!hero) {
25 |       return error({ statusCode: 404, message: 'Hero not found' })
26 |     }
27 |     return {
28 |       hero
29 |     }
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/pages/choose.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="Title">Choose your Hero</h1>
 4 |     <h-tabs :group.sync="group"/>
 5 |     <ul class="List">
 6 |       <li class="List__Item" v-for="hero in filteredHeroes" @click="selectHero(hero)" :key="hero.slug">
 7 |         <img :src="cloudinary(hero.image, 512)" :alt="hero.name"/>
 8 |       </li>
 9 |     </ul>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { mapState } from 'vuex'
15 | import hTabs from '@/components/tabs'
16 | 
17 | export default {
18 |   components: {
19 |     hTabs
20 |   },
21 |   head: {
22 |     title: 'Choose your hero'
23 |   },
24 |   middleware({ store, redirect }) {
25 |     if (!store.getters['auth/connected']) return redirect('/')
26 |   },
27 |   computed: {
28 |     ...mapState('heroes', ['heroes']),
29 |     filteredHeroes() {
30 |       return this.heroes.filter((hero) => hero.group === this.group)
31 |     }
32 |   },
33 |   data () {
34 |     return {
35 |       group: 'dc'
36 |     }
37 |   },
38 |   methods: {
39 |     async selectHero(hero) {
40 |       this.$router.push('/')
41 |       const user = await this.$axios.$put('/api/user/hero', { hero: hero.slug })
42 | 
43 |       this.$store.commit('auth/SET_USER', user)
44 |     },
45 |     cloudinary (slug, size = 128) {
46 |       return `https://res.cloudinary.com/wikeo/image/upload/${slug}`
47 |     }
48 |   }
49 | }
50 | </script>
51 | 
52 | <style lang="scss">
53 | .List {
54 |   list-style: none;
55 |   display: flex;
56 |   flex-wrap: wrap;
57 |   justify-content: space-evenly;
58 |   margin: 0;
59 |   padding: 0;
60 |   &__Item {
61 |     width: 100%;
62 |     cursor: pointer;
63 |     background-color: #000;
64 |     @media (min-width: 576px) {
65 |       width: 50%;
66 |     }
67 |     @media (min-width: 992px) {
68 |       width: 33%;
69 |     }
70 |     img {
71 |       display: inline-block;
72 |       width: 100%;
73 |       opacity: 0.5;
74 |     }
75 |     &:hover {
76 |       img {
77 |         opacity: 1;
78 |       }
79 |     }
80 |   }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="Title">Heroes Ranking</h1>
 4 |     <div v-if="connected" class="Choose">
 5 |       <nuxt-link to="/choose">{{ user.hero ? 'Change' : 'Choose' }} your hero</nuxt-link>
 6 |     </div>
 7 |     <h3 class="SubTitle">{{ totalFans }}</h3>
 8 |     <h-statsbar :heroes="heroes"/>
 9 |     <h-ranking :heroes="heroes" :user="user"/>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import hStatsbar from '@/components/statsbar'
15 | import hRanking from '@/components/ranking'
16 | 
17 | import { mapState, mapGetters } from 'vuex'
18 | 
19 | export default {
20 |   components: {
21 |     hStatsbar,
22 |     hRanking
23 |   },
24 |   computed: {
25 |     ...mapGetters('auth', ['connected']),
26 |     ...mapState('auth', ['user']),
27 |     ...mapState('heroes', ['heroes']),
28 |     totalFans () {
29 |       let fans = 0
30 |       this.heroes.filter((hero) => { fans += hero.nbFans })
31 |       return fans + ' fan' + (fans > 1 ? 's' : '')
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style lang="scss">
38 | .Choose {
39 |   text-align: center;
40 |   padding-bottom: 40px;
41 |   a {
42 |     text-decoration: none;
43 |     border: 2px solid #aaa;
44 |     color: #aaa;
45 |     padding: 10px 30px;
46 |     &:hover {
47 |       color: #fff;
48 |       border-color: #fff;
49 |     }
50 |   }
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/plugins/auth.js:
--------------------------------------------------------------------------------
1 | export default ({ app, store }) => {
2 |   // Set token to axios
3 |   if (store.state.auth.jwt) {
4 |     app.$axios.setToken(store.state.auth.jwt, 'Bearer')
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/plugins/sockets.js:
--------------------------------------------------------------------------------
1 | import io from 'socket.io-client'
2 | 
3 | export default ({ store, env }, inject) => {
4 |   const socket = io(`${env.api}/push`)
5 | 
6 |   inject('socket', socket)
7 |   socket.on('connect', () => store.dispatch('heroes/syncHeroes'))
8 | }
9 | 


--------------------------------------------------------------------------------
/server-middleware/github-callback.js:
--------------------------------------------------------------------------------
 1 | const axios = require('axios')
 2 | const Cookies = require('cookies')
 3 | const { parse } = require('url')
 4 | 
 5 | module.exports = {
 6 |   path: '/github/callback',
 7 |   handler: async (req, res) => {
 8 |     // Get cookies
 9 |     const cookies = new Cookies(req, res)
10 |     // Get req.query
11 |     req.query = parse(req.url, true).query
12 |     // Call Api to verify Github OAuth 2.0 code
13 |     try {
14 |       const { data } = await axios.get(`https://api.heroes.nuxtjs.org/github/auth?code=${req.query.code}`)
15 |       // Add JWT cookie
16 |       cookies.set('jwt', data.token, { httpOnly: true })
17 |       // Redirect to home
18 |       res.setHeader('Location', '/choose')
19 |     } catch (err) {
20 |       cookies.set('jwt') // Remove jwt cookie
21 |       res.setHeader('Location', '/')
22 |     }
23 |     // Set status code to 302 - Found and end request
24 |     res.statusCode = 302
25 |     res.end()
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/server-middleware/logout.js:
--------------------------------------------------------------------------------
 1 | const Cookies = require('cookies')
 2 | 
 3 | module.exports = {
 4 |   path: '/logout',
 5 |   handler: async (req, res) => {
 6 |     // Get cookies
 7 |     const cookies = new Cookies(req, res)
 8 |     cookies.set('jwt', '') // Remove jwt cookie
 9 |     res.status = 200
10 |     res.end()
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/static/aquaman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/aquaman.jpg


--------------------------------------------------------------------------------
/static/batman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/batman.jpg


--------------------------------------------------------------------------------
/static/black-widow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/black-widow.jpg


--------------------------------------------------------------------------------
/static/captain-america.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/captain-america.jpg


--------------------------------------------------------------------------------
/static/cyborg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/cyborg.jpg


--------------------------------------------------------------------------------
/static/dc.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>path4182</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 8 |         <g id="dc" fill-rule="nonzero" fill="#FFFFFF">
 9 |             <path d="M249.999445,0 C111.9287,0 0,111.928576 0,250.000278 C0,388.07198 111.9287,500 249.999445,500 C388.0713,500 500,388.071424 500,250.000278 C500,111.929131 388.0713,0 249.999445,0 Z M18.3910281,250.000278 C18.3910281,223.142819 22.9058813,196.984695 31.8356034,172.056378 L55.8829738,188.759317 L55.8829738,376.431581 C48.4074699,364.97782 41.9645833,352.858052 36.5843091,340.143933 C24.5167418,311.601738 18.3910281,281.273712 18.3910281,250.000278 Z M413.772302,413.772953 C392.497278,435.046843 367.726131,451.749781 340.148755,463.415176 C311.606528,475.48884 281.277912,481.608437 250,481.608437 C218.727642,481.608437 188.398471,475.48884 159.857356,463.415176 C132.274979,451.749781 107.507721,435.046843 86.2288089,413.772953 C79.519297,407.057894 73.2641589,400.000111 67.4778368,392.612935 L195.472926,392.612935 L245.877863,356.121985 L245.877863,157.50588 L195.472926,119.972315 L58.2814895,119.972315 C66.4607728,107.941423 75.7976537,96.6654113 86.2288089,86.2292685 C107.507721,64.9498245 132.274979,48.2474412 159.857356,36.5853794 C188.398471,24.5117154 218.727642,18.3921186 250,18.3921186 C281.277912,18.3921186 311.607083,24.5117154 340.148755,36.5853794 C367.725576,48.2474412 392.497278,64.9498245 413.772302,86.2292685 C424.208456,96.6648558 433.539227,107.941423 441.719066,119.972315 L405.123647,119.972315 L396.902704,138.124472 L372.468727,119.972315 L315.622014,119.972315 L265.58091,157.50588 L265.58091,356.121985 L315.387051,392.612935 L432.528829,392.612935 C426.742507,400.000111 420.485702,407.057894 413.772302,413.772953 Z M106.986135,182.378094 L152.761793,182.378094 C165.5698,182.378094 175.948741,192.756468 175.948741,205.564462 L175.948741,308.203937 C175.948741,321.007487 165.5698,331.389749 152.761793,331.389749 L125.299398,331.389749 L125.299398,195.649904 L106.986135,182.378094 Z M450.226076,366.520912 L450.226076,295.749222 L385.443931,295.749222 L385.443931,331.389749 L357.461617,331.389749 C345.220743,331.389749 335.30062,321.470747 335.30062,309.230443 L335.30062,195.676011 L316.976248,182.378094 L385.443931,182.378094 L385.443931,221.281444 L444.825805,221.281444 L456.637856,145.256688 C459.056924,150.02594 461.320461,154.895178 463.41458,159.851623 C475.488257,188.393263 481.609527,218.721845 481.609527,249.999722 C481.609527,281.273156 475.488257,311.601182 463.41458,340.143378 C459.562957,349.25084 455.16253,358.050572 450.226076,366.520912 Z" id="path4182"></path>
10 |         </g>
11 |     </g>
12 | </svg>


--------------------------------------------------------------------------------
/static/doctor-strange.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/doctor-strange.jpg


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/favicon.ico


--------------------------------------------------------------------------------
/static/flash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/flash.jpg


--------------------------------------------------------------------------------
/static/hulk.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/hulk.jpg


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/icon.png


--------------------------------------------------------------------------------
/static/iron-man.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/iron-man.jpg


--------------------------------------------------------------------------------
/static/marvel.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="272px" height="97px" viewBox="0 0 272 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Group</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs></defs>
 7 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 8 |         <g id="marvel-vs-dc" transform="translate(-60.000000, -80.000000)" fill-rule="nonzero" fill="#FFFFFF">
 9 |             <g id="Group" transform="translate(60.000000, 80.000000)">
10 |                 <path d="M177.094287,50.2688719 L168.857343,5.84585627e-15 L151.395023,5.84585627e-15 L153.536628,16.043257 C148.512093,2.13910093 138.545391,0.329092451 138.545391,0.329092451 L109.633719,0.329092451 L109.633719,87.3740458 L96.042762,0 L74.297231,0 L60.3767964,87.3740458 L60.3767964,0 L38.9607431,0 L29.9824746,40.6429177 L22.1573782,5.84585627e-15 L0,5.84585627e-15 L0,97 L17.8741675,96.6709075 L17.8741675,61.7048346 L25.6992639,97 L34.595163,97 L43.2439537,61.293469 L43.2439537,96.9177269 L76.1093586,96.9177269 L78.9922888,87.6208651 L92.1713985,87.6208651 L93.9835261,96.9177269 L128.578689,96.9177269 L128.578689,64.5021204 L140.686996,96.9177269 L157.819839,96.9177269 L145.299685,59.812553 C154.936909,51.9966073 156.749036,34.8837998 156.749036,34.8837998 L167.127585,96.9177269 L186.731511,96.9177269 L203.123028,3.45547074 L203.123028,96.9177269 L234.917631,96.9177269 L234.917631,77.336726 L220.667718,77.336726 L220.667718,58.8252757 L234.258675,58.8252757 L234.258675,38.5038168 L220.33824,38.5038168 L220.33824,18.5114504 L235,18.5114504 L235,0.329092451 L185.743077,0.329092451 L177.094287,50.2688719 Z M81.0515247,68.7803223 L85.3347354,39.1620017 L90.3592709,68.7803223 L81.0515247,68.7803223 Z M128.166842,46.3197625 L128.166842,17.4418999 C128.166842,17.4418999 137.062741,16.7014419 138.874869,31.0169635 C138.874869,31.0169635 139.945671,45.6615776 128.166842,46.3197625 Z" id="Shape"></path>
11 |                 <polygon id="Shape" points="258.260163 77.4852071 258.260163 0 242 0 242 97 272 97 272 77.4852071"></polygon>
12 |             </g>
13 |         </g>
14 |     </g>
15 | </svg>


--------------------------------------------------------------------------------
/static/superman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/superman.jpg


--------------------------------------------------------------------------------
/static/thor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/thor.jpg


--------------------------------------------------------------------------------
/static/wonder-woman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-heroes/7d578a58209943c206a60c633384c92c44c08757/static/wonder-woman.jpg


--------------------------------------------------------------------------------
/store/auth.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   user: null,
 3 |   jwt: null
 4 | })
 5 | 
 6 | export const mutations = {
 7 |   SET_JWT(state, jwt) {
 8 |     state.jwt = jwt
 9 |   },
10 |   SET_USER(state, user) {
11 |     state.user = user
12 |   }
13 | }
14 | 
15 | export const getters = {
16 |   connected: (state) => !!state.user,
17 | }
18 | 
19 | export const actions = {
20 |   async checkConnectedUser({ dispatch, commit, rootState }, { error, req, res }) {
21 |     const Cookies = (process.server ? require('cookies') : null)
22 |     const cookies = new Cookies(req, res)
23 | 
24 |     // Get hwt cookie
25 |     let jwt = cookies.get('jwt')
26 |     if (!jwt) return
27 |     // Check if JWT is good
28 |     try {
29 |       const user = await this.$axios.$get(`/api/user`, {
30 |         headers: {
31 |           Authorization: `Bearer ${jwt}`
32 |         }
33 |       })
34 |       // Update state
35 |       commit('SET_JWT', jwt)
36 |       commit('SET_USER', user)
37 |     } catch (err) {
38 |       cookies.set('jwt') // Remove jwt cookie
39 |     }
40 |   },
41 |   async logout({ commit }) {
42 |     commit('SET_JWT', null)
43 |     commit('SET_USER', null)
44 |     this.$axios.setToken(false) // Remove jwt in axios requests
45 |     await this.$axios.get('/logout')
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/store/heroes.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   heroes: []
 3 | })
 4 | 
 5 | const sortHeroes = (heroes) => heroes.sort((h1, h2) => h2.nbFans - h1.nbFans)
 6 | 
 7 | export const mutations = {
 8 |   SET_HEROES(state, heroes) {
 9 |     state.heroes = sortHeroes(heroes)
10 |   },
11 |   SET_HERO_FANS(state, hero) {
12 |     const foundHero = state.heroes.find((h) => h.slug === hero.slug)
13 | 
14 |     if (!foundHero) return
15 |     foundHero.fans = hero.fans
16 |     foundHero.nbFans = hero.nbFans
17 |     // Sort heroes
18 |     state.heroes = sortHeroes(state.heroes)
19 |   }
20 | }
21 | 
22 | export const actions = {
23 |   async fetchHeroes({ commit }) {
24 |     const heroes = await this.$axios.$get('/api/heroes')
25 | 
26 |     commit('SET_HEROES', heroes)
27 |   },
28 |   async syncHeroes({ commit }, socket) {
29 |     this.$socket.on('hero:updated', (hero) => commit('SET_HERO_FANS', hero))
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({})
 2 | 
 3 | export const getters = {
 4 |   oauthUrl: (state) => `${process.env.github.oauthUrl}`
 5 | }
 6 | 
 7 | export const actions = {
 8 |   // Called on page load on server-side
 9 |   async nuxtServerInit({ getters, dispatch, commit }, context) {
10 |     await dispatch('auth/checkConnectedUser', context)
11 |     await dispatch('heroes/fetchHeroes', context)
12 |   }
13 | }
14 | 


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