chore : last update before migrate

Zainal21 · Jun 13, 2022 · 5e6c48a · 5e6c48a
1 parent c22a144
commit 5e6c48a
Show file tree

Hide file tree

Showing 29 changed files with 11,827 additions and 858 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,5 @@ dist
 
 .DS_Store
 .idea
+
+.vercel
diff --git a/components/BlogCard.vue b/components/BlogCard.vue
@@ -3,7 +3,7 @@
 <template>
   <div class="container mx-auto">
     <div
-      class="max-w-4xl mx-auto  mt-5 bg-transparant overflow-hidden hover:shadow-2xl hover:border-1hover:border-gray-700 border-2 border-gray-800 rounded-lg"
+      class="max-w-4xl mx-auto  mt-5 bg-gray-700 overflow-hidden shadow-xl hover:shadow-2xl border-1 hover:border-2 border-gray-700 hover:border-gray-700 border-2 border-gray-800 rounded-lg"
     >
       <div class="p-6 mx-3">
         <article>

diff --git a/components/ButtonToTop.vue b/components/ButtonToTop.vue
@@ -1,35 +1,37 @@
 <template>
-  <div id="to-top" class="to-top"><a aria-label="To Top" href="#__nuxt" class="to-top__link">▲</a></div>
+  <div id="to-top" class="to-top">
+    <a aria-label="To Top" href="#__nuxt" class="to-top__link">▲</a>
+  </div>
 </template>
 
 <style scoped>
-  .to-top{
-    position: fixed;
-    z-index: 20;
-    bottom: 1rem;
-    right: 1.5rem;
-  }
-  .to-top__link{
-    display: block;
-    height: 3rem;
-    width: 3rem;
-    border-radius: 9999px;
-    text-align: center;
-    font-size: 1.3rem;
-    line-height: 2.3rem;
-    text-decoration: none;
-    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    border: 1px solid rgb(61, 61, 61);
-    line-height: 1.8;
-    background-color:rgb(22, 22, 29) ;
-    color: #ddd;
-    scroll-behavior: smooth !important;
-  }
+.to-top {
+  position: fixed;
+  z-index: 20;
+  bottom: 1rem;
+  right: 1.5rem;
+}
+.to-top__link {
+  display: block;
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  text-align: center;
+  font-size: 1.3rem;
+  line-height: 2.3rem;
+  text-decoration: none;
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid rgb(61, 61, 61);
+  line-height: 1.8;
+  background-color: rgb(22, 22, 29);
+  color: #ddd;
+  scroll-behavior: smooth !important;
+}
 </style>
 
 <script>
 export default {
-  name : 'ButtonToTop',
-}
-</script>
+  name: "ButtonToTop",
+};
+</script>
diff --git a/components/Image.vue b/components/Image.vue
@@ -18,41 +18,40 @@
 export default {
   props: {
     imageURL: {
-      type: String
+      type: String,
     },
     alt: {
-      type: String
+      type: String,
     },
     width: {
-      type: String
+      type: String,
     },
     height: {
-      type: String
+      type: String,
     },
     classes: {
-      type: String
+      type: String,
     },
     alt: {
-      type: String
+      type: String,
     },
     rounded: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   computed: {
-    imageRequired () {
-      return require(`../assets/images/${this.imageURL}`)
+    imageRequired() {
+      return require(`../assets/images/${this.imageURL}`);
     },
-    isRounded () {
-      return this.rounded ? 'image-placeholder--rounded' : ''
-    }
-  }
-}
+    isRounded() {
+      return this.rounded ? "image-placeholder--rounded" : "";
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
 .image-placeholder {
   overflow: hidden;
   line-height: 0;
@@ -63,17 +62,15 @@ export default {
 }
 
 img {
-  transition: all ease .3s;
+  transition: all ease 0.3s;
   opacity: 0;
 
-  &[lazy='loading'] {
+  &[lazy="loading"] {
     opacity: 1;
     filter: blur(15px);
   }
-  &[lazy='loaded'] {
+  &[lazy="loaded"] {
     opacity: 1;
   }
 }
-
 </style>
-
diff --git a/components/ImageGallery.vue b/components/ImageGallery.vue
@@ -1,50 +1,66 @@
 <template>
   <div class="flex flex-row flex-wrap -mx-2">
     <div class="w-full md:w-1/2 h-64 md:h-auto mb-4 px-2">
-      <span class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointer overflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
-        style="background-image: url(images/gallery/Me_and_Nana.jpg);" v-lazy-load>
+      <span
+        class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointer overflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
+        style="background-image: url(images/gallery/Me_and_Nana.jpg);"
+        v-lazy-load
+      >
       </span>
     </div>
     <div class="w-full md:w-1/2 mb-4 px-2">
       <div class="flex flex-col sm:flex-row md:flex-col -mx-2">
-        <div class="w-full sm:w-1/2 md:w-full h-48 xl:h-64 mb-4 sm:mb-0 md:mb-4 px-2">
-          <span class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointer overflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
-            style="background-image: url(images/gallery/RA-photo-1.jpg);" v-lazy-load>
-
+        <div
+          class="w-full sm:w-1/2 md:w-full h-48 xl:h-64 mb-4 sm:mb-0 md:mb-4 px-2"
+        >
+          <span
+            class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointer overflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
+            style="background-image: url(images/gallery/RA-photo-1.jpg);"
+            v-lazy-load
+          >
           </span>
         </div>
         <div class="w-full sm:w-1/2 md:w-full h-48 xl:h-64 px-2">
-          <span class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
-            style="background-image: url(images/gallery/RA-photo-2.jpg);" v-lazy-load>
+          <span
+            class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
+            style="background-image: url(images/gallery/RA-photo-2.jpg);"
+            v-lazy-load
+          >
           </span>
         </div>
       </div>
     </div>
     <div class="w-full sm:w-1/3 h-32 md:h-48 mb-4 sm:mb-0 px-2">
-      <span class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
-        style="background-image: url(images/gallery/RA-photo-3.jpg);" v-lazy-load>
+      <span
+        class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
+        style="background-image: url(images/gallery/RA-photo-3.jpg);"
+        v-lazy-load
+      >
       </span>
     </div>
     <div class="w-full sm:w-1/3 h-32 md:h-48 mb-4 sm:mb-0 px-2">
-      <span class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
-        style="background-image: url(images/gallery/karang-taruna.jpg);" v-lazy-load>
+      <span
+        class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
+        style="background-image: url(images/gallery/karang-taruna.jpg);"
+        v-lazy-load
+      >
       </span>
     </div>
     <div class="w-full sm:w-1/3 h-32 md:h-48 px-2">
-      <span class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
-        style="background-image: url(images/gallery/karang-taruna-2.jpg);">
+      <span
+        class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover cursor-pointeroverflow-hidden  hover:shadow-lg hover:border-1 hover:border-gray-700 border-4 border-gray-800 rounded-lg"
+        style="background-image: url(images/gallery/karang-taruna-2.jpg);"
+      >
       </span>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name : 'ImageGallery',
-    props : ['source-image']
-  }
+export default {
+  name: "ImageGallery",
+  props: ["source-image"],
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/components/Markdown/DynamicMarkdown.vue b/components/Markdown/DynamicMarkdown.vue
@@ -1,24 +1,24 @@
 <script lang="js">
 
-  export default {
-    props: ["renderFunc", "staticRenderFuncs", "extraComponent"],
+export default {
+  props: ["renderFunc", "staticRenderFuncs", "extraComponent"],
 
-    computed: {
-      extraComponentLoader () {
-        if (!this.extraComponent) {
-          return null
-        }
-        return () => import(`~/components/blog/${this.extraComponent}.vue`)
+  computed: {
+    extraComponentLoader () {
+      if (!this.extraComponent) {
+        return null
       }
-    },
+      return () => import(`~/components/blog/${this.extraComponent}.vue`)
+    }
+  },
 
-    render (createElement) {
-      return this.templateRender ? this.templateRender() : createElement("div", "Rendering");
-    },
+  render (createElement) {
+    return this.templateRender ? this.templateRender() : createElement("div", "Rendering");
+  },
 
-    created () {
-      this.templateRender = eval(this.renderFunc)
-      this.$options.staticRenderFns = eval(this.staticRenderFuncs)
-    }
+  created () {
+    this.templateRender = eval(this.renderFunc)
+    this.$options.staticRenderFns = eval(this.staticRenderFuncs)
   }
-</script>
+}
+</script>
diff --git a/components/MusicPlaylistCard.vue b/components/MusicPlaylistCard.vue
@@ -1,18 +1,30 @@
 <template>
-  <div class="w-full max-w-xs hover:shadow-lg py-3 hover:border-1 hover:border-gray-700 border-2 border-gray-800 rounded-xl text-center">
-    <iframe width="560" height="315" class="object-cover object-center w-full h-48 mx-auto rounded-lg"
-     :src="source" title="YouTube video player" frameborder="0"
+  <div
+    class="w-full max-w-xs hover:shadow-lg py-3 hover:border-1 hover:border-gray-700 border-2 border-gray-800 rounded-xl text-center"
+  >
+    <iframe
+      width="560"
+      height="315"
+      class="object-cover object-center w-full h-48 mx-auto rounded-lg"
+      :src="source"
+      title="YouTube video player"
+      frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      allowfullscreen v-lazy-load></iframe> 
+      allowfullscreen
+      v-lazy-load
+    ></iframe>
     <div class="mt-2">
-      <span class="text-md font-normal px-3 py-3 text-gray-300  dark:text-gray-200">{{title}}</span>
+      <span
+        class="text-md font-normal px-3 py-3 text-gray-300  dark:text-gray-200"
+        >{{ title }}</span
+      >
     </div>
   </div>
-</template> 
+</template>
 
 <script>
 export default {
-  name : 'MusicPlaylistCard',
-  props :['source', 'title']
-}
-</script>
+  name: "MusicPlaylistCard",
+  props: ["source", "title"],
+};
+</script>
diff --git a/components/ReadingCard.vue b/components/ReadingCard.vue
@@ -1,32 +1,38 @@
 <template>
   <div
     class="max-w-4xl mx-auto mt-5 bg-transparant overflow-hidden hover:shadow-lg hover:border-1 hover:border-gray-700 border-2 border-gray-800 rounded-lg"
-   >
+  >
     <div class="p-5">
       <div>
-        <span class="text-blue-100 float-left text-xs font-bold uppercase">{{authors}}</span>
+        <span class="text-blue-100 float-left text-xs font-bold uppercase">{{
+          authors
+        }}</span>
         <div class="flex justify-center">
-          <span class="font-medium ml-auto text-gray-100 text-sm">{{time_read}}</span>
+          <span class="font-medium ml-auto text-gray-100 text-sm">{{
+            time_read
+          }}</span>
         </div>
-        <a :href="sourceLink"
+        <a
+          :href="sourceLink"
           class="block text-gray-100  font-semibold hover:underline text-2xl mt-3 hover:text-gray-300 hover:text-underline"
-          target="_blank">{{title}}
+          target="_blank"
+          >{{ title }}
         </a>
-        <p class="text-md text-gray-100 mt-3">{{excerpt}}</p>
+        <p class="text-md text-gray-100 mt-3">{{ excerpt }}</p>
         <span
-          class="px-3 py-1 mt-5 mb-5 float-left  text-sm text-white font-bold rounded bg-gray-800 hover:bg-gray-600">{{category}}</span>
+          class="px-3 py-1 mt-5 mb-5 float-left  text-sm text-white font-bold rounded bg-gray-800 hover:bg-gray-600"
+          >{{ category }}</span
+        >
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'ReadingCard',
-    props: ['authors', 'time_read', 'sourceLink', 'excerpt', 'title','category']
-  }
+export default {
+  name: "ReadingCard",
+  props: ["authors", "time_read", "sourceLink", "excerpt", "title", "category"],
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>