simplified function list

src/components/Sidebar.vue

@@ -1,23 +1,21 @@
 <script setup>
 import {RouterLink} from 'vue-router';
 import {ref, watch} from 'vue';
-import functionsList from '@/utils/functionsList';
+import {routes} from '../router';
 
-const functions = ref([]);
-const functionsFilter = ref([]);
+const getFunctions = () => routes.filter((r) => r.path.startsWith('/f/'));
+const functions = ref(getFunctions());
+const functionsFilter = ref(getFunctions());
 const search = ref('');
 const getClonedObject = (object) => JSON.parse(JSON.stringify(object));
 
-functionsList.forEach((fName) => {
-    functions.value.push({name: fName, path: `/f/${fName}`});
-    functionsFilter.value.push({name: fName, path: `/f/${fName}`});
-});
-
 watch(search, () => {
     if (search.value.trim() === '') {
         functionsFilter.value = getClonedObject(functions.value);
     } else {
-        functionsFilter.value = getClonedObject(functions.value.filter((f) => f.name.trim().toLowerCase().includes(search.value.trim().toLowerCase())));
+        functionsFilter.value = getClonedObject(
+            functions.value.filter((f) => f.name.trim().toLowerCase().includes(search.value.trim().toLowerCase()))
+        );
     }
 });
 </script>
@@ -115,27 +113,17 @@ watch(search, () => {
                 </li>
             </ul>
         </div>
-        <div
-            class="absolute bottom-0 left-0 justify-center p-4 w-full z-20"
-        >
+        <div class="absolute bottom-0 left-0 justify-center p-4 w-full z-20">
             <a
                 href="https://github.com/dsabre"
                 target="_blank"
                 class="flex justify-between items-center p-2 my-4 w-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
             >
                 <span class="sr-only">Show GitHub profile</span>
                 <div class="flex items-center space-x-3">
-                    <img
-                        src="https://github.com/dsabre.png"
-                        class="w-8 h-8 rounded-full"
-                        alt="Bonnie avatar"
-                    />
+                    <img src="https://github.com/dsabre.png" class="w-8 h-8 rounded-full" alt="Bonnie avatar" />
                     <div class="text-left">
-                        <div
-                            class="font-semibold leading-none text-gray-900 dark:text-white mb-0.5"
-                        >
-                            Daniele Sabre
-                        </div>
+                        <div class="font-semibold leading-none text-gray-900 dark:text-white mb-0.5">Daniele Sabre</div>
                     </div>
                 </div>
             </a>

src/router/index.js

@@ -1,5 +1,4 @@
 import {createRouter, createWebHistory} from 'vue-router';
-import functionsList from '@/utils/functionsList';
 
 export const routes = [
     // {
@@ -8,10 +7,21 @@ export const routes = [
     //     component: () => import('../views/HomeView.vue')
     // }
 ];
+const addRoute = (fName) =>
+    routes.push({path: `/f/${fName}`, name: fName, component: () => import(`../views/functions/${fName}.vue`)});
 
-functionsList.forEach((fName) =>
-    routes.push({path: `/f/${fName}`, name: fName, component: () => import(`../views/functions/${fName}.vue`)})
-);
+addRoute('ucfirst');
+addRoute('ifNaN');
+addRoute('getElementHeight');
+addRoute('getFormData');
+addRoute('padLeft');
+addRoute('downloadFile');
+addRoute('makeId');
+addRoute('getClonedObject');
+addRoute('stripTags');
+
+// sort routes alphabetically
+routes.sort((a, b) => a.name.localeCompare(b.name));
 
 // set first function as homepage
 routes.push({path: '/', name: 'home', component: routes[0].component});