fix: comments

Author: krestaino

.prettierignore

@@ -1 +1,2 @@
-.nuxt
+.nuxt
+dist

assets/svg/Smile.vue

@@ -1,11 +1,5 @@
 <template>
-  <svg
-    fill="#000000"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <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"

components/ArticleComments.vue

@@ -1,41 +1,26 @@
 <template>
   <div class="comments">
-    <div class="loading" v-if="!disqusReady">
-      <Spinner1 />
-      <span>Loading comments</span>
-    </div>
     <div class="disqus" :class="{ ready: disqusReady }">
-      <no-ssr>
-        <lazy-component>
-          <VueDisqus
-            shortname="nuepress-kmr-io"
-            :identifier="article.slug"
-            @ready="disqusReady = true"
-          />
+      <client-only>
+        <lazy-component @show="disqusReady = true">
+          <vue-disqus shortname="nuepress-kmr-io" :identifier="article.slug" />
         </lazy-component>
-      </no-ssr>
+      </client-only>
     </div>
   </div>
 </template>
 
 <script>
-import Spinner1 from '~/components/Spinner1'
-import VueDisqus from 'vue-disqus'
-
 export default {
   props: {
     article: Object
   },
-  components: {
-    Spinner1,
-    VueDisqus
-  },
   data() {
     return {
       disqusReady: false
-    }
+    };
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -44,19 +29,6 @@ export default {
   padding-top: 32px;
   margin-top: 32px;
 
-  .loading {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: absolute;
-    width: 100%;
-
-    .spinner {
-      margin-bottom: 16px;
-    }
-  }
-
   .disqus {
     min-height: 440px;
     opacity: 0;

components/ArticleFeaturedImage.vue

@@ -5,15 +5,9 @@
       class="featured-image lazy"
       :class="{ expanded: expanded }"
     >
-      <div
-        class="image-height"
-        :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 class="featured-image-padding" :style="{ paddingTop: featuredImageAspectRatio }"></div>
     </div>
   </div>
 </template>
@@ -27,10 +21,10 @@ export default {
 
   computed: {
     featuredImageAspectRatio() {
-      return (this.featuredImage.height / this.featuredImage.width) * 100 + '%'
+      return (this.featuredImage.height / this.featuredImage.width) * 100 + '%';
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

components/ArticleList.vue

@@ -16,23 +16,18 @@
       </div>
       <nuxt-link :to="`/${article.slug}`" class="row">
         <div class="col no-flex-shrink">
-          <div
-            class="lazy thumbnail"
-            v-if="article._embedded['wp:featuredmedia']"
-          >
+          <div class="lazy thumbnail" v-if="article._embedded['wp:featuredmedia']">
             <img
               v-lazy="
-                article._embedded['wp:featuredmedia'][0].media_details.sizes
-                  .thumbnail.source_url
+                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
+                article._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url
               "
             />
             <Spinner1 class="spinner" />
@@ -48,7 +43,7 @@
 </template>
 
 <script>
-import Spinner1 from '~/components/Spinner1'
+import Spinner1 from '~/components/Spinner1';
 
 export default {
   components: {
@@ -60,7 +55,7 @@ export default {
   mixins: {
     shortTimestamp: Function
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

components/TheFooter.vue

@@ -14,17 +14,17 @@
 export default {
   computed: {
     meta() {
-      return this.$store.state.meta
+      return this.$store.state.meta;
     },
     year() {
-      return new Date().getFullYear()
+      return new Date().getFullYear();
     }
   },
 
   mixins: {
     homeScrollTop: Function
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

components/TheHeader.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import TheHeaderSearch from '~/components/TheHeaderSearch'
+import TheHeaderSearch from '~/components/TheHeaderSearch';
 
 export default {
   components: {
@@ -25,14 +25,14 @@ export default {
 
   computed: {
     meta() {
-      return this.$store.state.meta
+      return this.$store.state.meta;
     }
   },
 
   mixins: {
     homeScrollTop: Function
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>