fix: category images

packages/fe/README.md

@@ -1,8 +1,11 @@
 # Open Panda Frontend
 
+See the main repo readme for the most up-to-date documentation on running this project as a static site.
 
 ## Storybook
 
+### _Note: (Storybook is deprecated)_
+
 To better display the components available on the site, their properties, and the states they might appear in, a Storybook app is included in this repo.
 
 - Each component that's developed must have its own story

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/package.json

@@ -7,7 +7,7 @@
     "dev": "../../node_modules/.bin/nuxt",
     "start": "../../node_modules/.bin/nuxt start",
     "build": "../../node_modules/.bin/nuxt build",
-    "generate": "../../node_modules/.bin/nuxt generate",
+    "generate": "NODE_OPTIONS=--openssl-legacy-provider ../../node_modules/.bin/nuxt generate",
     "serve": "../../node_modules/.bin/nuxt serve",
     "launch": "../../node_modules/.bin/nuxt build && pm2 restart op-fe",
     "launch-stable": "../../node_modules/.bin/nuxt build && pm2 restart op-ST-fe",

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))
 }