Merge branch 'release/v0.7.0'

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

.env.example

@@ -1,2 +1 @@
 VUE_APP_API_URL=url/to/api/
-PRERENDER_TOKEN=<token here>

.eslintrc

@@ -1,11 +1,12 @@
 {
   "root": true,
   "env": {
+    "browser": true,
     "node": true
   },
   "extends": [
-    "plugin:vue/essential",
-    "eslint:recommended",
+    "@nuxtjs",
+    "plugin:nuxt/recommended",
     "airbnb-base"
   ],
   "parserOptions": {
@@ -31,7 +32,8 @@
     ],
     "no-debugger": [
       "warn"
-    ]
+    ],
+    "vue/no-v-html": "off"
   },
   "overrides": [
     {

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+.nuxt
 
 # local env files
 .env.local

src/components/ActorCard.vue → components/ActorCard.vue

@@ -2,29 +2,32 @@
   <el-card
     class="actor-card"
     shadow="hover"
-    :body-style="{ padding: '0px' }">
+    :body-style="{ padding: '0px' }"
+  >
     <div class="image-container">
-      <img v-bind:src="actor.image_url" class="image">
+      <img :src="actor.image_url" class="image">
     </div>
     <div
       class="actor-card-info"
-      style="padding: 14px;">
+      style="padding: 14px;"
+    >
       <el-row>
-        <span class="actor-name"><b>{{actor.shortname}}</b></span>
+        <span class="actor-name"><b>{{ actor.shortname }}</b></span>
       </el-row>
       <el-row>
         <el-button
           type="primary"
           plain
-          v-on:click="goToDetail()">
-          {{detailButtonText}}
+          @click="goToDetail()"
+        >
+          {{ detailButtonText }}
         </el-button>
         <font-awesome-icon
           v-if="actor.deathdate"
           class="ribbon"
           icon="ribbon"
-          size="2x">
-        </font-awesome-icon>
+          size="2x"
+        />
       </el-row>
     </div>
   </el-card>
@@ -33,7 +36,12 @@
 <script>
 export default {
   name: 'ActorCard',
-  props: ['actor'],
+  props: {
+    actor: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
       detailButtonText: this.$t('VIEWS.ACTORS.SEE_DETAIL.TEXT'),
@@ -42,7 +50,7 @@ export default {
   methods: {
     goToDetail() {
       this.$router.push({
-        name: 'ActorDetail',
+        name: `actors-slug___${this.$i18n.locale}`,
         params: {
           slug: this.actor.slug,
         },

src/components/ChapterCard.vue → components/ChapterCard.vue

@@ -2,22 +2,25 @@
   <el-card
     class="chapter-card"
     shadow="hover"
-    :body-style="{ padding: '0px' }">
+    :body-style="{ padding: '0px' }"
+  >
     <div class="image-container">
-      <img v-bind:src="chapter.image_url" class="image">
+      <img :src="chapter.image_url" class="image">
     </div>
     <div
       class="chapter-card-info"
-      style="padding: 14px;">
+      style="padding: 14px;"
+    >
       <el-row>
-        <span class="chapter-name"><b>{{chapter.natural_id}} - {{chapter.name}}</b></span>
+        <span class="chapter-name"><b>{{ chapter.natural_id }} - {{ chapter.name }}</b></span>
       </el-row>
       <el-row>
         <el-button
           type="primary"
           plain
-          v-on:click="goToDetail()">
-          {{detailButtonText}}
+          @click="goToDetail()"
+        >
+          {{ detailButtonText }}
         </el-button>
       </el-row>
     </div>
@@ -27,19 +30,24 @@
 <script>
 export default {
   name: 'ChapterCard',
-  props: ['chapter'],
+  props: {
+    chapter: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
-      detailButtonText: this.$t('VIEWS.CHAPTERS.SEE_DETAIL.TEXT'),
+      detailButtonText: this.$t('VIEWS.SEASONS.SEE_DETAIL.TEXT'),
     };
   },
   methods: {
     goToDetail() {
       this.$router.push({
-        name: 'ChapterDetail',
+        name: `seasons-season_number-chapters-slug___${this.$i18n.locale}`,
         params: {
-          season: this.chapter.season,
-          chapter_slug: this.chapter.slug,
+          season_number: this.chapter.season,
+          slug: this.chapter.slug,
         },
       });
     },

src/components/CharacterCard.vue → components/CharacterCard.vue

@@ -2,22 +2,25 @@
   <el-card
     class="character-card"
     shadow="hover"
-    :body-style="{ padding: '0px' }">
+    :body-style="{ padding: '0px' }"
+  >
     <div class="image-container">
-      <img v-bind:src="character.image_url" class="image">
+      <img :src="character.image_url" class="image">
     </div>
     <div
       class="character-card-info"
-      style="padding: 14px;">
+      style="padding: 14px;"
+    >
       <el-row>
-        <span class="character-name"><b>{{character.shortname}}</b></span>
+        <span class="character-name"><b>{{ character.shortname }}</b></span>
       </el-row>
       <el-row>
         <el-button
           type="primary"
           plain
-          v-on:click="goToDetail()">
-          {{detailButtonText}}
+          @click="goToDetail()"
+        >
+          {{ detailButtonText }}
         </el-button>
       </el-row>
     </div>
@@ -27,7 +30,12 @@
 <script>
 export default {
   name: 'CharacterCard',
-  props: ['character'],
+  props: {
+    character: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
       detailButtonText: this.$t('VIEWS.CHARACTERS.SEE_DETAIL.TEXT'),
@@ -36,7 +44,7 @@ export default {
   methods: {
     goToDetail() {
       this.$router.push({
-        name: 'CharacterDetail',
+        name: `characters-slug___${this.$i18n.locale}`,
         params: {
           slug: this.character.slug,
         },

src/components/Footer.vue → components/Footer.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="footer">
     <div id="copyright">
-      {{copyrightText}}
+      {{ copyrightText }}
     </div>
     <div id="author">
-      <a href="https://www.juanmanuellopezpazos.es" target="_blank">{{authorText}}</a>
+      <a href="https://www.juanmanuellopezpazos.es" target="_blank">{{ authorText }}</a>
     </div>
   </div>
 </template>

src/components/Header.vue → components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="header">
-    <h1>{{title}}</h1>
+    <h1>{{ title }}</h1>
   </div>
 </template>
 

src/components/Menu.vue → components/Menu.vue

@@ -5,54 +5,55 @@
     </div>
     <el-menu :default-openeds="defaultOpeneds" :collapse="isCollapsed">
       <el-menu-item index="1">
-        <router-link
+        <nuxt-link
           exact
-          to="/">
-          <i class="el-icon-s-home"></i>
-          <span>{{homeItemText}}</span>
-        </router-link>
+          to="/"
+        >
+          <i class="el-icon-s-home" />
+          <span>{{ homeItemText }}</span>
+        </nuxt-link>
       </el-menu-item>
       <el-menu-item index="2">
-        <router-link :to="{ name: 'Characters' }">
-          <i class="el-icon-user-solid"></i>
-          <span>{{charactersItemText}}</span>
-        </router-link>
+        <nuxt-link :to="{ name: `characters___${$i18n.locale}` }">
+          <i class="el-icon-user-solid" />
+          <span>{{ charactersItemText }}</span>
+        </nuxt-link>
       </el-menu-item>
       <el-menu-item index="3">
-        <router-link :to="{ name: 'Actors' }">
-          <i class="el-icon-star-on"></i>
-          <span>{{actorsItemText}}</span>
-        </router-link>
+        <nuxt-link :to="{ name: `actors___${$i18n.locale}` }">
+          <i class="el-icon-star-on" />
+          <span>{{ actorsItemText }}</span>
+        </nuxt-link>
       </el-menu-item>
       <el-submenu index="4">
         <template slot="title">
-          <i class="el-icon-video-camera-solid"></i>
-          <span slot="title">{{seasonsItemText}}</span>
+          <i class="el-icon-video-camera-solid" />
+          <span slot="title">{{ seasonsItemText }}</span>
         </template>
         <el-menu-item index="4-1">
-          <router-link :to="{ name: 'SeasonDetails', params: { season_number: 1 } }">
-            <i class="el-icon-film"></i>{{firstSeasonItemText}}
-          </router-link>
+          <nuxt-link :to="{ name: `seasons___${$i18n.locale}`, params: { season_number: 1 } }">
+            <i class="el-icon-film" />{{ firstSeasonItemText }}
+          </nuxt-link>
         </el-menu-item>
         <el-menu-item index="4-2">
-          <router-link :to="{ name: 'SeasonDetails', params: { season_number: 2 } }">
-            <i class="el-icon-film"></i>{{secondSeasonItemText}}
-          </router-link>
+          <nuxt-link :to="{ name: `seasons___${$i18n.locale}`, params: { season_number: 2 } }">
+            <i class="el-icon-film" />{{ secondSeasonItemText }}
+          </nuxt-link>
         </el-menu-item>
         <el-menu-item index="4-3">
-          <router-link :to="{ name: 'SeasonDetails', params: { season_number: 3 } }">
-            <i class="el-icon-film"></i>{{thirdSeasonItemText}}
-          </router-link>
+          <nuxt-link :to="{ name: `seasons___${$i18n.locale}`, params: { season_number: 3 } }">
+            <i class="el-icon-film" />{{ thirdSeasonItemText }}
+          </nuxt-link>
         </el-menu-item>
         <el-menu-item index="4-4">
-          <router-link :to="{ name: 'SeasonDetails', params: { season_number: 4 } }">
-            <i class="el-icon-film"></i>{{fourthSeasonItemText}}
-          </router-link>
+          <nuxt-link :to="{ name: `seasons___${$i18n.locale}`, params: { season_number: 4 } }">
+            <i class="el-icon-film" />{{ fourthSeasonItemText }}
+          </nuxt-link>
         </el-menu-item>
         <el-menu-item index="4-5">
-          <router-link :to="{ name: 'SeasonDetails', params: { season_number: 5 } }">
-            <i class="el-icon-film"></i>{{fifthSeasonItemText}}
-          </router-link>
+          <nuxt-link :to="{ name: `seasons___${$i18n.locale}`, params: { season_number: 5 } }">
+            <i class="el-icon-film" />{{ fifthSeasonItemText }}
+          </nuxt-link>
         </el-menu-item>
       </el-submenu>
     </el-menu>
@@ -82,8 +83,11 @@ export default {
     };
   },
   created() {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
+    if (process.browser) {
+      // eslint-disable-next-line nuxt/no-globals-in-created
+      window.addEventListener('resize', this.handleResize);
+      this.handleResize();
+    }
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize);
@@ -130,7 +134,7 @@ export default {
           text-decoration: none;
           padding: 0 20px;
 
-          &.router-link-active, &:focus{
+          &.nuxt-link-active, &:focus{
             color: $color-text-blue;
 
             i {

jest.config.js

@@ -1,7 +1,23 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
-  verbose: true,
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+    '^~/(.*)$': '<rootDir>/$1',
+    '^vue$': 'vue/dist/vue.common.js',
+  },
+  moduleFileExtensions: [
+    'js',
+    'vue',
+    'json',
+  ],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '.*\\.(vue)$': 'vue-jest',
+  },
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**'],
-  coverageReporters: ['html', 'text-summary'],
+  collectCoverageFrom: [
+    '<rootDir>/components/**/*.vue',
+    '<rootDir>/pages/**/*.vue',
+    '<rootDir>/plugins/anhqvClient/client.js',
+  ],
+  verbose: true,
 };