fix: read categories as kebab case

Author: orvn

packages/fe/components/blocks/category-slider-block.vue

@@ -40,7 +40,7 @@
             <div class="inner-content">
               <div
                 class="background-image"
-                :style="{ 'background-image': `url('/images/categories/${slide.id}.jpg')` }">
+                :style="{ 'background-image': `url('/images/categories/${$GetKebab(slide.name)}.jpg')` }">
               </div>
               <div class="category">
                 <div class="text">

packages/fe/plugins/helpers.js

@@ -397,6 +397,12 @@ const ConnectWebsocket = config => (instance, next) => {
   })
 }
 
+// //////////////////////////////////////////////////////// getKebab
+// makes any string kebab-lowercase
+const GetKebab = (str) => {
+  return str.toLowerCase().replace(/[.,/#!$%^&*;:{}=_`~()]/g, '').replace(/\s+/g, '-').trim()
+}
+
 // //////////////////////////////////////////////////////// getPrettyNameFromUrl
 // replace '-' to ' '
 // remove extension
@@ -461,6 +467,7 @@ export default ({ $config, app }, inject) => {
   inject('connectWebsocket', ConnectWebsocket($config))
   inject('GetTagBasedOnUrl', GetTagBasedOnUrl)
   inject('GetTargetBasedOnUrl', GetTargetBasedOnUrl)
+  inject('GetKebab', GetKebab)
   inject('GetPrettyNameFromUrl', GetPrettyNameFromUrl)
   inject('scrollToHash', (route, element) => ScrollToHash(app, route, element))
 }