From 23e367179f4bc47217a30f24fc2be11730aadb63 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 25 Jul 2021 07:44:25 +0000
Subject: [PATCH] rm _ from tags

---
 src/components/custom/NewsFilterHeader.vue |   4 +-
 src/components/custom/TagFilterHeader.vue  | 107 +++++++++++++++++++--
 2 files changed, 99 insertions(+), 12 deletions(-)

diff --git a/src/components/custom/NewsFilterHeader.vue b/src/components/custom/NewsFilterHeader.vue
index ac0184601..8a2723289 100644
--- a/src/components/custom/NewsFilterHeader.vue
+++ b/src/components/custom/NewsFilterHeader.vue
@@ -49,7 +49,7 @@
                 @click="setActive(0)"
                 class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
               >
-                <span class="capitalize">{{ topic.replace("_", " ") }}</span>
+                <span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
                 <svg
                   fill="currentColor"
                   viewBox="0 0 20 20"
@@ -89,7 +89,7 @@
                       open = false;
                     "
                     class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-                    >{{ topic.replace("_", " ") }}</a
+                    >{{ topic.replace(/_/g, " ") }}</a
                   >
                 </div>
               </div>
diff --git a/src/components/custom/TagFilterHeader.vue b/src/components/custom/TagFilterHeader.vue
index 30558e108..da621c37e 100644
--- a/src/components/custom/TagFilterHeader.vue
+++ b/src/components/custom/TagFilterHeader.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
     <header
-      class="flex items-center flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500"
+      class="
+        flex
+        items-center
+        flex-wrap
+        container
+        mx-auto
+        pt-1
+        pb-0
+        sm:px-0
+        transition-all transition-500
+      "
     >
       <div class="flex items-center justify-between px-4 sm:p-0">
         <div class="inline-flex items-center flex-shrink-0">
@@ -18,19 +28,45 @@
 
       <nav
         :class="isOpen ? 'block' : 'hidden'"
-        class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
+        class="
+          inline-flex
+          md:order-2
+          px-2
+          pt-2
+          pb-4
+          sm:flex
+          sm:p-0
+          bg-transparent
+        "
       >
         <ul
-          class="list-none sm:flex justify-left capitalize transition-all transition-500"
+          class="
+            list-none
+            sm:flex
+            justify-left
+            capitalize
+            transition-all transition-500
+          "
         >
           <!-- Tags -->
           <li class="pt-2 mx-5">
             <div class="relative" x-data="{ open: false }">
               <button
                 @click="setActive(0)"
-                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+                class="
+                  flex flex-row
+                  items-center
+                  w-full
+                  md:w-auto
+                  md:inline
+                  md:mt-0
+                  md:ml-4
+                  animated-link
+                "
               >
-                <span class="capitalize">{{ selected.replace("_", " ") }}</span>
+                <span class="capitalize">{{
+                  selected.replace(/_/g, " ")
+                }}</span>
                 <svg
                   fill="currentColor"
                   viewBox="0 0 20 20"
@@ -38,7 +74,17 @@
                     'rotate-180': active == 0,
                     'rotate-0': active == !0,
                   }"
-                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+                  class="
+                    inline
+                    w-4
+                    h-4
+                    mt-1
+                    ml-1
+                    transition-transform
+                    duration-200
+                    transform
+                    md:-mt-1
+                  "
                 >
                   <path
                     fill-rule="evenodd"
@@ -56,19 +102,60 @@
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
-                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+                class="
+                  absolute
+                  w-full
+                  mt-2
+                  origin-top-right
+                  rounded-md
+                  shadow-lg
+                  md:w-48
+                  z-30
+                "
               >
                 <div
                   v-if="open"
-                  class="w-64 max-h-10 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
+                  class="
+                    w-64
+                    max-h-10
+                    px-2
+                    py-2
+                    bg-white
+                    rounded-md
+                    shadow
+                    dark:bg-gray-700
+                  "
                 >
                   <a
                     v-for="tag in tags"
                     :key="tag.path"
-                    class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                    class="
+                      cursor-pointer
+                      block
+                      px-4
+                      py-2
+                      mt-2
+                      text-sm
+                      font-semibold
+                      bg-transparent
+                      rounded-lg
+                      dark:bg-transparent
+                      dark:hover:bg-gray-600
+                      dark-:focus:bg-gray-600
+                      dark:focus:text-white
+                      dark:hover:text-white
+                      dark:text-gray-200
+                      md:mt-0
+                      hover:text-gray-900
+                      focus:text-gray-900
+                      hover:bg-gray-200
+                      focus:bg-gray-200
+                      focus:outline-none
+                      focus:shadow-outline
+                    "
                     :href="$url(tag.path)"
                     @click="open = false"
-                    >{{ tag.title.replace("_", " ") }}</a
+                    >{{ tag.title.replace(/_/g, " ") }}</a
                   >
                 </div>
               </div>