fix tag capitalization by adding exceptions

src/ClickableTags.vue

@@ -2,13 +2,12 @@
   .tags
     span.tag.is-primary.is-capitalized(v-if="isNew") New
     span.tag.is-danger.is-capitalized(v-if="featured") Featured
-    a.tag.is-capitalized(v-for="(tag) in tags" v-on:click="refineTag(tag)") {{tag}}
+    a.tag(v-for="(tag) in tags" v-on:click="refineTag(tag)") {{tag | capitalizeIfNeeded}}
     a.tag.is-capitalized(v-on:click="refineChannel(channel)")
       i.fab.fa-youtube
       |   {{channel | truncate(10)}}
 </template>
 <script>
-  import { Component } from 'vue-instantsearch'
 
   export default {
     props: {
@@ -17,22 +16,13 @@
       channel: { required: true },
       isNew: { required: true },
     },
-    mixins: [Component],
     methods: {
       refineTag(tag) {
-        if (window.fastrMode) {
-          this.$router.push({ name: 'tag', params: { tag: tag } })
-        } else {
-          this.searchStore.algoliaHelper.addDisjunctiveFacetRefinement('tags', tag)
-        }
+        this.$router.push({ name: 'tag', params: { tag: tag } })
       },
       refineChannel(channel) {
-        if (window.fastrMode) {
-          this.$router.push({ name: 'channel', params: { channel: channel } } )
-        } else {
-          this.searchStore.algoliaHelper.addDisjunctiveFacetRefinement('channelTitle', channel)
-        }
-    }
+        this.$router.push({ name: 'channel', params: { channel: channel } } )
+      }
   }
 }
 </script>

src/ExpandableTags.vue

@@ -6,7 +6,7 @@
         .field.is-grouped.is-grouped-multiline
           .control(v-for="item in items")
             .tags.has-addons
-              a.tag.is-dark.is-capitalized(@click="navigate(item)"): slot(v-bind:item="item") {{item}}
+              a.tag.is-dark(@click="navigate(item)"): slot(v-bind:item="item") {{item}}
               a.is-black.tag(@click="navigate(item)") 
                 | {{item.videos.total}}  
                 span(v-if="item.videos.new > 0")   +{{item.videos.new}}

src/Search.vue

@@ -11,28 +11,28 @@
                 .column.is-one-quarter
                   p.buttons
                     router-link.button.is-small.is-outlined.is-hidden-tablet(v-if="speaker || tag || channel || showMyWatched || showFavorites" :to="{ name: 'search' }")
-                      span {{speaker || tag || channel || (showMyWatched ? 'Watched' : '') || (showFavorites ? 'Favorites' : '')}}
+                      span {{speaker || tag || channel || (showMyWatched ? 'Watched' : '') || (showFavorites ? 'Favorites' : '') | capitalizeIfNeeded}}
                       span.icon.is-small: i.fas.fa-times
                     a.button.is-small.is-hidden-tablet(@click="$refs.tagPicker.expand()"): span.icon.is-small: i.fas.fa-hashtag
                     a.button.is-small.is-hidden-tablet(@click="$refs.speakerPicker.expand()"): span.icon.is-small: i.far.fa-user-circle
                     a.button.is-small.is-hidden-tablet(@click="$refs.channelPicker.expand()"): span.icon.is-small: i.fab.fa-youtube
 
                   ExpandableTags(ref="tagPicker" icon="fas fa-hashtag" title="Tags" :items="tags" :limit="10" :route="routeToTag")
-                      template(slot-scope="slot") {{slot.item.tag}}
+                      template(slot-scope="slot") {{slot.item.tag | capitalizeIfNeeded}}
 
                   ExpandableTags(ref="speakerPicker" icon="far fa-user-circle" title="Speakers" :items="speakers" :limit="10" :route="routeToSpeaker")
                       template(slot-scope="slot")
-                        span {{slot.item.name}}
+                        span {{slot.item.name | capitalizeIfNeeded}}
 
                   ExpandableTags(ref="channelPicker" icon="fab fa-youtube" title="Channels" :items="channels" :limit="10" :route="routeToChannel")
-                      template(slot-scope="slot") {{slot.item.title | truncate(25)}}
+                      template(slot-scope="slot") {{slot.item.title | truncate(25) | capitalizeIfNeeded}}
                 .column
                   .columns
                     .column
                       .columns
                         .column.is-hidden-mobile
                           router-link.button.is-small.is-outlined(v-if="speaker || tag || channel || showMyWatched || showFavorites" :to="{ name: 'search' }")
-                            span.is-capitalized(v-if="tag || channel") {{tag || channel}}
+                            span(v-if="tag || channel") {{tag || channel | capitalizeIfNeeded}}
                             span.is-lowercased(v-if="speaker") @{{speaker}}
                             span.is-lowercased(v-if="showMyWatched") Watched
                             span.is-lowercased(v-if="showFavorites") Favorites
@@ -59,7 +59,6 @@
                                 :newMode="newMode" 
                                 :tags="result.tags" 
                                 :featured="result.featured" 
-                                :tagsClickable="true" 
                                 :speaker="result.speaker" 
                                 :creationDate="result.creationDate" 
                                 :recordingDate="result.recordingDate" 

src/Tags.vue

@@ -9,17 +9,14 @@
 <script>
   export default {
     props: {
-      clickable: { type: Boolean, default: false },
       featured: { type: [Boolean, Array], required: true },
       tags: { required: true },
       channel: { required: true },
       isNew: { required: true }
     },
     computed: {
       componentLoader() {
-        return () => this.clickable
-          ? import('./ClickableTags.vue')
-          : import('./NonClickableTags.vue')
+        return () => import('./ClickableTags.vue')
       },
     }
   }

src/VideoCard.vue

@@ -52,7 +52,7 @@
               div                
                 p.heading.is-capitalized Recorded
                 p.title.is-size-7 {{recordingDate | published}}                
-          Tags(:tags="tags" :isNew="isNew" :featured="featured" :clickable="tagsClickable" :channel="channel")
+          Tags(:tags="tags" :isNew="isNew" :featured="featured" :channel="channel")
           .contribute(v-if="speaker")
             p.subtitle.is-7
               | Wrong data? 
@@ -140,7 +140,6 @@
       creationDate: { type: Number, required: true },
       tags: { type: Array, required: false },
       featured: { type: [Boolean, Array], default: false},
-      tagsClickable: { type: Boolean, default: false},
       speaker: {
         required: false,
         name: {

src/Watch.vue

@@ -62,7 +62,7 @@
                       |  contribute
             .media
             .tags
-              a.tag.is-capitalized(v-for="tag in video.tags" @click="refineTag(tag)") {{tag}}
+              a.tag(v-for="tag in video.tags" @click="refineTag(tag)") {{tag | capitalizeIfNeeded}}
               a.tag.is-capitalized(@click="refineChannel(video.channelTitle)")
                 i.fab.fa-youtube 
                 |   {{video.channelTitle}}

src/helpers/filters.js

@@ -26,6 +26,32 @@ export const duration = it => {
   return (hours ? `${hours} h `: '') + (minutes ? `${minutes} min` : '')
 }
 
+export const capitalizeIfNeeded = (it) => { 
+  let tags = [
+    "iOS", 
+    "IoT", 
+    "DI", 
+    "TDD", 
+    "GraphQL", 
+    "BDD", 
+    "PHP", 
+    ".NET", 
+    "DevOps", 
+    "ML", 
+    "HTML5", 
+    "API",
+    "AWS",
+    "RxJava",
+    "CSS",
+    "REST"
+  ]
+
+  let noCapitalizeTag = tags.find(tag => new RegExp(`^${tag}$`, "i").test(it))
+  return noCapitalizeTag || capitalize(it)
+}
+
+const capitalize = (str) => str.replace(/\b\w/g, l => l.toUpperCase())
+
 export const truncate = (it, max) => it
   ? it.slice(0, max) + (max < it.length ? '...' : '')
   : it

src/index.js

@@ -26,7 +26,7 @@ import App from './App.vue'
 import Watch from './Watch.vue'
 import Search from './Search.vue'
 import Contributors from './Contributors.vue'
-import { flatten, views, duration, truncate, published } from './helpers/filters'
+import { flatten, views, duration, truncate, published, capitalizeIfNeeded } from './helpers/filters'
 
 import auth from './auth'
 import videos from './videos'
@@ -52,6 +52,7 @@ Vue.filter('views', views)
 Vue.filter('duration', duration)
 Vue.filter('truncate', truncate)
 Vue.filter('published', published)
+Vue.filter('capitalizeIfNeeded', capitalizeIfNeeded)
 
 const router = new VueRouter({
   mode: 'history',