Merge pull request #228 from fajarafriansh/develop

patch v1.1.8

.eslintrc.js

@@ -13,7 +13,11 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:nuxt/recommended',
   ],
-  plugins: ['prettier'],
+  plugins: ['prettier', 'tailwindcss'],
   // add your custom rules here
-  rules: {},
+  rules: {
+    "tailwindcss/classnames-order": "warn",
+    "tailwindcss/no-custom-classname": "warn",
+    "tailwindcss/no-contradicting-classname": "error"
+  },
 }

.gitignore

@@ -92,4 +92,5 @@ sw.*
 # Local Netlify folder
 .netlify
 
-.theia
+.theia
+.vscode

components/page-sections/CategoriesSection.vue

@@ -1,8 +1,15 @@
 <template>
   <section
-    class="bg-grayscale-2 dark:bg-grayscale-7 py-2 transition duration-75 ease-in-out"
+    class="
+      py-2
+      transition
+      duration-75
+      ease-in-out
+      bg-grayscale-2
+      dark:bg-grayscale-7
+    "
   >
-    <div class="container mx-auto">
+    <div class="container">
       <div class="flex items-center mt-2">
         <button-bordered
           v-show="!showLess"
@@ -13,17 +20,32 @@
           <unicon name="times" height="20" width="20" />
         </button-bordered>
         <span
-          class="text-grayscale-5 dark:text-grayscale-4 text-sm font-medium uppercase leading-none tracking-wider"
+          class="
+            text-sm
+            font-medium
+            leading-none
+            tracking-wider
+            uppercase
+            text-grayscale-5
+            dark:text-grayscale-4
+          "
         >
           Categories
         </span>
       </div>
       <div
-        class="flex items-start justify-between space-x-2 lg:space-x-4 overflow-x-auto"
+        class="
+          flex
+          items-start
+          justify-between
+          space-x-2
+          overflow-x-auto
+          lg:space-x-4
+        "
         :class="overflowClasses"
       >
         <div
-          class="flex items-center justify-start -mx-1 lg:-mx-2 mt-2"
+          class="flex items-center justify-start w-full mt-2 -mx-1 lg:-mx-2"
           :class="wrapClasses"
         >
           <CategoryCard
@@ -39,7 +61,26 @@
         </div>
         <button
           v-show="showLess"
-          class="w-12 h-14 lg:w-16 lg:h-20 bg-grayscale-3 dark:bg-grayscale-6 rounded-lg mt-4 p-2 lg:p-4 text-center text-sm lg:text-base font-semibold text-grayscale-5 dark:text-grayscale-4 focus:outline-none border-2 border-transparent hover:border-primary-2 hover:text-primary-2 dark-hover:border-primary-1 dark-hover:text-primary-1"
+          class="
+            w-12
+            p-2
+            mt-4
+            text-sm
+            font-semibold
+            text-center
+            border-2 border-transparent
+            rounded-lg
+            h-14
+            lg:w-16 lg:h-20
+            bg-grayscale-3
+            dark:bg-grayscale-6
+            lg:p-4 lg:text-base
+            text-grayscale-5
+            dark:text-grayscale-4
+            focus:outline-none
+            hover:border-primary-2 hover:text-primary-2
+            dark-hover:border-primary-1 dark-hover:text-primary-1
+          "
           @click="viewAll"
         >
           All ...

components/page-sections/CategoryDropdownSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-grayscale-2 dark:bg-grayscale-7 py-4 lg:py-5">
+  <div class="py-4 bg-grayscale-2 dark:bg-grayscale-7 lg:py-5">
     <div class="container mx-auto">
       <div class="flex items-center justify-between w-full">
         <link-secondary type="internal" to="/articles">
@@ -17,20 +17,28 @@
     <modal name="categories" :width="800" :adaptive="true" :shift-y="0.2">
       <div class="p-4 md:p-8">
         <span
-          class="text-grayscale-5 dark:text-grayscale-4 text-sm font-medium uppercase leading-none tracking-wider"
+          class="
+            text-sm
+            font-medium
+            leading-none
+            tracking-wider
+            uppercase
+            text-grayscale-5
+            dark:text-grayscale-4
+          "
         >
           Categories
         </span>
         <div
-          class="flex flex-wrap items-center justify-start -mx-1 lg:-mx-2 mt-2"
+          class="flex flex-wrap items-center justify-start mt-2 -mx-1 lg:-mx-2"
         >
           <CategoryCard
             v-for="category in categories"
             :key="category.title"
             :title="category.title"
             :slug="category.slug"
             :cover="category.coverImage.url"
-            class="w-1/2 h-20 md:w-1/4 md:h-24 p-2"
+            class="w-1/2 h-20 p-2 md:w-1/4 md:h-24"
           />
         </div>
       </div>

components/ui/ArticleCard.vue

@@ -1,51 +1,91 @@
 <template>
   <div class="">
     <nuxt-link
-      class="article-card flex flex-col rounded-lg bg-grayscale-2 dark:bg-grayscale-7 lg:ml-22 lg:relative hover:bg-grayscale-1 dark-hover:bg-grayscale-6 transition duration-300 ease-in-out"
+      class="
+        article-card
+        flex flex-col
+        transition
+        duration-300
+        ease-in-out
+        rounded-lg
+        bg-grayscale-2
+        dark:bg-grayscale-7
+        lg:ml-22 lg:relative
+        hover:bg-grayscale-1
+        dark-hover:bg-grayscale-6
+      "
       :to="`/article/${slug}`"
     >
       <div class="flex items-center justify-between px-4 py-3 lg:px-6 lg:py-4">
         <div class="flex items-center justify-start">
           <img
-            class="w-8 h-8 lg:w-14 lg:h-14 object-cover rounded-md lg:rounded-lg lg:absolute lg:inset-0 lg:-ml-22"
+            class="
+              object-cover
+              w-8
+              h-8
+              rounded-md
+              lg:w-14 lg:h-14 lg:rounded-lg lg:absolute lg:inset-0 lg:-ml-22
+            "
             :src="category.coverImage.url"
             :alt="category.title"
           />
           <div
-            class="callout-shape text-grayscale-2 dark:text-grayscale-7 hidden lg:block"
+            class="
+              hidden
+              callout-shape
+              text-grayscale-2
+              dark:text-grayscale-7
+              lg:block
+            "
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               viewBox="0 0 24 24"
-              class="fill-current transform -rotate-90 absolute inset-0 -translate-x-4 translate-y-4"
+              class="
+                absolute
+                inset-0
+                transform
+                -rotate-90
+                -translate-x-4
+                translate-y-4
+                fill-current
+              "
             >
               <path
                 d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"
               />
             </svg>
           </div>
-          <p class="callout ml-4 lg:ml-0">{{ category.title }}</p>
+          <p class="ml-4 callout lg:ml-0">{{ category.title }}</p>
         </div>
         <p class="text-body-2">{{ date | formatDate }}</p>
       </div>
-      <div class="article-cover relative w-full">
+      <div class="relative w-full article-cover">
         <img
-          class="w-full h-48 md:h-auto object-cover"
+          class="object-cover w-full h-48 md:h-auto"
           :src="cover.url"
           :alt="title"
         />
         <div
-          class="overlay bg-grayscale-8 opacity-0 absolute inset-0 w-full h-full"
+          class="
+            absolute
+            inset-0
+            w-full
+            h-full
+            opacity-0
+            overlay
+            bg-grayscale-8
+          "
         ></div>
       </div>
       <div class="w-full p-6">
         <h2 class="h2">{{ title }}</h2>
-        <p class="mt-8 hidden lg:block">{{ description }}</p>
+        <p class="hidden mt-8 lg:block">{{ description }}</p>
         <footer class="flex items-center mt-8">
           <img
-            class="w-8 h-8 object-cover rounded-full"
+            class="object-cover w-8 h-8 rounded-full"
             :src="author.picture.url"
             :alt="author.name"
           />