wip: nuxt 2 upgrade

Author: krestaino

.editorconfig

@@ -0,0 +1,2 @@
+WORDPRESS_API_URL=https://wp.kmr.io/wp-json
+FEATURED_ID=194

.env.example

@@ -27,3 +27,5 @@ dist
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+.env

.eslintrc.js

@@ -0,0 +1 @@
+10.18.1

.gitignore

@@ -0,0 +1 @@
+.nuxt

.nvmrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "useTabs": false,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "trailingComma": "none"
+}

.prettierignore

@@ -12,7 +12,7 @@
 
 ## Build Setup
 
-``` bash
+```bash
 # install dependencies
 $ npm install
 

.prettierrc.json

@@ -1,6 +1,8 @@
 <template>
   <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
+    />
   </svg>
 </template>

README.md

@@ -1,7 +1,7 @@
 <template>
   <div class="comments">
     <div class="loading" v-if="!disqusReady">
-      <Spinner1/>
+      <Spinner1 />
       <span>Loading comments</span>
     </div>
     <div class="disqus" :class="{ ready: disqusReady }">
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import Spinner1 from '~/components/Spinner1'
-import VueDisqus from 'vue-disqus/VueDisqus.vue'
+import Spinner1 from '~/components/Spinner1';
+import VueDisqus from 'vue-disqus/VueDisqus.vue';
 
 export default {
   props: {
@@ -30,12 +30,12 @@ export default {
     Spinner1,
     VueDisqus
   },
-  data () {
+  data() {
     return {
       disqusReady: false
-    }
+    };
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

assets/svg/Smile.vue

@@ -3,18 +3,11 @@
     <div
       v-if="featuredImage.source_url"
       class="featured-image lazy"
-      :class="{ 'expanded': expanded }"
+      :class="{ expanded: expanded }"
     >
-      <div
-        class="image-height"
-        :style="{ paddingTop: featuredImageAspectRatio}"
-      ></div>
-      <img v-lazy="featuredImage.source_url">
-      <div
-        class="featured-image-padding"
-        :style="{ paddingTop: featuredImageAspectRatio}"
-      >
-      </div>
+      <div class="image-height" :style="{ paddingTop: featuredImageAspectRatio }"></div>
+      <img v-lazy="featuredImage.source_url" />
+      <div class="featured-image-padding" :style="{ paddingTop: featuredImageAspectRatio }"></div>
     </div>
   </div>
 </template>
@@ -27,11 +20,11 @@ export default {
   },
 
   computed: {
-    featuredImageAspectRatio () {
-      return this.featuredImage.height / this.featuredImage.width * 100 + '%'
+    featuredImageAspectRatio() {
+      return (this.featuredImage.height / this.featuredImage.width) * 100 + '%';
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -59,7 +52,7 @@ export default {
     transition: opacity 0.8s;
     width: 100%;
 
-    &[lazy="loaded"] {
+    &[lazy='loaded'] {
       opacity: 0.6;
 
       @media (max-width: 900px) {
@@ -69,7 +62,7 @@ export default {
   }
 
   &.expanded {
-    img[lazy="loaded"] {
+    img[lazy='loaded'] {
       opacity: 1;
     }
   }

components/ArticleComments.vue

@@ -5,18 +5,32 @@
         <span v-html="shortTimestamp(article.date)"></span>
         &nbsp;–&nbsp;
         <span class="topics">
-          <nuxt-link class="topic fancy" v-for="topic in article._embedded['wp:term'][0]" :to="`/topics/${topic.slug}`" :key="topic.id" v-html="topic.name"></nuxt-link>
+          <nuxt-link
+            class="topic fancy"
+            v-for="topic in article._embedded['wp:term'][0]"
+            :to="`/topics/${topic.slug}`"
+            :key="topic.id"
+            v-html="topic.name"
+          ></nuxt-link>
         </span>
       </div>
       <nuxt-link :to="`/${article.slug}`" class="row">
         <div class="col">
           <div class="lazy thumbnail" v-if="article._embedded['wp:featuredmedia']">
-            <img v-lazy="article._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url">
-            <Spinner1 class="spinner"/>
+            <img
+              v-lazy="
+                article._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url
+              "
+            />
+            <Spinner1 class="spinner" />
           </div>
           <div class="lazy medium" v-if="article._embedded['wp:featuredmedia']">
-            <img v-lazy="article._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url">
-            <Spinner1 class="spinner"/>
+            <img
+              v-lazy="
+                article._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url
+              "
+            />
+            <Spinner1 class="spinner" />
           </div>
         </div>
         <div class="col">
@@ -29,7 +43,7 @@
 </template>
 
 <script>
-import Spinner1 from '~/components/Spinner1'
+import Spinner1 from '~/components/Spinner1';
 
 export default {
   components: {
@@ -41,7 +55,7 @@ export default {
   mixins: {
     shortTimestamp: Function
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -118,7 +132,7 @@ export default {
   .lazy {
     margin: 0 22px 0 0;
 
-     &.thumbnail {
+    &.thumbnail {
       display: block;
     }
 

components/ArticleFeaturedImage.vue

@@ -17,7 +17,8 @@
   }
 }
 
-.double-bounce1, .double-bounce2 {
+.double-bounce1,
+.double-bounce2 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -26,24 +27,26 @@
   position: absolute;
   top: 0;
   left: 0;
-  animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
 }
 
 .double-bounce2 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
 }
 
 @keyframes sk-bounce {
-  0%, 100% { 
-    transform: scale(0.0);
-  } 50% { 
-    transform: scale(1.0);
+  0%,
+  100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
   }
 }
 
 .infinite-status-prompt {
-  color: rgba($primary, .65);
+  color: rgba($primary, 0.65);
   font-size: 0.8rem;
   font-family: 'Roboto', sans-serif;
   margin: 64px auto;

components/ArticleList.vue

@@ -36,10 +36,13 @@
 }
 
 @keyframes sk-bouncedelay {
-  0%, 80%, 100% { 
+  0%,
+  80%,
+  100% {
     transform: scale(0);
-  } 40% { 
-    transform: scale(1.0);
+  }
+  40% {
+    transform: scale(1);
   }
 }
 </style>

components/Spinner1.vue

@@ -13,18 +13,18 @@
 <script>
 export default {
   computed: {
-    meta () {
-      return this.$store.state.meta
+    meta() {
+      return this.$store.state.meta;
     },
-    year () {
-      return new Date().getFullYear()
+    year() {
+      return new Date().getFullYear();
     }
   },
 
   mixins: {
     homeScrollTop: Function
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -39,7 +39,7 @@ footer {
     flex-direction: column;
     height: 200px;
     font-family: 'Roboto', sans-serif;
-    font-size: .7rem;
+    font-size: 0.7rem;
     margin: 0 auto;
     max-width: $containerWidth;
     padding: 64px 32px;

components/Spinner2.vue

@@ -10,29 +10,29 @@
         <nuxt-link to="/authors">Authors</nuxt-link>
         <nuxt-link to="/pages/sample-page">Sample Page</nuxt-link>
       </nav>
-      <TheHeaderSearch/>
+      <TheHeaderSearch />
     </div>
   </header>
 </template>
 
 <script>
-import TheHeaderSearch from '~/components/TheHeaderSearch'
+import TheHeaderSearch from '~/components/TheHeaderSearch';
 
 export default {
   components: {
     TheHeaderSearch
   },
 
   computed: {
-    meta () {
-      return this.$store.state.meta
+    meta() {
+      return this.$store.state.meta;
     }
   },
 
   mixins: {
     homeScrollTop: Function
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>