From d4cf029d1ca08298d169e0bbaf5d0a8df480531c Mon Sep 17 00:00:00 2001
From: Fajar <fajar.afrianshah@gmail.com>
Date: Fri, 30 Jul 2021 18:08:30 +0700
Subject: [PATCH] patch v1.1.8 release

---
 .eslintrc.js                                  |   8 +-
 .gitignore                                    |   3 +-
 .../page-sections/CategoriesSection.vue       |  53 +++++++-
 .../page-sections/CategoryDropdownSection.vue |  16 ++-
 components/ui/ArticleCard.vue                 |  60 ++++++--
 package-lock.json                             | 128 +++++++++---------
 package.json                                  |   1 +
 pages/index.vue                               |   4 +-
 tailwind.config.js                            |   1 +
 9 files changed, 184 insertions(+), 90 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 427d5d9..3f1db43 100644
--- a/.eslintrc.js
+++ b/.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"
+  },
 }
diff --git a/.gitignore b/.gitignore
index 0e6b7f7..397abc7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -92,4 +92,5 @@ sw.*
 # Local Netlify folder
 .netlify
 
-.theia
\ No newline at end of file
+.theia
+.vscode
\ No newline at end of file
diff --git a/components/page-sections/CategoriesSection.vue b/components/page-sections/CategoriesSection.vue
index 522f5a2..346bbe0 100644
--- a/components/page-sections/CategoriesSection.vue
+++ b/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 ...
diff --git a/components/page-sections/CategoryDropdownSection.vue b/components/page-sections/CategoryDropdownSection.vue
index 6287ec3..3b75f4a 100644
--- a/components/page-sections/CategoryDropdownSection.vue
+++ b/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,12 +17,20 @@
     <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"
@@ -30,7 +38,7 @@
             :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>
diff --git a/components/ui/ArticleCard.vue b/components/ui/ArticleCard.vue
index 32b090f..922904f 100644
--- a/components/ui/ArticleCard.vue
+++ b/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"
           />
diff --git a/package-lock.json b/package-lock.json
index e574a37..29bb5e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6617,6 +6617,14 @@
         "vscode-uri": "1.0.6"
       },
       "dependencies": {
+        "git-url-parse": {
+          "version": "11.4.4",
+          "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.4.4.tgz",
+          "integrity": "sha512-Y4o9o7vQngQDIU9IjyCmRJBin5iYjI5u9ZITnddRZpD7dcCFQj2sL2XuMNbLRE4b4B/4ENPsp2Q8P44fjAZ0Pw==",
+          "requires": {
+            "git-up": "^4.0.0"
+          }
+        },
         "graphql-tag": {
           "version": "2.12.4",
           "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.4.tgz",
@@ -8558,17 +8566,6 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
     },
-    "clipboard": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "optional": true,
-      "requires": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
     "cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -9584,12 +9581,6 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
-    "delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
-      "optional": true
-    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -10596,6 +10587,30 @@
       "integrity": "sha512-ZL7+QRixjTR6/528YNGyDotyffm5OQst/sGxKDwGb9Uqs4In5Egi4+jbobhqJoyoCM6/7v/1A5fhQ7ScMtDjaQ==",
       "dev": true
     },
+    "eslint-plugin-tailwindcss": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-1.14.1.tgz",
+      "integrity": "sha512-WRfWFuaZZKfOSW6WhHj5K8husPGqs5niwRYTWFH8rKOi9tiRd/AkxquEg6+PJbiV3kLZEzZEfJSUkYXWuZerXw==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.3.0",
+        "tailwindcss": "^2.1.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.3.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
+          "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
+          "dev": true,
+          "requires": {
+            "colorette": "^1.2.2",
+            "nanoid": "^3.1.23",
+            "source-map-js": "^0.6.2"
+          }
+        }
+      }
+    },
     "eslint-plugin-unicorn": {
       "version": "28.0.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-28.0.2.tgz",
@@ -11789,18 +11804,36 @@
       }
     },
     "git-up": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.2.tgz",
-      "integrity": "sha512-kbuvus1dWQB2sSW4cbfTeGpCMd8ge9jx9RKnhXhuJ7tnvT+NIrTVfYZxjtflZddQYcmdOTlkAcjmx7bor+15AQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.5.tgz",
+      "integrity": "sha512-YUvVDg/vX3d0syBsk/CKUTib0srcQME0JyHkL5BaYdwLsiCslPWmDSi8PUMo9pXYjrryMcmsCoCgsTpSCJEQaA==",
       "requires": {
         "is-ssh": "^1.3.0",
-        "parse-url": "^5.0.0"
+        "parse-url": "^6.0.0"
+      },
+      "dependencies": {
+        "normalize-url": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+          "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
+        },
+        "parse-url": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-6.0.0.tgz",
+          "integrity": "sha512-cYyojeX7yIIwuJzledIHeLUBVJ6COVLeT4eF+2P6aKVzwvgKQPndCBv3+yQ7pcWjqToYwaligxzSYNNmGoMAvw==",
+          "requires": {
+            "is-ssh": "^1.3.0",
+            "normalize-url": "^6.1.0",
+            "parse-path": "^4.0.0",
+            "protocols": "^1.4.0"
+          }
+        }
       }
     },
     "git-url-parse": {
-      "version": "11.4.4",
-      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.4.4.tgz",
-      "integrity": "sha512-Y4o9o7vQngQDIU9IjyCmRJBin5iYjI5u9ZITnddRZpD7dcCFQj2sL2XuMNbLRE4b4B/4ENPsp2Q8P44fjAZ0Pw==",
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.5.0.tgz",
+      "integrity": "sha512-TZYSMDeM37r71Lqg1mbnMlOqlHd7BSij9qN7XwTkRqSAYFMihGLGhfHwgqQob3GUhEneKnV4nskN9rbQw2KGxA==",
       "requires": {
         "git-up": "^4.0.0"
       }
@@ -11884,15 +11917,6 @@
         "minimatch": "~3.0.2"
       }
     },
-    "good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "optional": true,
-      "requires": {
-        "delegate": "^3.1.2"
-      }
-    },
     "got": {
       "version": "9.6.0",
       "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
@@ -14695,9 +14719,9 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
     "normalize-url": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
-      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ=="
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA=="
     },
     "normalize.css": {
       "version": "8.0.1",
@@ -15112,17 +15136,6 @@
       "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
       "integrity": "sha1-en7A0esG+lMlx9PgCbhZoJtdSes="
     },
-    "parse-url": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-5.0.6.tgz",
-      "integrity": "sha512-nZp+U7NFVTsBXTh6oGxdwvd7ncz3hJCl74q0lC0pLc3ypXJMKFUpfUEAd4r1x8zVVF5UHFik+CBNOQKN0ayByA==",
-      "requires": {
-        "is-ssh": "^1.3.0",
-        "normalize-url": "4.5.0",
-        "parse-path": "^4.0.0",
-        "protocols": "^1.4.0"
-      }
-    },
     "parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
@@ -16430,12 +16443,9 @@
       "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA=="
     },
     "prismjs": {
-      "version": "1.23.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
-      "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
-      "requires": {
-        "clipboard": "^2.0.0"
-      }
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.24.1.tgz",
+      "integrity": "sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow=="
     },
     "process": {
       "version": "0.11.10",
@@ -17632,12 +17642,6 @@
       "resolved": "https://registry.npmjs.org/scule/-/scule-0.2.1.tgz",
       "integrity": "sha512-M9gnWtn3J0W+UhJOHmBxBTwv8mZCan5i1Himp60t6vvZcor0wr+IM0URKmIglsWJ7bRujNAVVN77fp+uZaWoKg=="
     },
-    "select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
-      "optional": true
-    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -19305,12 +19309,6 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
-    "tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
-      "optional": true
-    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
diff --git a/package.json b/package.json
index 745fd33..e880af4 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^2.0.0",
     "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-tailwindcss": "^1.14.1",
     "postcss": "^7.0.36",
     "prettier": "^2.3.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
diff --git a/pages/index.vue b/pages/index.vue
index 446a77d..c450f32 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,10 @@
 <template>
   <main>
     <CategoriesSection />
-    <div class="container mx-auto">
+    <div class="container">
       <div class="mt-6 lg:mt-10 lg:flex">
         <PostListSection class="lg:w-2/3" :articles="posts" />
-        <SidebarSection class="lg:w-1/3 mt-8 lg:mt-0 lg:pl-14" />
+        <SidebarSection class="mt-8 lg:w-1/3 lg:mt-0 lg:pl-14" />
       </div>
     </div>
     <NewsletterSection />
diff --git a/tailwind.config.js b/tailwind.config.js
index e97fa03..5b99715 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -148,6 +148,7 @@ module.exports = {
       padding: {
         DEFAULT: '1rem',
         md: '3rem',
+        lg: '5rem',
       },
     },
     filter: {